Howdy Smashing Friends,

What are you most excited about in front-end today? As developers, it seems like every week is a celebration of new techniques and tools and methodologies and strategies. Yet very often with all the ongoing development happening, it’s difficult to keep track of things that could come in handy. In this newsletter issue, we highlight some of the tools that might have slipped through the cracks.

On the Smashing side of things, we’re getting ready for new series on SmashingMag, following a series on everything HTTP/3 by Robin Marx, articles on modern CSS by Stephanie Eckles, and a series on CSS Refactoring written by Adrian Bece. We also have prepared a number of friendly online workshops, including free ones for everyone to join in.

Meet Jamstack Conf 2021, a free online conference for JavaScript developers.

If you’d like to dive deeper into JavaScript and Jamstack, we’d love to invite you to the free online Jamstack conference 2021 — with plenty of sessions and workshops around Jamstack, alongside case studies, experiments and a friendly, inclusive environment for everyone. The conference will also be human live-captioned. We’d love to see you there!

In the meantime, let’s look at some useful little helpers for JavaScript developers: from bootstrapping your dotfiles to shell scripts written in JavaScript, to a slightly better command bar interface and viewing source code on mobile.

— Vitaly (@smashingmag)

1. Bootstrap Your Dotfiles

Customizing your dotfiles can increase productivity significantly when using command-line programs. If you want to take your configuration to a new system, Dotbot is here to help. The tool bootstraps your dotfiles and makes installing them a task of only one short command line.

Dotbot uses YAML or JSON-formatted configuration files to let you specify how to set up your dotfiles. You can use it to link files and folders, create folders, execute shell commands, and clean directories of broken symbolic links. User plugins are also supported in case you want to add custom commands. Designed to be lightweight and self-contained, the tool gets by with no external dependencies. There’s no installation required either. (cm)

2. GitHub-Powered Uptime Monitoring

An open-source solution that monitors your site’s uptime without requiring a server? Upptime offers precisely that. To help you stay on track of your websites’ status, Upptime unites GitHub Actions, Issues, and Pages into a powerful status monitoring trio.

With the help of GitHub Actions, you can set time intervals at which you want Upptime to check that your sites are up. Five minutes is the shortest interval. When a specific endpoint goes down, Upptime will automatically open a new issue in your GitHub repo. You can use the issue to add more information about the outage (e.g., whether you are investigating or what caused the outage) and assign team members to it. Last but not least, you get a statically-generated status website that shows users your sites’ live status, incident history, and response time graphs in real-time. (cm)

3. Write Shell Scripts In JavaScript

Do you frequently forget Bash’s syntax? Good news, Google released a little tool that lets you write scripts in good ol’ JavaScript. zx as the package is called, provides useful wrappers around child_process, escapes arguments, and gives sensible defaults so that you don’t have to deal with any of the hassle that the standard Node.js library usually brings along.

To get things up and running, you can write your scripts either in a .mjs or .js file, then add #!/usr/bin/env zx to the beginning of your zx scripts, and that’s already it. Functions like $, cd, and fetch are available straight away without any imports. (cm)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:

• Vue.js: The Practical Guide Dev
  with Natalia Tepluhina. September 14-28.
• Building Modern HTML Emails Dev
  with Rémi Parmentier. September 16–24.
• Accessible Front-End Patterns Masterclass Dev
  with Carie Fisher. September 30- October 14.
• Jump to all online workshops →

5. A Command Bar Interface To Speed Things Up

Opening a new GitHub issue, searching Slack messages, showing your calendar schedule and jumping on a Zoom call — the Slapdash command bar makes daily tasks like these a lot quicker. It works similarly to Spotlight on Mac, except it also supports your cloud apps.

To open Slapdash, just type Command + J on Mac or Ctrl + J on Windows and Linux, and start typing. The partial name of the Notion document you want to open, for example, or type in “create” to open a new GitHub issue directly from inside the command bar. You can also build custom commands that you and your team might need to speed up common worflows — for customer lookup, entering something into a database, or searching company records, for example. A fantastic little helper to save you precious time. (cm)

6. View Source Code On Mobile

The keyboard shortcut to view the source code of a page is every developer’s best friend, right? Well, at least on desktop devices. Viewing the source on mobile usually involves quite some fiddling around. If you’ve been looking for a simple solution for when you’re on the go, Adam Newbold’s site View Source is for you.

To view a page’s source code, just paste the URL into the search bar of View Source, and it’ll fetch and display the source code for you — with syntax highlighting and numbered lines. You can even define if you want to wrap lines or tidy the markup for a better overview. One for the bookmarks. (cm)

7. A GitHub Shortcut That Changes Everything

Sometimes, it’s a small trick that makes all the difference. So, do you want to have your mind blown?

Go to any GitHub repo, and press the . key on your keyboard. A web editor will open up in your browser window to edit the repo. You can edit, search, install (some) extensions and use commit back to the repo. We live in amazing times.

From our sponsor

Modern Web Apps Shipped Faster With Netlify

Today’s newsletter is sponsored by Netlify, the best platform for frontend teams to build, run and scale modern web applications. Netlify provides native support for all popular Jamstack frameworks, including Next.js, Gatsby, and Nuxt. Get started for free, and easily manage multiple projects and integrations in one platform as you grow.

8. New On Smashing Job Board

• Senior Software Engineer
  at eMDs Inc. (Richardson, Austin)
• Senior UX Designer
  at GoodHabitz (Eindhoven)
• Web Developer / Backend Developer / Full Stack Developer (m/w/d)
  at helllicht medien GmbH (Frankfurt)

9. Recent Smashing Articles

• HTTP/3: Practical Deployment Options (Part 3)
• Reducing Carbon Emissions On The Web
• Interactive Learning Tools For Front-End Developers
• A Deep Dive Into The Wonderful World Of SVG Displacement Filtering
• State Management In Next.js

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook