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.
Hashnode·5yHow I Built My Perfect Score Portfolio Website
I recently published the fourth version of my portfolio jemimaabu.com. I've always built my portfolios from scratch with HTML and CSS, using as little JavaScript dependency as possible. With this version, I tried to make the code as performant and accessible as possible but still have an interactive site. This article will be about how I managed to achieve that.
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.
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.
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.
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.
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.
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.
Product Hunt·5y#30DaysOfTailwindCSS — The Tailwind CSS Challenge.
Keep yourself accountable while learning Tailwind. Share your process on Twitter with the hashtag. Embed the Tailwind app on your iPhone or iPad to help you stay on top of your learning. Share photos and videos of your progress on Twitter @TailwindTweets and @CNNOpinion.
ITNEXT·5yYes, here’s the best CSS framework in 2021
The best CSS framework depends on 3 things: design, time, team. There are 3 kinds of CSS frameworks: preprocessors, component-based and utility-first. React with styled-components and Tailwind CSS are the two most popular. Bulma has a lot of components for most cases and is clean by default.
freeCodeCamp·5yHow to Build a Programming Project Step by Step
How to Build a Programming Project Step by Step. How to build a programming project: Step by step. Step 1: Set up your project. Step 2: Build your code. Step 3: Test it. Step 4: Test your code again. Step 5: Check your code is working. Step 6: Check it's working.
Hashnode·5yYou can create these elements without JavaScript
As HTML and CSS got new features and older browsers were no longer supported, we've been able to use less and less JavaScript for creating UI elements. Here are some examples of elements you can create with no JavaScript. Some solutions do still feel hacky and not flexible, but these are useful on smaller projects.
Bootstrap·5yBootstrap 5 Beta 3
Bootstrap 5 Beta 3 is the final beta for Bootstrap 5. This release includes a new component, documentation updates, and more. We’ve also fixed some important bugs since our last release, in particular with our dependencies. Next up is our stable release, which is scheduled for March 23, 2021.
Hashnode·5yThe ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀
The most complete cheat sheet compilation you can find online. It took me more than 10 hours to create this compilation. So please remember to ❤️ the article (or maybe all the 10 reactions!) Bookmark the article to save it. Please, hit the follow button above, that's what I need most.
daily.dev·5yTailwind CSS JIT Compiler: First Impression
Tailwind CSS is a utility-first CSS framework. Its PostCSS plugin generates atomic classes that we can use in HTML to style a component rapidly. The problem is that too many classes are produced, and it yields a massive CSS bundle. The new JIT compiler, inspired by Windi CSS, is here to save the day.
CSS-Tricks·5yTools for Auditing CSS
Auditing CSS is not a common task in a developer’s everyday life, but sometimes you just have to do it. In this article, we’ll look at some of the best tools for auditing CSS in Chrome DevTools. We’re using Brave, which is Chromium-based, but you might also want to check out this article.
daily.dev·5yMy Tailwind CSS utility function for creating reusable React components (TypeScript support)
Tailwind CSS is a PostCSS plugin for React. All you need to do to use it is to add it to your postcss.config.js file. The single feature that I like the most about styled-components is the styled function. Tailwind CSS comes with TypeScript support, and it also supports Preact.
