Best of Web Development2022

  1. 1
    Article
    Avatar of medium_jsMedium·4y

    Fantastic 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.

  2. 2
    Article
    Avatar of communityCommunity Picks·4y

    Modern 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)

  3. 3
    Article
    Avatar of communityCommunity Picks·3y

    Advanced TypeScript

    Mapped types are a great way of transforming existing types into new types. We create the helper type that takes a type and maps all properties to be of return type.

  4. 4
    Article
    Avatar of changelogChangelog·4y

    Bun 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)

  5. 5
    Article
    Avatar of css_tricksCSS-Tricks·4y

    The 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.

  6. 6
    Article
    Avatar of joshwcomeauJosh W Comeau·4y

    The 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.

  7. 7
    Article
    Avatar of communityCommunity Picks·4y

    How 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.

  8. 8
    Article
    Avatar of communityCommunity Picks·4y

    How 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.

  9. 9
    Article
    Avatar of hnHacker News·4y

    Run 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.

  10. 10
    Article
    Avatar of communityCommunity Picks·3y

    5 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.

  11. 11
    Article
    Avatar of communityCommunity Picks·4y

    Please 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.

  12. 12
    Article
    Avatar of freecodecampfreeCodeCamp·4y

    Top 30 React Interview Questions and Concepts

    The freeCodeCamp.org course teaches you about 30 common React interview questions and concepts. Nishant Singh developed this course to help you prepare for a React interview.

  13. 13
    Article
    Avatar of devgeniusDev Genius·4y

    The 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.

  14. 14
    Article
    Avatar of joshwcomeauJosh W Comeau·4y

    My 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.

  15. 15
    Article
    Avatar of devtoDEV·4y

    Learn 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.

  16. 16
    Article
    Avatar of gcgitconnected·3y

    Javascript 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.

  17. 17
    Article
    Avatar of hnHacker News·4y

    How 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.

  18. 18
    Article
    Avatar of freecodecampfreeCodeCamp·3y

    Learn 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.

  19. 19
    Article
    Avatar of changelogChangelog·4y

    Learn 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.

  20. 20
    Article
    Avatar of css-irlCSS {IRL}·4y

    New 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.

  21. 21
    Article
    Avatar of hnHacker News·4y

    Fresh 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.

  22. 22
    Article
    Avatar of honeypotHoneypot·4y

    6 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.

  23. 23
    Article
    Avatar of communityCommunity Picks·4y

    JavaScript 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.

  24. 24
    Article
    Avatar of logrocketLogRocket·4y

    How 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.

  25. 25
    Article
    Avatar of communityCommunity Picks·3y

    Moving Letters

    Text animated with JavaScript & anime and anime. Text animated with CNN & anime. Use this to help you with reading comprehension and vocabulary. Use the weekly Newsquiz to test your knowledge of stories you saw on CNN.com and iReport.