Medium·4yFantastic CSS border animation
In this article we will use CSS to create a variety of wonderful border effects. The most commonly used one is solid , dashed which appears in the picture above dashed. CSS border also supports none , hidden , dotted , double , groove , ridge , inset , and outset other styles.
Community Picks·4yModern Web App Design Patterns
Design patterns are descriptive, not prescriptive. They can guide you when facing a problem other developers have encountered many times before. They are not a blunt tool for jamming into every scenario. Patterns.dev aims to be a catalog of patterns (for increasing awareness) rather than a checklist (what you must do)
Changelog·4yBun is a fast all-in-one JavaScript runtime
Bun is a modern JavaScript runtime like Node or Deno. It was built from scratch to focus on three main things:Start fast (it has the edge in mind) New levels of performance (extending JavaScriptCore, the engine) Being a great and complete tool (bundler, transpiler, package manager)
CSS-Tricks·4yThe 60 Hottest Front-end Tools of 2021 | CSS-Tricks
The Web Tools Weekly newsletter archives have been compiled into a list of the 60 most popular front-end tools of the past year. I’m sure there are at least one or two listed here that you can start using in your projects today. Some of these tools are super-practical, while others probably only made this list due to curiosity.
Josh W Comeau·4yThe Front-End Developer's Guide to the Terminal
Modern front-end frameworks like React, Angular, and Vue rely heavily on the terminal. If you're not comfortable with command line interfaces, you'll struggle to run a local development server or build your application. We don't really need to know 98% of the stuff you can do with a terminal. Instead, we should focus on the most-important critical fundamentals.
Community Picks·4yHow to Use Three.js And React to Render a 3D Model of Your Self
In this article, we’ll cover how to render and configure 3D assets created in a 3D software program like Blender or Maya in a React project using react-three-fiber. To get a customized 3D model of yourself, We well use Ready Player Me, a free-to-use 3D avatar creator.
Community Picks·4yHow to make github profile readme.md looks awesome.
Go to your Github profile and type the repository name as your owner name. Type your social account name alone: Select what GitHub features you want to display in your profile. Click the public option for your online account name to see what you can use in your GitHub profile. Click the Edit profile button: and type your name, BIO, URL (your personal portfolio website, and location. If you don't have a website and want one.
Hacker News·4yRun Python in your HTML
PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface. It aims to give users a first-class programming language that has consistent styling rules, is more expressive, and is easier to learn. PyScript is just HTML, only a bit (okay, maybe a lot) more powerful, thanks to the rich and accessible ecosystem of Python libraries.
Community Picks·3y5 websites to learn Frontend-web development faster
In this article, I have curated 5 resourceful sites that will help you better you web development skills really fast. Exercism gives you the same path of study with extra challenges to help you grow faster. Below is a roadmap to master the fundamentals of JavaScript using this site.
Community Picks·4yPlease Stop Using Local Storage
Local storage is just one big old JavaScript object that you can attach data to (or remove data from) Local storage provides at least 5MB of data storage across all major web browsers. This is a fairly low limit for people building apps that are data intensive or need to function offline. If the app you're using doesn't fit the above description: don't use local storage.
Dev Genius·4yThe CSS Hack You Need To Know!
The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted HTML tag or element. A common practice implementation for this type of feature would be to use an additional span within an element. The span value is updated as required.
Josh W Comeau·4yMy Wonderful HTML Email Workflow
MJML is a responsive email framework from Mailjet. It essentially provides a layer of abstraction over raw HTML. The MJML language provides a set of common tags you can use to structure your email. As long as you follow the MJML conventions, your email should render properly across all email clients.
DEV·4yLearn this before React
The destructuring rest & spread operator promises map and filter methods. The find method returns the first element that satisfies the condition. FindIndex returns the index of that ["jack", "pritom" The spread operator enables us to spread the content of a iterable (i.e. array) into individual elements Spread. In simple terms promises are used to handle asynchronous operations.
gitconnected·3yJavascript Design Patterns
Singleton design pattern exposes a single instance that can be used by multiple components. Singleton Pattern can be considered the basics of global state management libraries such as Redux or React Context. The factory pattern is preferred in cases where the object creation process depends on dynamic factors.
Hacker News·4yHow we handle 80TB and 5M page views a month for under $400
Poly Haven has 5 million pageviews and 80 terabytes of traffic every month for under $400. Cloudflare All the Way is the reason we can do what we do so easily and so affordably. Nextjs is a framework created by Vercel which improves performance for users around the world.
freeCodeCamp·3yLearn Next.js for Scalable Web Apps
Next.js is built on top of React, which is a popular JavaScript library for building user interfaces. It also includes features such as automatic code splitting and optimized performance out of the box. You will also learn how to deploy the app using Vercel and to sync up GitHub with Vercel.
Changelog·4yLearn PWA
Learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what's different from a classic web app, and how to Window management A PWA outside of the browser manages its own window. In this chapter, you will understand the APIs and capabilities for managing a window.
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.
Hacker News·4yFresh 1.0
Fresh is a new full stack web framework for Deno. By default, web pages built with Fresh send zero JavaScript to the client. The framework has no build step which allows for an order of magnitude improvement in deployment times. Fresh is a routing framework and templating engine that renders pages as they are requested, on a server. It also provides an interface for seamlessly rendering some components on the client for maximum interactivity.
Honeypot·4y6 Best Frontend Communities to Join in 2022
In 2022, there are lots of online developer communities that can scale your learning experience and speed. WeLearnJS is a slack community of JavaScript developers with more than 12,000 members as of June 2022. Reactiflux is an online Discord community of React developers with a massive size of more than 185,000.
Community Picks·4yJavaScript Visualized: Prototypal Inheritance
In an extended class, we can access the parent class' constructor using the super keyword. By default, this object contains a constructor property, which is simply a reference to the chihuahua. But these chihuahuas can also do something special, they have a small bark. Now as you can imagine, the prototype chain doesn't go on forever.
LogRocket·4yHow to detect dead code in a frontend project
Using ESLint to detect and remove dead code in your frontend project.Using webpack for dead code detection.Using TypeScript to detect dead code.Detect unused dependencies with depcheck.Using the no-unused-vars rule to detect unused variables in our files.