Great sources of info

Standing on the shoulders of giants

And for sure HN and SO.

A QUIC introduction to modern network performance: Browser

Modern network components This post was inspired by Ilya Grigorik and his amazing efforts to promote performance knowledge in almost every computer level (application, network stack and etc.). But before we start to explore these topics, let’s review the “golden rules” of high performance web sites. (some of them will be better off with http2 🙂 )

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put Stylesheets at the Top
  6. Put Scripts at the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make AJAX Cacheable

This is a series of articles about modern network performance:

  1. Browser
  2. HTTP 1.x / HTTP/2
  3. TCP / QUIC (UDP)
  4. IP / IPv6

Browser

If you’re lazy about reading, watch this short video how browsers work.

It’s crucial to understand how Browsers work so you can optimize your page to load fast, believe me speed is a feature. Let’s suppose your browser is getting a response from example.com. It’ll receive a stream of bytes then it will convert it to characters (following the adopted encoding) and parse the chars to tokens and finally build the nodes which constitute the DOM. A picture is worth a thousand words. A similar process will also happen to build the CSSOM. But we’re not done yet, usually a page requires dozens of external resources (mostly: images, js and css), some of these resources are block rendering. For example, a simple page has CSS and JS as external resources. The browser will first get HTML build the DOM then it’ll find that it needs to download the css and js, after these files are downloaded it needs to build CSSOM, run the JS and rebuild the DOM, only after all these steps the browser will render the page. But the same page using non blocking css (media type/query) and js (async attribute) will make it render quicker, the steps between the first download (html) to render are reduced. It’ll render the page after the first DOM building.

A video (from Umar Hansa) that summarizes this

Some considerations

  • All the great images above were stolen from Google’s web fundamentals.
  • HTML and CSS are render blocking.
  • For CSS you can specify media types and media queries to avoid render blocking.
  • Javascript can change DOM and CSSOM, therefore its execution will block in both.
  • Declare your Javascript as async when you can.
  • Avoid CSS import
  • Inline render-blocking css
  • That’s all folks
<!-- this will block (you still can inline it) -->
<link href="style.css" rel="stylesheet">

<!-- this will block -->
<script src="app.js"></script>

<!-- this won't block -->
<link href="style.css" rel="stylesheet" media="print">

<!-- these won't block -->
<script src="user.js" async></script>
<script src="vendor.js" async></script>

It’s also very important to understand how Javascript works.

Will we only create and use dynamic languages in the future?

Since I’ve playing with some dynamic languages (Ruby and Clojure), I have been thinking about why would anybody create a new static typed language?! And I didn’t get the answer.

I started programming in Visual Basic and I taste its roots, which are almost all full of procedure commands (bunch of do, goto and end), then I moved to C#, sharper it changes the end’s for }’s and give us a little more power based on some premises: we can treat two different things in the same way, polymorphism. The last static language, but not the least, I used (and I use it) Java, abusing of his new way of treating a set of things equality, the interfaces and using its “powers” on reflections.

Although when I started to use Ruby I saw that I could treat a group of things equality without doing any extra work. I still need to code models and composed types, even though we can create or change them dynamically using “real power” of metaprogramming.

When I start to study and apply the Clojure and its principles, my first reaction was the rejection, how can I go on without my formal objects, how can I design software without a model in the head and so on. I wasn’t thinking about how actually I do software, currently I use TDD to design software and I don’t think what models I need to have, I do think in terms of “what I want”. At minimum, Clojure make me think about, do we really need object to design software?! .  A three days ago I saw an amazing video about similar thoughts: Some thoughts on Ruby after 18 months of Clojure.

Summarising: With my limited knowledge of theses languages, let’s suppose we use a function (which we don’t have source code) and we want to do something before that function is executed (intercept) using: VB I’ll need to check every single piece of code which we call this function and call another one, in Java we can use a AOP framework, in Ruby we can use the spells of metaprogramming. It seems that some frameworks, patterns and extra work aren’t needed more because of this dynamic language evolution.

My conclusions using dynamic languages (Clojure/Ruby) for now it’s: I write less code and reuse them more easy, so I don’t see any reason to create/use a new static typed language, would you see any motivation to do that?

PS: When I use C# (.Net Framework 1.3 – 2.0) it was not so super cool as today.

Put the bricks together on gnu linux

Why Linux?

It is easy, flexible, very secure, updated, “free”, open source… and the list goes on however what makes me more happy on this little world *unix it is its flexibility.

The power

Let start with a simple command, like ps, which can show you a list of current process and its details.

ps -aux

Now, I would like to just shows the output lines which has usr on it. To do that I will use the output of ps -aux command as input to grep filter the data. On linux you can pass the output of a command to another by using a pipe. So we can redirect the last output as input to another one.

ps -aux | grep usr

Now we have the output from ps filtered by only lines which contains ‘usr’. But what if want only the process id’s. There is a program for that too, the cut.

ps -aux | grep usr | cut -d " " -f 8

This program cut is simple creating fields (-f) delimited (-d) by a space (” “) and I ask the program to pick the field 8, which is the process ids. But if you notice there is some lines without number. The next step is remove this lines without values. We can do it by using sed program.

ps -aux | grep usr | cut -d " " -f 8 | sed '/^$/d'

Now our output has only lines with numbers, sed program receives a simple regex and says delete this pattern. Nice but I just need those numbers ending with 2. We can grep again.

ps -aux | grep usr | cut -d " " -f 8 | sed '/^$/d' | grep $2

I also want to sum all this numbers and show on the screen the result. To achieve that we are gonna use awk program.

ps -aux | grep usr | cut -d " " -f 8 | sed '/^$/d' | grep $2 | awk '{ sum += $1; print "+" $1} END {print "_____" ; print sum}'

The first code (surrounded by brackets) will create a variable called sum and it also prints plus and each first argument passed to it. This first block will be called for every line we pass (processed by all the programs we did it) and it follows by END that will print a line and finally prints the sum of all this stuffs.

+1692
+1712
+1732
+1752
+1762
+1962
+2062
_____
12674

You can use programs connect them produce output that only one program can not do. PS: I know I could too all this with less programs/commands but the intend here was not teach linux/GNU programs it was show you how powerful can be linux.

Bonus round

You can put this output to a file just using the redirect to a file. ( > or >> to append)

ps -aux | grep usr | cut -d " " -f 8 | sed '/^$/d' | grep $2 | awk '{ sum += $1; print "+" $1} END {print "_____" ; print sum}' > file.txt