This works somewhat well in practice, but there are many cases where the inference is incorrect. As a particularly egregious example, :not(#foo) targets all elements except one, yet enjoys the same high specificity as #foo.
Explanation: #foo which ideally targets one element, is more specific that :not(#foo) because it targets every element except one. Didn't hit me the first time, thought might be beneficial for someone reading in a daze.
console.table($$('a'),['innerHTML','href'])
Command to get all the links of a website
Most web servers TCP slow start algorithm starts by sending 10 TCP packets. The maximum size of a TCP packet is 1500 bytes.
10 * 1460 bytes = 14 kb.
If your website is under 14 kb, it can load around 612 ms faster than 15 kb.
And immediately after it, the 2 CSS downloads begin. What we want to do is move the CSS downloads to the left, so all rendering starts (and finishes!) sooner. So all you do it take the URLs of these two files and add them to .htaccess with H2PushResource in front. For me that means the URL to my custom theme's CSS /wp-content/themes/phpied2/style.css as well as some WordPress CSS stuff. While I was there I also added a JavaScript file which is loaded later. Why now start early? So the end result is:
WordPress tip to start loading some CSS and JS files earlier.
Sample code to add to .htaccess:
H2PushResource /wp-content/themes/phpied2/style.css
H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1
H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1
When you usually try to download an image, your browser opens a connection to the server and sends a GET request asking for the image. The server responds with the image and closes the connection. Here however, the server sends the image, but doesn't close the connection! It keeps the connection open and sends bits of data periodically to make sure it stays open. So your browser thinks that the image is still being sent over, which is why the download seems to be going on infinitely.
How to not let the user downloading an image
Start to parse the HTML Fetch external resources Parse the CSS and build the CSSOM Execute the JavaScript Merge DOM and CSSOM to construct the render tree Calculate layout and paint
6 steps of how browser renders a web page
Using The clamp() CSS function we can create a responsive website with only one property
clamp()
Example:
h1 {
font-size: clamp(16px, 5vw, 34px);
}
The <output> tag represents the result of a calculation. Typically this element defines a region that will be used to display text output from some calculation.
How <output> tag can be used in HTML5
At the company I work at, one of our products is an embeddable commenting system. Unlike single-page applications, when we encounter bugs they’re usually on the client’s website. This raised the question, how can we embed a piece of code that will run on all our client’s websites, that will help us debug and improve our overall build experience.
Case when userscripts apply (not extensions)
Open Command tool and search for coverage
Checking CSS coverage inside Chrome Dev Tools:
3. Create Your Hyperlink
Create a hyperlink that will populate a text message
Javascript, APIs and Markup — this stack is all about finding middleground from the chaos of SSR+SPA. It is about stepping back and asking yourself, what parts of my page change and what parts don’t change?
JavaScript, APIs and Markup (JAM Stack) - middleground between SSR + SPA.
Advantages:
Somewhere on this path to render pages on the fly (SSR) and render pages on the client (SPA) we forgot about the performance of our webpages. We were trying to build apps. But the web is about presenting content first and foremost!
Website performance break with Client-side Rendering (SSR) and Single-page App (SPA)
We were not satisfied with the basic capabilities like bold and italics so we built CSS. Now, we wanted to modify some parts of the HTML/CSS in response to things like clicking things, so we implemented a scripting language to quickly specify such relations and have then run within the browser itself instead of a round trip to the server.
Birth of CSS - advanced styling
(history of websites)
And so was born PHP, it feels like a natural extension to HTML itself. You write your code between your HTML file itself and then be able to run those parts on the server, which further generate HTML and the final HTML gets send to the browser.This was extremely powerful. We could serve completely different pages to different users even though all of them access the same URL like Facebook. We could use a database on a server and store some data there, then based on some conditions use this data to modify the generated HTML and technically have an infinite number of pages available to serve (e-commerce).
Birth of PHP - way to serve different content under the same URL
The combination of WordPress, React, Gatsby and GraphQL is just that - fun
Intriguing combination of technologies.
Keep an eye on the post author, who is going to discuss the technologies in the next writings
Today, my process is enjoyably unsophisticated. When I want to post something, I first write it in a text file, copy my last blog post’s HTML file, paste in my new article, make some slight adjustments, update my list of posts, add it to my RSS file, and that’s basically it. Any page on my website can be anything I want it to be, like how, for example, double clicking on this article leads to a small easter egg.
Interesting approach on ignoring any type of site generators
it's not that there are new vulnerabilities that have been identified in the implicit flow, just that PKCE offers a more secure alternative that you should use if you have the option
Use PKCE instead of the implicit flow if you have a chance
PKCE (which stands for "Proof Key for Code Exchange" and is pronounced "pixie") was originally developed to solve a problem specific to native mobile apps using OAuth 2.0
PKCE (Proof Key for Code Exchange) is an extension to OAuth 2.0
While this has worked and continues to work for a wide range of web applications, security experts had (and continue to have) concerns that it leaves open some potential attack vectors
Implicit flow is still simple and very secure
click a button that says "Sign in with GitHub." I am then sent to GitHub to sign in and, if this is my first time, grant permissions
The Implicit flow:
Most of the UI (user interface) elements we needed already existed in our toolkit of parts, with a few modifications.
example of a good reason to use a modular component-based approach / styleguide
One of the strengths of Aurelia is that you can write so much of your application in vanilla JS.
By sticking close to standards, such as upcoming EcmaScript features, Aurelia code prepares for us for the future. It encourages writing code that will be relevant 2-5 years from now, or perhaps beyond.