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)
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.
Medium·4y11 Advanced React Interview Questions you should absolutely know (with detailed answers)
React is a tool that allows you to add and remove elements from the DOM. It can be used to make changes to the DOM without having to change the entire DOM. The tool can also be used in conjunction with other tools to make it easier for people to create and edit new elements.
Hashnode·4yLet's Bun!
Bun.js is a Node-API tool that implements most of Node- API (N-API) Bun.js natively supports a growing list of Node core modules along with globals like Buffer and process. Every file is transpiled . TypeScript & JSX just work. & just work bun.js automatically loads environment variables from .env files Web APIs like fetch , WebSocket , and ReadableStream are builtin.
Community Picks·4y11 Advanced React Interview Questions you should absolutely know (with detailed answers)
React code is written in JSX, but no browser can execute JSX directly as they are built to read-only regular JavaScript. Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory. Key helps React identify which items have changed, are added, or are removed, enabling it to reuse already existing DOM elements.
Hashnode·4yJSON Web Token - Guide
JSON Web Token (JWT) is a secure way to transmit information between parties as a JSON object. This information is trustworthy because it is digitally signed. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources with that token.
Hashnode·4yImprove Your Web Development Skills By Building These 5 Projects
The best way to practice and improve your web development skills is to start building web projects. I have listed a few types of projects for you to build so that you can get better at web development. Build an application that displays data from an external API. Try to build a real-world application and don't make it as a mockup/dummy website.
freeCodeCamp·4yHow to Get Started with Node.js – Beginner's Guide to Node
NPM stands for Node Package Manager which help you manage your packages for Node. Node.js is an event-driven, non-blocking IO model. This means it doesn't block itself for one request (but rather immediately moves to the next request) This makes Node extraordinarily fast and efficient.
Hashnode·4yUsing the native web share JavaScript API
The native share function can be invoked with JavaScript. It's mainly built for mobile devices, but some desktop variants like Safari also support it. The code to determine it looks like this: console.log( 'native share available' ); inside this function, we can invoke the native share or use our fallback share mechanism. You can even attach callbacks to our native share API.
freeCodeCamp·4yHow to Update NPM Dependencies
Dependencies can become outdated over time due to bug fixes, new features, and other updates. Outdated packages can pose a threat to security and can have negative effects on performance. Up-to-date packages prevent vulnerabilities. periodic dependency checks and updates are important. In this article, I will go over methods to inspect and upgrade dependencies in detail.
Open Source Way·4yCreate a JavaScript API in 6 minutes
This article demonstrates creating a base API with Express and JavaScript. Express is a NodeJS minimalist web framework. This combination allows for minimal effort to get an API up and running. If you have six minutes of free time, you can get this API working to do something useful.
System Weakness·4yDockerize a MERN Stack app for Production with Security in Mind (Part II)
This post is the 2nd part of a two part series that covers how to make a MERN stack application production-ready with security in mind. The first part of this series was more of a theoretical post to grasp the basic concepts of what we want to achieve.
asayer·4yRedwood, a new framework
Redwood is obsessed with developer experience and eliminating as much boilerplate as possible. It provides a full-stack development process with component development to help you grow from project to startup. Redwood features an end-to-end development workflow for developing React. GraphQL and GraphQL components, as well as the query language for query data.
codeguru·4yTop 10 Security Testing Tools for Developers
Security testing is the practice of evaluating an information system’s security by detecting and exploiting vulnerabilities. With the number of data breaches on the exponential rise, it is more crucial than ever for developers to ensure the security of their websites and applications. There are a number of open-source security testing tools around to help in this endeavor.
freeCodeCamp·4yJavaScript DOM Manipulation Course
In website development, DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from a website document. DOM manipulation is when you use JavaScript to add, remove, and modify elements of a website. Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch)
DZone·4yHow to Build a Full-stack App
In this article, we’ll learn how to build a Full-stack application using Next.js, Prisma, Postgres, and Fastify. We will build an attendance management demo application that manages employees’ attendance. The flow of the app is simple: an administrative user logs in, creates an attendance sheet for the day, then every employee signs in and out of the attendance sheet.
codeguru·4yIntroduction to Web Components API
Web components are HTML elements that leverage the power to create new HTML tags and extend existing tags. They can be easily created using the browser’s API and do not have a dependency on any third-party library or framework. Web components are non-intrusive and have their styling and structure. The power of web components lies in their API.
React Native Example·4yPegava - A beautiful dating app made in React Native
Pegava is an open-source dating app for Android. The app was originally created during the pandemic but was never released. The project is under the The Creative Commons CC0 license. The full responsive design is located here: Figma link. Themes are according to system preferences: Light Mode.IOS.mp4, Dark Mode. IOS.MP4, etc.
freeCodeCamp·4yHow to Build a Full-Stack Authentication App With React, Express, MongoDB, Heroku, and Netlify
This tutorial assumes that you already know the basics of: Nodejs and Express. We'll begin with setting up a database using MongoDB, then we'll create endpoints (login and register), and finish by hosting the endpoints on Heroku. By the end of this tutorial, you will have learned how to use tools such as Nodejs, Express, React, Mongo DB, Heroku, Netlify.
Bits and Pieces·4yWebSockets vs. Server-Sent Events
WebSockets is an advanced technology that enables bidirectional real-time interactive communication between a client and a server. Server-Sent Events (SSE) is a technique that allows a browser to receive automatic updates from a server, such as text-based event data, over a standard HTTP connection.
Hashnode·4yClean Architecture in Frontend – State in Angular
Clean Architecture is a way to isolate an application from frameworks, UI, and databases. It leverages SOLID principles and shows how to put them together on a larger scale. The application layers have a hierarchy. Entities are on the top, and UI is on the bottom. A layer must not have a dependency on any other underlying layer.
System Weakness·4yDockerize a MERN Stack app for Production with Security in Mind (Part I)
Dockerize a MERN Stack app for Production with Security in Mind (Part I) Securing a NodeJS application with Docker and Nginx. The first part of a two-part series that covers how to Dockerize an existing MERN stack application and how to make it ready for production. We are going to focus on availability, reliability, and security.
