Smashing Newsletter: Issue #304

Editorial

We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. In this issue, we highlight just them — reliable boilerplates for all kinds of projects, from static site templates to React/Vue starter kits.

In fact, over the last months, we’ve been preparing a couple of useful round-ups for you to use in your projects: on accessible front-end components, CSS generators and tools, SVG generators and VS Code Extensions, among many others. These round-ups are being updated regularly, so feel free to bookmark them and use for your future projects.

This week, we are happy to release Addy Osmani’s Image Optimization book, which is now shipping as a hardcover worldwide. If you ordered one, you should have it delivered to your doorsteps very soon.

And of course we are running online workshops — in just a few hours I’m very excited to take off the journey to new front-end adventures in 2021, and oh my, it’s going to be quite a journey! We still have some tickets left, and I’d be honored and happy to see you there.

In the meantime, happy boilerplates day! 🙂
— Vitaly (@smashingmag)

1. Emergency Site Kit

In case of emergency, many organizations need a quick way to publish critical information. However, existing websites are often unable of handling sudden traffic spikes and, depending on the kind of emergency, local network infrastructure might even be damaged, leaving people with poor mobile connections out. Max Boeck’s Emergency Site Kit is here to provide people with the information they need in such cases, no matter the circumstances.

The kit helps you quickly publish a simple website that is fast, accessible, and that can withstand large amounts of traffic. Built on the rule of least power, it uses simple technologies to ensure maximum resilience: The static files are optimized for first roundtrip, there’s only basic styling and one critical request, and service workers ensure offline support. One for the bookmarks.

2. A Boilerplate For Web Forms

Forms can be a pain. Luckily, there’s a little HTML and CSS boilerplate to change that: Boilerform. Providing baseline BEM-structured CSS and appropriate attributes on elements, this little boilerplate gives your forms a head start.

Designed to be straightforward to implement, you can, in its most basic form, drop a CSS file into your head with a short snippet and wrap your elements in a boilerform wrapper. To give you more control, there’s also a Sass partial and a pattern library to work with. Whether it’s a contact form, card payment, or user signup, Boilerform has got you covered.

And if you need an alternative, NoStyle Form Design System (also on GitHub) is a great option to consider.

3. Static Site Boilerplate

Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites. Eric Alli’s Static Site Boilerplate uses the latest tech to make the process of building static websites more straightforward.

The built-in development server will get you up and running in seconds, your HTML, styles, and scripts will be automatically linted, changes to files are monitored in real time, images are compressed for your production build, and sitemap.xml and robots.txt files are automatically included with your production build. A real timesaver.

4. Upcoming Smashing Online Workshops

Best practices and useful tooling for designers and developers are at the heart of our online workshops. You finish the workshop with a nice toolbelt of practical techniques to apply to your projects immediately. That’s worth it.

Smashing Online Events — We also have summer bundles with friendly prices and plenty of workshops for upcoming months. 🏖

For the next workshops, we have coming up:

New Adventures In Front-End 2021 Dev
with Vitaly Friedman. June 9–23.
Maintaining Successful Design Systems Dev
with Brad Frost. June 29 – July 13.
Level-Up With Modern CSS Dev
with Stephanie Eckles. July 8–22.
Designing Websites That Convert UX
with Paul Boag. July 22–30.
The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19.
Designing The Perfect Navigation UX
with Vitaly Friedman. August 26–27.
Jump to all workshops →

5. React Boilerplates

When it comes to React, there are several community-created boilerplates out there that are bound to save you time. One of them is the React Boilerplate. The highly-scalable, offline-first foundation was created with a focus on performance, best practices, and developer experience and shines with features such as quick scaffolding, instant feedback, predictable change management, and i18n support, among other things.

The React Starterkit by Konstantin Tarkus is a front-end starter kit using React, Relay, GraphQL, and JAMstack architecture. It’s optimized for serverless deployment to CDN edge locations and comes pre-configured with CSS-in-JS styling, code quality tools like ESLint, Prettier, TypeScript, and Jest, as well as VSCode snippets and settings to make your workflow more efficient.

Speaking of VS Code: The React + Redux Snippets VS Code Extension makes sure you always have the snippets you need available in your editor. It’s designed taking maximum advantage of code completion — perfect for power users.

Last but not least, if you want to use the best of all worlds to create your own, unique React boilerplate, Leonardo Maldonado’s tutorial is for you. He takes you step by step through building your own boilerplate from scratch with the main dependencies used in the React community today.

6. Vue Boilerplates

Do you plan to build a Progressive Web App with Vue.js? Vuesion has got your back. Described as the “most complete boilerplate for production-ready PWAs”, Vuesion focuses on performance, development speed, and best practices. The code is all yours, ready to be modified and build upon, so you can implement the things you actually need, without being limited by the template itself.

To improve prototyping in Vue, there’s the prototyping tool OverVue. It allows you to dynamically create and visualize a Vue app, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.

Have you ever tinkered with the idea of using Vue to power a blog? Ben Hong did, and created a dev environment to help you do the same. Optimized for blogging, the VuePress Blog Boilerplate includes default features like RSS feed generation, a list of recent posts, etc. The minimal setup and Markdown-centered project structure help you focus on writing, and, thanks to the Vue-powered engine, you can use Vue components in Markdown and develop your theme in Vue, too.

For handy Vue snippets, little tips, tricks, useful directives, and nice practices, be sure to also check out the Vue Snippets collection (a small but mighty one indeed!).

7. Create Projects From Cookiecutters

A command-line utility that creates projects from cookiecutters (i.e, project templates)? Cookiecutter does just that. It takes a source directory tree, copies it into your new project, and replaces all the names that are surrounded by templating tags {{ and }} with names it finds in cookiecutter.json.

These can be file names, directory names, and strings of text within files. This enables you to bootstrap a new project from a standard form, skipping all the mistakes that are often involved when starting a new project. Project templates can be in any language or markup format and you can use both local cookiecutters or remote ones from Git or Mercurial repos.

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 week!

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

June 8, 2021 Smashing Newsletter: Issue #304

Previous Issues