Unjani Smashing Friends,
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.
Meet a shiny new Smashing Book by Addy Osmani, “Image Optimization”. Now shipping worldwide.
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.
From our sponsor
Build Web Experiences That Drive Business Growth
CMS Hub enables seamless integration with CRM data for advanced personalization, automation, and dynamic content. Develop locally with the tools and frameworks you prefer, then deploy to HubSpot via the CLI, where marketers can create and edit content with visual design tools. Get started with a free developer test account.
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.
We also have summer bundles with friendly prices and plenty of workshops for upcoming months. 🏖
For the next workshops, we have coming up:
From our sponsor
An Immersive Virtual Office For Your Remote Team
What if you could run into people at the office while you work remotely? Gather makes it possible. Claim a desk, chat by the water cooler, and hold important meetings in an interactive space. Put some presence back in your workday. Trusted by millions worldwide.
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!).
From our sponsor
Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy
Earn your master’s degree online.
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.
From our friends
Stay Up To Date On Emerging Tech
Emerging Tech Brew Newsletter examines the trajectory of cutting-edge tech (and the real-time impacts on business, society, and key players). AI, 5G, crypto, space, autonomous vehicles: the technologies that will shape the future of business, all in one newsletter. Subscribe
today.
8. New On Smashing Job Board
9. Recent Smashing Articles
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
