#317: JavaScript and Front-End Tools

On diving deeper into JavaScript and Jamstack, optimizing for all popular frameworks, and boosting your existing Next.js setup. Issue #317 • September 7, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( 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. [Jamstack Conf 2021]( 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]( 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. [Upptime]( 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. [A tool for writing better scripts]( 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. [Smashing Online Workshops]( 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. [Slapdash]( 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. [View Source]( 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? [GitHub shortcut]( 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 [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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](