CSS {IRL}·4yNew CSS Features In 2022
There are a lot of new CSS features in development as I write this. 2022 is the year that some big ones will be landing in a browser near you. There are potential for big changes in the way we write CSS. I explored some of these new features for Smashing Magazine.
Web Tools Weekly·4yNew MDN, Frameworks, Build, React
Mozilla's web docs, referred to as MDN, have been given a fresh new design. The navigation is simple and broken down into easy-to-digest sections. The individual article pages have also been improved. There's lots more detail in the launch post, including mention of an upcoming optional subscription service.
Simple Thread·4yWeb Standards Are Cool Again
Remix is the latest open-source, fullstack, web development framework to hit the npm registry. It couples web fundamentals like the client/server model, HTTP caching, and native HTML forms with modern UI tools like dynamic page refreshing, nested routing, and React to create a truly remarkable way for developers to create fast, interactive, and portable user experiences.
Geek Culture·4yGetting Started With Three.js
The ability to render 3D objects in the browser opens up many exciting possibilities for creating interactive experiences. Even a simple task such as rendering a cube requires some knowledge in 3D jargon. Hopefully, this article will get you up to speed and provide the necessary basis, which will help you even if you'll require more advanced features later on.
Vercel·4yMonorepos are changing how teams build software – Vercel
Turborepo is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations. Turborepo abstracts the complex configuration needed for monorepos. It provides fast, incremental builds with zero-configuration remote caching.
Pointer·4ymantinedev/mantine: React components library with native dark theme support
Mantine is an open-source, cross-components, state management, and notification system. Mantine has a very friendly community, we are always happy to help you get started:Join Discord community – it is an easiest way to get help, all questions are usually answered in about 30 minutes.
ITNEXT·4yFront-end Testing Strategy
Front-end Testing Strategy defines the different layers of testing and gives an overview of the current situation to propose an effective strategy for testing your software. This article is focused on front-end testing specifically (i.e. React applications and their interactions with components) It is based on testing principles defined by Kent C. Dodds, a famous developer within the React community.
Hashnode·4yLocal Storage and Session Storage (JavaScript)
Local storage and session storage store key-value pairs. Local storage stores an array as a string, while session storage stores a pair. To get an array from local storage, we use JSON.parse. In order to remove a particular key- value pair, we can use localStorage.remove.
Quastor Daily·4yHow Compilers Work
Bob Nystrom wrote an amazing book called Crafting Interpreters, where he goes through how language implementations work. We’ll be giving a summary of one of the chapters with some commentary from yours truly. The difference between programming languages and programming language implementations. Front end, middle end and back end of compilers and a breakdown of what each of these 3 parts do.
DevDojo·4yWhat's the difference between NPM and Yarn?
Yarn is a new package manager for node.js. It is a common project developed by such companies as Facebook, Exponent, Google, and Tilde. NPM is considered to be the largest software registry in the world. The advantages of NPM are ease of use for developers and local package installation.
LogRocket·4yCreating animations with p5.js
P5.js is a JavaScript library used for creative coding. It is free and open-source because they believe software, and the tools to learn it, should be accessible to everyone. The advantage of using the JavaScript programming language is its widespread availability and support everywhere. There are many more benefits, including the following:
LogRocket·4yThe Fetch API is finally coming to Node.js
On 1 February 2022, the Node.js core team merged a pull request adding the Fetch API. Fetch is the de facto standard for making asynchronous calls in web applications. One significant advantage Fetch has over XMLHttpRequest is that it leverages promises, allowing for a simpler and cleaner API while avoiding callback hell.
Better Programming·4yThe Full-Stack Developers’ Setup for macOS Monterey
Installing different PHP versions so that we can switch between each one. We already have PHP installed but we need to config apache too for PHP. We edit again the httpd file with the same command. Find ‘mod_rewrite’ module and add the following modules below. Leave uncommented just the module corresponding to the version of PHP used.
Section·4yNext.js Blog using Typescript and Notion API
Next.js is used to create Server-side Rendering (SSR) and Static Site Generation (SSG) using JavaScript. The app fetches extra data from the server after the browser loads the website’s HTML page. SSG makes the site load even faster, creating a better user experience. This guide will help you learn how to use Next.js with Notion API to create a blog app.
Better Programming·4yThe Micro-Frontends future
The Future of Micro-Frontends. Luca Mezzalira: I have to understand what are the missing pieces of this puzzle and try to picture what would make this architecture approach even better. The topics covered are taking into account client-side, server-side and edge-side implementations of this architecture.
Hashnode·4yDesma - A design system manager for all your projects
Desma is a design system manager where you can create, preview and host all your designs in one single place. The idea of desma is to save multiple features that a design can hold at once. The database relational model consists of User, DesignSystem, Palette, Fonts, Spacing and Color.
Bits and Pieces·4yDo You Really Need a React State Management Library?
The State is not a specific concept of React but a generic one of JavaScript. It is a core concept because it keeps track of the status of our application and describes it over time. React is composed of several components, each of which may have a state. With the introduction of hooks, we can use state also inside functional components.
asayer·4yThe Definitive Guide To Building A FullStack dApp
In this tutorial, we will explore building a complete dApp on the Ethereum network from scratch. We will start the tutorial by setting up our development environment with Hardhat. We’ll build our smart contract in solidity, test that all methods are working in our terminal, deploy the contract, and connect it to our React frontend.
DevDojo·4y19 Valuable GitHub Repositories for Beginner Developers 📚✨
GitHub is a great place to start your web development career. I've compiled a list of some of the best repositories I know. Categories include basics, courses, handbooks, best practices, projects, interviews, and resources. I wish I knew them when I started myself, so treat them as a valuable shortcut.
inDepth.dev·4y101 Javascript Critical Rendering Path
Every webpage has a Document Object Model or a DOM. This is an object-based representation of the entire HTML page, which is in the parsed state. Once the HTML is parsed, a DOM tree is built. The DOM Tree contains objects. The CSS Object Model takes care of the styles present in association with the DOM tree.
Smashing Magazine·4yNew CSS Features In 2022 — Smashing Magazine
Container queries enable us to style an element depending on the size of its parent. This is a crucial difference from media queries, which only query the viewport. This has long been a problem for responsive design, as often we want a component to adapt to its context. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022.
Hashnode·4yMoodflix - Your mood, Our suggestions
Moodflix is a Netflix-clone built with React and Framer Motion. The frontend is written in React and SCSS and the backend is in .NET 6 and .NET Core 6 and Minimal API. The API receives the base64 string image from the Frontend and sends it to the Azure Face API directly. Backend gets a list of movies based on the user's mood.
Quick Code·4yBuild Testing Rules for Your Design System
Discover how to build advanced testing rules with ESLint to ensure compliance with Design System best practices. This is part 2 of the 3-parts “Design System Best Practices with ESLint” series. This series aims to help you encourage those consuming your design system to follow your best practices with the ESLint tool.
Medium·4yHow To Make API Call-In Javascript
JavaScript is a language that helps developers with both frontend and backend work. In JavaScript, it was really important to know how to make HTTP requests and fetch the dynamic data from the server. We are going to study How to call these APIs in Javascript by multiple open source libraries.