Smashing Magazine·5yUseful VS Code Extensions For Web Developers
Meet useful Visual Studio Code extensions for web developers. They can help you minimize slow-downs and frustrations, and boost developer’s workflow along the way. In this post, we look into useful extensions for front-end development, from fine productivity boosters to advanced debugging helpers.
Smashing Magazine·5yUseful Front-End Boilerplates And Starter Kits — Smashing Magazine
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. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful.
Smashing Magazine·5ySVG Generators
SVG generators can be used to create shapes and backgrounds, path visualizers and JSX generators. There are plenty of further options for SVG patterns — for example for repeating background images. JustCode SVG Filters is a visual tool for pretty much all nerdy SVG filtering needs. HeroPatterns provides dozens of repeating patterns.
Smashing Magazine·5yThings You Can Do With CSS Today
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects. In this article, we’ll look into masonry layout, :is selector, clamp() , ch and ex units, updated text decoration, and a few other useful CSS properties.
Smashing Magazine·5yVanilla JavaScript Code Snippets
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. This time, let’s look at vanilla JavaScript code snippets. Snippets are resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.
Smashing Magazine·5yA Simple But Effective Mental Health Routine For Programmers — Smashing Magazine
Maintaining optimal mental health is critical for programmers because most of our work is more mentally demanding than it is physically. We can’t help but want a fairly long break from our computers or working before we can continue with our work. Having a planned list of activities for the day and ensuring we do every activity when we are supposed to allow us to be less stressed and feel more fulfilled.
Smashing Magazine·5yA Guide To CSS Debugging — Smashing Magazine
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. A Guide To CSS Debugging.
Smashing Magazine·5yInteractive Learning Tools For Front-End Developers — Smashing Magazine
interactive coding tools and games to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions, Jamstack and pretty much everything in-between. Interactive Learning Tools For Front-End Developers are curated by SmashingMag's John Defterios. The list includes games that teach you about different parts of the flexbox specification.
Smashing Magazine·5ySeven Mistakes To Avoid In Your Technical Interviews
It’s no secret that the technical interview process leaves something to be desired. In this article, we’ll take a look at seven of the most common mistakes candidates make in their technical interviews. Here are a few tips for your virtual interviews and how to prepare for a technical interview.
Smashing Magazine·5yCSS Generators
This week we’re looking at useful generators for everything CSS: from gradients to drop-shadows and bezier curves to triangles and type scales. SmoothShadow allows you to visually design a layered smooth box-shadow, but also tweak alpha, offset and blur with individual easing curves. Easing Gradients Editor lets you create and preview easing gradients in CSS.
Smashing Magazine·5yCSS Auditing Tools
In a new series of posts, we highlight some of the useful tools and techniques for developers and designers to get their work done better and faster. Over the last few weeks, we’ve been working on refactoring and cleaning up our CSS, and as a result, we stumbled upon a couple of useful tools.
Smashing Magazine·5yLessons Learned Rebuilding A Large E-Commerce Website With Next.js (Case Study) — Smashing Magazine
We made the switch from a more traditional integrated e-commerce platform to a headless platform with Next.js. Here are the most important lessons learned while rebuilding a large e- commerce site with next.js, including how to build a site from the ground up.
Smashing Magazine·5yA Guide To Undoing Mistakes With Git (Part 2)
The Reflog is like a journal where Git notes every movement of the HEAD pointer in your local repository. To undo our grave mistake, we can simply hit CMD + Z on your keyboard to undo the last command — even if you’ve just violently deleted a branch.
Smashing Magazine·5yFrustrating Design Patterns That Need Fixing: Birthday Picker
In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives. These insights are coming from user research and usability tests conducted by yours truly and colleagues in the community. We’ll start with a humble and seemingly harmless pattern that we all had experienced at some point — the infamous birthday picker.
Smashing Magazine·5yFront-End Performance Checklist 2021
An annual front-end performance checklist (available as PDF MS Word ), with everything you need to know to create fast experiences on the web today. Updated since 2016. Back in the day, performance was often a mere afterthought. Now it affects everything from accessibility to usability to search engine optimization.
Smashing Magazine·5yHow To Build An Amazon Product Scraper With Node.js — Smashing Magazine
Web scraping is the practice of extracting large amounts of web data through the use of software. Scraping Amazon product pages can net you invaluable data such as features, prices and reviews. While the act of scraping publicly available data is legal, Amazon has some measures to prevent it on their pages.
Smashing Magazine·5yBuilding A Rich Text Editor (WYSIWYG) From Scratch
In this article, we will learn how to build a WYSIWYG/Rich-Text Editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations. The code for the application is available on GitHub for reference.
Smashing Magazine·5yHow To Create, Edit And Animate SVGs All In One Place With SVGator 3.0
How To Create, Edit And Animate SVGs All In One Place With SVGator 3.0. We will follow a process of creating a custom SVG loader, from drawing it from scratch and applying various visual effects, through creating different types of animations, to exporting your file and preparing it for use on the web.
Smashing Magazine·5yA Complete Guide To Accessible Front-End Components
A Complete Guide To Accessible Front-End Components. From tabs and tables to toggles and tooltips. Skip the table of contents, or just scroll down to explore them one-by-one. Below you’ll find an alphabetical list of all accessible components.
Smashing Magazine·5ySmart CSS Solutions For Common UI Challenges — Smashing Magazine
Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. We’ve also just recently covered CSS auditing tools front-end boilerplates and VS code extensions.
Smashing Magazine·5yGood Vibes In August (2021 Desktop Wallpapers Edition) — Smashing Magazine
New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2021. Created with love by the community for the community, they come in versions with and without a calendar for the month. The wallpapers are designed to look good on smartphones and tablets.
Smashing Magazine·5yThree Front-End Auditing Tools I Discovered Recently — Smashing Magazine
Building a faster website can be a rocket task these days. Here are three less-known tools that might help you get there. Waterfaller focuses on issues in the network waterfall and provides recommendations for improvement. Yellow Lab analyzes your HTML, CSS, and JavaScript and runs a number of audits.
Smashing Magazine·5yGetting Started With Webpack — Smashing Magazine
Webpack is a highly extensible and configurable static module bundler for JavaScript applications. With its extensible nature, you can plug in external loaders and plugins to achieve your end goal. Let’s take a deep dive into what webpack is and how to use it in your development workflow.
Smashing Magazine·5yBuilding A Discord Bot Using Discord.js
An introduction to building a Discord bot using the Discord.js module. The bot will share random jokes, assign or revoke user roles, and post tweets of a specific account to a Discord channel. We’ll cover the process from building the bot up to deploying it to the cloud using Heroku.
Smashing Magazine·5yState Management In Next.js — Smashing Magazine
This article is intended to be used as a primer for managing complex states in a Next.js app. The framework is way too versatile for us to cover all possible use cases. These strategies should fit the vast majority of apps around with little to no adjustments. If you believe there is a relevant pattern to be considered, I look forward to seeing you in the comments section!