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…
When you are still early on in your programming career, digging into the source code of open source libraries and frameworks can be a daunting endeavor. Reading source code is difficult at first but it becomes easier with time. The goal is not to understand everything but to come away with a different perspective and new knowledge.In this article, Carl Mungazi shares how he got over his fear and began using source code to improve his knowledge and skills. He also uses Redux to demonstrate how he approaches breaking down a library.
Read more…
Now that some time has passed since the team returned from SmashingConf Toronto, we’ve had time to think about the event and wrap up some of the things we all learned. Take a look. We asked everyone to read and follow our Code Of Conduct, try to create a range of spaces and activities where people can meet like-minded people, and also encourage everyone to follow “The Pac-Man Rule” when standing in a group.
Read more…
In this second installment of Inspired Design Decisions, Andy Clarke will teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. This article will change the way you think about designing with grids.
Read more…
The web is wonderfully diverse and unpredictable because of wonderfully diverse people shaping it. In this new series of short interviews, we talk to interesting people doing interesting work in our industry and sharing what they’ve learned. Today, Vitaly Friedman kindly asked Aaron Pearlman, Principal UX Designer at Deque Systems, to share some practical tools and techniques to ensure that we’re all providing an inclusive and accessible experience for our users.
Read more…
You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. There is more to styling lists in CSS than you might think. In this article, Rachel Andrew starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters.
Read more…
In this second part of our tutorial on building Sketch plugins, Matt Curtis will pick up where he left off with the building of our user interface, and then he’ll move on to the key feature of actually generating our layer mosaics and optimizing the final plugin code. You will learn how to connect the user interface to the core plugin code and how to implement the plugin’s main features. Last but not least, you’ll also learn how to optimize the code and the way the plugin works.
Read more…
