You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Let's learn about Frontend Development via these 202 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the /Learn or LearnRepo.com to find the most read blog posts about any technology.
Frontend development is the practice of building the user interface and user experience of websites and web applications. It's essential for creating intuitive, engaging, and responsive digital experiences that users interact with directly.
Modern frontend, game, and web development are the things that WebGL can transform into 3D web masterpieces. It leads to an interactive user experience.
I’ve come quite a long way as a web developer and happened to work in different teams and with different designers. Regardless of the number of people and type
Vite is a build tool similar to Webpack. It can be used for React, Preact, Svelte, Vue, Vanilla JS, and LitElements. Vite is 100 times faster than Webpack and b
Front-end Developers don’t just need to understand how to write CSS, they also need to know how to write it effectively and efficiently. Sometimes we work on huge projects which need optimized CSS for speed meaning, you need efficient selectors to effectively style elements without their ids or classes. This, therefore, calls for a clear understanding of selectors available. Enough of talking let’s jump right to it 😉
For the past few years, Frontend developers have shown partiality towards React, with Vue.js and Angular tagging behind closely. Comparative interest in Vue has held back a bit due to the long-awaited and somewhat delayed Vue 3.0 release. Similarly, the interest in Angular has decreased due to the long delay in shipping Ivy (its frontend renderer).
Console statements create performance or security issues if you mishandle them. This article explains three ways to remove them from your production build.
In this article, I have compiled some of my favorite games built only with HTML, CSS, and JavaScript so that you can get inspiration for your future creations.
Understanding how to apply CSS in your project’s codebase can be invaluable when your project begins to scale. Find out why we need a strong CSS architecture.
Discover how to elevate your codebase by mastering code splitting techniques. Make your project stand out with efficient and scalable front-end architecture
Web security is a topic that is often overlooked by frontend developers. When we assess the quality of the website, we often look at metrics like performance, SEO-friendliness, and accessibility, while the website’s capacity to withstand malicious attacks often falls under the radar. And even though the sensitive user data is stored server-side and significant measures must be taken by backend developers to protect the servers, in the end, the responsibility for securing that data is shared between both backend and frontend. While sensitive data may be safely locked in a backend warehouse, the frontend holds the keys to its front door, and stealing them is often the easiest way to gain access.
Well, we all know that ref helps us to get access to the DOM. But let's consider next situation, we have some React component and we want to know how many times this component was rendered. How can we achieve that? Well, maybe we can use React useEffect and useState hooks to determine that the component was re-rendered. Something like this:
Today we'll be making this cute chicken follow your mouse! We will use JavaScript to make the eyes of this CSS chick follow where ever your mouse goes.
Recently I came across the issue of using the auth module in Nuxt.js and invoking a $router.push in subsequent line of code in the same method. The conundrum began when the lines after the auth.loginWith method did not execute as intended since the page was redirected to the redirect URI.
React library provides us two built-in hooks to optimize the performance of our app: useMemo & useCallback. At first glance, it might look like their usage is quite similar, so it can get confusing about when to use each. To clear that confusion, let’s dig in and understand the actual difference and the correct way to use them both.
React Best Practices, How to get the most out of React library and what steps you should take.React is one of the most popular front-end libraries for JS
JavaScript is a complex language. If you’re a JavaScript developer at any level, it’s important to understand its foundational concepts. This article tackles 12 concepts that are critical for any JS developer to understand, but in no way represents the full breadth of what a JS developer should know.
I will be continuously updating this list in a Github repository called JS Tips & Tidbits. Please star ⭐ and share if you want to follow along!
If you plan to enhance your experience in frontend development, ViteJs is the next-generation tool you should consider. Let's understand why Vite is faster.
When you are creating a website there are several factors to take in count. One is that any website today has to be easy to read on mobile and desktop versions, it has to be friendly and also you should try to make it look good.
Hello guys, you might have heard about GraphQL, another exciting technology. GraphQL is gaining a lot of popularity because of its superiority over traditional REST APIs.
To make the adoption of low-code technology hassle-free, this platform comparison guide covers a lot of basic as well as more advanced information to evaluate the top low-code platforms.
These are 8 projects with requirements and designs that you can do to add to your portfolio as a Front-end Developer. The order of these projects is from easy to intermediate level.
Webcrumbs Frontend AI is an open-source tool for front-end coding. It uses artificial intelligence to generate code components directly from images or text.
On one of the projects I worked on, there were 8 services that used Auth0 for front-end authentication and a rotated static token for back-end authentication.
Started as a simple charting tool for monitoring a snow depth near the owner’s country house in Norway, Highcharts quickly became one of the most popular visualization libraries. It provides a lot of great built-in interactive features and is easy to use.In this tutorial we are going to build a simple e-commerce dashboard with Cube.js and Highcharts. We’ll use the main Highcharts library, as well as Maps, Stock, and Solid Gauge modules.
In this article, we will discuss what Chakra UI is, its core features and capabilities and by the end you should be able to decide if Chakra UI is a good fit.
"Don’t repeat yourself." Every programmer has this concept drilled into their head when first learning to code. Any time you have code you find yourself duplicating in several places, it’s time to abstract that code away into a class or a function. But how does this apply to user interfaces? How do you avoid re-writing the same HTML and CSS over and over again?
Discover how to apply Domain-Driven Design principles to decompose micro-frontends. Improve your front-end architecture and enhance your development workflow.
Creating a new product comes with lots of ideas and requires numerous technologies. The idea of choosing the right framework matters a lot. Learn how to choose
TezJS is a modern JavaScript framework, allowing you to build a modern Jamstack website by achieving highest website performance & 98+ web vital out of the box
In this project, we are going to build GitHub user Search App using Github API. We will design the UI of the app using Tailwind CSS with Next.js as a framework.
The useImperativeHandle hook allows developers to customize the methods and properties exposed by a component, enhancing flexibility and maintainability.
After sharing my post describing what a UI Developer is, I got some requests to write another post specifically about how to get a UI Developer job. It's certainly not an obvious path. My first job out of college was working for my alma mater in the Art Department media lab, during which time all I knew was that I wanted to transition into web development.
I have been working in the automation field for more than a decade, and have seen automation tools evolve in unique ways. During the earlier years, when AI technologies weren’t prevalent, I remember how our automation team faced particular and unavoidable challenges which we, at that time, thought were some of the trickiest to resolve from our end. But we accepted it as just a part of daily life in the automation world and adapted to it.
React redux todo app tutorial : In this tutorial we will build Todo List app with animations using Framer-motion. With react-redux we will use redux-toolkit.
The vast majority of things a frontend engineers need to do can be done without knowing anything about the backend other than the API. If you work on different parts of the frontend for long enough though, you'll probably run into something that does require some backend knowledge. Here's the short list of topics that a frontend engineer should know about the backend.
Twitter Bootstrap is the most popular CSS framework. It has been so since its first release in 2011. Its constantly rising popularity begs the question: what aspect of it allows room for the different look and feel of millions of websites that are built on top of it? In this article, I demonstrate how to modify Bootstrap 4 according to a design that has its own color theme, responsive breakpoints and spacing styles.
3 cool things that will make you love micro frontend architecture - flexibility in managing codebase, a wide choice of frameworks, and independent deployments.
One of the greatest benefits of composable, headless commerce is the flexibility it introduces to the developer experience of building shopping experiences.
What is the better Agora alternative for video conferencing? What other solutions bring on the table when compared to Agora. Read how I created an app.
A CSS selector is a set of rules which will allow us to style any HTML element. In
CSS there are many different selectors, they will also explain in detail and a descriptive
example of each of them.
What is Redux : A beginners guide. Redux is very important if you're using state in your web app. Especially if you're React Developer then you must learn Redux
Tired of massive node_modules? Learn how to build a modern, reactive SPA using zero dependencies with native Web Components, Proxies, and the History API.
Learn how to enhance your website with CSS scroll-driven animations, transforming static content into dynamic experiences effortlessly with no JavaScript.
React Hooks have been around since React 16.8 and remain as popular and in demand as ever. They have introduced a completely new way of handling components in React, which may lead you to reevaluate your approach to coding on a fundamental level. Having already been established as the most beloved front-end framework according to Stackoverflow popularity polls, React went above and beyond with the introduction of Hooks.
When you need to create a Single Page Application, your first idea should be to search for the best framework to implement it. We have a lot of frameworks but 3 are very famous: Angular, React, and Vue.js. Today I will teach you about Angular, its advantages, disadvantages, and how you can start to learn it.
I was given a task to replicate the newsweek website and I thought that would be a walk in the park until I started working on the project. My focus will be on the red/orange background of the header used on that website, as shown on the image above and how I was able to come up with the design using the clip-path property in CSS3.
Still.js is a modern, open-source JavaScript framework designed for building enterprise-grade web applications without relying on bundlers or transpilers.
You all must be familiar with the importance of CSS. How is it an invertible part of web development? When a person decides to step ahead in web development, HT
We live in a fast-moving world which has moved past the known desktops and big-screen laptops to portable mobile devices. Gone are the days when websites were built for big-screen users. Now, they are built majorly for mobile users. This development, which is no longer new as it used to be has finally come to stay in our world. Developers must then keep pace with this reality in other to be relevant and to also serve their clients, and most importantly, the end-users well.
I moved from Istanbul to LA and found the same Figma files waiting. Reflections on nomadic remote work, timezone pain, and why stability matters for design....
Learn how to build a customizable logo builder app with Next.js, shadcn/ui, html2canvas-pro, and Lucide Icons. Follow our step-by-step guide to create and perso
This little introduction to CSS Flexbox should help you to get a first impression and give you some examples to play around with. From here you will be able to integrate this powerful framework into your own projects.
CSS is one of those things we see get thrown around but not really explained. If it does, we only get to scratch the technical surface. Over the years, CSS has grown from something that makes the web prettier into a tool that can be infused with user experience psychology and conversion inducing patterns. To add to it all, the differences in browsers and screen size requirements push CSS’ potential to be complex through requirements just a little bit further.
Usually, when we are making a web page, we need to use the code that we created before in other projects. That means that we are going to redo the same features over and over again.
If your company needed a real-time service tomorrow, could you evaluate Go versus Node.js versus Elixir objectively? Or would you default to what you know?
The promise of AI agents is immense productivity gains. But putting them into production can be a tale of two extremes: surprisingly fast or painfully slow.
In this article, we’re going to dive into the basics of HTML. We’ll explain what it is and what are the 3 basic components to create an HTML. Let’s go!
Welcome to the first 10 days of the ultimate frontend challenge with me. This article details what to expect in your first ten days of front-end development.
Nowadays, web pages use CSS and CSS provides a lot of chances to make different things. Gradients and a pie done by using gradients are some example of them.
Today I'm pleased to interview Ajdin Imsirovic, senior developer, author and teacher of two brand new Angular courses on Learnetto - The Free Visual Guide to Getting Started with Angular and The Complete Practical Angular Course.
What it actually looks like to run 7 simultaneous projects solo with ADHD - the failures, the systems that survived, and why I'll never take a cofounder....
It is interesting to everyone who started his journey in web development positioning element through in single display with tons of properties. It comes a time that all elements start behaving itself not in a way we want.
Web development includes client-side scripting, server-side scripting, server and network security setup, e-commerce development, and content management system
First of all, web development is an interesting discipline because things are always changing, evolving, and improving. But, as a beginner to front end web development, the constant change could be a barrier to your learning and motivation.
I realized I needed something different. Not another generic team bot, but a Personal AI Assistant — one that knows my specific context, my preferred shortcuts
DNS resolution is the first thing that happens when a request is made to a remote server. It is a process of finding the computer-friendly address of the remote server using a human-friendly domain name.
There is a myth that the easiest thing about web development is building a web-page layout. Based on this, some developers decide not to waste time on learning a competent approach to layout. And it’s in vain. There are many ambiguous moments in the layout, which are worth paying attention to.
Often, I need to 'tell' Netlify the Node version for my sites, and often I can't find the correct docs for this. Here's a potential solution, if you can relate.
Building website these is one thing, building an accessible and useable website is another thing entirely as it requires some expertise and use of accessibility tools.
Until recently, I was only browsing the site as a user. Yes, of course, I noticed that the appearance of the pages of sites that I view on the Internet changes over time.
