gitconnected·5yBuilding a Video Chat App with Node.js + Socket.io + WebRTC
Building a Video Chat App with Node.js + Socket.io + WebRTC Taran Arora shares his tips on how to build a video chat app using JavaScript and NodeJS. It will also show you how to use PeerJS,WebRTC, and Nodemon to build the app.
daily.dev·5yWhy I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?
Styled-components is an open-source JS library that uses the power of JavaScript to create styled React components easily. Tailwind CSS follows the Atomic CSS methodology, where every class sets only one styling rule. The only difference is that you write your CSS in your JS files or even JSX.
Bits and Pieces·5yVSCode Automations for Frontend Developers
VSCode Automations for Frontend Developers Boost your productivity and code quality with these tools and extensions. Nethmi Wijesinghe discusses several VS Code automation tips that frontend developers should follow. Live Server, the cool extension available in VSCode, automates this for you. Turbo Console Log is the perfect choice for writing meaningful log messages.
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.
DevDojo·5yTailwindCSS Hidden Gems 💎
Using the space utility classes, you can easily add equal spacing between your elements instead of using margin. You can also use the divider classes to add dividers between your Elements. Instead of using custom box-shadow values to create rings around elements, can utilize these classes to display the same output.
DEV·5y5 Awesome React Hooks ⚛️
React use lazy load image uses the Intersection Observer API to provide a performant solution to lazy loading images. UseOnClickOutside is one of the bests, with this hook, you can easily capture outside clicks from an element, very useful for a modal for example. UseDocumentTitle allows you to set the page title simple calling it from a component and passing the title string.
Hashnode·5y15 Project Ideas for Web Developers
Building projects improves one's coding skills because learning by creating stuff is more efficient. This article covers project ideas for frontend, backend, and full-stack web developers. Here are some project ideas if you're looking to improve your skills in front-end technologies. The color guesser game is a simple game that allows players to guess the background color.
gitconnected·5yMicro-Frontends: What, why, and how
Rany ElHousieny explains what Micro Frontends are and how to use them. Micro-Frontends architecture was introduced to solve multiple issues with the current SPA frontend development. Companies started to adopt the Module federation approach to migrate from a monolithic application to Microfrontends.
JavaScript in Plain English·5yYour PWA is going to break in August 2021
Google is pausing their plan to roll out this feature. Your PWA is going to break in August 2021. 52% of all PWAs will break with Chrome 93. Google doesn’t like its own solution. So instead you’ll have to build one yourself. That is, unless you can do better than the Dinosaur Game.
CSS-Tricks·5yDid You Know About the :has CSS Selector?
The :has CSS selector is going to have a big impact on how we write CSS in the future. In fact, if it ever ships in browsers, I think it breaks my mental model for how CSS fundamentally works because it would be the first example of a parent selector in CSS. :has isn’t supported in browsers right now (probably for those performance reasons), it is part of the CSS Selectors Level 4 specification.
Hashnode·5yComplete web development roadmap for newbies
This list consists of beginner languages and tools. Advanced topics are not covered. HTML is by far the easiest to learn. JavaScript is a multi-paradigm, high-level language which has evolved to become one of the most popular languages not just in web development but in many other fields.
DEV·5y5 daily resources for Web Developers
This week i want to share some tools i use on pretty often (almost daily) while working as a Web Developer. My top tools include Unsplash, Dribbble, Carbon, Hashnode and Typescript. If you have other resources that you use on a daily basis / pretty often please feel free to drop it in the comments.
DevDojo·5yOne second to read GitHub code with VS Code
GitHub 1s is a browser extension for VS Code. It allows you to open up any Github repo in your browser. You don't even need to install anything to give this a try. Want to read the Laravel repo in VSCode in 1 second? Visit this URL here: https://github1s.com/laravel/Laravel.
CSS-Tricks·5yA Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
The Easy Carousel is a simple carousel component that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. We’re going to be working with quite a bit of JavaScript, React and the DOM API from here on out. Let’s start by bootstrapping a simple React application with styled-components tossed in for styling.
SitePoint·5y9 Best JavaScript and TypeScript ORMs for 2021
Object relational mapping (ORM) makes it possible for you to write queries in the language of your choice. An ORM is beneficial for medium- to large-scale projects that source data from hundreds of database tables. Using an ORM library to build your data layer helps ensure that the database will always remain in a consistent state.
CSS-Tricks·5yHow to Map Mouse Position in CSS
The goal is to create an invisible grid on the screen, and use the :hover pseudo-class to map each ‘cell’ to a set of values that we will allocate to the custom properties. We will use the mouse position to set the value of these properties, and then use them set the .square element’s width and height accordingly.
JavaScript in Plain English·5yBuild Better React apps with Next.js
Next.js is an open-source React front-end framework that adds additional optimization capabilities like server-side rendering (SSR) and static-site generation. SSR allows webpages to load in a fraction of the time and increases user experience with added responsiveness. Using SSR gives you an edge on SEO, which helps your site show up higher on search engine results pages.
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.
freeCodeCamp·5yHow to Create a Portfolio Website – A Beginner Developer's Guide
Jemima Abu is a freelance developer and author. She is the author of Portfolio.com, a guide to creating a portfolio website. She has written several books on the subject, including a book called Portfolio: A Portfolio of Photographs. For more information, visit www.portfolio.co.
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.
Bits and Pieces·5y5 Different Tools for Frontend Monitoring
5 Different tools to monitor the web application frontends live in the user’s browser. Avoiding runtime errors using frontend monitoring tools is a must. Isuri Devindi compares the five tools to find the best one for you. The tools are provided by Microsoft using the Application Insights SDK for Azure Monitor.
CSS-Tricks·5y:where() has a cool specificity trick, too.
The :is() pseudo-selector is now supported in all major browsers. The specificity thing is extra-interesting. Miriam notes some trickery you could do with it, like juicing up specificity without actually selecting anything. If we were to use :where() instead, the specificity of the entire : where() part is zero (0)
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.