crafting (and) JavaScript

Tagged with #knowledgebase

This is post #3 in the category "Browser Tools", focusing on understanding the loading times by charting them in a Waterfall chart. In part 1 and part 2 about Resource Timing I covered the attributes startTime, responseEnd, duration and initiatorType. Now I want to understand what happens after a resource starts loading and what do some attributes mean, like fetchStart, requestStart and responseStart, to mention the most relevant ones.

This is post #2 about Resource Timing, with a focus on understanding loading dependencies. In part 1 "Resource Timing - The API" I covered the attributes responseEnd and startTime. Now I will try to show how the API can be used to see which resources block each other, which is the step to understand before optimizing site speed, a very essential step to know what is the right thing to optimize.

I want to explore the Resource Timing API, one of the Performance APIs, accessible via window.performance in all modern browsers.
This post is the start of a series of blog posts about browser tools, in which I look into any kind of tools or APIs in and around the browser, things web developers will hopefully find useful.

[this is a draft]

Which unit to use, rem, em or even px (just to mention the most common units) when writing CSS seems to be an ongoing discussion. For people entering the space of web development the hurdle just gets higher, the complexity is continuously growing. There are more units than ever, I counted 21, there is more sites to learn from. It is not easy to figure out where and how to start.
I will try to analyze this a bit applying what I know and have learnt over the last 25 years of web development.

[this is a draft]

Below, I use the aliases grid-template-rows and grid-template-columns for grid-template:

[this is a draft]

Finally I need a CSS grid. Here is my intro to it. If you prefer a video this one (28 minutes) explains grid basics very well. But before learning CSS grid, I need to answer the question if I need it. I know flexbox quite ok, so why not use flexbox.

Uku creator of plausible.io had written a nice article on how to design, even though one is a miserable designer, as I am. A must read if you own the same skill deficiency ;).

I am a big fan of structured data and making the data we have on the web more accessible, easier to use, simply more worth it is a very useful thing. How useful is it investing in outlining your website's today? I found a couple articles and quotes on the web.


There is a uXSS bug in Chrome on iOS, which is actually a WebKit bug. But Chrome fixes it on iOS by crashing the browser, because this was the fastest way to fix it. Alright ...

The annoying port 8080 is already in use message and not knowing which process is occupying this port sucks. I knew it was lsof that can help me. But how exactly? TL;DR: ps -p `lsof -i :8080 -t` -o command= (on Mac OSX)

[this is a draft]

An undone blog post - More explicit assert with hamjest

Sometimes I stumble over commenting out a part in my JSX template. And I am always again looking for how to do that {# or {-- or what do I know.

ADR is a way to document decisions, reminds me of python's PEP.

This topic came up today when we discussed the #crewmeister API, and made me think. Until I remembered that we once in a project used to use the pure POST params, which are basically key-value pairs. And the question also reminded me of my PHP times, there the server-side knew how to handle a key which looks like user[0] and builds and array. But when I ran into that problem back then we used to use python and there we didn't have that.

There are seven kinds of coupling.

In the ruby koans I now came across array functions. One is collect and I thought, this is map, and the comment below said

A colleague just pointed me to the article about Six Thinking Hats. What I really like about this is that it removes the personal part from a solution finding, discussion, etc.

This article about closures in ruby started somewhere by saying "Ruby has four different ways of using closures, each of which is a tad bit different, and sometimes nonsensical".

In the last days I had to learn a lot about how to use, write and understand user stories. This talk by Mike Cohn is a pretty good kick start and summary for the hows and whys.

A very good talk by Jim Weirich, where he shows how to pull the meat, the actual business logic out of a rails app to make it testable in a fast manner concludes with a very interesting idea.

One method three different return types

Don't promisify fs.exists since this does not play by the rules of node style callback params, where the first one should be err and then data. It seems this does return only the data, which promisify understands as an error and does throw right away. Instead do what the node js docs suggest too and use fs.access instead, like so: promisify(fs.access)(aPath, fs.R_OK). See it in action [here in the cosmowiki].

My laziness actually pulls me strongly towards #noEstimates. I guess it's because the "no" means I have less work to do. Which I could kind of back up with the argument Robert Weissgraeber gives at the beginning of his talk, which is that we should remove all unnecessary work, all waste.

In the paper "Design Patterns for Sorting", the internals of how to implement a decoupled version of a sorting algorithm is described. It also shows that the complexity of something like a quicksort is not necessarily high, which should remove the fear of just trying out to implement it.
Maybe that's a good idea for a kata, that might go into the katas repo.

My pet project ES6 Katas is a playground for learning, if you look in the repo you see lots of things moving around and changes made. Most of it is because I try to apply new learnings and try to get to a structure that really is what I consider good software. Lots of new bits of information I learn I try to apply there or at least play around with it and figure out what's a better way to do things. This often might end up in a forth and back of things and in not being able to decide what is right, and it looks like nothing moves forward, but that's just on the surface.

Unfortunately I missed Franziska's session at SoCraTes 2015 on this topic, but fortunately she wrote about it, make sure to also read through her commits backwards, of course :). Very nice and readable! An article "Kickstart your next project with a Walking Skeleton" she referred to, that explains the process too. While reading more and more of the [c2 wiki] I am asking myself where is the difference to a spike which Kent Beck defined as

In this talk, Uncle Bob starts to set the context for why our industry has a hard time catching up with the speed and also why it is so important that we do spend more time on mindfully constructing software. It's worth spending those 1,5h watching this talk, or less if you 2x the video speed :).

On the famous c2 wiki find "Alan Kay On Messaging". His words are from the year 1998 and still so true. And I am only close to the beginning of really understanding. But I have to, as usual, extract some of the key points for me. Make sure to read the entire message anyways, it's really very short!

Any browser project should have a look at DOMPurify at least, if not apply it right away. This might not be what you want to apply right away, but maybe it triggers you to learn more about this field, when security issues hit you it might be too late.

For TDDBin I was just looking for all the icons to use on the website, icons from github, trello and twitter to embed them. And I found out that the collection of those images/graphics are called brand assets. Next time you search for them, don't use the term logo, use "brand assets".

It's not additional synthesis, as I would interpret the headline first, but it's pretty hard core cool what is possible in the browser already.

Not sure if I will ever get bash right, but little helpers like this explaining how "if" works are always helpful (to me).

I wanted to just push my source code to github's master branch and all the deployment after that shall be automatic. Every dev-op reading this will say "yeah sure, wtf?".

As often as I look for this, I need to write it down. For example for my fork of github:dropping-spray, which got inspired by this tweet and the following discussion.

I asked myself what branch rebase refers to. The one I want to rebase on or the one I want to rebase from?

Links about naming things

I was about to write a "Handler" class. But I remembered that the "er" classes are not so good.

In order to keep all your meta data of your project in one place and only create files that actually just copy those data you can use projectz where you maintain data like title, description, author(s), badges, ... in one CSON file and with a special markup you can update fill in the templates files like README, package.json, ...

IDEs are awesome, but sometimes in my way and setting up test runners sometimes defeats the purpose of being fast with tests, which also means having feedback constantly and continuously.