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.
— 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)
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
.js file, then add
#!/usr/bin/env zx to the beginning of your zx scripts, and that’s already it. Functions like
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. (cm)
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).
- Microcopy and UX Writing
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.