In the first article of this series, your author, a JavaScript novice, had set themselves the goal of designing and coding a basic web application. The ‘app’ was to be called ‘In/Out’ — an application to organize team-based games. In this article, Ben Frain is going to concentrate on how the application ‘In/Out’ actually got made.
Read more…
Short-living trends don’t matter much, but the way we design and build things for the web does. That’s why we created Smashing Magazine Print, our brand-new printed magazine, with practical and thought-provoking articles, written to make us all think. Download a free PDF sample (3 MB) or jump to table of contents. Also, free for Smashing Members.
Read more…
Dark patterns are prevailing many of the interfaces we use, and our data is collected, evaluated and handed over to third-parties left and right, often without us noticing at all. Can we fix it? Watch an informal panel discussion, moderated by Vitaly Friedman, exploring questions you have, and the problems that we all need to address. Watch the recording (Vimeo).
Read more…
You don’t need to be a Computer Science graduate or know a JavaScript framework to create a Progressive Web Application. With some HTML and CSS knowledge and basic competency with JavaScript, you have all the skills you need. In three parts, Ben Frain is going to share the journey of designing and building a simple Progressive Web Application called ‘In/Out’, built without a framework. You can view it here.
Read more…
In JavaScript, the Number type cannot safely represent integer values larger than 253. This limitation has forced developers to use inefficient workarounds and third-party libraries. BigInt is a new data type intended to fix that. In this article, Faraz Kelhini will take a good look at BigInt and see how it can help overcome the limitations of the Number type in JavaScript.
Read more…
It’s good to advocate others about accessibility problems, about how to listen better to others in a conversation, how to manage projects, products or even a company better. The most important thing on all these actions is to remember that they are helping other people and not impacting them as well as animals or our environment in general. For his monthly reading list, Anselm Hannemann summarized what has happened in the web development world in the past few weeks. From browser news and UI/UX to privacy, tooling, work and life.
Read more…
While working on his personal website, Jorge Ferreiro had all the code in the same repository: the back end used Node.js and the front end used ES6 with Pug. However, he found some downsides. Yarn workspaces let you organize your project codebase using a monolithic repository (monorepo). In this article, Jorge explains why they’re a great tool and how to create your first monorepo using Yarn with basic npm scripts, and add the required dependencies for each app.
Read more…
If you’re looking for a useful free font with a bit of an edge, look no further than this collection of modern typefaces. These sleek and versatile fonts are perfect for all sorts of designs, from websites to printed material, and they are all completely free for both personal and commercial use. To facilitate your font picking and pairing process, Noemi Stauffer included examples of how these typefaces have been put to use recently, as well as a few pairing ideas. Enjoy!
Read more…
Let’s say that you wish to compile a list of the Oscar winners for best picture, along with their director, starring actors, release date, and run time. Using Google, you can see there are several sites that will list these movies by name, and maybe some additional information, but generally you’ll have to follow through with links to capture all the information you want. Scrapy is a popular open-source Python framework for writing scalable web scrapers. In this tutorial, Daniel Ni will take you step by step through using Scrapy to gather a list of Oscar-winning movies from Wikipedia.
Read more…
Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, in this article, Rachel Andrew will take a look at some of the things which trip people up with regard to using margins. In particular, you will be looking at how margins interact with each other, and how margin collapsing actually works. As with anything in CSS, share with your team the decisions you make, and comment your code!
Read more…
