Steph’s dev note’s #001
Tags: webdev, javascript, css
Published: 2020-09-27 18:04:40

---
title: Steph’s dev note’s #001
published: true
description: Random links, articles and other resources I happen to come across on my dev journey that might also be useful for you
canonical_url: https://since1979.dev/stephs-dev-notes-001/
cover_image: https://since1979.dev/wp-content/uploads/2020/09/stephs-dev-notes.jpg
tags: webdev, javascript, css
---
[Originally posted on my website on September 27th 2020](https://since1979.dev/stephs-dev-notes-001/)

I've been assembling a monthly WordPress (Don't run away now. let me finish :p) [digest series](https://since1979.dev/wordpress-development-monthly-digest/) for almost two years now for a pretty nice but niche audience. But since my dev world doesn't just involve WordPress, and it's starting to become a little bit boring, I thought I'd try something different for a change. So in this article I like to be more broad and share some of the things that I "discovered" recently and think could be useful for you too.

### Adrian Twarog's design video's.

[Adrian Twarog](https://twitter.com/adrian_twarog) has [a very cool Youtube channel about Development and design](https://www.youtube.com/c/AdrianTwarog/featured). Lately he has been releasing a lot of nice content about Design from a "developers perspective" that is great for people like me as a developer that want's to be a bit more knowledgeable about design principles.

### Nova.

![](https://since1979.dev/wp-content/uploads/2020/09/new-tab-1024x372.png)

While VSCode is pretty much the go to editor for web developers for some time now, I have also been using Coda with much joy over the years. (I switched to PhpStorm a year ago, but that is a totally different story). The problem though was the total lack of updates and support for Coda since some years. But that has now been corrected with the release of a completely new Mac only IDE called Nova. If you are also still a Coda fan [you can read more, and if you are running macOS 10.14.4 or higher download a trial version here.](https://nova.app/)

### Making screenshots in Firefox.

![](https://since1979.dev/wp-content/uploads/2020/09/Schermafbeelding-2020-09-27-om-16.16.56.png)

Something I wish I knew much earlier, and that I discovered because someone mentioned it in a chat recently is the fact that you can make partial and full page screenshots in Firefox by hitting Cmd + Shift + S (I assume its Ctrl + Shift + S on windows)

### Building Website Headers with CSS Flexbox.

I've been following [Ahmad Shadeed](https://twitter.com/shadeed9) for some time now because of his great Css knowledge and equally thorough articles. In one of his latest articles he focus's on [building website headers using Css Flexbox](https://ishadeed.com/article/website-headers-flexbox/?ref=dailydevlinks.com). I recommend you check out this article, and when you do, read on to the end where he showcases his project with [17+ cool website headers](https://headers-css.vercel.app/) including the code for your own inspiration.

### Kevin Powell's live-streams.

![](https://since1979.dev/wp-content/uploads/2020/09/Schermafbeelding-2020-09-27-om-15.55.54.png)

For the past couple of weeks I've been working on my Css skills and to help me with that I have turned to [Kevin Powell's Youtube channel](https://www.youtube.com/kepowob/featured) among others. Kevin is a well known Youtuber, with some 154k subs, and [instructor over at Scrimba](https://scrimba.com/teachers/kevin-powell). Since some time he has been very active as a live streamer on Twitch as well, where he works on fun projects and takes time to answer questions. I highly recommend you [check out these streams](https://www.twitch.tv/kevinpowellcss) since they are full of practical Css sorcery.

### Writing CSS with Accessibility in Mind.

Besides Css I've also been reading up a lot about accessibility. I know, I should have done this a long time ago, especially with my bad eyesight, but hey... better late then never right!? During my studies [i came across this article](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) by [Manuel Matuzović](https://twitter.com/mmatuzo) in which he gives an amazing overview of A11y in the Css landscape. It's really a must read for all web dev's.

### Css selector cheat sheet.

[![](https://since1979.dev/wp-content/uploads/2020/09/css-selectors-cheatsheet-1024x533.jpg)](https://since1979.dev/wp-content/uploads/2020/09/css-selectors-cheatsheet.jpg)

I saw the above Css selector cheat sheet on twitter the other day, and I wanted to share it with you. The only thing is that I saved it and I can't remember who tweeted it or where it comes from. If you have any idea please let me know so I can give the proper credits.

### Tyler Potts Youtube channel.

Seeing that Tyler already has 15.4k subscribers I'm a little late to his party but I only discovered his channel the other day and he has some really interesting content on there. So... "If you want to learn about Game or Web Development, JavaScript, PHP or anything else relating to programming then [subscribe to the channel now](https://www.youtube.com/c/TylerPotts/featured)!". Or give him a follow [over on Twitter](https://twitter.com/tyler_potts_).

### Respecting "prefers reduced motion" with Javascript and React.

![prevers reduced motion with javascript and react](https://since1979.dev/wp-content/uploads/2020/08/prevers-reduced-motion-in-javascript-socials.jpg)

I also wrote a little article about [Respecting "prefers reduced motion" with Javascript and React](https://since1979.dev/respecting-prefers-reduced-motion-with-javascript-and-react/). And I would love to hear your thoughts on this topic.

### Other links

-   [Understanding the event loop, callbacks, promises, and async/await in Javascript](https://www.taniarascia.com/asynchronous-javascript-event-loop-callbacks-promises-async-await/) by [Tania Rascia](https://twitter.com/taniarascia).
-   [Import non-Esm libraries in Es Modules, with client-side vanilla Js](https://lea.verou.me/2020/07/import-non-esm-libraries-in-es-modules-with-client-side-vanilla-js/) by [Lea Verou](https://twitter.com/leaverou).
-   [Beyond media queries: using newer Html & Css features for responsive designs](https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/?ref=dailydevlinks.com) by [David Atanda](https://twitter.com/davidpreneur).
-   [Image manipulation with Css](https://dev.to/ziizium/image-manipulation-with-css-11dd) by [Habdul Hazeez](https://twitter.com/ziizium).

### Thanks

Join me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) if you like to tell/ask/show me anything, Or follow me here on dev dot to [@Vanaf1979](https://dev.to/vanaf1979) for more articles like this.

**Stay safe and thanks for reading.**