You might be wondering, “Why should I use this instead of the alternatives?” Sapper is based on Svelte, which is known for its speed and relatively small bundle size. In a world where performance plays a huge role in determining an effective user experience, we want to optimize for that. In this article, Daniel Madalitso Phiri will take you through how to build a Svelte-powered static blog with Sapper and Strapi, as well as how to deploy the website to Netlify. You’ll understand how to build a static website, as well as use the power of a headless CMS, with a real-world example. So, let’s get started building our minimal blog, starting with our Sapper front end.
Read more…
This tutorial is for illustrators who also happen to be passionate car enthusiasts. If you follow me along, you will learn how to draw from scratch in Sketch the legendary Porsche 911, all in vectors. Together, we will be pushing Sketch to its limits and you will learn how to create an almost photo realistic car by using basic shapes, layer styles, and various Sketch features. No bitmap images will be used, which means the final vector illustration could be scaled up to any size with no loss of detail.
Read more…
Just like during the Renaissance, we’re living in times of incredible cultural and artistic innovation. As the Internet evolves, browsers align, capabilities are added and accessibility of technology becomes easier, designers face new opportunities to create, think, and change their status with no-code tools. In this article, Uri Paz presents some tools that allow non-programmers to create application software through graphical user interfaces and configuration, instead of traditional computer programming.
Read more…
With Angular Material and ng2-charts, you can take advantage of schematics to cut down the effort and time you may spend building a dashboard. Schematics in Angular 9 are code generators that can create components and patterns in projects using predetermined templates and layouts. In this article, Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substantially reduce the time and work that goes into building a dashboard.
Read more…
This tutorial is for illustrators who also happen to be passionate car enthusiasts. If you follow along, you will learn how to draw from scratch in Sketch the legendary Porsche 911 — all in vectors.
Read more…
Styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles. While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given birth to a new way to construct and manage our styles in a component-specific manner, otherwise knows as CSS-in-JS.
Read more…
Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies. In this tutorial, Timi Omoyeni explains what you need to keep in mind when building a desktop application with Vue.js using the Vue CLI Plugin Electron Builder.
Read more…
What’s new at Smashing? When’s the next event? Did you miss out on anything? Don’t worry, you’ll find everything gathered here in one place so you don’t need to have a hundred tabs open. (Yes, it has been that busy!) Unfortunately, the effects of COVID-19 are still so wide-reaching throughout the world, so that the Smashing team has had to make big changes to our plans this year.
Read more…
In this article, Mike Rogers will introduce you to Stimulus, a modest JavaScript framework that complements your existing HTML. It allowed him to build applications in a way that feels reusable and approachable. While he doesn’t think Stimulus will take over the web like React and Vue have, he thinks it is a worthwhile tool to learn. By the end, you’ll have an understanding of the premise of Stimulus and why it’s a useful tool to have in your backpack.
Read more…
There is a high possibility that a lot of components in your React application will have to make calls to an API to retrieve data that will be displayed to your users. It’s already possible to do that using the componentDidMount() lifecycle method, but with the introduction of Hooks, you can build a custom hook which will fetch and cache the data for you. That’s what Ademola Adegbuyi will cover with this tutorial.
Read more…
