One of my favorite moments from our recent Postgres episode of The Changelog was when Craig taught me a few psql tricks. This tutorial is a bit like that, only way more dense and easily referenced. 👌

All you ever wanted to know about Flexbox, explained visually. 👇 is just a sample of what you’ll find when you follow the link.

Ryan Carniato joins Amal & Nick to discuss Solid with a major focus on Signals, which are the cornerstone of reactivity in Solid.

Nowadays, Alpine Linux is one of the most popular options for container base images. Many people (maybe including you) use it for anything and everything. Some people use it because of its small size, some because of habit and some, just because they copy-pasted a Dockerfile from some tutorial. Yet, there are plenty of reasons why you should not use Alpine for your container images, some of which can cause you great amount of grief…

Not much has been written yet on how Go’s fuzzing system actually works, so I’ll talk a bit about that here. If you’d like to try it out, Getting started with fuzzing is a great tutorial.

Jay Conrod worked on Go 1.18’s fuzzing feature, so there’s very few people who could write a post as detailed and accurate as this. He also discussed fuzzing in detail with us on Go Time #187.

Josh Comeau:

Recently, I’ve been using my own custom CSS reset. It includes all of the little tricks I’ve discovered to improve both the user experience and the CSS authoring experience.

Like other CSS resets, it’s unopinionated when it comes to design / cosmetics. You can use this reset for any project, no matter the aesthetic you’re going for.

In this tutorial, we’ll go on a tour of my custom CSS reset. We’ll dig into each rule, and you’ll learn what it does and why you might want to use it!

It has 9 rules and unlike previous resets, the goal is not to create a ‘blank slate’ that is uniform across browsers. Josh walks/talks you through each rule and why they made the cut.

Building a modern front end in Django without reaching for a full-blown JavaScript framework. Choosing the right tools for the job, and bringing them into your project.

This is as close to a tutorial as you’ll see on Changelog News. I’m linking to it not for the step-by-step bits like talking to your “Django backend without a full-page reload”, but for the decision making bits like “when you might choose low-JavaScript.”

One-liners with explanations, a short tutorial, and links to other resources.

It’s 22 months since I found myself frustrated with writing boilerplate instructions to install simple, but necessary software in every tutorial I wrote for clients and for my own open source work.

In this article post I’ll walk you through the journey of the past two years from the initial creation, through to growing the community, getting the first sponsored app and what’s next. There will be code snippets, and technical details, but there should be something for everyone as we celebrate the two year anniversary of the project.

If you want to learn about CSS transitions, this explainer from Josh Comeau is a great start.

This tutorial is meant to be accessible to developers of all experience levels. It can be thought of as “CSS transitions 101”. That said, I’ve sprinkled in some interesting and obscure tidbits — no matter your experience level, I bet you’ll learn something!

This is not a tutorial on using Git! To follow along I advise that you have working knowledge of Git. If you’re a newcomer to Git, this tutorial is probably not the best place to start your Git journey. I suggest coming back here after you’ve used Git a bit and you’re comfortable with making commits, branching, merging, pushing and pulling.

The Nerves Keyboard project is a small group of enthusiasts using the IoT tooling from the Nerves project to build a mechanical keyboard that can be programmed and customized with Elixir. The work happens in the open and is currently moving towards the hardware stage. This is a quick getting-started tutorial.

Get started with WebAssembly through this simple hands-on tutorial that assumes only general knowledge in web development. The only tools you’ll need to get a taste of Wasm through runnable code examples are a code editor, any modern browser, and a Docker container with toolchains for C and Rust that comes with the article.

A new CC0 book about WebRTC by Sean DuBois (and friends). Sean recently shared his love for and deep knowledge about the technology on our Go Time podcast.

This book was created by WebRTC implementers to share their hard-earned knowledge with the world. WebRTC for the curious is an Open Source book written for those that are always looking for more. This book doesn’t settle for abstraction.

This book is all about protocols and APIs, and will not be talking about any software in particular. We attempt to summarize RFCs and get all undocumented knowledge into one place. This is book is not a tutorial, and will not contain much code.

