Week 42 / 2022

Mohamed Saif published on
8 min, 1556 words

quotes

  • review about william chichic book: "Although I have lived and worked in Muslim countries, this is the first comprehensive book I have read on the subject of Islam. Rather than just sketching the basic beliefs, as is done in many shorter works, this book goes deeper. It's also very sympathetic and almost exclusively an insider's view, "emic" rather than "etic" if you like those terms."

Avatar Thumbnail Generation Web App

  • producer/consumer-based task queues in general.
  • Celery: is an asynchronous task queue to manage background work outside the typical request/response cycle. Based on distributed message communication, focused on real-time operations. And it supports scheduling too.
  • RabbitMQ: message broker written using the AMQP Advanced Messaging Queuing Protocol. an intermediary program used as the transport for producing or consuming tasks. RabbitMQ is arguably the better choice for a message broker since it supports AMQP
  • Result backend: used to store the result of a Celery task.
  • As you build out your web app, you should try to ensure that the response time of a particular view is lower than 500ms. WHY?
  • CPU intensive tasks: Since fastapi.BackgroundTasks runs in the same event loop that serves your app's requests.
  • Task queue: Often you'll want to retrieve the status of a job and then perform some action based on the status.
  • RQ is designed to be simpler all around. Celery is designed to be more robust.
  • Broker support in celery. instegram backend: using celery with redis and RabbitMQ
  • Tasks categories: Third-party tasks (sending an email or notification or propagating updates to internal tools), Long-running jobs (serving of media content), and Periodic tasks (monthly report generation or a web scraper that runs twice a day.).
  • start a redis inside a container: docker run -p 6379:6379 --name some-redis -d redis, then docker exec -it some-redis redis-cli ping
  • start celery server: celery -A main.celery worker --loglevel=info: -A, --app Application, worker is a command that starts a worker instance (redis)
  • (1) The Celery client (the producer) adds a new task to the queue via the message broker. (2) The Celery worker (the consumer) grabs the tasks from the queue, again, via the message broker. (3) Once processed, results are stored in the result backend.
  • task type from the python shell/repl is <class 'celery.result.AsyncResult'>?
  • Flower is a real-time web application monitoring and administration tool for Celery. to start slower server using celery run: celery -A main.celery flower --port=5555
  • flower UUID column is the id of AsyncResult, you can use this id to work with this task in the shell: a = AsyncResult([UUID])
  • sqlmodel: combines SQLAlchemy and Pydantic.
  • XHR short polling?
  • Broadcaster: helps you develop realtime streaming functionality by providing a simple broadcast API onto a number of different backend services.
  • The WebSocket protocol enables interaction between a web browser (or other client application) and a web server with lower overhead than half-duplex alternatives such as HTTP polling, facilitating real-time data transfer from and to the server. Additionally, WebSocket enables streams of messages on top of TCP. TCP alone deals with streams of bytes with no inherent concept of a message. When a web client establishes a WebSocket connection with a server, the connection stays alive and the client and server can send messages to each other.
  • Redis pub/sub?
  • Socket.IO: is library that simplifies the building of real-time, event-based applications.
  • Celery Beat is a scheduling tool used to enqueue tasks at regular intervals based on the defined config, which are then executed by Celery workers.
  • It's a good practice to configure at least one additional queue (two total) so you can route slow tasks to one queue and fast tasks to a different queue so that slow tasks don't block the fast tasks.

Html/CSS

  • For most programming languages, the concept of auditing code is relatively straightforward: it works or it doesn’t. But CSS is a specific language where errors are mostly ignored by browsers.
  • The <span> tag is an inline container used to mark up a part of a text. It is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
  • every element in web design is a rectangular box. every element in web design is a rectangular box.
  • The size of the box itself is calculated like this: width = width + padding-left + padding-right + border-left + border-right, and height = height + padding-top + padding-bottom + border-top + border-bottom
  • :root{ --name: value} can be useful for declaring global CSS variables. difference between pesudo-class and universal selector?
  • margin, a transparent area around a box, which will push other elements away from the box contents. A value of auto basically tells the browser to define the margin for you (handy for horizontal centering: width: [value]px; margine: 0 auto;). Without the specified width, the auto values would essentially have no effect
  • The trick to getting good at CSS is knowing exactly when to do what.
  • Rather, you need to understand all the disparate parts of the language and how they can fit together.
  • cascade and inheritance control styles are applied to which elements on the page.
  • With CSS, it’s not always easy to distill the problem down to a single question. Even when you can, the answer is often “it depends.”
  • When two or more rules target the same element on your page, the rules may provide conflicting declarations.
  • When declarations conflict, the cascade considers three things to resolve the difference (1) Stylesheet origin: Where the styles come from (2) Selector specificity (3) Source order. css-resolving-conflicts
  • The selector and declaration block are called a ruleset.
  • Yours are called author styles; there are also user agent styles, which are the browser’s default styles. User agent styles have lower priority, so your styles override them.
  • display: inline vs display: inline-block vs display: block.
  • Declarations marked !important are treated as a higher-priority origin
  • Inline styles -> selector specificity (ID -> Class -> tag). which is more specific?
  • To override inline declarations in your stylesheet, you’ll need to add an !important to the declaration, shifting it into a higher-priority origin
  • a selector with two class names has a higher specificity than a selector with only one.?
  • A NOTATION FOR SPECIFICITY: [#IDs],[#classes],[#tags]. or if you append inline styles, this notation will be [is-inline? 1: 0],[#IDs],[#classes],[#tags]
  • It is generally best to keep specificity low when you can, so when you need to override something, your options are open.
  • If the origin and the specificity are the same, then the declaration that appears later in the stylesheet—or appears in a stylesheet included later on the page—takes precedence.
  • A declaration that “wins” the cascade is called a cascaded value. There’s at most one cascaded value per property per element.
  • Two rules of thumb (1) Don’t use IDs in your selector. (2) Don’t use !important.
  • If an element has no cascaded value for a given property, it may inherit one from an ancestor element. Not all properties are inherited, however. By default, only certain ones are. inheriatance flow
  • There are two special values that you can apply to any property to help manipulate the cascade: inherit and initial.
  • Every CSS property has an initial, or default, value. If you assign the value initial to that property, then it effectively resets to its default value. It’s like a hard-reset of that value.
  • The use of auto keyword varies from a property to another.
  • The height of an element is equal to its content where the default value is auto.
  • use this always at the start of the css file:
* {
  margin: 0;
  padding: 0;
}
  • centered a div:
.container {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
  • Beware shorthands silently overriding other styles
  • For these properties (shorthand), the values are in clockwise order, beginning at the top.
  • If the declaration ends before one of the four sides is given a value, that side takes its value from the opposite side.
  • Specify three values, and the left and right side will both use the second one.
  • Specify two values, and the top and bottom will use the first one.
  • If you specify only one value, it will apply to all four sides.
  • If you’re working with a property that specifies two measurements from a corner, think “Cartesian grid.” If you’re working with one that specifies measurements for each side all the way around an element, think “clock.”
  • absolute and relative units
  • The value of relative units changes, based on external factors; for example, the meaning of 2 em changes depending on which element (and sometimes even which property) you’re using it on.

Problem/ Needs Assessments (graduation project)

  • We all need a good reason to get something done (to wouldn’t get punished, to pass the subject, .. Because if we don’t, we know that the consequences will be terrible.)
  • We spend almost our entire lives doing things because we have to. We finish things because we have deadlines, and we want good grades.
  • for self-learning: no consequence if you don’t get things done. However, if done right, self-learning is arguably one of the most effective forms of studying.