Checkout my Getting Started with React video course on Skillshare. It is 100% free.

[Js-Craft #17] CSS Grid Screencasts, a new newsletter layout, CSS margin collapsing and more

Hello everybody,
I skipped sending the last newsletter because an unplanned vacation happened. Therefore I salute you from Greece 🇬🇷 🎉.

Also, I've decided to split this newsletter into three categories. The newly published screencasts, the new articles added on js-craft, and a new section with interesting links and resources I've found around the web. Let’s go!

# Two new screencasts to watch

I am happy to announce that I've started a new video series about CSS Grid. Through about 6 or so episodes we will build a fully responsive CSS grid layout. The first two new episodes are below:

# Six new articles to read

The new articles published on js-craft are:

# Three interesting links from around the web

That's all folks! I would be very happy to hear from you. So, if you have any feedback about this newsletter, the new CSS Grid video series or anything else please drop me an email at daniel [at] js-craft.io

Cheers,
Daniel

Frontend links of the past few days

One of the most motivating reads of the past few days is Joel Hooks article My blog is a digital garden, not a blog. One of those pieces of content that makes you love your sleeves and get to work.

Also Lately, I've been spending quite some time browsing thought the CSS examples on codepen. There are a lot of interesting ones, but the following ones caught my attention in particular:

Using CSS Grid to make a Newspaper Layout

Maybe one of the most beautiful and complete examples of using CSS grid to build the full layout of a page. Great work Olivia. By the way, follow her on codepen. She has some wonderful CSS examples.

Airplanes - the beginners guide

Another fantastic showcase on how CSS cand be used for visual narratives. A real piece of art in my opinion.

Super Mario - CSS only

When I first saw this, I recoiled and thought: “there’s no way this is just CSS”. Even I should know by now, how powerful CSS has become, I am still amazed when finding examples like this one.

uses.tech – see what working setups other developers are using

Confession: not sure what's wrong with me but I have been always a bit obsessed with the workspace setup of the people I admire. What tools do they use, what software, what's their workflow, where and when do they work from? Even how the office looks like?

Almost the first thing I do when I am on the website of someone I like is to go to the about page hoping I will see a picture of their workspace. I think in my mind it's something like "if I will imitate that I will be as smart as he/she is".

A few days ago I came across uses.tech. It is a collection of developers' computer setups. The different ways of working are fascinating and as you may imagine it's a small treasure for workspace setup-er freak like me.

So, If you're curious about what folks are using for daily development, give it a go. I think I've spent a few hours bouncing from one site to another.

Bonus: I've found here a collection of pictures of the workspaces of famous writers.

Specialization – a way to manage learning fatigue

One of the most exciting things about being a software developer is also the greatest cause of stress and anxiety: the constant changes.

Always a new library, a new framework, a new concept, a new way to do something. A friend of mine, also a developer, once said to me "dude, sometimes my brain hurts from all the learning".

I have worked with super-smart and talented developers. The ones that know so much and think so fast that they make you feel like an old 486 vs a 32 core processor. Maybe, they have some chances to keep up with all the moving parts. Maybe.

But most of us are not like that. We can't keep up with making cool stuff with CSS, learn all the JS Frameworks, be up to date with what happens on the backend side and meanwhile also write a GraphQl open-source library while you play with the latest machine intelligence tools.

So one thing you can do is to specialize. Pick your battles!

Find what excites you. What drives your interest. For me, it was the mix of front-end development, a bit of design and a passion for building products.

I know how to make a SQL query, but I could not care less for how well the DB is optimized. I don't care what we use for continuous deployment or how we host our stuff. But I love implementing a new design, simplify the CSS, attracting new users to the product and see the charts go up.

Also, focus on the things that don't change. The ones that are here to stay. Security, CSS, SQL, responsive design and so on.

Indeed if you are a beginner, and after you get your basics up, spend some time experimenting. See what types of problems are interesting for you and give you pleasure to solve them.

But, in the long run, I've found that it's a better idea to be very good at something and, more or less, ignore the rest. You will get better jobs and feel a bit less anxious in trying to keep up will everything.

How I’ve started to learn programming

My initial plan was to be a math teacher or a doctor like my parents. I've become a software developer by chance ... and because of a broken computer.

When I was 10 my father bought me an Amiga computer. The kind that you would have to connect to your TV as it did not have a monitor.

At the beginning of the 90's this was considered a hi-tech device 😀

But that computer was broken and could not be connected to a cassette player. This meant that I could not load and play any games on it. Cuz, yes during those times a game was stored on a cassette tape.

The only thing I could do with that that computer was to run the BASIC programming language on it.

However, I've managed to get my hands on a book with a title like "How to make 10 games in BASIC".

I was typing about 3-4 pages of code to get a basic game up. A very complex game. Something like a red dot chasing two other blue dots.

I had no idea what I was doing. Lucky the BASIC programing language is made of short lines, so it was quite easy to track down a typo. Mostly I was copying the code like a monkey.

Another downside of not being able to connect this computer to a cassette player was that I did not have any way to save that code. When the computer was unplugged I was losing all of my code and had start from scratch again.

The funny thing was that after you write that code for enough number of times, those stage lines start to have some logic. I've started to change the color codes, the pixel values and see what was happening. Trial and error.

I was feeling like a wizard learning spells.

This did not get any practical application until highschool when I've discovered that I can skip a lot of the boring classes by taking part in some scholar computer contests.

And from there realized I could make this into a job and so on ...

So, a few takeaways from the story:

  • programming can be thought at a very young age. I was 10 year when started how to code, and for sure I don't have any special IQ.
  • video games are good; if it was not for the need to play those video games, maybe I would not be a programmer today. For sure I would not be interested in learning how to code if the aim was to solve a math equation.
  • it's ok, in the beginning to just copy. I think that the human brain, especially the brain of children, is super good in recognizing and learning patterns and adapt.

Cheers and happy learning!