This is very much a WIP, but there’s a fair bit ready for consumption and the authors are actively collaborating in the GitHub repo.

Antoni Kepinski, who was a guest of ours on JS Party #85:

I wrote a short tutorial on how to embed Changelog’s podcast player into a React application so that it doesn’t affect the performance and accessibility of the site.

While I do understand that Changelog isn’t interested in How-to's and tutorials, I feel like this one can be an exception, as it is related directly to Changelog and its podcasts ;)

Antoni is correct! How-to’s and tutorials aren’t something we share often. It’s not that they aren’t useful, it’s just that they aren’t really news and they are rarely noteworthy. But I’ll make an exception this time. 😉

In this post Arthur covers the core concepts, the question “Should you use GitHub Actions?”, and a step-by-step tutorial to build a functional CI/CD pipeline using GitHub Actions.

If you are already using GitHub to host your project’s source code, getting started with GitHub Actions is effortless. The fact that it integrates fully with the entire GitHub ecosystem means your team can double down on using the platform as a significant part of your software development process.

Overall, my opinion is that GitHub Actions is worth a try. Whether this is the automation system best suited for your team depends on your specific needs.

The main differences with existing extensions are: multiple selections, keyboard layout agnostic, SOV (subject–object–verb) constructs and simple interaction with external programs. It is also quite usable with the mouse.

Demo videos are (temporarily?) unavailable, but there’s a fun tutorial that achieves a bunch of tasks on pokemon.com. Inspired by Kakoune.

The thing I love the most about this bundler: it doesn’t need any configuration. Literally, none at all! Compare that to webpack where configuration can be strewn across several files all containing tons of code…

Nice rundown and tutorial on getting started with Parcel.

This is not another “setting up” a new project with Vue and TypeScript tutorial. Let’s do some deep dive into more complex topics that are usually not covered but are totally required in real-life projects.

Awesome Stacks is a community-curated list of tech stacks for building different applications and features. Each stack in the list has a name, description, and list of a few of the key tools and technologies. Optionally, it links to a tutorial, starter kit or boilerplate that makes it easy to get started with.

Contribute ’em if you got ’em.

The intersection of service mesh and distributed tracing is exciting to me. This quick Kubernetes-based tutorial is a great way to see how it works in practice.

Solid tutorial on Service Workers:

You can think of the service worker as someone who sits between the client and server and all the requests that are made to the server pass through the service worker. Basically, a middle man. Since all the request pass through the service worker, it is capable to intercept these requests on the fly.

A step-by-step tutorial for using Elasticsearch bucket aggregations to implement faceted navigation a.k.a. facets.

Buckle up, because this is a long ride.

John Demian:

This tutorial will cover the basics of both the front-end contact form, with vanilla JavaScript, and the serverless back end hosted on AWS Lambda.

A contact form seems like the perfect scope for a serverless tutorial like this one.

Flavio Copes:

Learn everything about JavaScript Regular Expressions with this brief guide that summarizes the most important concepts and shows them off with examples.

Regular expressions can be a developer’s best friend or worst nightmare, depending on how well you can wield them. I’ve been using them (with varying degrees of success) since the early aughts, yet I still learn something new every time I read a tutorial like Flavio’s.

A tutorial for adding bash completion to scripts using the bash programmable completion facilities.

Why bother?

• to save users from typing text when it can be auto-completed
• to help users know what are the available continuations to their commands
• to prevent errors and improve their experience by hiding or showing options based on what users have already typed

I’m a tab-completion junkie, so the more people that know how to do this, the better!

Read this if you want to know the what, why, and how of GitHub.

Learn the most important pieces of GitHub that you should know as a developer. This tutorial will help you start, but the real experience of working on GitHub on open source (or closed source) projects is something not to be missed.

A few weeks back, Derek Sivers, of CD Baby fame, wrote about his experience with learning JavaScript.

He said:

I wanted to really learn JavaScript - not shortcuts, quick tricks, or meta-tools that keep me from having to learn JavaScript. I want to learn it, get it, read it, understand it, and memorize it, so that I can understand all the other cool things written in JavaScript for years to come.

