web-development.md

<img src="https://hackernoon.com/banner-image.png" alt="drawing" width="1012"/>

# [web-development](https://hackernoon.com/tagged/web-development)
### Let's learn about [Web Development](https://hackernoon.com/tagged/web-development) via these 500 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the [/Learn](https://hackernoon.com/learn) or [LearnRepo.com](https://learnrepo.com) to find the most read blog posts about any technology.

HTML/CSS, Javascript, Angular, React, and other stories by those who build the frontend of the Internet. 

### [1. How it feels to learn JavaScript in 2016](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f)
![](https://hackernoon.com/hn-images/1*raWO3dhM4jMjf9VY-kZzNg.png)
<em>No </em><a href="https://hackernoon.com/tagged/javascript" target="_blank"><em>JavaScript</em></a><em> frameworks were created during the writing of this article.</em>

### [2. RESTful API Designing guidelines — The best practices](https://hackernoon.com/restful-api-designing-guidelines-the-best-practices-60e1d954e7c9)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-jn03bhs.jpeg)
Facebook, Google, Github, Netflix and few other tech giants have given a chance to the developers and products to consume their data through APIs, and became a platform for them.<br>Even if you are not writing APIs for other developers and products, it is always very healthy for your application to have beautifully crafted APIs.

### [3. How to Delete Commits From Remote in Git](https://hackernoon.com/how-to-delete-commits-from-remote-in-git)
![](https://cdn.hackernoon.com/images/F5gTIpXdNXNVmAUTxDpKaCk15XY2-13d3fpo.jpeg)
This article explains how to remove commits from a remote server in Git.

### [4. Top 10 System Design Interview Questions for Software Engineers](https://hackernoon.com/top-10-system-design-interview-questions-for-software-engineers-8561290f0444)
![](https://hackernoon.com/hn-images/1*HlEnTE32sMEIH6WzVISntQ.png)
Designing Large Scale Distributed Systems has become the standard part of the software engineering interviews. Engineers struggle with System Design Interviews (SDIs), primarily because of the following two reasons:

### [5. 5 Best JavaScript Frameworks in 2017](https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282)
![](https://cdn.hackernoon.com/drafts/pd2p3y41.png)
JavaScript popularity continues its rising. In 2016 we’ve witnessed such great changes, as AngularJS entire upgrade and introduction of Angular 2, ultimate dominating of jQuery that is applied on 96.5% of all JS sites, evolution of ECMAScript, two updates of Node.js in April and October accordingly, React finest hours, and even more. What to expect from 2017? — Here’s what we know so far: Angular 4 is expected in March 2017, ES2017 edition is planned for mid-2017, Bootstrap v4 release should be anticipated this year as well.

### [6. Copying text to clipboard with JavaScript](https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f)
![](https://cdn.hackernoon.com/hn-images/1*f2eZ4JeqO2TMkuNwwVN4gg.png)
In this article, I will be explaining in depth how the copyToClipboard snippet from 30 seconds of code works. You can find the source code for it and a ton of other useful methods in the project’s repository.

### [7. Top 10 Python Web Frameworks to Learn in 2018](https://hackernoon.com/top-10-python-web-frameworks-to-learn-in-2018-b2ebab969d1a)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-6i03atl.jpeg)
Frameworks make developers’ lives easier by offering them a structure for application development. They automate the implementation of common solutions, cutting development time and allowing developers to focus more on application logic instead of routine elements.

### [8. 21 Best Developer Portfolio Examples](https://hackernoon.com/21-best-developer-portfolio-examples-p61j31wi)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-n11e31ct.jpeg)
21 Awesome DEV portfolios for your inspiration

### [9. How To Take Screenshots In The Browser Using JavaScript](https://hackernoon.com/how-to-take-screenshots-in-the-browser-using-javascript-l92k3xq7)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMYtW3HmjyRZIy54jKC8y5dnTZ6f1-cn63eof.jpeg?alt=media&token=ad6b951f-6a79-4666-805c-c89d8f4684f5)
Taking screenshots in-browser (or 'client-side') is all about tradeoffs - there's no perfect solution for every situation. Let's take a look at three different ways you can take screenshots, and then how you can use them by sending them to a server or letting the user download the image.

### [10. How to Centre an Element in CSS with Tailwind](https://hackernoon.com/how-to-centre-an-element-in-css-with-tailwind)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-9n93pxk.jpeg)
In this guide, we'll be covering how you can vertically and horizontally center an element or text with tailwind.

### [11. 10 things I learned making the fastest site in the world](https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
This post is about performance techniques, so I hope you won’t mind that the site in question is not quite finished.

### [12. How To Install Bash On Windows 10](https://hackernoon.com/how-to-install-bash-on-windows-10-lqb73yj3)
![](https://cdn.hackernoon.com/drafts/l1143y25.png)
Microsoft recently joined hands with Canonical (the parent company of Ubuntu) to bring the entire userland into Windows, minus the Linux Kernel. So as a result, you, as a developer, get access to the whole range of Ubuntu command-line tools and utilities with bash shell integrated with Windows. Let’s look at how we can install Bash on Windows 10 and take full advantage of the new feature.

### [13. How to Update Object Key Values Using Javascript](https://hackernoon.com/how-to-update-object-key-values-using-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-tja3pyz.png)
Javascript objects consist of key-value pairs and are one of the most common data structures in Javascript.

### [14. Continuous Integration. CircleCI vs Travis CI vs Jenkins](https://hackernoon.com/continuous-integration-circleci-vs-travis-ci-vs-jenkins-41a1c2bd95f5)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-hq03b1r.png)
Continuous Integration (CI) is a software development practice that is based on a frequent integration of the code into a shared repository. Each check-in is then verified by an automated build.

### [15. Web Components: Build UI Kits for all UI Frameworks](https://hackernoon.com/web-components-build-ui-kits-for-all-ui-frameworks)
![](https://cdn.hackernoon.com/images/wmWlJ9kWduhdUN4zFBLm1GV0d3r2-hd033ue.jpeg)
Master Web Components API - Shadow DOM, Custom Elements, Slots, HTML Templates. Learn to build native, reusable, framework-agnostic UI Kits for modern web apps.

### [16. Node.js vs PHP: Which is better for web development?](https://hackernoon.com/nodejs-vs-php-which-is-better-for-your-web-development-he7oa24wp)
![](https://cdn.hackernoon.com/images/ksx324lo.jpg)
Web development seems to be a diverse & ever-changing field. New technologies and tools come up regularly, due to which app programmers and developers have to face the dilemma. They get confused between the long term and mature solutions & the new upcoming ones.

### [17. ASP.NET Core Razor Pages Vs MVC: Which Will Create Better Web Apps in 2018?](https://hackernoon.com/asp-net-core-razor-pages-vs-mvc-which-will-create-better-web-apps-in-2018-bd137ae0acaa)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-oh03bn3.png)
<em>Brace yourself because this is going to be a lengthy but informative article!</em>

### [18. A crash course on testing with Node.js](https://hackernoon.com/a-crash-course-on-testing-with-node-js-6c7428d3da02)
![](https://cdn.hackernoon.com/hn-images/1*xb953KRkHolnT1uPk6kM8Q.jpeg)
JavaScript is a beautiful language. You must believe I’m crazy. Maybe you’re crazy for agreeing with me. But why would I say something like this? As a language, JavaScript gives you no support whatsoever. It bites your head off if you give it the slightest chance, and it has bizarre error messages if left unhandled. So you tell me, why is it beautiful?

### [19. Setting Scroll Position in React](https://hackernoon.com/setting-scroll-position-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-kla3rz9.jpeg)
In this article, we will explore how web developers can use the scrollTo() method to set a scroll position to specific coordinates or DOM elements in React

### [20. How to Find Open Source Projects for Beginners](https://hackernoon.com/how-to-find-open-source-projects-for-beginners)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-nh339aw.jpeg)
I think, fundamentally, open source does tend to be more stable software. It's the right way to do things. - Linus Torvalds

### [21. Building a Serverless REST API with Node.js and MongoDB](https://hackernoon.com/building-a-serverless-rest-api-with-node-js-and-mongodb-2e0ed0638f47)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-oi83xus.jpeg)
The Serverless movement has gained a bit of momentum in the past few months. Everybody seems to be talking about it. Some would even call it a revolution! But, let’s not get too excited. Don’t be like me. I get too hyped up about cool stuff like this, and start writing articles. If this is all new to you, here’s a piece I wrote a while back, explaining the core concepts.

### [22. Go: The Complete Guide to Profiling Your Code](https://hackernoon.com/go-the-complete-guide-to-profiling-your-code-h51r3waz)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F1TK1GF25j4howhTpHIP368t3NKs2-588z139m.jpeg?alt=media&token=a174dd63-8c5f-47db-82da-a2beba435e6e)
Go is a programming language often used for applications in which performance matters. Optimizing your code based on assumptions is not a best practice of course. You need to have insights about your code performance and bottlenecks to be able to optimize it efficiently.

### [23. Web App Development in 2022: Everything You Need to Know](https://hackernoon.com/web-app-development-in-2022-everything-you-need-to-know)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-qt93pfy.jpeg)
This blog will discuss the various steps to building progressive web apps.

### [24. 10 Frontend Projects to Take Your Coding Skills to the Next Level](https://hackernoon.com/10-frontend-projects-to-take-your-coding-skills-to-the-next-level)
![](https://cdn.hackernoon.com/images/Xc0KXgvV5JdgW2DnkpC3TTUBpoY2-ko93pyw.jpeg)
Improve your front-end development skills and expand your portfolio with these 10 front-end projects. Take your coding game to the next level!

### [25. How to Set Default Value of Props in Vue?](https://hackernoon.com/how-to-set-default-value-of-props-in-vue)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-76b3ky9.jpeg)
Sometimes properties require default values to avoid code breaking errors when designing components in Vue. Let's look at how to give props default values.

### [26. Create React App is Dead! Here are Some Alternatives](https://hackernoon.com/create-react-app-is-dead-here-are-some-alternatives)
![](https://cdn.hackernoon.com/images/LeMjfcP9FWQwYDMppEvlEeeIomE2-id92ikt.jpeg)
CRA may be "dead", but there are many alternative tools available for building React applications that offer superior performance and faster development times. 

### [27. Part 2: How to stop me harvesting credit card numbers and passwords from your site](https://hackernoon.com/part-2-how-to-stop-me-harvesting-credit-card-numbers-and-passwords-from-your-site-844f739659b9)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
I wrote a post recently describing how I distributed malicious code that gathers credit card numbers and passwords from thousands of sites in a way that’s quite difficult to detect.

### [28. 11 things I learned reading the flexbox spec](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b)
![](https://hackernoon.com/hn-images/1*Y1xY5s_DFPRaZzTwpfb_WQ.png)
I’ve always found flexbox pretty easy to work with — a breath of fresh air after years of floating and clearfixing.

### [29. How to Set up a Formatting Standard in Your Code Editor (And Why You Should!)](https://hackernoon.com/how-to-set-up-a-formatting-standard-in-your-code-editor-and-why-you-should)
![](https://cdn.hackernoon.com/images/chDXuB6Q8sgQGp1TgJW4wl9ir0K2-jne28w2.jpeg)
In this post I'll show how to maintain a standard for everyone who works in the code, no matter the editor used.

### [30. 19 things I learnt reading the NodeJSdocs](https://hackernoon.com/19-things-i-learnt-reading-the-nodejs-docs-8a2dcc7f307f)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
I’d like to think I know Node pretty well. I haven’t written a web site that doesn’t use it for about 3 years now. But I’ve never actually sat down and read the docs.

### [31. 110% Complete JWT Authentication with Django & React - 2020](https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta)
![](https://cdn.hackernoon.com/drafts/1gn2er5.png)
ReactJS is a fantastic frontend framework, and Django is a fantastic backend framework. However, as usual when dealing with anything of more than trivial complexity, it isn’t easy to get the two to place nicely together. It's not like taping a banana to a wall.

### [32. What is the difference between web design and web development?](https://hackernoon.com/what-is-the-difference-between-web-design-and-web-development-cc23171de85c)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-oo035y2.png)
I remember in my early stages of learning <em>web development</em>, that I found myself confused multiple times about the differences between design and development. What are the roles of a web designer? What is involved in working with web design? Are web design and web development the same? Are they interchangeable terms with the same meaning?

### [33. 7+ Best Courses to Learn Web Development for Beginners](https://hackernoon.com/7-courses-to-learn-web-development-for-beginners-best-of-lot-c91m1325l)
![](https://cdn.hackernoon.com/images/lp1m3zsv.jpg)
Hello all, if you are thinking to learn about Web Development or want to become a web developer then you have come to the right place. In this article, I am going to share some of the best online courses you can take to learn Web development in depth.

### [34. The Programming Languages Dominating 2022](https://hackernoon.com/the-programming-languages-dominating-2022)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-zn93y9u.jpeg)
The following is a list of the top 10 programming languages in 2022:

### [35. Cleanup Functions in React’s UseEffect Hook — Explained with examples](https://hackernoon.com/cleanup-functions-in-reacts-useeffect-hook-explained)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-owa3u68.jpeg)
Cleanup functions in React’s useEffect hook allow us to stop side effects that no longer need to be executed in the component.

### [36. How to Get SSL/HTTPS for Localhost](https://hackernoon.com/how-to-get-sslhttps-for-localhost-i11s3342)
![](https://cdn.hackernoon.com/images/3msc2eMd3GQDyk2Wgg5I2BP5BHb2-pf1w32gi.jpeg)
A step-by-step guide for getting to https://localhost:3000 Create a certificate to make ourselves a Certificate Authority (CA) that can sign SSL certificates.

### [37. React + WebGL. Different ways of creating 3D apps with React.](https://hackernoon.com/react-webgl-different-ways-of-creating-3d-apps-with-react-3af844f61257)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-1803b14.png)
In this article I’ll describe some libraries/frameworks that are used to create 3D online games and websites with React. This article is not about disadvantages of each way, it explains possibilities and features that may be useful to complete your goals.

### [38. Choosing the Right Package Manager: NPM, Yarn, or PNPM?](https://hackernoon.com/choosing-the-right-package-manager-npm-yarn-or-pnpm)
![](https://cdn.hackernoon.com/images/gfw4NxkUQKPp2R0AkcTiS85lGiG2-h993tkg.jpeg)
PNPM is a drop-in replacement for npm and is much faster and more efficient than its predecessor. It is highly disk efficient and solves inherent issues in npm.

### [39. 19 Little-Known Programming Myths](https://hackernoon.com/19-little-known-programming-myths-mt543y43)
![](https://cdn.hackernoon.com/images/tay33y35.gif)
You might think a profession based on logic and learning would be immune to folklore, but the developer community remains rife with myth — myths so pervasive they begin to manifest into reality.

### [40. Adding the loading component (spinner) to an Angular application](https://hackernoon.com/adding-the-loading-component-ngx-spinner-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-pp92mxn.jpeg)
Application example built with Angular 14 and adding the loading (spinner) component using the ngx-spinner library.

### [41. How to Set Up a Monorepo With Vite, TypeScript, and Pnpm Workspaces](https://hackernoon.com/how-to-set-up-a-monorepo-with-vite-typescript-and-pnpm-workspaces)
![](https://cdn.hackernoon.com/images/8SbntZgz0Gd3BdNeT9KrdzGK6wv1-3ea3ncq.jpeg)
In this article, we will talk about how to set up a monorepo with Vite, Typescript, and pnpm workspaces.

### [42. Top 5 Online Courses to Learn Python in 2023— Best of Lot](https://hackernoon.com/top-5-courses-to-learn-python-in-2020-best-of-lot-bdq3y42)
![](hn-images/1*wpamGlQOohAHjxLuOYIwUw.jpeg)
How to become a Python Programmer in 2020?

### [43. How to Build a Simple Blog Using Node.js](https://hackernoon.com/how-to-build-a-simple-blog-using-node-js-4ccdce39e78f)
![](https://cdn.hackernoon.com/images/mj1232i5.jpg)
In this tutorial I’m going to show you how to create a simple blog using Node.js and Cosmic JS. This is going to be the fastest and most light-weight blog you have ever created. Let’s get started.

### [44. How to Export HTML Tables into PDF Documents Using JavaScript](https://hackernoon.com/how-to-export-html-tables-into-pdf-documents-using-javascript-1z223wnq)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FD7Hn3CmOHedLjdaXSIpRfZ5ezZG3-11e3zcn.jpeg?alt=media&token=9113a6e9-a645-441a-9663-78abced28cc1)
Web apps that contain tables, charts, and graphs often include an option to export the data as a PDF. Have you ever wondered, as a user,  what's going on under the hood when you click that button?

### [45. 19 GitHub Repositories to Make you a 10x Developer](https://hackernoon.com/19-github-repositories-to-make-you-a-10x-developer)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-lr93zsf.jpeg)
Invaluable pointers about repositories on GitHub that offer immense value to developers that are at the early stages of their journey.

### [46. Using Session Cookies Vs. JWT for Authentication](https://hackernoon.com/using-session-cookies-vs-jwt-for-authentication-sd2v3vci)
![](https://cdn.hackernoon.com/images/t6yk3y1h.jpg)
HTTP is a stateless protocol and is used to transmit data. It enables the communication between the client side and the server side. It was originally established to build a connection between web browsers and web servers.

### [47. Top 10 Popular VS Code Themes You Need to Try in 2023](https://hackernoon.com/top-10-popular-vs-code-themes-you-need-to-try-in-2023)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-n5k3p1j.jpeg)
Discover the top 10 popular VS Code themes for 2023. From dark to light, minimalist to custom themes, find the best syntax highlighting color themes for Visual.

### [48. 12 cool things you can do with GitHub](https://hackernoon.com/12-cool-things-you-can-do-with-github-f3e0424cf2f0)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
I can’t for the life of me think of an intro, so…

### [49. JavaScript Just Became 10X faster Thanks to a New Game-changing Feature From Chrome](https://hackernoon.com/javascript-just-became-10x-faster-thanks-to-a-new-game-changing-feature-from-chrome)
![](https://cdn.hackernoon.com/images/bmBxAWmM4deEc5kuo2xk1JIWyeN2-wr139o7.png)
Chrome's V8 team just dropped a game-changing feature that makes JavaScript blazingly fast!

### [50. 18 Awesome Linux Themes For Your Inspiration 🎨😍](https://hackernoon.com/18-awesome-linux-themes-for-your-inspiration)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-x803a7x.jpeg)


### [51. Function Composition with Lodash](https://hackernoon.com/function-composition-with-lodash-d30eb50153d1)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-3883881.jpeg)
Have you been reading JavaScript posts lately? Maybe you’ve noticed that functional programming is really popular right now. It’s a really powerful way to program, but can be overwhelming to get started with. Thankfully the most popular NPM package (with 48 million downloads this month) has a very useful functional programming package to help us get started!

### [52. How To Write Semantic HTML](https://hackernoon.com/how-to-write-semantic-html-dkq3ulo)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FfLcpK1xNykXN0a6Y4nGDUtw9rFs1-gpcd23oh.jpeg?alt=media&token=fe199bc9-d30d-4bd4-a9ac-843245aab45a)
As a Microverse Student in the last time, I have been struggling with some HTML and CSS projects. They challenged me to learn new features of these technologies all the time. My projects were made gradually trying to follow good practices but none was as striking for me as the use of semantic HTML. 

### [53. 10x Performance Increases: Optimizing a Static Site](https://hackernoon.com/optimizing-a-static-site-d5ab6899f249)
![](https://cdn.hackernoon.com/images/10-x-speed-xsmtmbc58kq5wb1tj3j5aup3.png)
A couple months ago, I was traveling outside of the U.S. and wanted to show a friend a link on my personal (static) site. I tried navigating to my website, but it took much longer than I anticipated. There’s absolutely nothing dynamic about it — it has animations and some responsive design, but the content always stays the same. I was pretty appalled at the results, ~4s to DOMContentLoaded, and 6.8s for a full page load. There were 20 requests for a <em>static site</em>, with 1mb of total data transferred. I was accustomed to my 1Gb/s, low latency <a href="https://hackernoon.com/tagged/internet" target="_blank">internet</a> in Los Angeles connecting to my server in San Francisco, which made this monstrosity seem lightning fast. In Italy, at 8mb/s, it was a different picture entirely.

### [54. Celebrating Women in STEM and Encouraging the Next Generation](https://hackernoon.com/celebrating-women-in-stem-and-encouraging-the-next-generation)
![](https://cdn.hackernoon.com/images/QCzUXmup1gWrS723VFnOS8C4jQ03-4393pxg.jpeg)
By increasing girls' access to STEM education and resources, we can work to close the gender gap in STEM and create a more diverse and inclusive workforce. 

### [55. How Fintech Business Founders Can Develop Crypto Trading Apps](https://hackernoon.com/how-fintech-business-founders-can-develop-crypto-trading-apps)
![](https://cdn.hackernoon.com/images/HxX5zpJrSjbKoBatGSx5asOP36H2-cr93540.jpeg)
MobiDev prepared an ultimate crypto trading app development guide to help fintech enthusiasts avoid common pitfalls and create a successful crypto product.

### [56. The Best CSS Unit For a Responsive Design](https://hackernoon.com/the-best-css-unit-for-a-responsive-design-ku6q37to)
![](https://images.unsplash.com/photo-1523437113738-bbd3cc89fb19?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
CSS units are very important when creating a responsive website and you might wonder which one to use considering we have several CSS units. I had the same issue while working on a project, so I did some research on it. In this article, I will show you the most suitable CSS units to use for responsive design.

### [57. What is Python Good for? Why Beginner Should Learn Python?](https://hackernoon.com/10-reasons-to-learn-python-in-2018-f473dc35e2ee)
![](https://cdn.hackernoon.com/hn-images/1*jVKTE1dd8CVv4WEtcidCPA.png)
Data science and machine learning are the two main things Python is perfect for. Code simplicity, higher salary, and automation are just some of the best reasons to Learn Python, if you're on the fence about it. 

### [58. Inside the Affiliate Marketing Product Boom: A Founder's Perspective on Market Trends](https://hackernoon.com/inside-the-affiliate-marketing-product-boom-a-founders-perspective-on-market-trends)
![](https://cdn.hackernoon.com/images/cqsz5t15YjPQZzGO09SPPk0POLs2-x2832hz.jpeg)
The affiliate marketing industry is experiencing robust growth with 9,600 global services and companies related to affiliate marketing in 2023

### [59. Invisible Barriers That Prevent You From Learning Web Development and How to Break Through Them](https://hackernoon.com/the-great-filter-of-web-development-and-how-to-break-through-it-9s27q3t0m)
![](https://cdn.hackernoon.com/images/uba73th8.jpg)
The hidden cost of frustrating, demotivating web development MOOCs!

### [60. How to Remove the Last Element of a JavaScript Array](https://hackernoon.com/how-to-remove-the-last-element-of-a-javascript-array)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-xt93s9y.jpeg)
One of the most frequent operations we perform on an array is removing the last element. There are a few different ways to do this - but one of the most common 

### [61. Mastering Type-Safe JSON Serialization in TypeScript](https://hackernoon.com/mastering-type-safe-json-serialization-in-typescript)
![](https://cdn.hackernoon.com/images/bJKRfuzGGgcDbBCYzVZSUx2jX9J3-86a3wwp.jpeg)
How to utilize TypeScript for type-safe serialization and deserialization of data in JSON format.

### [62. 6 Best WebGL Libraries for Perfect 3D Web Graphics](https://hackernoon.com/6-best-webgl-libraries-for-perfect-3d-web-graphics)
![](https://cdn.hackernoon.com/images/C9EsKR37QbhulXhxzVP6McyHlXw1-f5036qp.jpeg)
Modern frontend, game, and web development are the things that WebGL can transform into 3D web masterpieces. It leads to an interactive user experience.

### [63. How to Use Type Casting in Typescript](https://hackernoon.com/how-to-use-type-casting-in-typescript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-31a3ofx.jpeg)
To cast something in TypeScript, we use the 'as' keywords. Here's how type casting works in TypeScript.

### [64. 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020](https://hackernoon.com/7-frontend-javascript-trends-and-tools-you-should-know-for-2020-fb1476e41083)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-z703bby.webp)
The JavaScript world is moving&nbsp;fast.

### [65. 🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠](https://hackernoon.com/24-coolest-vscode-extensions-that-will-rock-your-world-xpi3t0j)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FbFFEe4dIUoXgbouiLfgW9PI9b8q1-esx3tue.jpeg?alt=media&token=f0a7f0dd-0095-4eef-9276-d253df149f49)
Are you looking for the amazing VS Code extensions for your web app? Then Here is the amazing collection of the best vs code extensions of 2020.

### [66. How to use componentWillMount with Functional Components in React](https://hackernoon.com/how-to-use-componentwillmount-with-functional-components-in-react-fc143u9d)
![](https://cdn.hackernoon.com/drafts/mv1331n3.png)
Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal.

### [67. The advantages of building your website from scratch](https://hackernoon.com/the-advantages-of-building-your-website-from-scratch-da5748a1baaf)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-wg03bnh.jpeg)
Most of the people I talk with regarding the product or website that I am developing, tend to ask if I’m using any frameworks or libraries. When I say none, they usually look very surprised and ask, “Why!? It’s far easier to use a library, and it saves a lot of development time”. They make me question myself again and again, but every time I confirm that I made the right decision. Each and every single line of code that makes my product alive is written by me, by my own way of thinking, and my own creative ideas. It may not be perfect, maybe even off the web guidelines, but this is how you learn!

### [68. An Intro to Coding for Kids: What Every Parent Should Know](https://hackernoon.com/an-intro-to-coding-for-kids-what-every-parent-should-know)
![](https://cdn.hackernoon.com/images/QCzUXmup1gWrS723VFnOS8C4jQ03-bra3pa4.jpeg)
The correct coding platform can foster an environment where your child can explore their curiosity and better understand how technology influences the world. 

### [69. 15 HTML element methods you’ve potentially never heard of](https://hackernoon.com/15-html-element-methods-youve-potentially-never-heard-of-fc6863e41b2a)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
Note to self: write an intro that eases the reader into the article, rather than just jump right in.

### [70. Building React Forms with Formik, Yup, React-Bootstrap with a Minimal Amount of Pain and Suffering](https://hackernoon.com/building-react-forms-with-formik-yup-and-react-bootstrap-with-a-minimal-amount-of-pain-and-suffering-1sfk3xv8)
![](https://cdn.hackernoon.com/images/gzft3xdd.jpg)
A few days ago I applied for a front-end dev job and heard back from the company. They followed up with an email and wanted me to complete a React coding challenge on HackerRank as part of the interview process. The test consisted of only two question and pertained to React. 

### [71. Documenting GraphQL APIs](https://hackernoon.com/documenting-graphql-apis)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-ul13o13.png)
The main reason for writing API documentation is to make your API understandable. For GraphQL there are many options. Both interactive and static documentation.

### [72. How To Create Box Element Using CSS Only](https://hackernoon.com/how-to-create-box-element-using-css-only-7mut3ytc)
![](https://cdn.hackernoon.com/images/gm1i43778.jpg)
Every beginner should first start with the basics. In case of CSS, the basics are learning the box model. Before proceeding with learning any other CSS concepts, this is the one you should master first!

### [73. How to Build a Masonry Layout Using CSS](https://hackernoon.com/how-to-build-a-masonry-layout-using-css)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-2d93qjj.jpeg)
Masonry layout is when items of varying sizes are laid out so there aren't any uneven gaps. 

### [74. How to Use .env Environment Variables in Vue](https://hackernoon.com/how-to-use-env-environment-variables-in-vue)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-n3a3o3b.jpeg)
Vue.js also lets us use .env variables, but it works slightly differently. So let's look at how to use .env variables in Vue.

### [75. What are Table Attributes and Their Advantages in HTML? ](https://hackernoon.com/what-are-table-attributes-and-their-advantages-in-html)
![](https://cdn.hackernoon.com/images/D5K7ZArNVIanNYwNmJJhCWKKUX03-63b3kzz.jpeg)
Read this article to know more about the table attributes and the advantages of table attributes in HTML.

### [76. Best Examples of Apps Written in React.js](https://hackernoon.com/best-examples-of-apps-written-in-reactjs)
![](https://cdn.hackernoon.com/images/xWx1eln9Ida9r216TnPyHFrKw1J2-8q93sd7.jpeg)
Want to see the real-world applications of React.js? Explore a collection of the best apps built with React.js and get inspired for your own projects.

### [77. Top 10 Javascript File Managers](https://hackernoon.com/top-10-javascript-file-managers-8o2p34vw)
![](https://cdn.hackernoon.com/images/DgIHgUcx99gVUPhnmk5o7713Bzl2-ef7o31ix.jpeg)
File management is a helpful tool in any business application. Here is an overview of the most functional, elegant, and popular JavaScript File Managers ready to be built into the client-server solution. Even if you do not have a direct need to work with files, you can borrow the classic file explorer interface for other tasks. For instance, there are some cases of the classic interface becoming the basis for a new web application in this article.

### [78. 12 Top Websites for Programmers, Developers, and Product People](https://hackernoon.com/12-top-websites-for-programmers-developers-and-product-people-cr3t3tnk)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FaE5PClARwsZvXf9S1jUNjlPrg2y1-6cc23lm.jpeg?alt=media&token=0f636d5e-e2b5-45ce-a891-b7bf1954e92c)
1. StackExchange

### [79. How Coding Education Prepares Kids for Life – Not Just Careers](https://hackernoon.com/how-coding-education-prepares-kids-for-life---not-just-careers)
![](https://cdn.hackernoon.com/images/QCzUXmup1gWrS723VFnOS8C4jQ03-4b93p2u.jpeg)
It's increasingly important for children to learn how to use technology and understand how it works – for everyday life and better careers.  

### [80. Implement a Dynamic Breadcrumb in React/NextJS](https://hackernoon.com/implement-a-dynamic-breadcrumb-in-reactnextjs)
![](https://cdn.hackernoon.com/images/KLWopdD8nMNFrlEbvhSNqn6YAW72-oc02kdn.jpeg)


### [81. Building Progressive Web Application (PWA) with Angular](https://hackernoon.com/building-progressive-web-application-pwa-with-angular)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-s892rzj.jpeg)
Application example built with Angular 14 and adding the Progressive Web Application (PWA) using the @angular/pwa library.

### [82. How to Render 3D Model in a React JS Application](https://hackernoon.com/how-to-render-3d-model-in-a-react-js-application)
![](https://cdn.hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-t7a3vtn.jpeg)
In this article we are going to use Three.js to render an iPhone model in a React application. We will use react-three/fiber and react-three/drei.

### [83. Top 10 JavaScript Charting Libraries for Every Data Visualization Need](https://hackernoon.com/10-javascript-charting-libraries-data-visualization-b77523d23372)
![](https://cdn.hackernoon.com/images/ZNTx3q8wbUelzPbxjpCOKItuZar1-5ih35sr.jpeg)
There're numerous JavaScript charting libraries. To make your life easier, I decided to share my picks. Check out the best JS libraries for creating web charts!

### [84. Set Up Webpack 5 To Work With Static Files](https://hackernoon.com/set-up-webpack-to-work-with-static-files)
![](https://cdn.hackernoon.com/images/RJQZvFU148YjNOndYa5BZPkZHvc2-0xa2k6p.jpeg)
In this tutorial, you'll learn how to set up webpack to work with static files in a development environment and how to configure it for multiple use cases.

### [85. Developer Experience Supremacy: Here’s What Industry Experts Say About It](https://hackernoon.com/developer-experience-supremacy-heres-what-industrial-experts-say-about-it)
![](https://cdn.hackernoon.com/images/hQ098u52DzPm2Y4UITQcQXtLRAk2-w1b3nrr.jpeg)
The focus on enhancing the developer experience is evolving rapidly post COVID, as businesses embark on the digitization journey. What really does this entail?

### [86. 4 Google Chrome Extensions That Improve My Coding Workflow](https://hackernoon.com/4-google-chrome-extensions-that-improve-my-coding-workflow)
![](https://cdn.hackernoon.com/images/vLdnVhWwyhfSFQROZt7q2eW6f5R2-1ag3qs9.jpeg)
The four Google Chrome Extensions that I base my coding workflow around are YouCode, Web Developer, Window Resizer for Developer, Wappalyzer all on the store. 

### [87. Advanced JavaScript Tutorial: How to Reload a Page with Location.reload(true)](https://hackernoon.com/advanced-javascript-tutorial-how-to-reload-a-page-with-locationreloadtrue)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-m692k92.jpeg)
Have you ever felt like you needed to start over and press the refresh button? 

### [88. PHP Laravel VS Symfony: A Detailed Comparison of Web Development Frameworks](https://hackernoon.com/php-laravel-vs-symfony-a-detailed-comparison-of-web-development-frameworks-sq493y3l)
![](https://cdn.hackernoon.com/drafts/wyuj29a5.png)
When PHP developers need to prepare any enterprise-grade web application, they often prefer to use a framework.

### [89. 5 Caching Mechanisms to Speed Up Your Application](https://hackernoon.com/5-caching-mechanisms-to-speed-up-your-application)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-tr93or1.jpeg)
In this article, we will discuss the various Caching strategies available and how to choose the right one for your use case.

### [90. React vs. JavaScript: Why React Web Apps Are Better than Plain Websites](https://hackernoon.com/react-vs-javascript-why-react-web-apps-are-better-than-plain-websites)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-s0037h6.jpeg)
With single-page apps taking over the world, this is the perfect time to know how React won the battle of React vs JavaScript and why you should care.

### [91. The React Developer RoadMap](https://hackernoon.com/the-2020-reactjs-developer-roadmap-8q143yan)
![](https://cdn.hackernoon.com/images/pq25y3ylr.jpg)
An illustrated guide to becoming a Read JS Developer with links to relevant courses

### [92. How I Create Websites: The Process of Web Development](https://hackernoon.com/how-i-create-websites-the-process-of-web-development-1s993y3t)
![](https://cdn.hackernoon.com/images/j3rj3y6t.jpg)
Many people, especially beginners, think that developing a website is purely about coding, but it’s not like that. There a lot of other things that you need to do if you wanna create at least a decent website. The part when you actually make a website with code or with WordPress or some other CMS is just a small part.

### [93. Storing and Retrieving Data in Next.js Using LocalStorage and TypeScript](https://hackernoon.com/storing-and-retrieving-data-in-nextjs-using-localstorage-and-typescript)
![](https://cdn.hackernoon.com/images/77WjQmBCAIQ7dyhZ22Bkui5QTrb2-7xa3u1k.jpeg)
Want to persist data in Next.js without using a lib or any third parties to achieve that, and still have the data not change or reset after refresh?

### [94. 32 Awesome JavaScript Snippets (one-liners) You Should Use in 2023 ](https://hackernoon.com/32-awesome-javascript-snippets-one-liners-you-should-use-in-2023)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-n692kiv.jpeg)
I'd like to share some useful JavaScript stuff I have saved 

### [95. Understanding CORS: Why It's Important and How it Works](https://hackernoon.com/understanding-cors-why-its-important-and-how-it-works)
![](https://cdn.hackernoon.com/images/7DtulTMuZUNhuHGe0I2LlQhRAdu1-q893pa1.jpeg)
This article will explain what CORS is, how it works, and why it is important.

### [96. The Complete Guide to Deploying NestJS Application on Render](https://hackernoon.com/the-complete-guide-to-deploying-nestjs-application-on-render)
![](https://cdn.hackernoon.com/images/X4ThwtFJeGPTC6vD51nVmiEVYNz1-jai3tk6.jpeg)
Learn how to seamlessly deploy your NestJS server applications using Render, a powerful alternative to Heroku. 

### [97. Creating a Middleware in Golang for JWT based Authentication](https://hackernoon.com/creating-a-middleware-in-golang-for-jwt-based-authentication-cx3f32z8)
![](https://images.unsplash.com/photo-1508830524289-0adcbe822b40?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Golang has been a popular language over the past few years known for it's simplicity and great out-of-the-box support for building web applications and for concurrency heavy processing. Similarly, JWT (JSON Web Tokens) are turning into an increasingly popular way of authenticating users. In this post I shall go over how to create an authentication middleware for Golang that can restrict certain parts of your web app to require authentication. 

### [98. How to Show a Modal Dialog in Angular](https://hackernoon.com/how-to-show-a-modal-dialog-in-angular)
![](https://cdn.hackernoon.com/images/fUG9tQllIdORs3JAidyCdli1ZX03-pw93tvh.jpeg)
Learn how to show modal dialogs in Angular using @developer-partners/ngx-modal-dialog library.

### [99. The Evolution of Web Interfaces: Balancing Aesthetics and Functionality in Frontend Development](https://hackernoon.com/the-evolution-of-web-interfaces-balancing-aesthetics-and-functionality-in-frontend-development)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-nk82mwd.jpeg)
A good interface in 2024 is a world apart from that of the early days of the internet.

### [100. 5 Free JavaScript Spreadsheet Libraries in 2021](https://hackernoon.com/5-free-javascript-spreadsheet-libraries-in-2021-581r3zfn)
![](https://cdn.hackernoon.com/images/DgIHgUcx99gVUPhnmk5o7713Bzl2-4ud31pg.jpeg)
Spreadsheet libraries are in high demand today. Such solutions are convenient as they offer ready-made applications, save the developers' time and the owners' money. They can be used in any business domain to deal with big amounts of data.

### [101. Deploy Your Personal Web-Page With Hugo, Cloudflare and GitHub 100% For Free](https://hackernoon.com/deploy-your-personal-web-page-with-hugo-cloudflare-and-github-100percent-for-free)
![](https://cdn.hackernoon.com/images/7VSCPGQsadPKgblLb7AQviRi2pN2-pt93pku.jpeg)
This article describes how to deploy a website for 10 mins and free

### [102. How to Build an Employee Management CRUD App with Angular and Material UI](https://hackernoon.com/how-to-build-an-employee-management-crud-app-with-angular-and-material-ui)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-9493wad.jpeg)
Here, you'll learn how to create an employee management crud app  using Angular and Material UI. This is a step-by-step easy beginners friendly tutorial.

### [103. OpenAPI 3.0 Schema with Swagger UI for Django RESTful App](https://hackernoon.com/openapi-30-schema-with-swagger-ui-for-django-restful-app-4w293zje)
![](https://hackernoon.com/images/li90jlkwtdTSl5NgzQ3zK1VD1Lh2-cohe258s.jpeg)
Let’s use drf-spectacular to simplify creation of beautiful docs for your Django application according to the OpenAPI Specification version 3. Sounds easy? It wasn’t for me…

### [104. The Top 66 Developer Resources From 2017](https://hackernoon.com/the-top-66-developer-resources-from-2017-e82531365e6d)
![](https://cdn.hackernoon.com/drafts/wzy32sk.png)
Update 2019:

### [105. Deploying a Kubernetes Cluster on CentOS](https://hackernoon.com/how-to-deploy-kubernetes-cluster-on-centos)
![](https://cdn.hackernoon.com/images/vQVev4NFjpTAx2LBcNbvgMET3t13-eu93oea.jpeg)
In this article, we will explore the steps needed to deploy Kubernetes on CentOS.

### [106. I Developed A Visual Development Tool For Web Applications with React](https://hackernoon.com/i-developed-a-visual-development-tool-for-web-applications-with-react-gmbr3280)
![](https://cdn.hackernoon.com/drafts/apmk3220.png)
Hi, my name is Alex, I’m the author of Webcodesk. In this article, I want to tell you why I created Webcodesk and why I consider it a great tool to develop Web applications with React.

### [107. Stop Infinite Scrolling on Your Website - Now!](https://hackernoon.com/stop-infinite-scrolling-on-your-website-now-ie6rg31eu)
![](images/4n6xb314t.jpg)
Do people love infinite scrolling on the websites they visit or are theyfine with clicking on ‘Read more’ or ‘View more?’ Infinite scrolling eliminatesthe need for pagination which is the process of separating digital content into different pages. Here’s my view on infinite scrolling and why it is a recipe for disaster.

### [108. Building Your First App Using C++ Builder (Part 1)](https://hackernoon.com/building-your-first-app-using-c-builder-part-1)
![](https://cdn.hackernoon.com/images/PA0fnWDjxvVYx1SHEh857BzHi0d2-w80371q.jpeg)
Building mobile applications can be tasking sometimes. In this article, we will share a few steps you can take to build your first app using a free IDE.

### [109. Enhancing Global Communication: The Power of Multi-Language JavaScript OCR APIs for Document Process](https://hackernoon.com/enhancing-global-communication-the-power-of-multi-language-javascript-ocr-apis-for-document-process)
![](https://cdn.hackernoon.com/images/0sm1KIKmbZhu9AD2GAr4cKywoN43-50030xr.png)
Multi-language JavaScript OCR APIs enhance global document processing, streamline communication, and break language barriers for businesses worldwide.

### [110. Building a Simple Web App with Rust and WebAssembly: A Step-by-Step Guide](https://hackernoon.com/building-a-simple-web-app-with-rust-and-webassembly-a-step-by-step-guide)
![](https://cdn.hackernoon.com/images/xJY7Mil1Iaawpy4gQe2JjaeojZY2-u0a36xm.jpeg)
Learn to build a high-performance web application using Rust and WebAssembly.

### [111. How to Use Swift for Web Development](https://hackernoon.com/how-to-use-swift-for-web-development)
![](https://cdn.hackernoon.com/images/cnk75wzdkHOamvwE3F8u3w3Q3Ni1-q9d35yp.jpeg)
In this article I'll introduce you the web technology that I created myself which can compete with the most popular web frameworks like Angular, React, an Vue!

### [112. Golang - How to Parse JSON Data in Go](https://hackernoon.com/golang-how-to-parse-json-data-in-go)
![](https://cdn.hackernoon.com/images/YwsrgyMKpGcOvxUwE1TaB86Dtsp1-ema20nr.jpeg)
Want to parse JSON data in Go? Learn the step-by-step process of parsing JSON and accessing its data in Go with this comprehensive guide.

### [113. HTTP Made Easy: Understanding the Web Client-Server Communication](https://hackernoon.com/http-made-easy-understanding-the-web-client-server-communication-yz783vg3)
![](https://cdn.hackernoon.com/images/jot3yv6.jpg)
If you are anywhere related to web development, understanding the concepts of HTTP plays a vital role. So let us understand more about HTTP and its concepts in brief. 

### [114. Why You Must Use Next.js to Get the Benefits of React](https://hackernoon.com/is-nextjs-a-better-choice-than-react-in-2022)
![](https://cdn.hackernoon.com/images/rklQdWiRIHQDhmQ2G0J4cCI4OQZ2-1n93ocl.jpeg)


### [115. How to Migrate a React Project from JavaScript to TypeScript](https://hackernoon.com/how-to-migrate-a-react-project-from-javascript-to-typescript)
![](https://cdn.hackernoon.com/images/rIVD9uGtDyTmdfox8lpMYgJi5AZ2-gs93xx7.jpeg)
Learn all you need to know to successfully migrate your React project from Javascript to Typescript. 

### [116. How To Use Debounce in Next.js](https://hackernoon.com/how-to-use-debounce-in-nextjs)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-rv93qqx.jpeg)
Understanding Debounce in Next.js


### [117. 4 Reasons Why React JS Has Taken Over the Front End Web Development](https://hackernoon.com/4-reasons-why-react-js-has-taken-over-the-front-end-web-development)
![](https://cdn.hackernoon.com/images/XzHPuJxAd3aeUjUxw9gCGbNFUEI3-pr93na0.jpeg)
React.Js has taken the role of a standard resource in front-end development and here are some of the reasons why the language has done so well recently.

### [118. 12 Project Ideas for Aspiring Web and Mobile Developers](https://hackernoon.com/12-project-ideas-for-aspiring-web-and-mobile-developers)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-f993vxj.jpeg)
Enhance coding skills with hands-on projects.

### [119. There Is No Job Security in IT: Here Are My Three Suggestions to Cope With That](https://hackernoon.com/there-is-no-job-security-in-it-here-are-my-three-suggestions-to-cope-with-that)
![](https://cdn.hackernoon.com/images/3O6oKhmVHLPgbBNX2t1sXDLzMPw2-vs92gyg.jpeg)
Today, I saw another wave of layoffs happening in the IT industry. In IT, there is no job security. Here are my three suggestions for coping with that.

### [120. Creating and validating a reactive form to an Angular application](https://hackernoon.com/how-to-create-and-validate-a-reactive-form-in-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-2w92k5r.jpeg)
Application example built with Angular 14 and creating and validating a reactive form.

### [121. Functional Programming With JavaScript: A Deep Dive](https://hackernoon.com/functional-programming-with-javascript-a-deep-dive)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-6693q5x.png)
Unlock the power of functional programming in JavaScript! Learn key concepts, practical examples, and unleash its potential in your projects.

### [122. How to Make a Silky Smooth Scroll in React](https://hackernoon.com/how-to-make-a-silky-smooth-scroll-in-react-5dj3xdl)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FAfhPK3r2CnS0HnAUc2Oiew1S9lr2-2m6p272t.jpeg?alt=media&token=943d6ccf-b897-4633-9aaa-6761a1225a34)
Have you ever been working on a project and wanted to scroll smoothly through your app?

### [123. Making TypeScript Truly "Strongly Typed"](https://hackernoon.com/making-typescript-truly-strongly-typed)
![](https://cdn.hackernoon.com/images/an-impregnable-fortress-in-mountains-for-ultimate-safety-in-anime-style-k353ac03couox6u9bf5ttzjc.png)
How to Control the "Any" Type to Achieve Ultimate Type Safety With TypeScript.

### [124. Best Practice in CSS: Organisation and Naming Conventions](https://hackernoon.com/best-practice-in-css-organisation-and-naming-conventions-4d103ujy)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FhfSgQwxB6xYCYEG3BOWouytkBTJ3-hg8t3twj.webp?alt=media&token=0f1ea01e-27e9-4450-b7cb-be4a803db561)
I've been writing code for over three years. I have always asked myself about the good practices and how I could make my code more readable, understandable, easy to maintain and to be handled by other developers.

### [125. VS Code Tutorial: How To Set Up A React.js Project With Next.js](https://hackernoon.com/vs-code-tutorial-how-to-set-up-a-reactjs-project-with-nextjs-312f350f)
![](https://cdn.hackernoon.com/images/FDUgRy4yNwdp4HN61oIOnBbaprl1-99gi34l9.jpeg)
Express.js framework provides inbuild APIs which are very useful to build fast and scalable applications efficiently with React.js.

### [126. Scraping Information From LinkedIn Into CSV using Python](https://hackernoon.com/scraping-information-from-linkedin-into-csv-using-python-tkh3ulu)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3cCim8rBZJhpW4Sslh3jQt0CCVQ2-op6m3ugt.jpeg?alt=media&token=e99ae8ee-9088-43a6-a042-b0aceb6795b7)
In this post, we are going to scrape data from Linkedin using Python and a Web Scraping Tool. We are going to extract Company Name, Website, Industry, Company Size, Number of employees, Headquarters Address, and Specialties.

### [127. Building a Real-Time Chat Application with Websocket ](https://hackernoon.com/building-a-real-time-chat-application-with-websocket)
![](https://cdn.hackernoon.com/images/7kL2qGvz0EMioZPUQK1EKKpqxG62-qra3myt.jpeg)


### [128. Why Vite is Better Than Create-React-App (CRA)](https://hackernoon.com/why-vite-is-better-than-create-react-app-cra)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-h693svh.jpeg)
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

### [129. Using JavaScript to Create and Generate UUIDs](https://hackernoon.com/using-javascript-to-create-and-generate-uuids)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-2m93san.jpeg)
Universally Unique Identifiers (UUIDs) are used everywhere in software development for everything from identifying object elements to DOM elements on a web page

### [130. 7 Hardest Programming Languages to Learn in 2023](https://hackernoon.com/7-hardest-programming-languages-to-learn-in-2023)
![](https://cdn.hackernoon.com/images/z4FtguZPWCYj9xd2L27NXWvIgDl1-gf83zog.jpeg)
If you're a thrill seeker and up for a challenge, you're in luck because I'm here to give you a rundown of the top most mind-bending programming languages.

### [131. You're Not Using HTTP Status Codes Right](https://hackernoon.com/youre-not-using-http-status-codes-right)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-nf93rr3.jpeg)
In this article, we will be discussing some of the common mistakes that developers do when using HTTP status codes.

### [132. Using React Router v6 for Private and Public Routes with Access Validation](https://hackernoon.com/2-2-using-react-router-v6-for-private-and-public-routes-with-access-validation)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-ktb3wzl.jpeg)
In essence, React Router is a routing library designed for React-based web applications. Its main purpose is to facilitate navigation between components or view

### [133. A Guide to Angular Signals With Practical Use Cases (Part 1)](https://hackernoon.com/a-guide-to-angular-signals-with-practical-use-cases-part-1)
![](https://cdn.hackernoon.com/images/MppoGnEe7vYWhYy8162Auiz1Mzj1-er933j0.jpeg)
Part 1: A detailed exploration of Angular Signals, touching on three use cases and their practical applications.

### [134. 7 Wastes In Lean Software Development [And How To Prevent Them]](https://hackernoon.com/7-wastes-in-lean-software-development-and-how-to-prevent-them-7bi3tqp)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FPKYLDw43RfPs4NUIItD67CxXTnm2-7fr3uz6.jpeg?alt=media&token=80f7a7e8-2d5c-4beb-8fdd-cb765d91db20)
In the 1930s, the Toyota Production System gave us lean manufacturing principles. Now, the IT, software and web development industry have also adopted these principles to improve their production processes. In actuality, the concepts and principles of Lean are used in more ways than just in manufacturing. Yet, in IT and software, there are still those who are pointing towards Agile development when they mention Lean and software development in the same context. While it is true that Agile and Lean principles share similar philosophies, there are key differences which set them apart. Diving deep inside Lean, I will discuss what lean talks about other than it’s key points.

### [135. How We Started Sharing Code Between Projects as a Team](https://hackernoon.com/how-we-started-sharing-components-as-a-team-d863657afaca)
![](https://cdn.hackernoon.com/images/Rd8z9ArVMycSceC003hxVrAXoj23-f403ath.png)
<em>The Story of how we share and sync our components and modules between projects as a team using a tool built for the job called </em><a href="https://bitsrc.io" target="_blank"><em>Bit</em></a><em>.</em>

### [136. Angular 16: A New Way to Get Route Information in Angular](https://hackernoon.com/angular-16-a-new-way-to-get-route-information-in-angular)
![](https://cdn.hackernoon.com/images/PVFFOBwUgvdGgbt8giYgcREA5aB2-kva3uzp.jpeg)
Angular 16 introduces a simpler way to obtain route information through @Input. Streamlined code, enhanced development experience. Embrace the power of Angular 

### [137. How to Retrieve Player Stats from the NHL's undocumented REST API](https://hackernoon.com/retrieving-hockey-stats-from-the-nhls-undocumented-api-zz3003wrw)
![](https://cdn.hackernoon.com/drafts/rydr3wdm.png)
It's that time of year again. Summer is coming to an end, Autumn is around the corner, and the NHL season is about to begin.

### [138. Next.Js 13 Parallel Routes: A Comprehensive Guide](https://hackernoon.com/nextjs-13-parallel-routes-a-comprehensive-guide)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-lr93wsw.jpeg)
Welcome to this comprehensive guide on parallel routes in Next.js.

### [139. Setting Up a Tor Hidden Service [A How-To Guide]](https://hackernoon.com/setting-up-a-tor-hidden-service-a-how-to-guide-zs1s3yoy)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F6sWrtbrOmsOIbrWzrG88lYfV4ch1-dgd23qc.png?alt=media&token=d3d2fea0-8b59-46ab-839b-e6d2b164385f)
I'm gonna out on a limb here and assume that you know the basics of how a web server works when you clicked on the title of this post. Basic knowledge of vim would be helpful too.

### [140. What’s the Difference Between path.join() and path.resolve()?](https://hackernoon.com/whats-the-difference-between-pathjoin-and-pathresolve)
![](https://cdn.hackernoon.com/images/RJQZvFU148YjNOndYa5BZPkZHvc2-zfa2kg1.png)
Learn the differences between the Node.js functions path.join() and path.resolve() and when you should use one over the other.

### [141. What Is a CA Bundle in SSL and Why Is It Important?](https://hackernoon.com/what-is-a-ca-bundle-in-ssl-and-why-is-it-important)
![](https://cdn.hackernoon.com/images/eu5TXaLJ3tcNIJMhGcO6oVO9PYL2-8aa3puj.jpeg)
Don't know what a CA bundle is? Discover how to use its powerful SSL encryption for secure web server-browser communication, why it's important, and more!

### [142. 8 Popular PHP Frameworks For Web Development in 2020 ](https://hackernoon.com/8-popular-php-frameworks-for-web-development-in-2020-od3f38ez)
![](https://cdn.hackernoon.com/drafts/ub25s2i3t.png)
Top programming languages used by web developers are Python, Java, JavaScript, PHP, Ruby, CSS/HTML. Amongst these PHP is perhaps the easiest to grasp  - approximately 80% of websites were built using PHP as of Jan 2020.

### [143. How I Solve Problems as a Developer](https://hackernoon.com/how-i-solve-problems-as-a-developer-ow4832v2)
![](https://cdn.hackernoon.com/drafts/oa9x3ypz.png)
There is no programmer in the world who knows how to solve every coding problem. That person simply doesn’t exist, because the programming field is so big that to a normal person, it would take two lives to learn all of that, but we only have one life. 

### [144. Picking the low hanging passwords](https://hackernoon.com/picking-the-low-hanging-passwords-b64684fe2c7)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
According to a not-at-all recent report by Keeper, there’s a 50/50 chance that any user account can be accessed with one of the 25 most common passwords.

### [145. How to Make a Web App User Interface with Python](https://hackernoon.com/how-to-make-a-web-app-user-interface-with-python)
![](https://cdn.hackernoon.com/images/L8vRjwjNsxM7vpDARQgLLWZiFN43-xt93k4l.png)
A bite-sized introduction to building web app user interfaces with nothing but Python.

### [146. 2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'](https://hackernoon.com/2-quick-and-easy-ways-to-fix-uncaught-syntaxerror-cannot-use-import-statement-outside-a-module)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-fc93osr.jpeg)
In this quick guide we'll look at how you can solve the very common error, "Uncaught SyntaxError: Cannot use import statement outside a module".

### [147. Building High-Performance Web Applications on Python](https://hackernoon.com/building-high-performance-web-applications-on-python)
![](https://cdn.hackernoon.com/images/NSAqeFwppXVyYopDUm42yXx22oC3-8293lf7.jpeg)
Key technologies and best practices for building scalable web applications on Python


### [148. Mastering JavaScript Shorthands](https://hackernoon.com/mastering-javascript-shorthand-tips-for-beginners)
![](https://cdn.hackernoon.com/images/rIVD9uGtDyTmdfox8lpMYgJi5AZ2-ye93u8i.jpeg)
Today, we'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant.

### [149. How to Style Horizontal Rules in CSS: Styling the hr Tag](https://hackernoon.com/how-to-style-horizontal-rules-in-css-styling-the-hr-tag)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-4292k0j.jpeg)
There are a few simple tricks you can use to make your content stand out from the pack.

### [150. Build a JavaScript Loan Calculator With HTML & CSS](https://hackernoon.com/build-a-javascript-loan-calculator-with-html-and-css)
![](https://cdn.hackernoon.com/images/awSK9UBJcfNNXiYmqyT1Ihlw5Hr2-sd139ys.jpeg)


### [151. 5 Most Popular React UI Component Libraries](https://hackernoon.com/5-most-popular-react-ui-component-libraries-5sx3t9c)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FPSAg5ijEefbKXa7Mqz3dBvZqmfj2-x53h3uht.jpeg?alt=media&token=996e2b90-c0fa-4691-b531-260d3b8286f6)
According to Stack Overflow Developers Survey 2020, ReactJS was voted as the most loved and wanted Javascript web framework. 

### [152. How to Set A Default Checkbox Value in React](https://hackernoon.com/how-to-set-a-default-checkbox-value-in-react)
![](https://cdn.hackernoon.com/images/PzR8ZTkpXKV9Jijt5uz2hfy9Gi33-w283l44.jpeg)
In this guide, we will see how to make the checkbox checked (or unchecked) by default.

### [153. 13 Useful React Libraries for Devs in 2023](https://hackernoon.com/13-useful-react-libraries-for-devs-in-2023)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-uh93srj.jpeg)
Being a modern React developer is not only about understanding the core concepts of React but also about getting well-versed with the whole ecosystem of React.

### [154. I Tested the Web Share API: Here Are the Results](https://hackernoon.com/i-tested-the-web-share-api-here-are-the-results)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-cv93p3i.jpeg)
Honestly, I'm not sure I'd use this. For cases where a URL or file is not being shared, it does not seem to work well. And sharing a file seems problematic.

### [155. Building An Airbnb-Like Map in Next.js](https://hackernoon.com/building-an-airbnb-like-map-in-nextjs)
![](https://cdn.hackernoon.com/images/XyqHIwK0xDMOGdIf5iTNW4CrLjb2-yuh3veu.png)
We will be building a proof of concept to create customer Google Maps markers using any React component in a Next.js project using AirBnB as an example

### [156. An Introductory Guide to System Design for Frontend Developers 👩‍💻](https://hackernoon.com/an-introductory-guide-to-system-design-for-frontend-developers)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-ew93ome.jpeg)
You starting point to a successful System Design interview round as a Frontend Developer!

### [157. How to Enter The Velo Writing Contest by Wix & Hacker Noon](https://hackernoon.com/introducing-the-velo-writing-contest-by-wix-and-hacker-noon-ta3433v0)
![](https://hackernoon.com/images/htFSSAp4chhkeyS1S6QLnMQB4v22-082q33g1.jpeg)
Hacker Noon has partnered with Wix to host the Velo Writing Contest, with $2,500in prize money to be awarded

### [158. Using the typeof Operator in TypeScript](https://hackernoon.com/using-the-typeof-operator-in-typescript)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-cw930ye.jpeg)
Let's look at how typeof works in TypeScript.

### [159. Is Java The Best Programming language to Learn First? ](https://hackernoon.com/is-java-a-good-programming-language-to-start-with-b3bv3ziv)
![](https://cdn.hackernoon.com/images/b216f3z7z.jpg)
I often receive questions like which is a first programming language to learn? Is Java a good programming language to start with?,  how good Java is as a first programming language? which is the best programming language for beginners, or shall I start with Java or Python?. 

### [160. 5 Best Website Categorization Tools](https://hackernoon.com/5-best-website-categorization-tools-5s2337ny)
![](https://cdn.hackernoon.com/images/Xg4xKE6hQrM6hdoY7c5x1n6y2Kw2-qr3835qg.jpeg)
Website categorization refers to the process of classifying websites that users come into contact with into various categories.

### [161. A Complete Guide to Laravel Sail](https://hackernoon.com/what-is-wrong-with-laravel-sail-78s314m)
![](https://hackernoon.com/images/wpMgmYEsvHPWleC9kTVpIRfgvEO2-byk2b0g.jpeg)
This post is about what to expect from Laravel Sail, how it works and how to make the most of it; it is also a plea to developers to break away from it.

### [162. How to Build a Shopping Cart with Next.js and Zustand: State Management with TypeScript](https://hackernoon.com/how-to-build-a-shopping-cart-with-nextjs-and-zustand-state-management-with-typescript)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-li93uaf.jpeg)
Learn how to manage a React global state with Zustand and TypeScript. Practical guide and code samples. Persist global state in localStorage.

### [163. 12 Websites to Take Your CSS Skills From Beginner to Pro](https://hackernoon.com/12-websites-to-take-your-css-skills-from-beginner-to-pro)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-gf92klt.jpeg)
From comprehensive tutorials, to cheat sheets and code snippets—these sites will give you the tools and knowledge necessary to create beautiful, functional.....

### [164. A Beginner's Guide to HTML, CSS, and JavaScript](https://hackernoon.com/a-beginners-guide-to-html-css-and-javascript)
![](https://cdn.hackernoon.com/images/70VgeliRxkXfAA1KP7trNJU4c1m1-ma93rje.jpeg)
Unlock Your Web Development Potential with this Beginner's Guide to HTML, CSS, and JavaScript! Learn the Fundamentals and Create Stunning Websites.

### [165. Publishing A Three.js Project On GitHub Pages](https://hackernoon.com/publishing-a-threejs-project-on-github-pages-1d1a33dn)
![](https://hackernoon.com/images/jf6vZ688mOdIbQoKHGHxhReTALF2-fk9m33po.jpeg)
Looking for a way to showcase your Three.js projects for free? Use GitHub Pages.

### [166. A Guide to Angular Signals With Practical Use Cases (Part 2)](https://hackernoon.com/a-guide-to-angular-signals-with-practical-use-cases-part-2)
![](https://cdn.hackernoon.com/images/MppoGnEe7vYWhYy8162Auiz1Mzj1-jx9385b.jpeg)
Today, we’ll delve deeper into Angular Signals, exploring more real-world scenarios where Angular Signals can be an indispensable tool.

### [167. A Step by Step Guide to Creating a Multi-step Form](https://hackernoon.com/a-step-by-step-guide-to-creating-a-multi-step-form-lu593aow)
![](https://cdn.hackernoon.com/drafts/lm1gv3h6u.png)
Recently I wanted to add a multi-step form to my site. Since my site runs on Hexo, a static page generator, I had some doubts about how to execute this task. I already had a static form on my site, and I didn’t want to spend too much time on the development of features like steps, show/hide logic or validation.

### [168. Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More](https://hackernoon.com/building-a-full-stack-airbnb-clone-with-nextjs-tailwind-css-amplication-and-more)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-te92y5n.jpeg)
Learn to create a Full Stack Airbnb Clone with Amplication: Low-code Next.js frontend, Tailwind CSS styling, JWT-based auth, Mapbox API maps, and more.

### [169. Three Main Components of JavaScript](https://hackernoon.com/three-main-components-of-javascript-0bp3tjx)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F2URpjmJLkjVeYGsWZeCo2hCb90Y2-fd363yht.jpeg?alt=media&token=ddbcd010-f6bd-4411-a2c5-5dfde21bab7b)
 JavaScript is certainly one of those programming languages which you can get started within a few hours due to its simple syntax, but would probably take you years to master it.

### [170. It's Hard to Create a PWA With Next.js: But Why?](https://hackernoon.com/its-hard-to-create-a-pwa-with-nextjs-but-why)
![](https://cdn.hackernoon.com/images/wNuie4SqwWXAyHIBWtUTi45M94E2-m993sbk.jpeg)
Discover the challenges of creating PWAs with Next.js, the powerful next-pwa plugin, and the exciting future with the @imbios/next-pwa package.

### [171. A Guide to Web Scraping With JavaScript and Node.js](https://hackernoon.com/a-guide-to-web-scraping-with-javascript-and-nodejs-i21l3te1)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FPaQgAM87SaScUgkZFHPVa9oHigB2-um5a3t9t.jpeg?alt=media&token=479ae740-4f24-4e26-8f32-578e4f3c2d88)
With the massive increase in the volume of data on the Internet, this technique is becoming increasingly beneficial in retrieving information from websites and applying them for various use cases. Typically, web data extraction involves making a request to the given web page, accessing its HTML code, and parsing that code to harvest some information. Since JavaScript is excellent at manipulating the DOM (Document Object Model) inside a web browser, creating data extraction scripts in Node.js can be extremely versatile. Hence, this tutorial focuses on javascript web scraping.

### [172. Developing an E-Commerce Application Using Java and Spring](https://hackernoon.com/developing-an-e-commerce-application-using-java-and-spring-k82k34oe)
![](https://cdn.hackernoon.com/images/Mma4CsuASuNH6sD2ARQPXKM7m8Q2-5pn31q1.jpeg)
We are going to build an e-commerce application using Java, Spring backend, build web UI in Vue.js, and mobile UI using android. Stay tuned!

### [173. Creating an Accordion With Vue.js: A Step-by-Step Tutorial](https://hackernoon.com/creating-an-accordion-with-vuejs-a-step-by-step-tutorial)
![](https://cdn.hackernoon.com/images/lines-of-code-clegxqbcc000001s63hghev6o.png)
In this article, we will be creating an accordion with vue.js. It is used mostly for expandable FAQ sections in websites. 

### [174. Migrating your Node.js REST API to Serverless](https://hackernoon.com/migrating-your-node-js-rest-api-to-serverless-d2a170e0856c)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-mx82r7o.jpeg)
I’ve dabbled a fair share in the dark arts of Serverless. Digging into the various pros and cons of not having dedicated servers, or instances you can call your own. Even if they technically are not. They’re just in some undisclosed server farm somewhere floating in the cloud.

### [175. Create your React.js Address Autocomplete Component in 10 minutes ⏰](https://hackernoon.com/create-your-reactjs-address-autocomplete-component-in-10-minutes-ws2j33ej)
![](https://images.unsplash.com/photo-1539316814650-83bdbc5339be?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Hi guys, I want to introduce use-places-autocomplete. It's a React.js hook for Google Maps Places Autocomplete. With it you can build your own places autocomplete UI like the following demo easily! Hope you guys 👍🏻 it.

### [176. VS Code Extensions Every Developer Should Know](https://hackernoon.com/vs-code-extensions-every-developer-should-know)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-4e93rc3.jpeg)
Today, I’ll focus on just 3 classes of extensions: productivity, debugging, and language support.

### [177. Object-oriented Programming vs. Functional Programming: Which Is Better?](https://hackernoon.com/object-oriented-programming-vs-functional-programming-which-is-better)
![](https://cdn.hackernoon.com/images/vJZjNRXjG5OwQ3VPCR4tScyGSEC3-5h033vv.jpeg)
Let’s dive in to learn about object-oriented programming and functional programming. What is object-oriented programming/OOP? What's functional programming/FP? 

### [178. Mastering the Art of Load Testing for Web Applications](https://hackernoon.com/mastering-the-art-of-load-testing-for-web-applications)
![](https://cdn.hackernoon.com/images/U7OgYJf56KgmdS9HlMDQRdPh27R2-o783w60.jpeg)
Mastering load testing for web apps takes understanding the basics, the process, tools, best practices, common pitfalls, and future trends. So, let's dive 

### [179. My Journey to Become a Web Developer](https://hackernoon.com/my-journey-to-become-a-web-developer-sg3l32x6)
![](https://images.unsplash.com/reserve/91JuTaUSKaMh2yjB1C4A_IMG_9284.jpg?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Disclaimer

### [180. How to Simulate a Backend REST API with json-server for CRUD Development in React](https://hackernoon.com/how-to-simulate-a-backend-rest-api-with-json-server-for-crud-development-in-react)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-tm93tap.jpeg)
Simulate a backend REST API for React development with json-server. Set up a fake REST API to prototype and mock frontend application.

### [181. 5 Reasons why you should NOT go to a coding bootcamp](https://hackernoon.com/5-reasons-why-you-should-not-go-to-a-coding-bootcamp-vpim33ag)
![](https://cdn.hackernoon.com/drafts/shk133lg.png)
I went to a coding bootcamp 2 years ago. From my experience and people I met, these are reasons why someone should NOT go to a coding bootcamp.

### [182. Semantic HTML Tags That Will Boost Your Markup Quality](https://hackernoon.com/semantic-html-tags-that-will-boost-your-markup-quality-v0c03328)
![](https://cdn.hackernoon.com/images/fh212ded.jpg)
It's been a long time since Hypertext Markup Language (HTML) showed up to become the basis of the web. Since that time, many things have changed, and some features of the HTML files went from desirable to negative. Thus, a cryptic markup or an obfuscated source code once considered useful things to avoid unauthorized copies, seems to be a nonsense in the fight for positioning in search engine results that we live in today.

### [183. How To Create Truly Responsive Images With Flexbox](https://hackernoon.com/how-to-create-truly-responsive-images-with-flexbox-2z4f3yjj)
![](https://cdn.hackernoon.com/drafts/zt5t53yjc.png)
 If you're trying to learn CSS Flexbox, I bet you've spent some time watching a few tutorials on YouTube. Maybe you've seen the Wes Bos series, that’s a great one. Maybe you're bi-lingual and found some helpful content in your native tongue. Most technical content on the internet is in English, as we know. Yet, sometimes I find some amazing content in my native Portuguese. (Like this remarkably simple to understand tutorial on Flexbox). Finally, how can you not have resorted to the Interneting Is Hard tutorials?

### [184. Virtual DOM, Reconciliation And Diffing Algorithm Explained Simply](https://hackernoon.com/virtual-dom-reconciliation-and-diffing-algorithm-explained-simply-ycn34gr)
![](https://cdn.hackernoon.com/images/GPJ76xULl7geuFTrXbplNnbeQCf2-0v3a33up.jpeg)
Ever wondered what makes react so fast ? Here's a detailed explanation why react is fast and what is virtual DOM.

### [185. Make a Feedback Form with PHP [A How-To Guide]](https://hackernoon.com/make-a-feedback-form-with-php-a-how-to-guide-5w6e3b5i)
![](https://cdn.hackernoon.com/drafts/yb2j3bk5.png)
It’s time for a web project that has real-life uses.Today I’ll show you how to make a feedback form using a website, a PHP engine, and some mailing magic. Why? 

### [186. Node.js Tutorial: How to Build a Video Streaming Application in 10 Minutes](https://hackernoon.com/nodejs-tutorial-how-to-build-a-video-streaming-application-in-10-minutes)
![](https://cdn.hackernoon.com/images/AjW2GKacl2guqCy2y7pi5AGU8U02-gl92hzr.jpeg)
hi folks, in this blog we will build a Node.js video streaming application in like 10 minutes.


### [187. Display Desktop Notifications Using JavaScript](https://hackernoon.com/display-desktop-notifications-using-javascript)
![](https://cdn.hackernoon.com/images/U4SCXdx97IXFkbcjJsSVwy1SvkG2-ua93qcw.jpeg)
Learn how to use the Notification Web API to display desktop notifications in JavaScript.

### [188. 6 Examples of Outsourcing Failure ](https://hackernoon.com/6-examples-of-outsourcing-failure-yv223y4u)
![](https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Outsourcing is the practice of handing off a certain aspect of your business operations and/or individual tasks to a company or professional that operates outside of the organization on an independent basis. It's essentially the delegation of a task to someone else for an agreed-upon price. 

### [189. Blockchains Missing Ledgers - The Myth of DLTs](https://hackernoon.com/blockchains-missing-ledgers-the-myth-of-dlts)
![](https://cdn.hackernoon.com/images/eQHzh6rz7ETBHLjs0KzCl1Dooqp2-da93nt1.jpeg)
Blockchains and DLTs are not the same thing. Here's why.

### [190. How to use CodePen Code Inside Your Webpage](https://hackernoon.com/how-to-use-codepen-code-inside-your-webpage-eu413wao)
![](https://cdn.hackernoon.com/images/zmhj30xu.jpg)
With the world rapidly evolving by the minute, staying on top of the in-demand skills’ curve is a voluminous task. Web Development is one such skill that is almost essential to the modern developer. With a market size of about $40Bn in 2020, the need and opportunity for quality web developers are ever so evident.

### [191. Using React and Typescript to Create Reusable and Customizable Modals](https://hackernoon.com/using-react-and-typescript-to-create-reusable-and-customizable-modals)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-3va3mds.jpeg)
Create reusable and customizable modals with React and TypeScript. Learn how to make a complete modal with React Portals and styled-components.

### [192. How to Create Toast Notifications in React Applications](https://hackernoon.com/how-to-create-toast-notifications-in-react-applications)
![](https://cdn.hackernoon.com/images/ykJxkPDADpgkWhi5rN6fOrTcA5A2-hl93q96.jpeg)
In this article I will show you how to use Tailwind to add some stylish design elements.


### [193. How to Create Custom Form Control for the Phone Number Input Field Using Angular](https://hackernoon.com/how-to-create-custom-form-control-for-the-phone-number-input-field-using-angular)
![](https://cdn.hackernoon.com/images/ePQndQZnN5VLv3YAqt7I4iFTpNG3-hod3rc7.jpeg)
Angular developers often find it difficult to integrate a phone number input field.

### [194. A Definitive Guide to JavaScript Prototypes](https://hackernoon.com/a-definitive-guide-to-javascript-prototypes-2c263788021e)
![](https://cdn.hackernoon.com/images/robot-prototypes-lined-up-in-a-row-l7fhv0bp2sq618s46q5qye7x.png)
With bite-size code snippets and easy explanations.

### [195. A crash course on Serverless with AWS : Building APIs with Lambda and Aurora Serverless](https://hackernoon.com/a-crash-course-on-serverless-with-aws-building-apis-with-lambda-and-aurora-serverless-49885c46e37a)
![](https://cdn.hackernoon.com/drafts/qvs32jg.png)
Ever since AWS made a serverless option of AWS RDS Aurora generally available, I’ve been on the edge of my seat, eagerly anticipating all the various possibilities. It would mean a breakthrough in building serverless architectures. No more managing connection pools with SQL. No more worrying about capping out available connections. This would make it viable to use serverless for database intensive operations.

### [196. An Intro to Zero-Knowledge Proofs (ZKP) and Identity](https://hackernoon.com/an-intro-to-zero-knowledge-proofs-zkp-and-identity)
![](https://cdn.hackernoon.com/images/kwXFaICNrPNGE3SwstMTwoosDrp1-th93lrj.jpeg)
Learn about Zero Knowledge claims and how they can help in securing your Identity.

### [197. Set Up Airbnb’s Linter (React + Node)](https://hackernoon.com/a-simple-linter-setup-finally-d908877fa09)
![](https://cdn.hackernoon.com/images/6sWrtbrOmsOIbrWzrG88lYfV4ch1-1i83e1d.jpeg)
A linter flags anything in your code that breaks its pre-defined rules (“style guide”). Each style guide has different opinions about what constitutes “good” JavaScript code. This post uses <a href="https://github.com/airbnb/javascript" target="_blank">Airbnb</a>’s style guide; <a href="https://google.github.io/styleguide/jsguide.html" target="_blank">Google</a>’s is also popular.

### [198. 16 JavaScript Protips [2020 Edition]](https://hackernoon.com/16-javascript-protips-2020-edition-n7et32dd)
![](https://cdn.hackernoon.com/drafts/q1n3yqk.png)
When I began learning JavaScript, I made a list of every time-saving trick that I found in other people’s code, on code challenge websites, and anywhere other than the tutorials I was using.

### [199. Why Should Every Javascript Developer Avoid Using if Statements](https://hackernoon.com/why-should-every-javascript-developer-avoid-using-if-statements)
![](https://cdn.hackernoon.com/images/kOX2DcIEvpa0iV4IDCQA7a4iq473-bu93pk5.jpeg)
Stop using if statements unless absolutely necessary. Using if statement is a clunky way of writing code and should be avoided wherever possible.

### [200. Top 9 Tips to Improve React Performance](https://hackernoon.com/top-9-tips-to-improve-react-performance)
![](https://cdn.hackernoon.com/images/OujWaQx7FhMxIORYNRgWYZuh1kb2-9yad35nr.jpeg)
These 9 tips will help you improve the performance of your React code so that you can make the most out of your software and maximize what you are capable of. 

### [201. Remix Framework Review](https://hackernoon.com/remix-framework-review)
![](https://cdn.hackernoon.com/images/HMfDlkGVkoMk0WzhOX2zil9gTLj1-ta93zk2.jpeg)
Edge SSR, nested routes, and no client-side state differentiate Remix from Next.js, Gatsby but not best suited for realtime apps and sharing data across routes.

### [202. 10 More TypeScript  Alternatives ](https://hackernoon.com/10-more-typescript-alternatives)
![](https://cdn.hackernoon.com/images/XIlys8PrM8eJ7n0qjETjuC0lbkB2-a9j3q2y.jpeg)
In this article, we will continue our discussion and talk about the most popular TypeScript alternatives.

### [203. Step by Step Guide to Create 3 Different Types of Loading Screens in React](https://hackernoon.com/step-by-step-guide-to-create-3-different-types-of-loading-screens-in-react-lu2633nd)
![](https://hackernoon.com/images/541r0RExUOQ3nFAQs7oJuST9Axf2-g6aq337h.jpeg)
Here I will show you 3 ways to create cool loading screen or preloader in React.  

### [204. Creating an Augmented Reality App: Technology Guide 2022](https://hackernoon.com/creating-an-augmented-reality-app-technology-guide-2022)
![](https://cdn.hackernoon.com/images/HxX5zpJrSjbKoBatGSx5asOP36H2-8ma35yi.jpeg)
Learn how to develop an AR app in 2022/2023: Mobile AR, ARKit and ARCore platform comparison, Smart Glasses, Wearables, and Web-based AR overview.

### [205. How to Debug a Spring WebFlux Application](https://hackernoon.com/how-to-debug-a-spring-webflux-application)
![](https://cdn.hackernoon.com/images/EgbcflnJ52QSu5zjHCT9Xao2qAg2-hjb3phc.jpeg)
A journey through a buggy webflux application.

### [206. Listing of JavaScript Editable Table Libraries](https://hackernoon.com/listing-of-javascript-editable-table-libraries-17r31db)
![](https://cdn.hackernoon.com/images/3Y2ElJHvj3dL4J86OiboGUBnaGo2-1ba9346f.jpeg)
In this article, we review a list of commercial JavaScript editable table libraries and UI widgets that can be incorporated into web applications. 

### [207. Why do we Need the JSON Web Token (JWT) in the Modern Web Era?](https://hackernoon.com/why-do-we-need-the-json-web-token-jwt-in-the-modern-web-k29l3sfd)
![](https://cdn.hackernoon.com/drafts/6c5ou3s7y.png)
Hold on tight: the HTTP protocol is terribly flawed(*) and when it comes to user authentication this problem screams loudly.

### [208. Learn How To Drive Sustainable Revenue With Product-Led Growth](https://hackernoon.com/learn-how-to-drive-sustainable-revenue-with-product-led-growth)
![](https://cdn.hackernoon.com/images/QCzUXmup1gWrS723VFnOS8C4jQ03-7193spo.jpeg)
Product-led growth is achieved through exceptional product experience, resulting in customer acquisition, engagement, and increased revenue.

### [209. NodeJS vs .NET Core – Which Is the Ultimate Server-side Development Platform?](https://hackernoon.com/nodejs-vs-net-core---which-is-the-ultimate-server-side-development-platform)
![](https://cdn.hackernoon.com/images/38HofyiaabhY9OfwvsiyXDn1ALa2-33a3k0r.jpeg)
The two most popular platforms for server-side development in 2022 are Node.js and .NET. The hot topic among developers is .NET Core vs Node.js. 

### [210. Top 7 Best Frontend Development Frameworks and When To Use Them](https://hackernoon.com/top-7-best-frontend-development-frameworks-and-when-to-use-them-4v3a3wwa)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FHrzvBX6xNSVZBKImURJl23sRwcQ2-bhu3wfv.jpeg?alt=media&token=88946c73-ead8-442d-8946-3b35bae519bd)
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).

### [211. A Call-to-Action in pure HTML and CSS](https://hackernoon.com/a-call-to-action-in-pure-html-and-css)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-ro193o1u.jpeg)
Use this boiler plate template to design a call to action in any website using HTML and a little bit of CSS

### [212. Adding Google Sign In On Flutter Web](https://hackernoon.com/adding-google-sign-in-on-flutter-web)
![](https://cdn.hackernoon.com/images/ulVj0KoP4qU9KY4hkaFUHv0ef3l1-6293w9x.jpeg)
Add Google Sign-In to you Flutter web app and authenticate users in a single click

### [213. 12 Websites That Will Help You Learn Web Development Faster (completely Free)](https://hackernoon.com/12-websites-that-will-help-you-learn-web-development-faster-completely-free)
![](https://cdn.hackernoon.com/images/jAe8nDJHWuhNTYfeZVmoqHUgxXz2-qme3wz3.jpeg)
12 Websites That Will Help You Learn Web Development Faster (completely Free)

### [214. Generate WordPress Posts Automatically with Python](https://hackernoon.com/generate-wordpress-posts-automatically-with-python)
![](https://cdn.hackernoon.com/images/NiysiBDkZ3a8YGjpds6YB4zzthn1-a393oyq.jpeg)
One of the biggest challenges for WordPress users is keeping their websites updated with fresh content on a regular basis.

### [215. Using ChatGPT to Code an Entire Portfolio Website](https://hackernoon.com/using-chatgpt-to-code-an-entire-portfolio-website)
![](https://cdn.hackernoon.com/images/UPj89hwu6vfiCaqSkcDwX8zhXPO2-ugm2h07.png)
Using ChatGPT to create a custom portfolio website in record time! I discuss ChatGPT's strengths, weaknesses, and tip and tricks to use while coding. 

### [216. A Step-by-Step Guide to Building a Simple Next.js 13 Blog](https://hackernoon.com/a-step-by-step-guide-to-building-a-simple-nextjs-13-blog)
![](https://cdn.hackernoon.com/images/rIVD9uGtDyTmdfox8lpMYgJi5AZ2-wv93vgf.jpeg)
Building a simple blog with Next.js 13

### [217. How to Remove Console Statements From Production Build in 3 Easy Ways](https://hackernoon.com/how-to-remove-console-statements-from-production-build-in-3-easy-ways)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-i093pe9.jpeg)
Console statements create performance or security issues if you mishandle them. This article explains three ways to remove them from your production build.

### [218. Getting Started Building a Svelte App with SvelteKit](https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-i593y2v.jpeg)


### [219. Integrating a Contact Form with EmailJS in React](https://hackernoon.com/integrating-a-contact-form-with-emailjs-in-react)
![](https://cdn.hackernoon.com/images/7FHeR383huUAovH1GLgM3KFQYh12-frg307w.jpeg)
In this tutorial, you’ll learn how to connect a front-end library, React, with EmailJS to receive user messages on your website or mobile applications

### [220. An Intro to the Astro Framework: Benefits and Drawbacks](https://hackernoon.com/an-intro-to-the-astro-framework-benefits-and-drawbacks)
![](https://cdn.hackernoon.com/images/TlU0qyilehYV4XrjqgkglSwSK413-bre3s2x.jpeg)
Astro is a new framework, should it be one you should experiment with? Find out the features, benefits, and drawbacks that this new framework has. 

### [221. How to use Publish-Subscribe Pattern with JavaScript](https://hackernoon.com/how-to-use-publish-subscribe-pattern-with-javascript-t9123ui0)
![](https://cdn.hackernoon.com/drafts/4gbru3vb3.png)
The result of the next pen shows the case where I'll use the Publish/Subscribe pattern. Every time you click on the Event button a square is added and  a message with the number of squares is displayed.

### [222. Server-Side Rendering in Angular](https://hackernoon.com/server-side-rendering-in-angular-dnf93yup)
![](https://cdn.hackernoon.com/drafts/ls16g3y5x.png)
The technology that allows us to run our Angular applications on the server is described in the Angular docs as Angular Universal.

### [223. How I Built a Static Website with User Authentication and Dynamic Database for Free](https://hackernoon.com/how-i-built-a-static-website-with-user-authentication-and-dynamic-database-for-free)
![](https://cdn.hackernoon.com/images/AOlJRvEucFTafhEGDZ1zCOoPUXa2-tia3ksg.jpeg)
How I built a functional static web app with user authentication and dynamic database for FREE using Webflow, Vault Vision, Cyclic and Airtable with #LowCode

### [224. How to Set Up a Free Oracle Cloud VM for Web Development (2025 Guide)](https://hackernoon.com/how-to-set-up-a-free-oracle-cloud-vm-for-web-development-2025-guide)
![](https://cdn.hackernoon.com/images/qqQuQnB1axa4HS9uKXmxjdYUt2f1-pa92saq.jpeg)
Oracle Cloud offers a free VM with 4 vCPUs, 24GB RAM, and 200GB storage (as of 2025).

### [225. Publish-Subscribe Design Pattern: Introduction to Scalable Messaging](https://hackernoon.com/publish-subscribe-design-pattern-introduction-to-scalable-messaging-781k3tae)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FYPYeQGgK3uVuaAoY97gRJBaXbLU2-m4v3eca.jpeg?alt=media&token=f45cb962-8091-4295-9a7f-9b9e753ac22e)
The publish-subscribe (or pub/sub) messaging pattern is a design pattern that provides a framework for exchanging messages that allows for loose coupling and scaling between the sender of messages (publishers) and receivers (subscribers) on topics they subscribe to.

### [226. Adding the log component to an Angular application](https://hackernoon.com/adding-the-log-component-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-9la2mcd.jpeg)
Application example built with Angular 14 and adding the log component using the ngx-logger library.

### [227. React Project Structure: Best Practices](https://hackernoon.com/react-project-structure-best-practices-kh20323x)
![](https://cdn.hackernoon.com/images/YuHQ8Lhn2IT1way5nhFige44Oky1-tn1w296v.jpeg)
A more standard way of structuring React applications which scales across frameworks and projects.

### [228. How to Use Screen Wake Lock API in React to Manage Screen Locking/Dimming in a Browser](https://hackernoon.com/how-to-use-screen-wake-lock-api-in-react-to-manage-screen-lockingdimming-in-a-browser)
![](https://cdn.hackernoon.com/images/fN6gqyEn1ZWGSnRkRVKQmlxFpdc2-948365k.jpeg)
LIVE demo 🚀 on how to integrate the Screen Wake Lock API into any React application with automatic reacquisition of a lock using react-use-wake-lock.

### [229. A crash course on Serverless APIs with Express and MongoDB](https://hackernoon.com/a-crash-course-on-serverless-apis-with-express-and-mongodb-77774f7730fe)
![](https://cdn.hackernoon.com/images/hIgxaTqDc1cK3jEDXeStSS8pGPL2-kgl35eu.jpeg)
Serverless has become an amazing tool for various use cases. Data processors, chatbots, APIs, you name it is now developed using serverless architectures.

### [230. 5 Common Web Development Mistakes and How to Avoid Them](https://hackernoon.com/5-common-web-development-mistakes-and-how-to-avoid-them)
![](https://cdn.hackernoon.com/images/Nw1UoHBMGxTZdOK3aY1a8TPj8vb2-e493p4y.png)
These mistakes can make your life worst as a website developer. Know them now so that you make sure to avoid them in your next website. 

### [231. Alternatives to Create React App](https://hackernoon.com/alternatives-to-create-react-app)
![](https://cdn.hackernoon.com/images/dNNBDAvxyhdzfKhIWAuPr4PE1Zx1-h193lfe.jpeg)
I see a lot of discussion around CRA being outdated and we should replace it with Vite. This blog discusses CRA's problems and alternatives we can use. 

### [232. Designing a Social Media News Feed System ](https://hackernoon.com/designing-a-social-media-news-feed-system)
![](https://cdn.hackernoon.com/images/OAWNH2u4oMfvIQnqBHkGhGDHPN72-t4a3kdf.jpeg)
Social media newsfeeds must be generated in near real-time based on the feed activity from the people that a user follows.

### [233. How To Build and Sell APIs](https://hackernoon.com/how-to-build-and-sell-apis)
![](https://cdn.hackernoon.com/images/iOKnuwYEXZaUvz5goZmkHGWwDAq2-f69135dn.jpeg)
Building and selling APIs is a great way to create a new source of passive income.

### [234. Advanced vertical margins](https://hackernoon.com/advanced-vertical-margins-4ac69f032f79)
![](https://hackernoon.com/images/1*XopETR-hT-mGKzOXrpGNdw.gif)
<em>Dealing with spacing in compiled markdown articles.</em>

### [235. How to Implement Face Recognition in Vue.JS with FaceIO](https://hackernoon.com/how-to-implement-face-recognition-in-vuejs-with-faceio)
![](https://cdn.hackernoon.com/images/TuZs7lYkToZkOwnvwaCU8cXCSGJ2-j993o9r.jpeg)
Learn to add face recognition authentication to your web application 

### [236. Introducing the Satisfies Operator in TypeScript](https://hackernoon.com/introducing-the-satisfy-operator-in-typescript)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-oq93284.jpeg)
TypeScript beta 4.9 came with the new satisfies operator. 

### [237. How I Boosted My Productivity While Working on Multiple Projects](https://hackernoon.com/how-i-boosted-my-productivity-while-working-on-multiple-projects)
![](https://cdn.hackernoon.com/images/20koghmueveLWl7GQM6uC7vfpA83-8yb3ysn.jpeg)
Freeter is a free and open-source app that helps you organize your work. It lets you switch between multiple workflows in a single place. 

### [238. Learn How to Emit Custom Events in Vue With $emit](https://hackernoon.com/learn-how-to-emit-custom-events-in-vue-with-$emit)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-5v93k2b.jpeg)
In Vue, we use $emit, which lets us send data upwards, and then trigger an event in the parent component should an $emit event be fired.

### [239. One Dockerfile is All it Takes: How I Fell in Love With Bake](https://hackernoon.com/one-dockerfile-is-all-it-takes-how-i-fell-in-love-with-bake)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-ht92crz.jpeg)
Using docker bake for outrageously simple monorepo docker builds.

### [240. Yelp's Mobile App Stability Soars to 99.98% with BugSnag](https://hackernoon.com/yelps-mobile-app-stability-soars-to-9998percent-with-bugsnag)
![](https://cdn.hackernoon.com/images/G7JOCMInhTbqoh3WpBaCwVWcsc22-od93rpu.jpeg)
Yelp's Mobile App Stability Soars to 99.98% with BugSnag. Here's how it was achieved. 

### [241. Which Framework Must You Implement for Your Next Project? (Next Js VS React)](https://hackernoon.com/which-framework-must-you-implement-for-your-next-project-next-js-vs-react)
![](https://cdn.hackernoon.com/images/5P8m2Q0RfeVFUhNsEBG8gdQoQCq1-xb93o8g.jpeg)
React and Next JS are effective JavaScript frameworks for developing web applications and websites. These frameworks are used by a large community of developers all over the world. Both are open-source projects for developing powerful and interactive web applications, but which should you use? If you are perplexed by the question of Next JS vs React, this blog will be of assistance.

### [242. API Gateway vs Backend for Frontend (BFF): Use Cases, Similarities and Divergencies ](https://hackernoon.com/api-gateway-vs-backend-for-frontend-bff-use-cases-similarities-and-divergencies)
![](https://cdn.hackernoon.com/images/pyimV3gzJQQgTbieEIF46aEh9QZ2-fd93o2n.jpeg)
 In this article, we are going to see what an API Gateway, BFFs, and how they are used for Client-Server communication in a Microservices architecture.

### [243. How To Get The Most Out Of OpenGL With C++ And WASM](https://hackernoon.com/how-to-get-the-most-out-of-opengl-with-c-and-wasm-eop33sb)
![](https://cdn.hackernoon.com/images/PvDEZ8vsJDYY6PhFrWIm7AWSb073-806g36fi.jpeg)
wasm,opengl,cpp,c++,html

### [244. How To Customize an OpenAI Chatbot With Embedding](https://hackernoon.com/how-to-customize-an-openai-chatbot-with-embedding)
![](https://cdn.hackernoon.com/images/gEL3g8oyQxgbmc8iSk3I4iUT8Ku1-vm93ued.jpeg)
Learn how to leverage embeddings to have an OpenAI chatbot, built with React and Node.js, respond correctly to specific contextual prompts.

### [245. Tailwindcss? I'll Pass](https://hackernoon.com/tailwindcss-ill-pass)
![](https://cdn.hackernoon.com/images/cGfg9TlH1bgGje7eIzVSvxyMCMn2-uv92ler.jpeg)
Tailwindcss is breaking the frontier of CSS libraries and frameworks. Bootstrap is lagging behind and Vanilla CSS is stationary. Is Tailwind CSS worth it?

### [246. How to Connect Distributed Clients to a Private InfluxDB Database](https://hackernoon.com/how-to-connect-distributed-clients-to-a-private-influxdb-database)
![](https://cdn.hackernoon.com/images/46r7B36ZH3SbJMt0oevk5FjrjTH2-wd93phh.jpeg)
Ockam enables developers to securely connect clients to the InfluxDB database with exposing it to the public internet. 

### [247. How to Configure Path Aliases in Frontend Projects in the Native Way](https://hackernoon.com/how-to-configure-path-aliases-in-frontend-projects-in-the-native-way)
![](https://cdn.hackernoon.com/images/bJKRfuzGGgcDbBCYzVZSUx2jX9J3-6ia4qfd.png)
We’ll explore the imports field in package.json and how it can be used to configure path aliases for various use cases.

### [248. How to Handle REST API Requests in React](https://hackernoon.com/how-to-handle-rest-api-requests-in-react-vg1e32rn)
![](https://cdn.hackernoon.com/drafts/jaboj3yhk.png)
REST APIs are commonly used in web development. They are programming interfaces that web apps use to 'talk' to each other. They are used to access features and data. 'REST' (Representational State Transfer) is a concept that defines the APIs properties. This article will focus on the use of web-based APIs to retrieve data from a database. 

### [249. Boost Your CSS with BEM Naming and SASS Nesting](https://hackernoon.com/boost-your-css-with-bem-naming-and-sass-nesting-3x5d3ywo)
![](https://cdn.hackernoon.com/images/lr2z3yjd.jpg)
We all have struggled with keeping our CSS classes ordered, maintainable, and more specific. SASS nesting and the BEM (Block - Element - Modifier) structure will help get us to get rid of this concern.

### [250. 7 of the Top Best Languages for Web Application Development](https://hackernoon.com/7-of-the-top-best-languages-for-web-application-development-8q1531zd)
![](https://cdn.hackernoon.com/images/kUIZO4rrZJZ0z4WQaroP9Kwfuil2-z37331dz.jpeg)
Interested in choosing the best language for developing web applications? Our developers have shared the top seven choices in 2021. Discover what they are.

### [251. One-Time Password Generation Using speakeasy, Nest.js And MongoDB](https://hackernoon.com/one-time-password-generation-using-speakeasy-nestjs-and-mongodb-c53b31ql)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-212e313k.jpeg)
Here, we have designed and developed a flow for OTP(One time password) for user registration and also blocking a user's account after the maximum retries for incorrect otp is exceeded.

### [252. Top 5 Boilerplate Admin Templates With Node.js Backend](https://hackernoon.com/top-5-boilerplate-admin-templates-with-nodejs-backend-a5l3ulo)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-3f1g4vhq.jpeg?alt=media&token=75734ae9-7bd6-4976-81e4-3321d45a5914)
More and more developers are currently deciding to boost their workflow, minimize unnecessary tasks, and structure their virtual desks through admin panels with Node.js backend. 

### [253. Performance Tests on Common JavaScript Array Methods](https://hackernoon.com/performance-tests-on-common-javascript-array-methods)
![](https://cdn.hackernoon.com/images/zaFsi86habTuCYRikyd3UBKEgKE3-dp93jm2.jpeg)
In this post, I compare the running times of the most commonly used ways of looping through an array in JavaScript in order to see which one is the fastest

### [254. A Guide to Displaying Password Protected PDFs in a Web Application](https://hackernoon.com/a-guide-to-displaying-password-protected-pdfs-in-a-web-application)
![](https://cdn.hackernoon.com/images/Tg8Fkkdp5cSpeP1n6nQh9Kb7iBs1-lxd3rjp.jpeg)
Develop a Node application harnessing the power of Foxit PDF SDK Web. Integration allows you to effortlessly open password-protected PDFs directly in browser.

### [255. How to Document Picture-in-Picture in React (with Typescript)](https://hackernoon.com/how-to-document-picture-in-picture-in-react-with-typescript)
![](https://cdn.hackernoon.com/images/fN6gqyEn1ZWGSnRkRVKQmlxFpdc2-twc30ik.jpeg)
Implementing Document Picture-in-Picture in modern React (with Typescript)

### [256. Autogenerate Your GraphQL Documentation With Magidoc](https://hackernoon.com/autogenerate-your-graphql-documentation-with-magidoc)
![](https://cdn.hackernoon.com/images/DGXs1phkWUWxqA7OqqBlnXgIY5D3-y0a2iva.png)
Learn how to autogenerate GraphQL documentation with Magidoc.

### [257. Implementing Social Login for a React and Backend App](https://hackernoon.com/implementing-social-login-for-a-react-and-backend-app)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-cv93sn7.jpeg)
Implementing Social Login: A Step-by-Step Guide in  React with Typescript. How to add Github and Google login for users and taking advantage of the social netwo

### [258. Setting Up Google Analytics 4 in a Next.js Project](https://hackernoon.com/setting-up-google-analytics-4-in-a-nextjs-project)
![](https://cdn.hackernoon.com/images/XgeYnyzJtxbHsPPDPbFLA1SdvPA3-ag93uqu.jpeg)
Google Analytics is a web analytics service that tracks and reports several types of website traffic. 

### [259. 3 Things to Know Before  You Start HTML Coding From Scratch](https://hackernoon.com/what-you-should-know-before-starting-html-coding-from-scratch-e07uv3za6)
![](https://cdn.hackernoon.com/drafts/ip7yb3zun.png)
HTML coding requires a specific skill set from developers for robust website development.Based on your requirement and project details, you can use any of the content management systems to get the things started. However, “if you are planning to start your website coding from scratch in HTML”, there are a few things you need to make sure before beginning to code.

### [260. CSS Architecture Style Guides For Frontend Developers](https://hackernoon.com/css-architecture-style-guides-for-frontend-developers-lj28332a)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-8m1b31wj.jpeg)
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.

### [261. The Lazy Programmer's Guide to Maintaining a Personal Website](https://hackernoon.com/the-lazy-programmers-guide-to-maintaining-a-personal-website)
![](https://cdn.hackernoon.com/images/amVQ5swmF5en0QHSH8PsvbTZv6r1-1u92ov0.jpeg)
A guide for how to build and maintain a personal developer website with minimal effort in 10 easy steps.

### [262. The Best Way to Create a Web Admin Dashboard for Your Projects](https://hackernoon.com/the-best-way-to-create-a-web-admin-dashboard-for-your-projects-xi3034yz)
![](https://cdn.hackernoon.com/images/CrLFn92PQjVs1caQdhRv4kvJuG72-n34531u8.jpeg)
A simple solution at first glance is to opt for a CMS: there are indeed many of them, the most popular being for example Wordpress

### [263. How to Temporarily Resolve CORS Error in the Console](https://hackernoon.com/how-to-temporarily-resolve-cors-error-in-the-console)
![](https://cdn.hackernoon.com/images/S7bN1YC1gAWaK0teZwD48hpZxr03-5493q1x.jpeg)
You may have exhausted all solutions to make your site render on the browser but nothing seems to work. Then, you’ve checked the developer tools console only to get an error saying that CORS is blocking your API requests.

### [264. 100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot ](https://hackernoon.com/100-free-pluralsight-courses-to-learn-python-java-and-spring-boot-ye6i3y0m)
![](https://cdn.hackernoon.com/images/v821r3yol.jpg)
Hello guys, I have awesome news to share with you. Pluralsight has announced that all their 7000+ expert-led courses are free for one-month, April 2020, to support people staying at home due to COVID-19.

### [265. Create Your Own Ad Blocker in 3 Minutes [Tutorial]](https://hackernoon.com/your-own-ad-blocker-in-3-minutes-bpo42wz)
![](https://cdn.hackernoon.com/drafts/zi1a42pz.png)
Beat ads the hacker way with this quick guide.

### [266. Browser Caching: A Practical Introduction](https://hackernoon.com/browser-caching-a-practical-introduction)
![](https://cdn.hackernoon.com/images/caching-clhjstwxm000001s63hi76utc.png)
This article is just a brief introduction to browser caching. It has two main goals. First, to provide a few quick and easy-to-use recipes for beginners...

### [267. Optimizing Performance in Fabric.js 5: 14 Best Practices and Tips](https://hackernoon.com/optimizing-performance-in-fabricjs-5-14-best-practices-and-tips)
![](https://cdn.hackernoon.com/images/eEEgu5i7oPT43ELXf3sIwzEfwUF3-4z93pxn.png)
Learn how to optimize performance in Fabric.js for smooth canvas interactions and rendering. Explore techniques like renderOnAddRemove, enlivenObjects, caching.

### [268. How to Use GraphQL with the Remix Framework](https://hackernoon.com/how-to-use-graphql-with-the-remix-framework)
![](https://cdn.hackernoon.com/images/YhQrn2uriTN9SEA31DxtfMz7glu1-f7b3yrx.jpeg)
Learn how to integrate GraphQL into your Remix project! Follow this step-by-step tutorial and learn about how GraphQL and Remix can be best friends!

### [269. 110% Complete JWT Authentication with Django & React - 2020](https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-tiq3bhj)
![](https://cdn.hackernoon.com/drafts/1gn2er5.png)
ReactJS is a fantastic frontend framework, and Django is a fantastic backend framework. However, as usual when dealing with anything of more than trivial complexity, it isn’t easy to get the two to place nicely together. It's not like taping a banana to a wall.

### [270. The Factory Method pattern in TypeScript](https://hackernoon.com/the-factory-method-pattern-in-typescript)
![](https://cdn.hackernoon.com/images/xJY7Mil1Iaawpy4gQe2JjaeojZY2-tca3p2x.jpeg)
The Factory Method pattern is a design pattern that is used to create objects without specifying the exact class of object that will be created.

### [271. Using Redis Streams with NestJS: Part 1 - Setup](https://hackernoon.com/using-redis-streams-with-nestjs-part-1-setup)
![](https://cdn.hackernoon.com/images/CgB3JUoAMba0EfivxJcY6vlIFNU2-3n93pwk.png)
This is part 1 of a 3-part series, where we will explore how to use Redis streams with NestJS.

### [272. 5 Web Dev Tools To Improve Your Productivity](https://hackernoon.com/5-web-dev-tools-to-improve-your-productivity-gp163wmi)
![](https://images.unsplash.com/photo-1483058712412-4245e9b90334?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Time is always a scarce resource for developers. From aggressive deadlines, to multiple projects, to unexpected requirements, our time is constantly in demand. That's why we're always on the lookout for tools and processes that help us boost productivity. In this article, we'll look at five web development tools that might just give you that extra boost in productivity you need.

### [273. Understanding Typescript Generics and How to Implement Them](https://hackernoon.com/understanding-typescript-generics-and-how-to-implement-them)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-8503ksc.png)
Typescript generics are a way to create flexible, reusable code components in typescript.

### [274. A TCP Flow and HTTP Flow Guide: Changing HTTP Messages](https://hackernoon.com/a-tcp-flow-and-http-flow-guide-changing-http-messages)
![](https://cdn.hackernoon.com/images/SnVhdDNm3fMGfftKZO7mnXldvQm2-2f03bnp.jpeg)
Let’s take a closer look under the hood at what the process of changing HTTP messages is.

### [275. User Authentication in Android using Firebase (Java)](https://hackernoon.com/user-authentication-in-android-using-firebase-java)
![](https://cdn.hackernoon.com/images/s6Oqrc0EZkg4kONGviNcpShG3T12-uf93nlq.jpeg)
Firebase is a mobile(Android or iOS) and web application development platform. It provides a suite of cloud-based tools and services offered by Google

### [276. NoSQL: System Design Cheat Sheet](https://hackernoon.com/nosql-system-design-cheat-sheet)
![](https://cdn.hackernoon.com/images/x2cx7JIyp7MnzU1thrm5j2g7k752-r7931ch.jpeg)
wide-column stores, graph databases,time series databases, nosql,system design,interview,key-value,databases,document databases,columnar databases

### [277. An Easier Way to Authenticate Users in E2E Tests](https://hackernoon.com/an-easier-way-to-authenticate-users-in-e2e-tests-230d86071f48)
![](https://cdn.hackernoon.com/images/teal-and-purple-cartoon-robot-revealing-it-is-really-a-human-xhzv0kb4fl5qbxmrino6vqni.png)
There are many cases in which you may need your tests to act on behalf of an authenticated user. For instance, if your Web application provides special functionality for authorized users, you will need your test to authenticate.

### [278. Creating and validating a template-driven form to an Angular application](https://hackernoon.com/adding-form-validation-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-ua92l9h.jpeg)
Application example built with Angular 14 and creating and validating a template-driven form.

### [279. Breaking the Monolith: A Comprehensive Guide to Code Splitting Techniques](https://hackernoon.com/breaking-the-monolith-a-comprehensive-guide-to-code-splitting-techniques)
![](https://cdn.hackernoon.com/images/xc4tHTeTFVT2acicoza639IgwXu1-b493sob.jpeg)
Discover how to elevate your codebase by mastering code splitting techniques. Make your project stand out with efficient and scalable front-end architecture

### [280. The Big O Notation in JavaScript](https://hackernoon.com/the-big-o-notation-in-javascript)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-8w93q9x.jpeg)
Understanding the Bachmann-Landau notation

### [281. How to Stop an Active Process on a Port](https://hackernoon.com/how-to-stop-an-active-process-on-a-port)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-4p93pc6.jpeg)
It is common in Node.js and other languages to run a script on a certain port. These are steps to take to stop an active process on a port. 

### [282. Course Review - The Complete Web Developer in 2023: Zero to Mastery](https://hackernoon.com/course-review-the-complete-web-developer-in-2022-zero-to-mastery)
![](https://cdn.hackernoon.com/images/B6I7WEwrKubf11jAWFL33iiMzR13-ikc3j2y.jpeg)
Are you someone who would like to learn Web Development, but don’t know where to start? Well, you are in the right place.

### [283. Autocomplete Search Component With React and TypeScript](https://hackernoon.com/autocomplete-search-component-with-react-and-typescript)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-0c93uls.jpeg)
Autocomplete Search Component With React and TypeScript

### [284. Building a Sidebar in React with a Higher-Order Component](https://hackernoon.com/building-a-sidebar-in-react-with-a-higher-order-component)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-6l93pvf.jpeg)
In this article, I explore one of the use cases of React's higher-order component.

### [285. Angular Server Side Rendering State Transfer For HTTP Requests](https://hackernoon.com/angular-server-side-rendering-state-transfer-for-http-requests-wu263t3h)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FlycBCBC4XANuNhPHKYhTmXsxfQf2-g1ne3tui.jpeg?alt=media&token=26cf194a-022d-40e7-b3f9-cd40862923f2)
This tutorial extends the SSR explained on Server-side rendering (SSR) with Angular Universal page. This tutorial fixes the content flash occurs on SSR write after page loads due to content refresh caused by data received through network requests. If you are crazy about PageSpeed/Web Vitals score as much as me, this will help you to improve: 

### [286. Introduction to 3D Javascript Library: Three.js Basics](https://hackernoon.com/introduction-to-3d-javascript-library-threejs-basics-aec33yfb)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-7l83x6y.jpeg)
The complexity of the Web is changing daily, and its scope is growing just as fast, especially with 3D rendering.

### [287. Maximize Your React Skills: Build a To-Do List App from Start to Finish (with TypeScript + Vite)](https://hackernoon.com/maximize-your-react-skills-build-a-to-do-list-app-from-start-to-finish-with-typescript-vite)
![](https://cdn.hackernoon.com/images/42fVSCMQWfSi7dcFWQN3DtjfjLC2-1lg3opf.jpeg)
Master the basics of building an app with React and TS. Learn how to use state, props, and data flow to create a fully functional app.

### [288. New and Improved PHP Backend Roadmap](https://hackernoon.com/new-and-improved-php-backend-roadmap)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-i993z1q.jpeg)
we decided to create a step-by-step guide demonstrating the bigger picture and providing easy-to-follow guidelines for people who want to learn PHP.

### [289. How to Create a PDF Invoicing Web Application Using NodeJS and Foxit PDF SDK](https://hackernoon.com/how-to-create-a-pdf-invoicing-web-application-using-nodejs-and-foxit-pdf-sdk)
![](https://cdn.hackernoon.com/images/Tg8Fkkdp5cSpeP1n6nQh9Kb7iBs1-id93r71.png)
Generating payment invoices is a crucial aspect of any business, and digital invoicing has become a common practice across various industries.

### [290. Disabling My Favicon: How and Why](https://hackernoon.com/disabling-my-favicon-how-and-why)
![](https://cdn.hackernoon.com/images/LLNXiPKIsZM5IWTNJfmlBf6EZjZ2-n093du5.jpeg)
It turns out that disabling a Favicon is surprisingly easy and eve a good idea when you don't really want to deal with the hassle of another part of a website

### [291. How To Auto-Correct Your Code: A Web Developer Guide](https://hackernoon.com/how-to-auto-correct-your-code-a-web-developer-guide-f12y32vn)
![](https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Learning to code can be tons of fun but it is often overwhelming. Web developers, especially new ones, are constantly learning new content. What makes it worse is that there are so many rules to learning how to write good code. 

### [292. How to Change Index HTML in Nginx](https://hackernoon.com/how-to-change-index-html-in-nginx)
![](https://cdn.hackernoon.com/images/4D5QqkdVRohxYGmP0vFdj0UsExU2-id83xeu.jpeg)
Learn how to change the index HTML file in Nginx, particularly in Kubernetes using ConfigMap.

### [293. Scrape Google Images with Node JS](https://hackernoon.com/scrape-google-images-with-node-js)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-wk931m4.jpeg)
This tutorial will teach us to scrape Google Images with Node JS.

### [294. Making GraphQL Queries in Python Like a Boss](https://hackernoon.com/making-graphql-queries-in-python-like-a-boss)
![](https://cdn.hackernoon.com/images/7UvMZlp4xVQu6AqlsRww5pVK61t2-g193q63.jpeg)
A guide to which GraphQL client libraries to use in Python.

### [295. Build a Document Analyzer with ChatGPT, Google Cloud, and Python](https://hackernoon.com/build-a-document-analyzer-with-chatgpt-google-cloud-and-python)
![](https://cdn.hackernoon.com/images/UUv7KtEHDCNbhNo3nUI5rsMdOdx1-k8e3vwm.jpeg)
Using ChatGPT to build an app that can analyze any PDF, in any language, and lets you ask custom questions. 

### [296. RUBY versus PHP: Who Is The Winner ?](https://hackernoon.com/ruby-versus-php-who-is-the-winner-l35fj30t5)
![](https://cdn.hackernoon.com/images/lq5ji30pt.jpg)


### [297. How To Design a Tribute Page with Basic HTML5 & CSS3](https://hackernoon.com/how-to-design-a-tribute-page-with-basic-html5-and-css3-287v33mk)
![](https://hackernoon.com/images/e178Xecok0TlGP5gaTutNkU1thY2-f61s337u.jpeg)
Let us discuss (or understand) the components of the Tribute page that I built with HTML5 & CSS3 in a step-by-step guide.

### [298. How To Use SASS In Your Create-React-App](https://hackernoon.com/how-to-use-sass-in-your-create-react-app-oh2x3ywb)
![](https://cdn.hackernoon.com/images/4p5zj2a9d.jpg)
Create-react-app is facebook's attempt at setting up a developer to get started building react apps very quickly. It is a boilerplate that comes pre-configured with a wide array of tools and technologies that ensure a smooth running react application. However, create-react-app does not come with Sass preprocessing by default. To add sass preprocessing, we would need to add an extra dependency to our list of dependencies  known as node-sass.

### [299. The Clean Code Book for JavaScript Developers: A Quick Summary](https://hackernoon.com/the-clean-code-book-for-javascript-developers-a-quick-summary-m82b373s)
![](https://cdn.hackernoon.com/images/zaFsi86habTuCYRikyd3UBKEgKE3-p04j35qt.png)
This blog post summarizes the book “Clean Code” written by Robert Martin on how to write a readable and maintainable code.

### [300. Designing an On-Demand Video Streaming Service](https://hackernoon.com/designing-an-on-demand-video-streaming-service)
![](https://cdn.hackernoon.com/images/OAWNH2u4oMfvIQnqBHkGhGDHPN72-mfd3lsk.jpeg)
The popular implementations of an on-demand video streaming service are the following: YouTube, Netflix, Vimeo, and TikTok. The video files are stored in a mana

### [301. Deleting a Column from a Django Model on Production](https://hackernoon.com/deleting-a-column-from-a-django-model-on-production)
![](https://cdn.hackernoon.com/images/RJR62NidzuWvMadph8p0OWg7H8c2-rce3osq.jpeg)
How to safely remove a column in Django on a production with more than 1 pod

### [302. How To Use WebRTC With Laravel](https://hackernoon.com/how-to-use-webrtc-with-laravel)
![](https://cdn.hackernoon.com/images/glJc8wR7pPZxszJ5nouCekLyfcA2-1682oer.jpeg)
In this guide, you will learn how to set webRTC in your Laravel project and how WebRTC works! Check it out.

### [303. How to Create Multilingual React Apps with react-i18next](https://hackernoon.com/how-to-create-multilingual-react-apps-with-react-i18next)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-q2a3x9x.jpeg)
This step-by-step guide covers setting up i18next, translating components, and switching between languages for a multilingual user experience.

### [304. Why JavaScript Developers Should Use the Debugger Instead of Console.log](https://hackernoon.com/why-javascript-developers-should-use-the-debugger-instead-of-consolelog)
![](https://cdn.hackernoon.com/images/debugger-in-a-console-log-clh0n69cy000001s6hra5hwlh.png)
In this article, I explain why JavaScript developers should prioritize using the debugger over console.log and explore the limitations of console.log.

### [305. Can You Get A Developer Job With HTML And CSS Only?](https://hackernoon.com/can-you-get-a-developer-job-with-html-and-css-only-qv153u4c)
![](https://images.unsplash.com/photo-1461632830798-3adb3034e4c8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
When I was just learning web development and only knew HTML and CSS, I wasn’t applying for any job, because most of the people told me that you can’t get a developer job with just HTML and CSS. In this article, I’ll analyze that a little bit better and maybe try to prove it wrong.

### [306. Is Your Code Slow?: Avoid These 19 Common JavaScript and Node.js Mistakes](https://hackernoon.com/is-your-code-slow-avoid-these-19-common-javascript-and-nodejs-mistakes)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-ek93sfr.jpeg)
Learn about 19 common JavaScript and Node.js mistakes that can slow down performance, like excessive DOM access, poorly scoped events, blocking the main thread,

### [307. How to Add an Announcement Banner to your React Navbar](https://hackernoon.com/how-to-add-an-announcement-banner-to-your-react-navbar)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-zpl3p2s.jpeg)


### [308. How to Add Authentication to a Full Stack MERN Web Application](https://hackernoon.com/how-to-add-authentication-to-a-full-stack-mern-web-application)
![](https://cdn.hackernoon.com/images/ZXvwWhuaiAY0BoWkm8U7fJ1XTLI2-3493swa.jpeg)
This article is part 2 of "Let's build and deploy a full stack MERN web application".

### [309. 10 security tips for frontend developers](https://hackernoon.com/10-security-tips-for-frontend-developers-oi4624ld)
![](https://cdn.hackernoon.com/drafts/qb5732ov.png)
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.

### [310. Here's What You'd Typically See In A Full Stack Developer Job Description](https://hackernoon.com/heres-what-youd-typically-see-in-a-full-stack-developer-job-description-593b33vu)
![](https://cdn.hackernoon.com/images/iFi5tolUgxW81No4JJjbMu7c37s1-mm1h832i8.jpeg)
If a career as a full-stack developer caught your eye, you’re not alone. It’s one of the most sought-after jobs in the world and many people interested in tech 

### [311. Lightbug 🔥🐝- The First Mojo HTTP Framework](https://hackernoon.com/lightbug-the-first-mojo-http-framework)
![](https://cdn.hackernoon.com/images/nQvM1p4mbMZk0oMZqVyalLKK8893-t382k9m.jpeg)
Intro to Lightbug 🔥🐝, a lightweight HTTP framework in pure Mojo that allows to build web services with simplicity of Python and performance of C++

### [312. Unit Testing Functionality: Testing setTimeout and setInterval](https://hackernoon.com/unit-testing-functionality-testing-settimeout-and-setinterval-9b1i3wqn)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FAURTLQvt67O9A2fTYbN0UXvtzYI3-b41c3w1g.jpeg?alt=media&token=9e106614-9690-4122-bb31-8126f92f067e)
Recently at a client, a question came up about unit testing functionality that used setTimeout and setInterval.

### [313. Building a Travel Mobile App using Flutter](https://hackernoon.com/building-a-travel-mobile-app-using-flutter)
![](https://cdn.hackernoon.com/images/airplane-nfn5ckegmz6ytv9sne2iso0x.png)
In this article, we will be building a Travel Mobile App using flutter.

### [314. Developer's Gold Mine: 8 Youtube Channels You Should Subscribe to Right Away](https://hackernoon.com/developers-gold-mine-8-youtube-channels-you-should-subscribe-to-right-away)
![](https://cdn.hackernoon.com/images/hxgB3A2KjtPk4sJXB1ezGnusKBx1-3zi3ope.jpeg)
This blog showcases 8 best YouTube channels for developers with tutorials, discussions & advice from experienced professionals.

### [315. Cool JavaScript Libraries To Consider Using in 2023](https://hackernoon.com/cool-javascript-libraries-to-consider-using-in-2023)
![](https://cdn.hackernoon.com/images/3Y2ElJHvj3dL4J86OiboGUBnaGo2-2kv3pqv.jpeg)
dJavaScript libraries are incredibly useful tools for any web app developer. They’re designed for boosting the development process and adding extra functionality to your projects with just a few lines of code.

### [316. 7 React Admin Dashboard Templates For Your Next Project](https://hackernoon.com/7-react-admin-dashboard-templates-for-your-next-project-gn3x3yse)
![](https://cdn.hackernoon.com/images/7223j3kwu.jpg)
Developing an admin area for your React web application can be very time-consuming. And it is just as important as designing all of the front-end pages. Both admin area of your web-application and the pages themselves must be pixel-perfect, fully responsive and have mobile-first and user-friendly web design. In this article, I listed some of the best ReactJS admin dashboard templates that can speed up your development and save you a lot of time and money, eliminating the costs of creating a web application from scratch.

### [317. Using React to Take Advantage of Markdown and Adding Functionalities to Code Blocks](https://hackernoon.com/using-react-to-take-advantage-of-markdown-and-adding-functionalities-to-code-blocks)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-ji93ryp.jpeg)
Build a tutorial blog with React and Markdown. Enhance your blog's user experience with syntax highlighting, dark mode and copy to clipboard functionality.

### [318. 5 JavaScript Project Management Libraries to Boost Web Development](https://hackernoon.com/5-javascript-project-management-libraries-to-boost-web-development-162c35e4)
![](https://cdn.hackernoon.com/images/3Y2ElJHvj3dL4J86OiboGUBnaGo2-q26d33ma.jpeg)
Here are 5 JavaScript project management libraries that help to provide remote teams with an easy but effective way to organize tasks and activities.

### [319. Next.js and SignalR: Effortless Socket Integration and Troubleshooting](https://hackernoon.com/nextjs-and-signalr-effortless-socket-integration-and-troubleshooting)
![](https://cdn.hackernoon.com/images/IDrwnuUpw3ciQtHAlLVk7zUZSpN2-1293xep.jpeg)
Next.js and SignalR integration. Next.js and SignalR troubleshooting

### [320. Ruby On Rails Command Line: Rails Scaffolding Tutorial](https://hackernoon.com/ruby-on-rails-command-line-rails-scaffolding-tutorial-8312j3yhu)
![](https://cdn.hackernoon.com/images/ac1vq3y8f.jpg)
Scaffolding in Ruby on Rails refers to the auto-generation of a set of a model, views and a controller usually used for a single database table.

### [321. PHP Frameworks Explained in 5 Simple Questions](https://hackernoon.com/php-frameworks-explained-in-5-simple-questions-uvz31i7)
![](https://cdn.hackernoon.com/drafts/4l4331jo.png)
If you are making your first steps in the world of web development, either as a prospective programmer or a potential employer, it won’t be long until you come across PHP. It’s no surprise, as PHP ranks among the most popular web programming languages. On top of that, the whopping 79% of all websites are built on PHP, and the web tools you use daily, like Facebook, Wikipedia, Yahoo, MailChimp, and Pinterest, are among them. 

### [322. Add Event Listener to Multiple Elements in Javascript ](https://hackernoon.com/add-event-listener-to-multiple-elements-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-r493oaz.jpeg)
If you've ever worked in vanilla Javascript, you might be familiar with adding event listeners to elements using the following formula: 

### [323. What Is The Ultimate Search Engine For Developers - You.com vs Google vs DDG](https://hackernoon.com/what-is-the-ultimate-search-engine-for-developers-youcom-vs-google-vs-ddg)
![](https://cdn.hackernoon.com/images/vLdnVhWwyhfSFQROZt7q2eW6f5R2-r0n3otp.jpeg)
I wanted to compare You.com to DuckDuckGo (a popular and also privacy-oriented search engine) and Google, probably the default for most developers.

### [324. Creating Real-Time Chat App using React And Socket.io with E2E Encryption](https://hackernoon.com/creating-real-time-chat-app-using-react-and-socketio-with-e2e-encryption-b0113u5s)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F1ygoOJrOIvNFNp0un0WDg4WhTfk1-bqbe3y0o.gif?alt=media&token=3fe92d69-0a5a-4b5a-89c5-f77857e24bb3)
Link link: Here is the example of the chat app we are going to build ✌.

### [325. How to Build a Scalable Webhook Delivery System With Kafka, SQS & S3](https://hackernoon.com/how-to-build-a-scalable-webhook-delivery-system-with-kafka-sqs-and-s3)
![](https://cdn.hackernoon.com/images/pZn4Fzw7V6NV95cw0QLlvkgc0gM2-pgb3myx.jpeg)
How to build your own webhook delivery system using Apache Kafka, AWS SQS and S3

### [326. How to Integrate an Image CDN in Your React Application](https://hackernoon.com/how-to-integrate-an-image-cdn-in-your-react-application-7r3z3v0s)
![](https://cdn.hackernoon.com/images/rr1mv3yig.jpg)
One of the most crucial maxims that I internalized during my career in web engineering is that every technical decision embodies tradeoffs. No matter the benefits, you’ll always face certain costs and restrictions: be it creating an abstraction in your code, scaling a distributed data store or choosing between web and mobile app format for the initial product launch.

### [327. How to Create Custom Flash Messages in React [Part 1]](https://hackernoon.com/how-to-create-custom-flash-messages-in-react-part-1-zx3e3whx)
![](https://cdn.hackernoon.com/drafts/x6ai2g89.png)
In the first part of this tutorial we are going to build a flash message step-by-step with React and Material UI.

### [328. Lessons I’ve Learned as a UX/UI Designer in a Failed Startup](https://hackernoon.com/lessons-ive-learned-as-a-uxui-designer-in-a-failed-startup)
![](https://cdn.hackernoon.com/images/5V7lzwYV5bT0V6BNwevrrjRSCFD3-bg736x0.png)
Lessons from a failed website builder startup fro UI/UX designers and developers

### [329. How to Build a Chrome Extension That Makes API calls](https://hackernoon.com/how-to-build-a-chrome-extension-that-makes-api-calls-kfbh3y5e)
![](https://cdn.hackernoon.com/images/7waam2aoi.jpg)


### [330. Inserting 'User Profile Info' into your React Navbar](https://hackernoon.com/inserting-user-profile-info-into-your-react-navbar)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-en92b9j.jpeg)
This article shows you how to insert the profile information of any user into the react navigation bar, so as to make it sign-in aware.

### [331. Popular Codeless Open Source Testing Tools](https://hackernoon.com/popular-codeless-open-source-testing-tools)
![](https://cdn.hackernoon.com/images/ARCWTrgYpoc531106B2eMedWoT42-ky93jnu.jpeg)
Programming languages have been a core part of software development. However, popular codeless open source testing tools are making it possible to go without.

### [332. Adding the Google reCAPTCHA v3 to an Angular application](https://hackernoon.com/adding-the-google-recaptcha-v3-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-1n92mhl.jpeg)
Application example built with Angular 14 and adding the Google reCAPTCHA v3 component using the ng-recaptcha library.

### [333. Don’t Be Lazy: 3 Problems with Lazy Loading and When to Use Eager Loading](https://hackernoon.com/dont-be-lazy-3-problems-with-lazy-loading-and-when-to-use-eager-loading-qq1d34cl)
![](https://cdn.hackernoon.com/images/zhC7DRT3cLRRJGLFZtkQiVKSSSf1-gge31w8.jpeg)
This article explains three critical lazy loading issues, and quickly explains when you should use eager loading. 

### [334. Why Not Use Good Old CSS3??? And Forget Bootstrap!](https://hackernoon.com/why-not-use-good-ole-css3-and-forget-bootstrap-an4c326k)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-gi82rmz.jpeg)
When we start learning how to create a web page and are presented to CSS, it can be quite daunting (or exhilarating) to see the list of properties we can use. So many of them, so much we can do! So, when we're fumbling through the pages and are presented with "easy" ways to become web-developers, we grab them without a second thought.

### [335. How to Create a Simple Web Dashboard for Efficient Data Analytics](https://hackernoon.com/how-to-create-a-simple-web-dashboard-for-efficient-data-analytics)
![](https://cdn.hackernoon.com/images/pexX6r4fscfmYiYxaNdrKiRC2zz1-rwa34tm.jpeg)
Dashboard with different visualizations allows you to compare data and show changes and tendencies. In this tutorial I wil explain why and how to build one.

### [336. Laravel & Vuejs: A Miraculous Combination for Perfect Web Applications](https://hackernoon.com/laravel-and-vuejs-a-miraculous-combination-for-perfect-web-applications-fy4jp3wtr)
![](https://cdn.hackernoon.com/drafts/d0o3wb0.png)
With 72% of the market share, PHP is one of the most popular and widely used programming languages. Laravel is a powerful Model-View-Controller based PHP framework for all of the web artisans. This open-source PHP framework was created for creating full-featured websites. It is the best choice for web app developers who seeks expressive, simple and elegant toolkit in order to create elegant applications with a good speed. The founders of Laravel value elegance, simplicity, and readability more than anything and designed this PHP framework upholding these values. It is PHP’s fastest-growing framework owing to its scalability, ease of use, and
flexibility.

### [337. Pixels vs REM vs EM: Breaking down CSS Sizes](https://hackernoon.com/pixels-vs-rem-vs-em-breaking-down-css-sizes)
![](https://cdn.hackernoon.com/images/KDUtb6NJFHTCTCEFxifRpfv9X1z2-0192h1a.png)
Should you use px or rem or em? In this post we'll try to get the answer of this question and we'll see which unit to use when

### [338. Simplifying Blockchain: How Abstraction is Revolutionizing the Web3 Wallet Experience on Flow](https://hackernoon.com/simplifying-blockchain-how-abstraction-is-revolutionizing-the-web3-wallet-experience-on-flow)
![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-zu938ck.jpeg)
Finally, the concept of abstraction is finding a place in web3 and should help make blockchain development less confusing and intimidating.

### [339. How to Sort an Array by Date in Javascript](https://hackernoon.com/how-to-sort-an-array-by-date-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-3j93ozp.jpeg)
We've all been in a situation in Javascript where we have a set of data, all with different dates, which we want to sort by date quickly. 

### [340. These Coding Interview Questions Will Separate the Pros From the Amateurs](https://hackernoon.com/these-coding-interview-questions-will-separate-the-pros-from-the-amateurs)
![](https://cdn.hackernoon.com/images/pa3TMDOS74ZPJOdwbuPVmBQWM612-13833m3.jpeg)
I've crafted a set of 10 tricky questions that I pose to every new candidate to go beyond merely assessing someone's technical skills.

### [341. Creating a Personalized Map for Your Website with the Google Maps API](https://hackernoon.com/creating-a-personalized-map-for-your-website-with-the-google-maps-api)
![](https://cdn.hackernoon.com/images/sTRUNAeQveUaNtFRnKYz7kRkOKZ2-xo93p6w.jpeg)
Learn how to create and integrate a personalized map on your website using Google API.

### [342. 7 Best Practices for Speeding Up Code Reviews](https://hackernoon.com/7-best-practices-for-speeding-up-code-reviews)
![](https://cdn.hackernoon.com/images/D7Hn3CmOHedLjdaXSIpRfZ5ezZG3-4u93uze.jpeg)
Code reviews can be painful. But, there are plenty of ways we can make the process a better experience for both the code author and the code reviewer.

### [343. How to Pass Optional Parameters in Typescript](https://hackernoon.com/how-to-pass-optional-parameters-in-typescript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-f293opt.jpeg)
If you try to run a function with a different number of parameters than the function actually has, you'll get an error in TypeScript. Here's how to get past it.

### [344. How Javascript Was Created and Why The History Behind It Is Important](https://hackernoon.com/how-javascript-was-created-and-why-the-history-behind-it-is-important-fwh3tco)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-ppd3tly.jpeg?alt=media&token=b31469ee-6cb9-453b-a740-9318d731a65e)
Having a humble beginning of starting as a language that was intended to handle browser validations to a full-blown programming language that powers a lot of desktop applications as well, JavaScript has traveled a long journey.

### [345. How to Run Reverse Shell for Hacking in Linux](https://hackernoon.com/how-to-run-reverse-shell-for-hacking-in-linux-of5i37ob)
![](https://hackernoon.com/images/x7oAbeUtx1YeP5GIalmxyzfySdx2-hdp3224.jpeg)
A reverse shell is a hacking vulnerability that the hacker executes .php codes or an executable file in which he gets access to the shell of the target system.

### [346. Using CSS to Create a GIF Animation](https://hackernoon.com/using-css-to-create-a-gif-animation)
![](https://cdn.hackernoon.com/images/kOGh8yb1TiVOy67Rvji043cXEXj1-8w93rur.gif.webp)
Using CSS animation to generate the content required for an animated GIF

### [347. Essential Guide to Image Processing with WebAssembly](https://hackernoon.com/essential-guide-to-image-processing-with-webassembly-q11u33hq)
![](https://cdn.hackernoon.com/images/2jmT8Pmc7QMn8DtMC0v9qnNrnKa2-lc50331u.jpeg)
Simple image manipulations with WebAssembly and AssemblyScript in the web browser.

### [348. React Image Reordering Grid Drag and Drop (Desktop and Mobile)](https://hackernoon.com/react-image-reordering-grid-drag-and-drop-desktop-and-mobile)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-yz92ghp.jpeg)
Full story of my implementation of the DnD feature on mobile devices with examples on codesandbox.

### [349. A Step-By-Step Guide to Unit Testing for Express API](https://hackernoon.com/a-step-by-step-guide-to-unit-testing-for-express-api)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-3f93pd2.jpeg)
A detailed step-by-step guide to writing unit tests for your node express API using mocha, chai, sinon, supertest, rewire, and nyc.

### [350. Setting Up a Backend for React App in 15 Minutes](https://hackernoon.com/setting-up-a-backend-for-react-app-in-15-minutes-yg1n3wmd)
![](https://cdn.hackernoon.com/drafts/262kq3wnk.png)
Recently I have introduced Directual on Hackernoon (see Low-code for hackers). Now I would like to continue with absolutely practical post. First, I will show the general scheme of combining Directual and React, and then you will find the live-demo of building an app from scratch to production-ready Docker-container.

### [351. How to Encode a URL in Go](https://hackernoon.com/how-to-encode-a-url-in-go)
![](https://cdn.hackernoon.com/images/YwsrgyMKpGcOvxUwE1TaB86Dtsp1-qa9233i.jpeg)
URL encoding in Go (Golang) is the process of converting a string into a URL-encoded format that is safe to include in a URL.

### [352. The Magic of Component-based Frontend Development](https://hackernoon.com/the-magic-of-component-based-frontend-development)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-h103ndz.jpeg)


### [353. Hosting Your Web Development Projects For Free [A How-To Guide]](https://hackernoon.com/hosting-your-web-development-projects-for-free-a-how-to-guide-k87732yr)
![](https://cdn.hackernoon.com/images/6gy3yx1.jpg)
Many people (myself included) don’t host their personal projects, because it usually costs money, right? The thing is that those projects don’t matter if no one can see them. How are you going to prove someone that you’ve to build 3 real-world projects if he can’t see them? There is a solution for that, and that’s free hosting. In this article, I’ll give you a few best free hosting options that you can use to host your projects. Let’s get started!

### [354. React Hook to Measure an Element's Size and Handle Responsive Components](https://hackernoon.com/react-hook-to-measure-an-elements-size-and-handle-responsive-components-ge3l3vj9)
![](https://images.unsplash.com/photo-1531171673193-06ab3c43e4a5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
react-cool-dimensions is a React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Try it you will ❤️ it!

### [355. How to Detect Proxies on Your Site with Flask Backend and IPQuery API](https://hackernoon.com/how-to-detect-proxies-on-your-site-with-flask-backend-and-ipquery-api)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-fu132mp.webp)
Learn how to build a Flask application that detects proxy servers using the IPQuery API. 

### [356. Why Every Software Engineer Should Learn Python?](https://hackernoon.com/why-every-software-engineer-should-learn-python-uf6c3yn5)
![](https://images.unsplash.com/photo-1483817101829-339b08e8d83f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Hello guys, If you follow my blog regularly, or read my articles here on HackerNoon, then you may be wondering why am I writing an article to tell people to learn Python? Didn’t I ask you to prefer Java over Python a couple of years ago?

### [357. How to Fetch Data From an API in React.js](https://hackernoon.com/how-to-fetch-data-from-an-api-in-reactjs-j11q34k0)
![](https://hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-95l344q.jpeg)
Without any doubt, the use of React is increasing day by day. And also API(Application Programming Interface) is gaining more popularity in the modern era of technology. This article will guide a beginner to play with React to API.

### [358. 7 Programming Concepts Everyone Should Know (With Code)](https://hackernoon.com/7-programming-concepts-everyone-should-know-with-code-s028v305x)
![](https://cdn.hackernoon.com/images/xv2bm30ty.jpg)
Hi Folks , Hope you all programming geeks are doing good. Today, we will discuss about the basic programming design principles and concepts that everyone should be aware about while developing a software . Well, Software Development ain’t easy. Programming/coding can be a real daunting task if not done in the right way. Hope you guys will like this post . So, without wasting time lets get started . [ i will be using JavaScript in here but you can use whatever language you are comfortable with ! ]

### [359. The Dangers of SVG Files: A Lesser-Known Vector for XSS Attacks](https://hackernoon.com/the-dangers-of-svg-files-a-lesser-known-vector-for-xss-attacks)
![](https://cdn.hackernoon.com/images/cyber-attack-chaos-clehq8y9c000001s6fbt04fmb.png)
One lesser-known vector for XSS attacks is the SVG image format. SVGs support JavaScript using the <script> tag, which can be exploited by attackers. 

### [360. My Laravel Repository Pattern Solution (in only 30 lines of code)](https://hackernoon.com/the-best-laravel-repositories-solution-in-30-lines-of-code-ee1553z31)
![](https://cdn.hackernoon.com/drafts/3x14m3zf9.png)
A 30 line piece of script can finally provide a good solution for a repository pattern in Laravel apps.

### [361. 2019 in Frontend Development: JS, TS, React, Vue & More](https://hackernoon.com/a-recap-of-frontend-development-in-2019-n91o3bum)
![](https://cdn.hackernoon.com/images/txr3bsx.jpg)
Originally published on gitconnected.com

### [362. Unsafe use of target=”_blank”](https://hackernoon.com/unsafe-use-of-target_blank-39413ycf)
![](https://cdn.hackernoon.com/drafts/ct822dlq.png)
Developers have been frequently using this attribute to open a new webpage. But this attribute, though looks pretty simple, can create a major security threat to your application.

### [363. Building An Infinite Scroll Using React Hooks](https://hackernoon.com/builing-an-infinite-scroll-using-react-hooks-pe113urj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F3nhao37bBEfHA9RTQ0WNVWfXPD02-53x3uuo.jpeg?alt=media&token=cff83a2b-e1af-4849-85b7-1e6bd2efc91d)
There are a lot of React pre-made components out there that promise infinite scroll functionality. The problem with that is that sometimes they are not tailored to fit your specific needs, especially if you are using the newly featured React-Hooks to create functional components all across your application. These pre-made components work well with class components, but they have not been updated to work with the state-of-the-art functional hook-components.

### [364. How Does Node.js Achieve Concurrency?](https://hackernoon.com/how-does-nodejs-achieve-concurrency)
![](https://cdn.hackernoon.com/images/1vUvJ9iHgHZcKTT7tkxuBZ7UIAf1-w1f3ozd.jpeg)
Ever wondered how Node.js handles multiple requests despite being single threaded? Find out the secret to concurrency in Node.js and how the event loop works

### [365. Adding Dark Mode to Your Website Using a Single Line of HTML](https://hackernoon.com/adding-dark-mode-to-your-website-using-a-single-line-of-html)
![](https://cdn.hackernoon.com/images/8cc7EWW2e9beN0MSU20AgjQpHxK2-bxa2ges.jpeg)
This weekend, I wanted to explore how I can add dark mode to my website, for the benefit of the ~2 people who read my blog. 

### [366. Step-by-Step Guide to Building and Launching your Chrome Extension](https://hackernoon.com/step-by-step-guide-to-building-and-launching-your-chrome-extension-th3h3tx1)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2Fmo6FDyqxsmNgBKjqW9MRvCl9vfI3-j7793tyr.jpeg?alt=media&token=d1680010-6af8-4f65-9a66-ee6f0699da8e)
While building my first chrome extension, Foragear- Quick Search Tool, I struggled to find an article that covered the entire ideating, building, and launching process of chrome extensions. To make the lives of future chrome extension builders easier, here is an all-in-one guide to help you through the process. 

### [367. Migrating from useState to useReducer in React Hooks](https://hackernoon.com/migrating-from-usestate-to-usereducer-in-react-hooks)
![](https://cdn.hackernoon.com/images/p78YqcSArmS6R4uiGKkhQ5CNJa22-0e93n5f.jpeg)
useState is a simple hook for single state. useReducer is a powerful hook for complex state. Here's how to convert from useState to useReducer.

### [368. Writing Better Tests With Cypress' Page Elements](https://hackernoon.com/writing-better-tests-with-cypress-page-elements)
![](https://cdn.hackernoon.com/images/SKjSflbzLAO6ucZtO6jiI25CWT63-5xd3krf.jpeg)
Page Elements (PE) is a design pattern for test automation, which perfectly extends Page Object Model (POM) - learn what's that and how to add it in your code!

### [369. 4 Ways to Add Icons from Figma to Your Website](https://hackernoon.com/4-ways-to-add-icons-from-figma-to-your-website)
![](https://cdn.hackernoon.com/images/MsR1S76Pr8XibciqwaeZRXTFpAz1-iv9333x.jpeg)
Discover the most effective methods for adding icons from Figma to your website with detailed explanations and practical examples. 

### [370. What Could Be The Future of Web Development](https://hackernoon.com/what-could-be-the-future-of-web-development-jaam32ft)
![](https://cdn.hackernoon.com/images/e5bk3ysx.gif)
Living in the era of the digital transformation, fast and constant changes, it’s a true challenge for web developers and business holders not to lose sight of all these continuous shifts. If you’re connected with web  development, then this article is what you should read to the bottom. Here we’ll highlight the web development hits 2020 which you’d focus on this year and beyond to provide keen and tough competition in the industry.

### [371. Build a Simple HTML Website with Postgres Database Connectivity](https://hackernoon.com/build-a-simple-html-website-with-postgres-database-connectivity)
![](https://cdn.hackernoon.com/images/5wpKgV75aONqkTJlafw2yQmK9yd2-18834ti.jpeg)
This tutorial covers step-by-step instructions, prerequisites, and the necessary code snippets to get you started in web development.

### [372. Pynecone: Web Apps in Pure Python](https://hackernoon.com/how-to-build-web-apps-in-pure-python)
![](https://cdn.hackernoon.com/images/web-app-clc8n3083000c01s67bnedek8.png)
Pynecone is an open-source framework to build web apps in pure Python and deploy with a single command. 

### [373. Unleashing the Power of TypeScript: Improving Standard Library Types](https://hackernoon.com/unleashing-the-power-of-typescript-improving-standard-library-types)
![](https://cdn.hackernoon.com/images/a-muscular-man-hitting-the-weights-anime-style-s34s0kelbyvcawlgnowtvqc4.png)
How to achieve better type safety and code quality by improving types in TypeScript's standard library.

### [374. Use Twig + Timber To Build Better WordPress Themes](https://hackernoon.com/build-cleaner-wordpress-themes-with-twig-timber-web-development)
![](https://cdn.hackernoon.com/images/IO69gv8W6RUFb2xGQu7nv0kowxQ2-2e93721.jpeg)
Learn about Twig and Timber web development, and how the Hounder team uses these tools to create stunning custom themes in word press.

### [375. Mastering Object Snapping in Fabric.js: Introducing the SnappyRect Class](https://hackernoon.com/mastering-object-snapping-in-fabricjs-introducing-the-snappyrect-class)
![](https://cdn.hackernoon.com/images/eEEgu5i7oPT43ELXf3sIwzEfwUF3-tja3pbi.jpeg)
Explore the power of object snapping in Fabric.js with the SnappyRect class. This code snippet showcases how to create custom guides and align objects precisely

### [376. Adding the social media share buttons component to an Angular application](https://hackernoon.com/adding-the-social-media-share-buttons-component-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-o192mzb.jpeg)
Application example built with Angular 14 and adding the social media share buttons component using the ngx-sharebuttons library.

### [377. How to Create a Google Chrome Extension: Image Grabber](https://hackernoon.com/how-to-create-a-google-chrome-extension-image-grabber)
![](https://cdn.hackernoon.com/images/xB1fZ7i6v7a3uD2Vj1Ss6u95Tsd2-g7a2qzz.jpeg)
Create Google Chrome extension from scratch

### [378. The Right Way to Utilize Webpack for Bundling a HTML Page With CSS and JS](https://hackernoon.com/the-right-way-to-utilize-webpack-for-bundling-a-html-page-with-css-and-js)
![](https://cdn.hackernoon.com/images/XfDhI90yXVVZsGby00eZbp7tNvU2-a293b06.jpeg)
The new HTML Bundler plugin makes Webpack setup incredibly simple, as all the configuration happens in one place. 

### [379. Cool CSS Variable Tricks To Try](https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9)
![](https://cdn.hackernoon.com/images/MsR1S76Pr8XibciqwaeZRXTFpAz1-qs8l36c0.jpeg)
In this article, we will consider several interesting hacks that allow you to use custom properties for what would seem impossible without preprocessors or JS.

### [380. How to Implement Glassmorphism via HTML and CSS](https://hackernoon.com/how-to-implement-glassmorphism-via-html-and-css-yy4833ak)
![](https://cdn.hackernoon.com/images/27nQ7cjAKuMWexJBUQoXd7m4sA33-9av93361.jpeg)
Check out this tutorial to learn how to create the glassmorphism effect using only HTML and CSS.

### [381. A Quick Module Design Pattern Example in JavaScript](https://hackernoon.com/a-quick-module-design-pattern-example-in-javascript)
![](https://cdn.hackernoon.com/images/lsrpqdnkG3dZmeCVhPouglp4K6J3-az93z9h.jpeg)
Module Design Pattern is a way to encapsulate and organize code in a self-containing module that can expose certain functionalities.

### [382. How to Send Email Verification in Next.js 14 With NextAuth.js, Resend, and React Email](https://hackernoon.com/how-to-send-email-verification-in-nextjs-14-with-nextauthjs-resend-and-react-email)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-z6832o1.jpeg)
How to implement secure email verification in Next.js 14 using NextAuth.js, Resend, and React Email. Enhance your web application's security and user experience

### [383. How Google’s Python Code Style Guide Can Help You Speed Your Engineering Team](https://hackernoon.com/how-googles-python-code-style-guide-can-help-you-speed-your-engineering-team)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-a393pna.jpeg)
Creating a consistent style guide for your codebase can help your team be more consistent and productive. Here's how Google's Python Code Style Guide looks like

### [384. Install and Configure Git on Amazon Lightsail, and Deploy Your Website in Minutes! (Freebie Inside)](https://hackernoon.com/install-and-configure-git-on-amazon-lightsail-and-deploy-your-website-in-minutes-freebie-inside)
![](https://cdn.hackernoon.com/images/N5Mn4Gq6eIOJEHFAf7nAnvEU8RH2-rha3pat.jpeg)
We break down how to easily deploy your new website on Amazon Lightsail in less than 5 minutes. Get your code up and running and get back to doing what you want

### [385. Destructuring in JavaScript: A How-To Guide](https://hackernoon.com/wtf-is-destructuring-in-javascript-6t5g32wu)
![](https://cdn.hackernoon.com/drafts/5wt36ou.png)
(This article is part of an ongoing series on technical and soft skills from Nathan Thomas, a full stack software engineer working in San Francisco building really cool stuff. He previously worked and attended Lambda School. Click here for the previous article in the series, a piece called “Please Explain Closures!”)

### [386. Build a To-Do App with React In Rails 6 (Tutorial)](https://hackernoon.com/build-a-to-do-app-with-react-in-rails-6-tutorial-pu2d3uta)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FzYMfBKTIcNUVO4vjV4Zj6GuuDxV2-wkdv3uth.jpeg?alt=media&token=4f61491c-2b06-447a-b500-d00e276bf605)
Hello everyone. Today, we will be building a todo app to showcase how to use React with Rails 6. This tutorial will be as in-depth as possible and will focus on performing CRUD operations. Our Todo app will support seeing a list of your todo, creating a today, making a todo as done, and deleting a todo. We will be leveraging react to build a reactive app and use material UI for the design.

### [387. CSS3 Fluid Layout And Media Queries: A Simple Approach to Responsive Web Design](https://hackernoon.com/css3-fluid-layout-and-media-queries-a-simple-approach-to-responsive-web-design-7r463vs3)
![](https://cdn.hackernoon.com/drafts/g4on3z5f.png)
Are you a beginner in web development? Would you like to make your web-page responsive without having to learn any framework? Have you ever been instructed to make a page responsive without any framework?

### [388. Implementing i18n in Next.js: A Guide to Non-Route-Based Localization](https://hackernoon.com/implementing-i18n-in-nextjs-a-guide-to-non-route-based-localization)
![](https://cdn.hackernoon.com/images/IDrwnuUpw3ciQtHAlLVk7zUZSpN2-d793s8s.jpeg)
Next.js: A Guide to Non-Route-Based Localization

### [389. How To Build a Dropdown Menu With HTML, CSS and JavaScript](https://hackernoon.com/how-to-build-a-dropdown-menu-with-html-css-and-javascript)
![](https://cdn.hackernoon.com/images/a-laptop-displaying-a-dropdown-menu-on-its-screen-ui8fxkqqkooosucg91fdf9er.png)
Learn how to build a fully responsive dropdown menu using HTML, CSS, and JavaScript with this straightforward guide. 

### [390. Next.js vs React: Who Wins the Battle?](https://hackernoon.com/nextjs-vs-react-who-wins-the-battle)
![](https://cdn.hackernoon.com/images/7DtulTMuZUNhuHGe0I2LlQhRAdu1-yza3pzb.jpeg)
There are two popular options for creating web applications with React: Next.js and React Router. Both have their pros and cons, but which one.

### [391. React + Express + Typescript Boilerplate with Performance and Extended Functionality](https://hackernoon.com/full-stack-react-typescript-express-project-with-advanced-features-ts4m308w)
![](https://cdn.hackernoon.com/drafts/3p1jz30sr.png)
Why Another Boilerplate

### [392. VS Code Extensions with a Bright 2022](https://hackernoon.com/vs-code-extensions-with-a-possible-bright-2022)
![](https://cdn.hackernoon.com/images/EpZkVLCBUSef3LhOGB8yY4myalo2-bt037q7.jpeg)
This story has a list of VS Code Extensions that has great potential and will possibly do well in the coming year. If you use vs code you should read this.

### [393. Unexpected Discoveries in TypeORM 0.3.11](https://hackernoon.com/unexpected-discoveries-in-typeorm-0311)
![](https://cdn.hackernoon.com/images/XIlys8PrM8eJ7n0qjETjuC0lbkB2-7i93qf7.jpeg)
TypeORM is an ORM tool for TypeScript, supports popular databases and make it easy to interact with them. Upgrade to v0.3.11 for new features and improvements. 

### [394. How to Lazy Load React Components with an Intersection Observer](https://hackernoon.com/how-to-lazy-load-react-components-with-an-intersection-observer)
![](https://cdn.hackernoon.com/images/zoOctYrZ1RX1tldfBOyGfrmZq7f1-tya3ruq.jpeg)
Learn how to improve the performance of your application by lazy loading react components using the intersection observers

### [395. How To Build Scalable Serverless Architecture on AWS](https://hackernoon.com/how-to-build-scalable-serverless-architecture-on-aws-yp1l31d6)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-me1h31ap.jpeg)
A majority of companies prefer to focus their resources on other things rather than on scalability, which causes massive problems in the future, especially once they grow to one million users. The objective of building a robust serverless application is to succeed in making it scalable and powerful at the same time.

### [396. Understanding the Javascript Event Loop (Everything You Need to Know)](https://hackernoon.com/understanding-the-javascript-event-loop-everything-you-need-to-know)
![](https://cdn.hackernoon.com/images/Bf6xbPmhtTcARlzNXM2oktEZuh22-vbg2n07.jpeg)
Demystifying the JavaScript Event Loop: Understanding Callstack, Callback Queue, and Event Loop for Efficient Development.

### [397. The Top C# .NET Spreadsheets](https://hackernoon.com/the-top-c-net-spreadsheets)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-qs0348t.png)
Explore the top C# .NET spreadsheets and their notable features for your applications in this review of leading options.

### [398. How to Add  Notifications to your React Navigation bar](https://hackernoon.com/how-to-add-notifications-to-your-react-navigation-bar)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-y0h3qsn.jpeg)


### [399. An Intro to Container-Presenter Design Patterns in React ](https://hackernoon.com/an-intro-to-container-presenter-design-patterns-in-react)
![](https://cdn.hackernoon.com/images/ZHAz9wv9l3eZzNLiVyAUACoJBo03-zl930vi.jpeg)


### [400. The Top Java Excel API Libraries](https://hackernoon.com/the-top-java-excel-api-libraries)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-1l0338w.png)
Explore the top Java Excel API Libraries and their notable features for your applications in this review of leading options.

### [401. How to Schedule and Run Recurring Cron Jobs in Node.JS](https://hackernoon.com/how-to-schedule-and-run-recurring-cron-jobs-in-nodejs)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-qwa3ob9.jpeg)
Scheduling and Running Recurring Cron Jobs in Node.JS

### [402. The Differences between Shared and Private Caching](https://hackernoon.com/the-differences-between-shared-and-private-caching)
![](https://cdn.hackernoon.com/images/TlU0qyilehYV4XrjqgkglSwSK413-jme3q1e.png)
Do you know the difference between private and shared caches ?

### [403. A Workaround to Flutter Web SEO Issue](https://hackernoon.com/a-workaround-to-flutter-web-seo-issue-1abh35kk)
![](https://cdn.hackernoon.com/images/LY29n1qtC5QZ81u8f9nsyrQZWTy1-b33525ad.jpeg)
You like Flutter, but then you know that Flutter is not well optimized and has some problems with SEO. I've figured a workaround to this issue.

### [404. Context and Provider Pattern Using Vue 3 Composition API](https://hackernoon.com/context-and-provider-pattern-using-vue-3-composition-api-c67m3vgx)
![](https://cdn.hackernoon.com/images/b71s3vhm.jpg)
The React Context API provides a way to share properties that are required by many components (e.g., user settings, UI theme) without having to pass a prop through every level of the tree (aka prop drilling). Although Vue.js does not provide the same abstraction out of the box, in this article, we’ll see that in Vue 3, we have all the tools we need to replicate the same functionality quickly.

### [405. Top 7 Courses to Become a Software Architect or Solution Architect](https://hackernoon.com/top-5-courses-to-become-a-software-architect-or-solution-architect-t05f3650)
![](https://cdn.hackernoon.com/images/4e1rm36py.jpg)
Every Programmer wants to grow in their career, but it’s not easy, and if you don’t pay attention to your job, you will likely stay in the same 
position for many years. The growth in the initial few years is 
generally fast. Still, once you reach the barrier of 5 years, you need 
to decide which direction you want to move like — people management, 
product management, or software architecture.

### [406. Understanding the Power of Proxy in JavaScript](https://hackernoon.com/understanding-the-power-of-proxy-in-javascript)
![](https://cdn.hackernoon.com/images/xc4tHTeTFVT2acicoza639IgwXu1-1xa3sbv.jpeg)
A Proxy object is an object that wraps another object and intercepts fundamental operations on it, such as property access, assignment, and deletion

### [407. Learn How to Stop Tracking Files After Adding It to .gitignore in 4 Steps](https://hackernoon.com/learn-how-to-stop-tracking-files-after-adding-it-to-gitignore-in-4-steps)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-2ug3kpl.jpeg)
When a file is tracked, adding it to .gitignore will not cause it to go untracked. Learn how to untrack a file that you have recently added to .gitignore.

### [408. Optimal Communication Between Microfrontends and Cross-microfrontend Optimization](https://hackernoon.com/optimal-communication-between-microfrontends-and-cross-microfrontend-optimization)
![](https://cdn.hackernoon.com/images/2jqChkrv03exBUgkLrDzIbfM99q2-op92ied.jpeg)
In this article, we will discuss different options for sharing state and code between micro-frontends and highlight the benefits and drawbacks of each approach.

### [409. Lightweight CSS Animations with Figma & Figmotion](https://hackernoon.com/lightweight-css-animations-with-figma-and-figmotion)
![](https://cdn.hackernoon.com/images/F59eLv11DMTq57cvijaliES8llj2-z023anv.jpeg)
How web designers and developers can collaborate in Figma to create lightweight animations in CSS, HTML, and SVGs.

### [410. React Tutorial: How To Build a Virtualized List with Infinite Scroll and a Hook](https://hackernoon.com/react-tutorial-how-to-build-a-virtualized-list-with-infinite-scroll-and-a-hook-3x1w3611)
![](https://cdn.hackernoon.com/images/jgvl75J01zfc9i0NsYvVgqlVkkh2-tcnz39ku.jpeg)
When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. However, we can use the technique of DOM recycling to solve the troubles.

### [411. A Brief Introduction to Oracle Apex: Features, Advantages, and Use Cases](https://hackernoon.com/a-brief-introduction-to-oracle-apex-features-advantages-and-use-cases)
![](https://cdn.hackernoon.com/images/HBFDpaRgFAXp9sXoW0d6LL26mvh1-7093pr1.jpeg)
This tutorial provides an in-depth overview of Oracle Apex, including its features, advantages, and use cases. It covers the benefits of low-code development...

### [412. Introducing Tailwind CSS: Pros and Cons of Tailwind](https://hackernoon.com/introducing-tailwind-css-pros-and-cons-of-tailwind-hd2k3zt2)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FNDIHgstQxNhYNQKgsXo6NLuPg9m1-wm2d3xqe.jpeg?alt=media&token=81bddab1-f820-4d74-8b7a-67978082e561)
As you might notice, Tailwind CSS has become popular among the developer community. I'm a big Tailwind fan and recently, I've built several React projects with Tailwind CSS. In this article, I'll describe why Tailwind CSS has brought so much value to the front-end development community.

### [413. Building RESTful Web Service Using C++, Swagger UI And Auto-Documented Endpoints](https://hackernoon.com/building-restful-web-service-using-c-swagger-ui-and-auto-documented-endpoints-mb153udv)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F9zNYb5eBqhYDKibDyR5k0Kisqfm2-qbhc3uxs.jpeg?alt=media&token=79db6ec2-d4d7-41ab-a0df-4d42d88b4402)
This is a 5 minutes tutorial how-to-use Oat++ (AKA oatpp) web framework to build your own C++ performant web-service and integrate it with Swagger-UI.

### [414. Top 5 React Native Starter Kits to Try | Review Guide 2021](https://hackernoon.com/top-5-react-native-starter-kits-to-try-or-review-guide-2021-xeg31dx)
![](https://cdn.hackernoon.com/images/CPZcQZuKTIRNEmHkkkOCBTvsTyd2-taeh34uw.jpeg)
Top 5 React Native starter kits with all ready-to-use components to build your first mobile app faster.

### [415. GIT: Explained in 5 Levels of Difficulty](https://hackernoon.com/git-explained-in-5-levels-of-difficulty)
![](https://cdn.hackernoon.com/images/RIiBoPtpMiRsMKX3dnzl5gb1Urj1-gr93ppp.jpeg)
I will explain GIT in five levels to different audiences.

### [416. Why Choose Designer Multiselect Over Native Select?](https://hackernoon.com/why-choose-designer-multiselect-over-native-select)
![](https://cdn.hackernoon.com/images/MsR1S76Pr8XibciqwaeZRXTFpAz1-0a636kq.jpeg)
Those layout designers who create signup or feedback forms will surely face the problem of displaying multiple items of a single selection, i.e. multiselect. Unfortunately, not all <select> tag elements can be styled out of the box as designers would like to. In this small tutorial, I would like to share my experience in solving this problem based on my knowledge of CSS and vanilla JS.

### [417. How To Create Flame Animation Using JS and CSS](https://hackernoon.com/how-to-create-flame-animation-using-js-and-css-qh3531ba)
![](https://cdn.hackernoon.com/images/3nhao37bBEfHA9RTQ0WNVWfXPD02-ba1q317e.jpeg)
Simple CSS fire animation of using HTML CSS. 

### [418. Dates in JavaScript are Broken. Who Shall Fix them?](https://hackernoon.com/dates-in-javascript-are-broken-who-shall-fix-them)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-mf93yrz.jpeg)
The Javascript Date constructor is known to have a lot of bugs and issues. Let's look at some of its major flaws so you can avoid them.

### [419. Tmux & VSCode — Persist Terminals for Productivity and Profit](https://hackernoon.com/tmux-and-vscode-persist-terminals-for-productivity-and-profit)
![](https://cdn.hackernoon.com/images/L2GfKnpqvpaCzgp24yBMlBZyW5n1-8ha3nld.jpeg)
Tired of reopening terminal windows every time you come back to a VSCode project? You can pick up right where you left off in a project without having to re-run

### [420. Creating Mouse Tracking Eyes using Javascript 👀](https://hackernoon.com/creating-mouse-tracking-eyes-using-javascript-y31q3upm)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FY5pgfcYeb2WkzcbAON1f4rfpLAW2-i41z3ut0.jpeg?alt=media&token=729b4fa9-0e45-46df-a308-e5fa5b6cbecb)
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.

### [421. A Handy Guide to Parsing URLs in JavaScript](https://hackernoon.com/a-handy-guide-to-parsing-urls-in-javascript)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-h792kzy.jpeg)
In this article, we’ll be diving deep into the topic of URL parsing in JavaScript and understanding how to access certain data from a URL string.

### [422. Building Efficient npm Packages with React, TypeScript, and CSS Modules: A Comprehensive Guide](https://hackernoon.com/building-efficient-npm-packages-with-react-typescript-and-css-modules-a-comprehensive-guide)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-f093m3e.jpeg)
boilerplate project for publishing your npmjs package with typescript and css

### [423. 6 JavaScript Courses To Land Your Next High Paying Job](https://hackernoon.com/6-javascript-courses-to-land-your-next-high-paying-job)
![](https://cdn.hackernoon.com/images/MQzhgEvAeOXyPo3IjFRz4IZU3K83-rv93htg.jpeg)


### [424. Are Developer Jobs Safe From the Next Recession?](https://hackernoon.com/are-developer-jobs-safe-from-the-next-recession-0edd3xdu)
![](https://cdn.hackernoon.com/images/yoc9308v.jpg)
For those of us not buried in sheets of global economic data — i.e., most of us — media speculation of an oncoming recession may seem like a vague and undefined threat. It’s difficult to make heads or tails out of the stream of fast-breaking news about financial predictors, benchmarks and overall anxiety. With all of this muddled information, it’s even more difficult to think about what we’re supposed to do about it.

### [425. Farewell, Ramda](https://hackernoon.com/farewell-ramda)
![](https://cdn.hackernoon.com/images/CaJQOsx5JXRYxEOC15hktEiTMlU2-vc93qne.jpeg)
Ramda, Functional programming, Native JavaScript, TypeScript, Lodash, ES2020, Code readability, Performance optimization, Coding style

### [426. 7 Online Radio Stations For Coders 🎵💖](https://hackernoon.com/7-online-radio-stations-for-coders)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-7583yx8.jpeg)
I collected some of my favorite radio stations that you can use to get some awesome music and increase your productivity while coding.

### [427. How to Create a Personal WebDev IDE in Next.js](https://hackernoon.com/how-to-create-a-personal-webdev-ide-in-nextjs)
![](https://cdn.hackernoon.com/images/5ubhiDL3VZdrG0Vq0mJNdCe5Lzz2-qn93pt4.jpeg)
In this tutorial, we'll explore the process of building a functional web development Integrated Development Environment (IDE) using React within a Next.js appli

### [428. Top Dev Jokes Of 2019](https://hackernoon.com/top-devjokes-of-2019-se5j32jp)
![](https://cdn.hackernoon.com/drafts/j41mp32tc.png)
Having fun while developing is necessary for programmers and developers. No matter how much serious or tough the situation is, one should always take things lightly when it comes to software development. 

### [429. How to Fetch Data in Javascript like a Pro](https://hackernoon.com/how-to-fetch-data-in-javascript-like-a-pro)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-db93p6b.jpeg)
Fumbling with APIs? Learn how to use the fetch API to get your data in Javascript like a pro.

### [430. React: Everything You Need to Know in 5 Minutes](https://hackernoon.com/react-everything-you-need-to-know-in-5-minutes)
![](https://cdn.hackernoon.com/images/MIq3LAf1OoPW35o7MBmd2s51rcB3-wda3st1.jpeg)
Can you learn React in five minutes? Well, it depends on what you mean by “learn React”. In this blog post you will “learn the basics of React” in five minutes!

### [431. How to Best Optimize Your Videos for the Web - A Quick Guide](https://hackernoon.com/how-to-best-optimize-your-videos-for-the-web-a-quick-guide-492k31bh)
![](https://cdn.hackernoon.com/images/zhC7DRT3cLRRJGLFZtkQiVKSSSf1-1ya310p.jpeg)
In this article you will learn several ways to optimize videos, to ensure they contribute to the user experience, without harming it.

### [432. Understanding your Rails Application Structure [Beginners Guide]](https://hackernoon.com/understanding-your-rails-application-structure-r8w32xj)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-v082rs8.jpeg)
So you are learning Rails. You are following a tutorial and have to type: rails new my_app and voilà! You have your first Rails app ready to start working on it.

### [433. Level Up Your Front-End Game with These 8 Side-Project Ideas 🥇](https://hackernoon.com/level-up-your-front-end-game-with-these-8-side-project-ideas)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-m26135bo.jpeg)
Over the span of a year, I created 8 web app and game clones. I decided to share them, so the community can get some inspiration to build as well.

### [434. Choosing the Best JS Framework: Insights From Building the Same App 6 Times](https://hackernoon.com/choosing-the-best-js-framework-insights-from-building-the-same-app-6-times)
![](https://cdn.hackernoon.com/images/app-development-clj2n37uh000001s63lfm5ysa.png)
I never know which frontend framework is my favorite. So, I put them all to the test by building a simple to-do app with 6 different frameworks. 

### [435. The Top React Reporting Tools](https://hackernoon.com/the-top-react-reporting-tools)
![](https://cdn.hackernoon.com/images/bJmCjBFKDCdFyOp2WyArQwy7BiF3-vk03462.png)
Explore the top React reporting tools and their notable features for your applications in this review of leading options.

### [436. A Guide to Building an Image Generator with React and OpenAI](https://hackernoon.com/a-guide-to-building-an-image-generator-with-react-and-openai)
![](https://cdn.hackernoon.com/images/GFxWNaVUGadCuz5svjQlUTu1iz12-9pd36hu.jpeg)
This guide has discussed the steps involved in building an image generator with React and OpenAI. 

### [437. How to Build an Omni-Channel Micro-App with Node.js and Express in 2 Hours](https://hackernoon.com/how-to-build-an-omni-channel-micro-app-with-nodejs-and-express-in-2-hours-5i3832s7)
![](https://cdn.hackernoon.com/images/m219328o.jpg)
I’m the CTO of ONEm Communications Ltd. We’ve built a developer framework and platform that allows developers to rapidly build fully functional omni -channel micro-apps.

### [438. How to Use Gulp to Protect Your Code](https://hackernoon.com/how-to-use-gulp-to-protect-your-code)
![](https://cdn.hackernoon.com/images/1JNoLAkx1ZO5O8qO5dcdNjh6RQw1-ze237w2.jpeg)
In this post, we'll show you how to protect your code with Jscrambler while using Gulp with a guide on how to set it all up to streamline the process.

### [439. Integrate Face Recognition in Your Web Application in 5 Minutes](https://hackernoon.com/integrate-face-recognition-in-your-web-application-in-5-minutes)
![](https://cdn.hackernoon.com/images/TuZs7lYkToZkOwnvwaCU8cXCSGJ2-j293o93.png)
In this blog, I will be introducing you to Faceio’s face recognition authentication and I will be building a simple app to showcase the way to integrate it.

### [440. Building a Simple Telegram Bot With Node.js and GrammY](https://hackernoon.com/building-a-simple-telegram-bot-with-nodejs-and-grammy)
![](https://cdn.hackernoon.com/images/ikJSOqfalLP8ugHSNVSmmK91QxJ3-jt93pzk.png)
This tutorial will guide you through the process of creating a simple Telegram bot using JavaScript, Node.js and GrammY.

### [441. Understanding Mux and Handler by Writing Your Own RESTful Mux](https://hackernoon.com/understanding-mux-and-handler-by-writing-your-own-restful-mux)
![](https://cdn.hackernoon.com/images/SnVhdDNm3fMGfftKZO7mnXldvQm2-sj93qhq.jpeg)
In this article, we will try to understand two crucial Go concepts - mux and Handler.

### [442. How To Decode Django Sessions in PostgreSQL](https://hackernoon.com/how-to-decode-django-sessions-in-postgresql-k81133ni)
![](https://cdn.hackernoon.com/images/87TektCts2aPzLfLjzdBJnicMFK2-j2g331v.jpeg)
When solving a problem that requires you to link a user's session data to their actual user object, Postgres comes in handy.

### [443. An Introduction to GraphQL](https://hackernoon.com/an-introduction-to-graphql-2c3f7d8fb4e0)
![](https://cdn.hackernoon.com/images/graph-ql-n5lcg5b0yp2bdq9talffd2jn.png)
GraphQL is the new frontier in APIs (<em>Application Programming Interfaces</em>).

### [444. 21 Best Coursera Courses and Certificates for IT Professionals to Learn Data Science and Cloud ](https://hackernoon.com/21-best-coursera-courses-and-certificates-for-it-professionals-to-learn-data-science-and-cloud)
![](https://cdn.hackernoon.com/images/MUo6MihNAVUIcUvRBbcToKZ7MKh1-ao93ivm.jpeg)
Here are the top 20 Coursera Courses and Certifications to Learn Data Science, Cloud Computing, and Python.

### [445. 10 Open-source Headless CMS to Supercharge Your Development in 2022](https://hackernoon.com/10-open-source-headless-cms-to-supercharge-your-development-in-2022)
![](https://cdn.hackernoon.com/images/bFFEe4dIUoXgbouiLfgW9PI9b8q1-ym93o66.jpeg)
The Best Free & Open-Source Headless CMS to use in 2022.

### [446.  Single Page Applications: The Rise of Web Apps in 2020](https://hackernoon.com/single-page-applications-the-rise-of-web-apps-in-2020-un6c32gm)
![](https://cdn.hackernoon.com/drafts/hgi37qj.png)
We all need to agree that when it comes to technology, things are unpredictable. Whether you’re a startup enabler, entrepreneur or developer you need to keep yourself updated for two reasons:

### [447. How I developed a Travel AI app with ChatGPT as a Product Manager and Non-programmer](https://hackernoon.com/how-i-developed-a-travel-ai-app-with-chatgpt-as-a-product-manager-and-non-programmer)
![](https://cdn.hackernoon.com/images/5ZV36A0fRKQT46HZNb6U5TgEXFw1-cpa3vmx.jpeg)
It took me about 100 hours, but I was able to write and deploy a real app with ChatGPT’s help.

### [448. How to Implement Basic Modular CSS Guidelines](https://hackernoon.com/how-to-implement-basic-modular-css-guidelines-7r1632l2)
![](https://cdn.hackernoon.com/drafts/o61a2326w.png)
Web page styling has evolved over the years, from just styling HTML elements to a well thought, organized and scalable approach. Implementing CSS style on a web page can be a complex task with many different display presentations available on modern websites. Paying closer attention to how smaller parts of the webpage fit into the whole design flow of the webpage can be an important tool for efficient development. 

### [449. A crash course on Serverless with AWS — Image resize on-the-fly with Lambda and S3](https://hackernoon.com/a-crash-course-on-serverless-with-aws-image-resize-on-the-fly-with-lambda-and-s3-850be95d5833)
![](https://cdn.hackernoon.com/hn-images/1*zXVxlNCjuF_g96DKuqb1ag.jpeg)
Handling large images has always been a pain in my side since I started writing code. Lately, it has started to have a huge impact on page speed and SEO ranking. If your website has poorly optimized images it won’t score well on Google Lighthouse. If it doesn’t score well, it won’t be on the first page of Google. That sucks.

### [450. Create a Gradient Border With TailwindCSS and React](https://hackernoon.com/create-a-gradient-border-blog-postcard-using-tailwind-css-and-nextjs-a-how-to-guide)
![](https://cdn.hackernoon.com/images/Y0kXG115Z7VorP4rguIGxwn3FoD3-fz2376t.jpeg)
This blog post is a small tutorial in which I show you how you can create a gradient border blog card using Tailwind CSS.

### [451. Micro-Frontends in 2023: The Complete Guide](https://hackernoon.com/micro-frontends-in-2023-the-complete-guide)
![](https://cdn.hackernoon.com/images/K19Ut5KCZFSiuWGZtFpWBYbdXH53-gw93ooj.jpeg)
The Micro Frontend style of architecture design does for the frontend of an application what microservices do for the backend.

### [452. How to Delete a Table from a Django Model on Production](https://hackernoon.com/how-to-delete-a-table-from-a-django-model-on-production)
![](https://cdn.hackernoon.com/images/RJR62NidzuWvMadph8p0OWg7H8c2-lw93prh.jpeg)
Simple case of deployment Django migration to production in a few steps. This is table/model removal.

### [453. How to Upgrade a Laravel App to the Latest Version](https://hackernoon.com/how-to-upgrade-a-laravel-app-to-the-latest-version)
![](https://cdn.hackernoon.com/images/nUzRDdHSAqQc7LgE4w8EKypXWpo2-b2037w4.jpeg)
How to upgrade your laravel application to the latest version

### [454. 3 Evolutions of CMS (Traditional 👉 Headless 👉 Serverless)](https://hackernoon.com/3-evolutions-of-cms-traditional-headless-serverless-e53s3dm8)
![](https://cdn.hackernoon.com/drafts/t11m3ds0.png)
In this post, we’ll go through 3 different periods of the CMS evolution. For each period, we’ll explore the most popular solution(s), their stack, and also how the current market trends are looking like for them. 

### [455. Everything You Need to Know About Promise.all() in JavaScript](https://hackernoon.com/everything-you-need-to-know-about-promiseall-in-javascript)
![](https://cdn.hackernoon.com/images/NpN8WH8v6CfA6j7dKAzuoiE5Lit2-e7b3srl.jpeg)
The Promise.all method in Javascript is a function that accepts many promises and then does something only after they have all been settled. 

### [456. How to Give Your React Navbar Search Functionality](https://hackernoon.com/how-to-give-your-react-navbar-search-functionality)
![](https://cdn.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-hm93qji.jpeg)
This article shows you how to configure the search input. How to show / hide it, change the caption, add an icon, handle callback and how to style it;

### [457. 13 Website Design Inspiration for UI/UX Designers](https://hackernoon.com/13-ultimate-uiux-website-inspiration-for-designers-and-developers)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-ft037z2.jpeg)
Regardless of whether you're an accomplished website designer or developer or simply a beginner, a website architecture venture's extension can rapidly limit the of assets accessible, making it extreme to track down the correct website design for motivation for your assignment.

### [458. How You Can Set Up Remote Development Workflow With VS Code in Your Browser](https://hackernoon.com/how-you-can-set-up-remote-development-workflow-with-vs-code-in-your-browser-3y3q3wu9)
![](https://cdn.hackernoon.com/images/fc1he3vw7.jpg)
In this guide, I will be walking through VS Code-Server setup with DigitalOcean, as well as tweaks I have used to create a clean, simple workflow.

### [459. Hosting an Angular Application on Amazon S3 Using Github Actions](https://hackernoon.com/hosting-an-angular-application-on-amazon-s3-using-github-actions)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-rs92jza.jpeg)
Application example built with Angular 14 and hosted on Amazon S3 (Simple Storage Service) using GitHub Actions.

### [460. Bootstrap Vs. Material UI For React Based Project](https://hackernoon.com/bootstrap-vs-material-ui-for-react-based-project-i92k3uyi)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FVoLzrWnqALUBiqBNBl46VipwZuk2-ty1o28rc.jpeg?alt=media&token=97b4cef2-a80b-42be-bcb6-2506c4bbf9b6)
Do you enjoy building fast and professional looking pages using React and Bootstrap? What if I tell you that there is a more efficient way (and in my opinion, that looks more professional) to build websites.

### [461. How We Built A Rich Text Editor in React with SlateJS](https://hackernoon.com/how-we-built-a-rich-text-editor-in-react-with-slatejs-ni153z3b)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FQNyLqFXGvYRXJI4JG991mDDnbcC2-5v643toq.jpeg?alt=media&token=25ec3223-aad1-492e-bdb9-35bb53581517)
Building an awesome editor for your React-based web application is by no means easy. But with SlateJS things get much easier. Even with the help of Slate, building a full-featured editor is way more work than we can cover in one blog post, so this post will give you the big picture and subsequent posts will dive into the dirty details.

### [462. React Functional Components are the future](https://hackernoon.com/react-functional-components-are-the-future)
![](https://cdn.hackernoon.com/images/FpKROxxtLBRmSsCCb4lxCS7LBVr2-8013a0u.jpeg)
React Functional Components grabbed all the attention after the introduction of Hooks. They sidelined Class Components to become the main hero of React apps.

### [463. How to Build an E-commerce Website with Nuxt and Cosmic JS](https://hackernoon.com/how-to-build-an-e-commerce-website-with-nuxt-and-cosmic-js-292c94e37b41)
![](https://cdn.hackernoon.com/images/NpclsXHLfPf1qjBCjmjlbDg2CFo1-5583xvp.jpeg)
What we will be building.

### [464. Using Redis Streams with NestJS: Part 2 - Reading from Stream](https://hackernoon.com/using-redis-streams-with-nestjs-part-2-reading-from-stream)
![](https://cdn.hackernoon.com/images/CgB3JUoAMba0EfivxJcY6vlIFNU2-pkc3p57.png)
This is part 2 of a 3-part series, where we will explore how to use Redis streams with NestJS.

### [465. Using OpenAI's Whisper and GPT-3 API to Build and Deploy a Transcriber App – Part 1](https://hackernoon.com/using-openais-whisper-and-gpt-3-api-to-build-and-deploy-a-transcriber-app-part-1)
![](https://cdn.hackernoon.com/images/IvbdQ1TqYah1YOpyYrdKkxL8FwG2-7y93l0h.jpeg)
Go from no knowledge to a working transcriber prototype step by step.

### [466. 9 Open Source Projects Every Developer Needs to Bookmark for Their Workflow](https://hackernoon.com/9-open-source-projects-every-developer-needs-to-bookmark-for-their-workflow)
![](https://cdn.hackernoon.com/images/gaZTNviyRwbJIkQm85R8IxM2vOY2-au030yj.jpeg)
Discover 9 open-source projects to enhance your cloud workflow, project management, user feedback, automation, and more.

### [467. Is Migrating From Java 11 to Java 17 Worth It?](https://hackernoon.com/is-migrating-from-java-11-to-java-17-worth-it)
![](https://cdn.hackernoon.com/images/aaNz3uFU8mYuO9CiyRNCRyfAPhu2-u2d3uc0.jpeg)
Java version 17 brought some changes to Java but also made many developers reconsider their desire to move to other JVM languages. 

### [468. The RTK Query, API Splitting Approach, and the Nuances of "Making Life Simpler"](https://hackernoon.com/the-rtk-query-api-splitting-approach-and-the-nuances-of-making-life-simpler)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-qk13o9y.jpeg)
RTK Query is definitely a cool library however it’s sadly not applicable to all of the use cases possible with an API. 

### [469. How I Solved the Passman CTF Challenge with GPT-4](https://hackernoon.com/how-i-solved-the-passman-ctf-challenge-with-gpt-4)
![](https://cdn.hackernoon.com/images/Xqr4CUe3DYeURV7orh73yMqsUxI2-69935ca.jpeg)
Discover how Chat GPT-4, an AI chatbot, helped crack the Passman challenge in Hack The Box's Cyber Apocalypse event. Ethical hacking meets AI power!

### [470. Comparing the Best TypeScript Alternatives [Part I]](https://hackernoon.com/comparing-the-best-typescript-alternatives-part-i)
![](https://cdn.hackernoon.com/images/XIlys8PrM8eJ7n0qjETjuC0lbkB2-dze3qzq.jpeg)
TypeScript, Dart, CoffeeScript, and Elm are all programming languages used for building web applications, and each has its own strengths and weaknesses.

### [471. The ABCs of Building Reliable, Scalable, and Maintainable Web Applications - Scalability](https://hackernoon.com/the-abcs-of-building-reliable-scalable-and-maintainable-web-applications-scalability)
![](https://cdn.hackernoon.com/images/coding-in-beautiful-valleys-of-kashmir-clfpnq01z000301s6h26l4nbg.png)
Build scalable, reliable, and maintainable applications. Understand basics of scalability with focus on performance and load, vertical and horizontal scaling!

### [472. Top 6 Code Playgrounds That Every Web Developer Should Check Out](https://hackernoon.com/top-6-code-playgrounds-that-every-web-developer-should-check-out)
![](https://cdn.hackernoon.com/images/eEorQrwEg2Yj6SoTbeou5FE6jGw2-ja93rqd.jpeg)
Code playgrounds are becoming increasingly popular, with more developers using them than ever before, here are the top 6.

### [473. The Top 8 Social Media Data Charts and Live Charts You Need to Know](https://hackernoon.com/the-top-8-social-media-data-charts-and-live-charts-you-need-to-know)
![](https://cdn.hackernoon.com/images/da7H4NzOhAdhje46xkTgaLorF5m2-bu03mob.jpeg)
Much like that of many other industries, the landscape of marketing has changed radically in the past two decades

### [474. Django, Celery, Redis and Flower Implementation](https://hackernoon.com/django-celery-redis-and-flower-implementation-gy663ysy)
![](https://cdn.hackernoon.com/drafts/k3pk3ysx.png)
Here I’m assuming you already have your basic Django project setup. And, already know what Celery is? if not, I’ll suggest getting a basic understanding of it here. So let’s just directly jump into the steps.

### [475. Creating Beautiful Documentation Website For Your JavaScript Project](https://hackernoon.com/creating-beautiful-documentation-website-for-your-javascript-project-ic1c3ukj)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FMJpFVUEItkSdoh38rYo60VT7RfH3-121q4vz6.jpeg?alt=media&token=f0c7f767-8d9d-4d4d-b2ca-d088af5a2705)
Nowadays, as a webdeveloper, you rarely build anything from scratch: your daily job mostly consists of integrating various Javascript libraries together. If you are building a web app you are most likely going to use some framework like React, Vue or Angular for your front-end. To transmit and manage the data you will be using Redux or GraphQL. For the backend, there will be Express and probably Loopback. Then you need to cover everything with tests, so Jest, Mocha or Jasmine must be present too. Finally, there will be UI frameworks like Bootstrap and maybe some charting tools. I have already counted at least 7 core libraries and all of these are in a single project! And what about underlying technologies like Javascript itself, Node.js and, probably, Typescript? Well, that’s a lot!

### [476. How to Teach Yourself Backend Development? ](https://hackernoon.com/how-to-teach-yourself-backend-development)
![](https://cdn.hackernoon.com/images/akEBIg10DrPMiavDpnZxfHb098y2-o493jpr.jpeg)
Many self-taught coders have a hard time deciding between all the various options, but it’s so much easier to learn effectively if you have a clear goal.

### [477. Webix Datatable. From a simple table to a complex solution](https://hackernoon.com/presenting-data-with-the-webix-datatable-yy4132zn)
![](https://cdn.hackernoon.com/images/V9YyIjSNWnMHBlBO4TSj5cPSIBj2-b9k359i.jpeg)
The DataTable widget is a simple and at the same time powerful solution of the Webix UI library.  

### [478. How to Solve Common Performance Issues in Django REST Framework](https://hackernoon.com/how-to-solve-common-performance-issues-in-django-rest-framework)
![](https://cdn.hackernoon.com/images/qLFXw9TpduS1Cu2jVtSIcyGoLpk1-gb936s8.jpeg)
Learn how to boost your Django REST Framework's performance by solving common issues like N+1 queries, pagination, caching, and more. Get started now!

### [479. Making Influencer Marketing Seamless with Web3 Creator Platform Edge](https://hackernoon.com/making-influencer-marketing-seamless-with-web3-creator-platform-edge)
![](https://cdn.hackernoon.com/images/AKsNRMQ5sghpqx7EhVDK3vl0AZJ2-t193nsa.jpeg)
We host the founders of Edge, a web3 creator platform that makes it easy to hire an influencer for your web2 and web3 project.

### [480. I'm Done Typing npm: A Zsh Function for JavaScript Package Managers](https://hackernoon.com/im-done-typing-npm-a-zsh-function-for-javascript-package-managers)
![](https://cdn.hackernoon.com/images/NaU3BOE6YnOtNpCIV9kfvX1BqL03-27a3b1x.jpeg)
Use zsh functions to create command line alias that determines local package manager and runs the corrrect comamnd: bun, pnpm, npm, or yarn.

### [481. Building an App That Uses All 7 New JavaScript ES2020 Features](https://hackernoon.com/building-an-app-that-uses-all-7-new-javascript-es2020-features-6c6t3232)
![](https://cdn.hackernoon.com/images/b71o73y4a.jpg)
The world of web development moves fast, especially in the JavaScript ecosystem. New features, frameworks, and libraries are constantly emerging, and the minute you stop learning is the minute your skill set starts to become obsolete.

### [482. Bringing Python to the Web: A Guide to Running Python in Your HTML](https://hackernoon.com/bringing-python-to-the-web-a-guide-to-running-python-in-your-html)
![](https://cdn.hackernoon.com/images/y5COvpOgrkcmRD6Eym0jY6lOzaP2-o4a3t6l.jpeg)
A comprehensive introduction to seamlessly integrating Python code within HTML for dynamic and interactive web development. 

### [483. Reduce Your Eye Fatigue With These Top 6 Fonts for Easier Programming in 2021](https://hackernoon.com/reduce-your-eye-fatigue-with-these-top-6-fonts-for-easier-programming-in-2021-pb3k33g1)
![](https://cdn.hackernoon.com/images/J4L7lcgWG9Zj2vGLgkpwZIANGdh1-fl7437rg.jpeg)
In this article, I'm going to share the best fonts you can use specifically for coding. Let's take a look!

### [484. Authentication using the Amazon Cognito to an Angular application](https://hackernoon.com/authentication-using-the-amazon-cognito-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-ys92ksy.jpeg)
Application example built with Angular 14 with authentication using the Amazon Cognito service.

### [485. How To Send Emails with Nodejs and EmailJS Module](https://hackernoon.com/how-to-send-emails-with-nodejs-and-emailjs-module-dk1133dx)
![](https://cdn.hackernoon.com/images/MJpFVUEItkSdoh38rYo60VT7RfH3-w915313g.jpeg)
It’s 2021 and JavaScript has taken over the development landscape. At this point there is a JavaScript library or framework for everything. So you have a few different options if you want to send emails directly from your browser side code. For example you can always just include your email handle in a link. If your users have their system set up correctly a simple click will open their email account with your email in the mailto: slot(aka send). However as a developer this seems less than ideal because it requires  that your users have the proper set up to handle the action. 

### [486. 9 JavaScript Design Patterns You Will Love](https://hackernoon.com/9-javascript-design-patters-you-will-love)
![](https://cdn.hackernoon.com/images/KmNf0Wo4w4avMoWS6xST2YLQABu2-xh9304q.jpeg)
Design patterns are reusable solutions for common problems that occur during software development. Here are my 9 favorite design patterns for JavaScript

### [487. How to Make Buttons Stand Out with CSS](https://hackernoon.com/how-to-make-buttons-stand-out-with-css)
![](https://cdn.hackernoon.com/images/SfLKUONj1dNQfd8Bo4oz4aGegv73-s593fvz.jpeg)
The first thing you’ll notice when you add a button to your website is that you’ve taken a trip back in time to 1999. The default button style is very old-fashioned and I can’t think of a use case where you’d want to keep it as it is. The good news is that there are loads of CSS styles that can make your buttons pop.

### [488. Advanced React Router V6 Techniques: Going Beyond the Basics](https://hackernoon.com/advanced-react-router-v6-techniques-going-beyond-the-basics)
![](https://cdn.hackernoon.com/images/Bf6xbPmhtTcARlzNXM2oktEZuh22-34b2nv9.jpeg)
Learn advanced React Router techniques to elevate your routing abilities. Discover how to handle 404 pages, create an active page indicator, and utilize hooks.

### [489. I created Postwoman 👽 - An online, open source API request builder](https://hackernoon.com/i-created-postwoman-an-online-open-source-api-request-builder-ehky30ym)
![](https://cdn.hackernoon.com/images/lfk8308t.jpg)
Postwoman 👽 - API request builder


### [490. Adding the Google reCAPTCHA v2 to an Angular application](https://hackernoon.com/adding-the-google-recaptcha-v2-to-an-angular-application)
![](https://cdn.hackernoon.com/images/iKaRdx2obzTbVRWs5dbTRcG8zVj1-uz92mxx.jpeg)
Application example built with Angular 14 and adding the Google reCAPTCHA v2 using the ng-recaptcha library.

### [491. How to Create a Modern Skeleton Loader in React to Improve User Experience](https://hackernoon.com/how-to-create-a-modern-skeleton-loader-in-react-to-improve-user-experience)
![](https://cdn.hackernoon.com/images/ngHeZCLQ7RUFohMJcsEYn7UCXkz2-mqg3sbm.jpeg)
Improve user experience with a skeleton loader in React. Mimic page layout with placeholder boxes for text and images while actual content loads.

### [492. Using Redis Streams with NestJS: Part 3 - Consumer groups](https://hackernoon.com/using-redis-streams-with-nestjs-part-3-consumer-groups)
![](https://cdn.hackernoon.com/images/CgB3JUoAMba0EfivxJcY6vlIFNU2-7f93pyx.png)
This is part 3 of a 3-part series, where we will explore how to use Redis streams with NestJS.

### [493. Setting up a Web Develop Environment in Debian](https://hackernoon.com/setting-up-a-web-develop-environment-in-debian-lmiv33tz)
![](https://cdn.hackernoon.com/images/2z3ci1c5x.jpg)
I am on Microverse working with a lot of people new to Software Development with Linux (I use this word to refer to Linux OS and all his derivatives or distros), and in web development we use certain tools and pipelines that are more difficult to set up in Windows. So I found that most of the people new to Linux struggle to set up the tooling and basic commands for the first time.

### [494. How to Manage Reusable UI Components](https://hackernoon.com/how-to-manage-reusable-ui-components-iu1x32up)
![](https://cdn.hackernoon.com/images/tz1mk3yx7.jpg)
Just a few days ago we open-sourced the React components we use to build the bit.dev platform. 

### [495. 6 Best HTML Programming Books Ranked by Review Score](https://hackernoon.com/6-best-html-programming-books-ranked-by-review-score)
![](https://cdn.hackernoon.com/images/t4EWQ6W18hPhx6xE6pfPwMH58EL2-la93gij.jpeg)
Topping off the 6 best HTML programming books based on Amazon reviews is HTML & CSS: Design and Build Websites.

### [496. I Built An Open-Source Website Platform for Group Exhibitions—Here's How](https://hackernoon.com/i-built-an-open-source-website-platform-for-group-exhibitionsheres-how)
![](https://cdn.hackernoon.com/images/ZxYrjLtEfXcqbau0aq9QJo7Kb162-b9033pt.png)
Building Swarm — open-source exhibition website platform for designers & artists. Easily create, manage, and customize group showcases—no coding required.

### [497. My Top 5 Best Practices for ReactJs](https://hackernoon.com/my-top-5-best-practices-for-reactjs)
![](https://cdn.hackernoon.com/images/QepJZAyLUDcMpCXcZjnWeHJM7ad2-8893jy9.jpeg)
Howdy people, In this article we will be discussing the 5 best ReactJs practices that will help you simplify the building of great and high-performance ...

### [498. How to Extend a KMM Shared Module With C/C++ Code](https://hackernoon.com/how-to-extend-a-kmm-shared-module-with-cc-code)
![](https://cdn.hackernoon.com/images/NQj7nJwKP6TCLb5vTKntUCFH9Yv2-wmc3zca.png)
Learn how to embed a simple SHA-256 implementation on C-language in KMM library and use it for iOS andAndroid target platforms.

### [499. Understanding the Complexities of Next.js v13](https://hackernoon.com/understanding-the-complexities-of-nextjs-v13)
![](https://cdn.hackernoon.com/images/uDPqwahUxKSKSQ17IYMKmh9T5uu1-jjh3te3.jpeg)
Next.js v13 was released by Vercel at the Next.js conference in October 2022, bringing many new features and improvements.

### [500. Simple Guide to Generating QR Code in PHP](https://hackernoon.com/simple-guide-to-generating-qr-code-in-php-pu1n3tub)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FFVXVpPqpNLYA5UNXJudRRucW6pm2-ai1a2tmu.jpeg?alt=media&token=88dff2ff-bf1c-453f-a83b-318bcfa17190)
These days, the term QR code is gaining more popularity due to its common use in daily routine life. It is commonly used in online shopping and digital payment. A QR code (Quick Response code) is a two-dimensional Barcode that is first designed in 1994 for use in the automotive industry in Japan.