In his post he mentions how someone wanting to learn JavaScript might get Douglas Crockford’s JavaScript: The Good Parts and call it a day.

Much like Derek, I drank that kool-aid too. I mean I really tried to that book with the full intent of learning JavaScript. Like Derek, I want to learn it, get it, read it, understand it, and memorize it, so that I can understand all the other cool things written in JavaScript for years to come. As you might expect, a couple chapters in I was scratching my head trying to hang on for dear life. I’m sure it’s a great book, but it’s certainly not for beginners. It teaches you about the good parts of JavaScript (obviously), not how to program in JavaScript. Big difference.

Instead, Derek suggests starting with Eloquent JavaScript - by Marijn Haverbeke. More specifically, he suggests that you read the online version so you can test and experiment with what you’re learning directly in your browser as you read. You can checkout the source for the book on GitHub too.

After a few chapters of Eloquent JavaScript, Derek suggests switching to Professional JavaScript for Web Developers, 3rd Edition - by Nicholas Zakas saying “THAT is the ultimate tutorial.”

It takes the time to explain everything thoroughly, and it covers pretty much everything. Put aside a few hours per chapter, and by the time you're done with this one book, you'll know as much as most people who call themselves JavaScript programmers.

Nicholas shares the code examples from the book on GitHub too. I added an issue asking about 3rd edition examples.

My plan is to follow Derek’s advice and really learn JavaScript this year.

In Episode 0.3.4, Zed Shaw and I talked about the sad state of guitar tab sites, and he mentioned VexFlow as a project to watch. VexFlow is a set of open source projects from Mohit Muthanna that use HTML5, <canvas>, and SVG to render embeddable guitar tabs and music in blog posts or web pages.

VexTab

Instead of using the ubiquitous (yet extremely free-form) ASCII tabs with which most guitarists are familiar, VexFlow introduces its own tablature and music markup language:

VexTab is a language that allows you to easily create, edit, and share guitar tablature. Unlike ASCII tab, which is designed for readability, VexTab is designed for writeability.

VexTab is easy to write

tabstave
notes 0/4 14/3 13/1 14/3 0/4 12/3 12/1 12/3 | 
notes 0/4 10/3 10/1 10/3 0/4 9/3 8/1 9/3

tabstave
notes 0/4 5/3 5/1 5/3 0/4 4/3 3/1 4/3 |
notes (3/1.4/3)s(1/1.2/3) 

tabstave
notes 0/5 0/5 3b4/5 0/4 3b4/4 0/4 |
notes 2/3 0/1 3/2 2/3 0/1 3/2 2/3

This intro to Dead or Alive in VexTab can be beautifully rendered into guitar tablature using TabDiv, VexFlow’s HTML5/JavaScript/<canvas>/SVG embedding library.

VexFlow also supports clef-based music notation as well.

tabstave notation=true
notes :8 [ 5s7/5 ] :q (5/2.6/3)h(7/3) [ :8 6/4 :16 7p5/5 ]

becomes

For browsers without <canvas> support, TabDiv supports SVG with the help of RaphaëlJS from Dmitry Baranovskiy.

You can try your hand at writing VexTab in your browser with Mohit’s awesome tutorial.

[Source on GitHub] [Homepage] [Tutorial]

While HTML5 is expanding in definition to include any whizz-bang feature in the post rounded corner web era, implementing actual HTML5 in your web app can be confusing. It’s a fast moving landscape that touches everything from traditional web apps to mobile.

Paul Irish, the Google Chrome dev relations guy who gave us the bulletproof syntax for @font-face, brings us his HTML5 Boilerplate a great tutorial/starting point for implementing a number of best practices in your desktop and mobile web applications including

• HTML5 <!doctype> and CSS reset
• Handheld stylesheets
• CSS media queries for advanced mobile device targeting (even portrait or landscape layouts)
• Paul’s Modernizr script for detecting device capabilities such as Modernizr.video.ogg

The current version is heavily documented. Paul promises a more slim, production ready version soon.

Check out the source on GitHub and the HTML5 Boilerplate homepage