web-development.md

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

# [web-development](https://hackernoon.com/tagged/web-development)
HTML/CSS, Javascript, Angular, React, and other stories by those who build the frontend of the Internet. This tag is sponsored by Elastic Path. You can write on web development and eCommerce to win from $12,000 prize pool!

### [1. 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.

### [2. 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.

### [3. 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.

### [4. 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.

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

### [6. 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)


### [7. 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.

### [8. 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.

### [9. 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.

### [10. 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!

### [11. Next.js Website Boilerplate](https://hackernoon.com/next-js-website-boilerplate-5134f560423e)
![](https://cdn.hackernoon.com/hn-images/0*BI4paMHVfiZy69D4.)
Check out this website boilerplate built on Next.js and Cosmic JS. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.

### [12. 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 

### [13. 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.

### [14. 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.

### [15. 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.

### [16. 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. 

### [17. 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.

### [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. Hack Reactor: Confessions of a $20K Bootcamp Graduate](https://hackernoon.com/confessions-of-a-bootcamp-graduate-hack-reactor-f921c441fb23)
![](https://cdn.hackernoon.com/images/ugoTV1vwcgR4mN8MMDUUN4vt6p02-zsi33xu.jpeg)
Hack Reactor was created in late 2012 by DevBootcamp grads. I’ll review the curriculum of the bootcamp and the reality graduates are facing.

### [20. 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. 

### [21. 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

### [22. Using a React 16 Portal to do something cool](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
React 16 is here, and one of the more interesting additions is ‘Portals’.

### [23. 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.

### [24. 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.

### [25. 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.

### [26. Structuring projects and naming components in React](https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76)
![](https://cdn.hackernoon.com/hn-images/1*RnfoUx35p_wHEv-cVGcV3Q.png)
As React is just a lib, it doesn’t dictate rules about how you should organize and structure your projects. This is nice, because it gives us freedom to try different approaches and adapt the ones that better fit for us. On the other hand, this could cause some confusion for devs that are starting in React world.

### [27. 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. 

### [28. 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.

### [29. Writing an easing function; a slightly interesting story](https://hackernoon.com/writing-an-easing-function-a-slightly-interesting-story-70ce667c212a)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
I should say at the outset that there’s no real point to this blog post. I had a thing to do, I did the thing, and was moderately pleased with the result. I enjoy reading of such tales from other developers, so I thought I’d share my story.

### [30. Removing that ugly :focus ring (and keeping it too)](https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2)
![](https://cdn.hackernoon.com/drafts/lhp3qbt.png)
Photo by Jeremy Perkins on Unsplash

### [31. 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.

### [32. The 100% correct way to structure a React app (or why there’s no such thing)](https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed)
![](https://cdn.hackernoon.com/hn-images/1*Pmm5N4hr9cANciDL5nbDpw.png)
When it comes to structuring a React app, the ideal structure is the one that allows you to move around your code with the least amount of effort.

### [33. 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. 

### [34. 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.

### [35. 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.

### [36. 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.

### [37. 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.

### [38. 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.

### [39. 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? 

### [40. Set Up Webpack To Work With Static Files](https://hackernoon.com/set-up-webpack-to-work-with-static-files)
![](https://cdn.hackernoon.com/images/RJQZvFU148YjNOndYa5BZPkZHvc2-jj525ao.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.

### [41. 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 

### [42. 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. 

### [43. 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.

### [44. 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.

### [45. 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. 

### [46. 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.

### [47. 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)


### [48. 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.

### [49. 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.

### [50. 22+ Dev Tools, Websites, and Plugins that Help You Become a Better Developer](https://hackernoon.com/22-dev-tools-websites-and-plugins-that-help-you-become-a-better-developer)
![](https://cdn.hackernoon.com/images/RX8xMnl8Q5fsB6oGTIzeeX6BLfh1-sq037nn.gif.webp)
In this article, I will share my main 22 most loved web tools that make your life as an engineer simpler.

### [51. 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.

### [52. 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!”)

### [53. 11 things I learned reading the flexbox spec](https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b)
![](https://cdn.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.

### [54. A crash course on Serverless with Node.js](https://hackernoon.com/a-crash-course-on-serverless-with-node-js-632b37d58b44)
![](https://cdn.hackernoon.com/hn-images/1*iLB9JQg3YHyj1L83oaxF8g.jpeg)
Regardless of your developer background, it’s inevitable you’ve heard the term Serverless in the past year. The word has been buzzing around in my ears for longer than I dare say. For too long have I been putting off looking into it in more detail. Well here goes nothing.

### [55. 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

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

### [57. 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. 

### [58. 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.

### [59. 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.

### [60. 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.

### [61. 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.

### [62. 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.

### [63. Why I’m Excited for JavaScript Class Private Fields: A Case Study](https://hackernoon.com/why-im-excited-for-javascript-class-private-fields-a-case-study-5748d30f28ec)
![](https://cdn.hackernoon.com/hn-images/1*D6m90Bq8o80AIHAtoDST9w.jpeg)
(JavaScript Class Privacy — Or Lack Thereof)

### [64. 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.

### [65. 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.

### [66. How I converted my React app to VanillaJS (and whether or not it was a terrible idea)](https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
This is a long and winding tale (with lots of code) of my attempts replicate JSX syntax, component structure, server-side rendering, and React’s update magic with VanillaJS.

### [67. 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.

### [68. 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. 

### [69. 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.

### [70. 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.

### [71. Designing for iPhone X Screen Dimensions: 9 Tips for a Great UX](https://hackernoon.com/designing-for-iphone-x-9-tips-to-create-a-great-looking-application-c9e004b9f370)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FugoTV1vwcgR4mN8MMDUUN4vt6p02-2en3tqn.jpeg?alt=media&token=5b94e9b9-9924-4459-84a0-9d3bbc7b1ce0)
The iPhone X screen became 20% taller compared to iPhone 8/8 Plus that is equal to 145pt of additional space. So, be ready to use artboards sized 375 x 812 in your favorite UI design software.

### [72. 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.

### [73. The 100% correct way to split your chunks with Webpack](https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758)
![](https://cdn.hackernoon.com/hn-images/1*foR5GgE3O71_9JSlLakqmA.jpeg)
Working out the best way to serve up files to your users can be a tricky business. There’s so many different scenarios, different technologies, different terminology.

### [74. Why Not Use Good Old CSS3??? And Forget Bootstrap!](https://hackernoon.com/why-not-use-good-ole-css3-and-forget-bootstrap-an4c326k)
![](https://cdn.filestackcontent.com/cflw5qXkSx2tbItr1JCh)
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.

### [75. React-Hooks: What is The Difference Between useCallback And useMemo?](https://hackernoon.com/react-hooks-what-is-the-difference-between-usecallback-and-usememo)
![](https://cdn.hackernoon.com/images/rySKfcBHuiTIRq2mrpTB73fEynm2-4j13671.jpeg)
In this, we share the complete guide for React Hooks. Here you read about useCallback and useMemo with their syntax. If you are learning React then this for you

### [76. 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.

### [77. 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. 

### [78. 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

### [79. A crash course on writing a better README](https://hackernoon.com/a-crash-course-on-writing-a-better-readme-d796d1f6b352)
![](https://cdn.hackernoon.com/hn-images/1*RShnwUERp9PLcaloP7oeFA.jpeg)
In the wake of the Hacktoberfest we’ve seen a huge growth in open source contributions. The open-source community has opened over 400 000 pull requests during October alone. That’s insane!

### [80. 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.

### [81. 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.

### [82. 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?

### [83. 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.

### [84. 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.  

### [85. 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.

### [86. 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.

### [87. 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. 

### [88. 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.

### [89. How to migrate an application from AngularJS to React and Redux](https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa)
![](https://cdn.hackernoon.com/images/28v31p6.jpg)
Starting this year, I was hired by BEN Group, with the main goal of helping them migrate a legacy application from AngularJS to React and Redux. Since then, we have been creating solutions inside the project, that is working greatly so far.

### [90.  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:

### [91. Using $auth Module’s Redirect in Tandem With $router.push in Nuxt.js](https://hackernoon.com/using-dollarauth-modules-redirect-in-tandem-with-dollarrouterpush-in-nuxtjs-i68r3yi8)
![](https://cdn.hackernoon.com/drafts/42i32hn.png)
Recently I came across the issue of using the auth module in Nuxt.js and invoking a $router.push in subsequent line of code in the same method. The conundrum began when the lines after the auth.loginWith method did not execute as intended since the page was redirected to the redirect URI.

### [92. 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

### [93. 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.

### [94. 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: 

### [95. 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. 

### [96. 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.

### [97. 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.filestackcontent.com/rSQiXxbVTP2zJdyE3kQp)
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.

### [98. 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.

### [99. 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 ...

### [100. 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.

### [101. 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 ! ]

### [102. 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.

### [103. 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. 

### [104. 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.

### [105. 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.

### [106. 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. 

### [107. 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?

### [108. 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)


### [109. Nuxt.js Website Boilerplate](https://hackernoon.com/nuxt-js-website-boilerplate-30de7a7f5782)
![](https://cdn.hackernoon.com/drafts/vjp320i.png)
Check out this website boilerplate built on Nuxt.js and Cosmic JS. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.

### [110. 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.

### [111. 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? 

### [112. 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.

### [113. 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.

### [114. 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.

### [115. 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.

### [116. 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.

### [117. 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.

### [118. 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.

### [119. 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.

### [120. 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)


### [121. 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.

### [122. 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 ✌.

### [123. 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.

### [124. 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!

### [125. React Hooks: The Difference Between useMemo and useCallback](https://hackernoon.com/react-hooks-the-difference-between-usememo-and-usecallback-5no3t0x)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FJzHuBnIPz7Z7biKI1IDfHxwifg63-57m3x6s.jpeg?alt=media&token=23ed49b8-072a-48c7-95da-dc6f92a7c3fd)
React library provides us two built-in hooks to optimize the performance of our app: useMemo & useCallback. At first glance, it might look like their usage is quite similar, so it can get confusing about when to use each. To clear that confusion, let’s dig in and understand the actual difference and the correct way to use them both.

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


### [127. 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.

### [128. 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.

### [129. 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.

### [130. Migrating your Node.js REST API to Serverless](https://hackernoon.com/migrating-your-node-js-rest-api-to-serverless-d2a170e0856c)
![](https://cdn.filestackcontent.com/vKMYHdIsR1qlUcBCIpzr)
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.

### [131. 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.

### [132. Web Share API Tutorial: Cool And Simple Way To Implement Share Button](https://hackernoon.com/web-share-api-the-coolest-but-simple-e3bb7ec9bb02)
![](https://images.unsplash.com/photo-1477013743164-ffc3a5e556da?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
One of the coolest features nowadays on Website World is the Web Share API, this feature provides the ability to share content on a website like we do share action on native applications.

### [133. 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. 

### [134. 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.

### [135. Speed up your site with a little machine learning](https://hackernoon.com/speed-up-your-site-with-a-little-machine-learning-fa9eb7c86dbb)
![](https://cdn.hackernoon.com/hn-images/1*V98NWHdJj4Ush6q20GwHAg.png)
I spend roughly 73% of my life thinking about web performance — hitting that sweet 60FPS on slow phones, loading my assets in the perfect order, offline-caching everything I can. Other examples.

### [136. 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!

### [137. Backend-in-the-frontend: a pattern for cleaner code](https://hackernoon.com/frontend-in-the-backend-a-pattern-for-cleaner-code-b497c92d0b49)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
This article is for all those times when the data you’re getting isn’t the data you’re wanting.

### [138. 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.filestackcontent.com/yP9HcsKlRKGfX1sRcwyc)
What we will be building.

### [139. 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.

### [140. Web Development for Beginners - Key Concepts, Roles and Tools](https://hackernoon.com/important-concepts-that-you-have-to-understand-to-become-a-web-developer-for-beginners-lj202gan)
![](https://cdn.hackernoon.com/drafts/b04w2g6s.png)
Become a web developer is a hard path to take, most of the time we don’t know how to start something and when you are new at this all the concepts came suddenly and it’s hard to get everything. This article is oriented to the people that want to become a web developer, but if you already started to learn maybe you want to take a look at all the points. 

### [141. 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.

### [142. 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?

### [143. 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.

### [144. 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

### [145. 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


### [146. 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. 

### [147. A simple pie chart in SVG](https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936)
![](https://cdn.hackernoon.com/drafts/suq3qtg.png)
Get it? Owl? Pie chart?

### [148. 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!

### [149. How to deploy a Node.js application to AWS Lambda using Serverless](https://hackernoon.com/how-to-deploy-a-node-js-application-to-aws-lambda-using-serverless-ae7e7ebe0996)
![](https://cdn.filestackcontent.com/aKh4FSA6QXSy1UxABP92)
Being a developer is amazing. Writing code, solving problems and thinking of ingenious solutions for complicated algorithms is what we live for. But, the grass is not always so green on this side of the fence. Sooner or later you need to get your hands dirty and deploy the app you worked so hard on. Deployments are not always easy. To be blunt, they can be incredibly hard and time-consuming. That’s what we’ll solve in this tutorial.

### [150. 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

### [151. 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.

### [152. What you don’t know about web development](https://hackernoon.com/what-you-dont-know-about-web-development-d7d631f5d468)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
Fear not, this isn’t another mildly aggressive blog post telling you that you’re inferior; I’m not here to tell you what you don’t know about web development.

### [153. Build and launch a custom personal website in 15 minutes](https://hackernoon.com/build-and-launch-a-custom-personal-website-in-15-minutes-1aaa868b1216)
![](https://cdn.hackernoon.com/hn-images/1*9wHrewC1Dyf2Au_qEqwWcg.jpeg)
Best part — the only thing you’ll be using is your web browser

### [154. The Search-and-Replace Regex with VS Code](https://hackernoon.com/the-search-and-replace-regex-with-vs-code-gb1v3uko)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FBnMb3F4vjTb8PuRduWJNBwABhlb2-mj313u4u.jpeg?alt=media&token=1ca255f6-db7a-4254-96a8-b54c86e1cd99)
This is a feature I use with some frequency, but not frequently enough that I remember the pattern when I need it. Therefore, I am writing this article as my own reference to a useful tool with VS Code.

### [155. 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.  

### [156. 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.

### [157. 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. 

### [158. 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.

### [159. 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.

### [160. 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…

### [161. 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.

### [162. 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.

### [163. 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…

### [164. 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.

### [165. 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.

### [166. 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.

### [167. 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.

### [168. 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.

### [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. 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.

### [171. 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.

### [172. 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).

### [173. 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

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

### [175. 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:

### [176. 🤩 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.

### [177. 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.

### [178. Moving From React-Redux to @reduxjs/toolkit](https://hackernoon.com/moving-from-react-redux-to-reduxjstoolkit-55133u3c)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FfdZjxTAugIR20dO8BMICQg2rb9H2-6xb3uoj.webp?alt=media&token=7569de93-3d5e-4496-8e5c-d246259f8ca3)
I’ve been working with react-redux, and I’m loving it, working with react is awesome, but it can get confusing really fast, so when I was introduced to redux I just instantly loved it. The thing is… when I created an application using yarn create ract-app --template redux, the app had a different syntax than the one I was taught in all the tutorials I saw on youtube, so I started playing around with the default application, and the way they do things there is cleaner and more straight forward. After a quick google search, I realized the default app uses the @redux/toolkit and I wanted to talk about it because it’s pretty great, so…

### [179. How the Domain Name System Works](https://hackernoon.com/how-domain-name-system-work-318j3w0d)
![](https://images.unsplash.com/photo-1553864250-05b20249ee0c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
The Domain Name System.

### [180. 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.

### [181. 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.

### [182. 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!

### [183. 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.

### [184. 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.

### [185. 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?. 

### [186. 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

### [187. A user encounters a JavaScript error. You’ll never guess what happens next!!](https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490)
![](Devimg/story-image-default.png)
One of the hardest things a developer must do is release their bug-riddled code out into the world, knowing they may never hear from those little critters ever again.

### [188. 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. 

### [189. 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?

### [190. 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.

### [191. 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.

### [192. 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.

### [193. 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.

### [194. 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:

### [195. 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.

### [196. The Ultimate List of 38 JavaScript Tools](https://hackernoon.com/the-ultimate-list-of-javascript-tools-e0a5351b98e3)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
In January 2017 the Stack Overflow community has interviewed 64,000 software developers for the annual developer survey. While the results remain unchanged, JavaScript continues to be the most commonly used programming language for the 5th year in a row.

### [197. 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.

### [198. Conditional Rendering in React](https://hackernoon.com/conditional-rendering-on-react-57a864c2d04d)
![](https://cdn.hackernoon.com/images/tir31l8.jpg)
When we are developing a React application, we often need to show or hide an element given a certain condition. Be it a user interaction, the presence of data coming from a request, or even permission levels. This is called conditional rendering, and we’ll look at different approaches to handling those cases.

### [199. 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?

### [200. 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.

### [201. My App Lets You Sort your Music by Mood [with some help from Spotify's Web API]](https://hackernoon.com/how-to-use-spotifys-web-api-to-sort-your-music-by-mood-tcfd3qbt)
![](https://cdn.hackernoon.com/images/ll303qlv.jpg)
I just finished working on moooodify, a website which lets you sort your favourite Spotify music by different moods, and then save them as playlists.

### [202. 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!

### [203. 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. 

### [204. Angular Vs. React: Choosing a Front-End Web Stack](https://hackernoon.com/angular-vs-react-choosing-a-front-end-web-stack)
![](https://cdn.hackernoon.com/images/M6G22rxQzLTqx37eMqcSVG1Ybvj2-ss33oc0.jpeg)
Web development is an Art.

### [205. Reducing boilerplate in Redux Apps with Arc](https://hackernoon.com/reducing-boilerplate-in-redux-apps-with-arc-d9550434470e)
![](https://cdn.hackernoon.com/drafts/dmr31wv.png)
Redux is awesome! But people often complain about how much boilerplate they have to write when working with it. Part of this problem, is because they feel unproductive defining constants, action creators and big reducers, but also because they don’t have a clear idea on how to organize their project, or even how to proper handle async requests. On this post, we are going to talk about those concerns and present some approaches to handle them.

### [206. 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.

### [207. 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.

### [208. A different way to manage state in React](https://hackernoon.com/a-different-way-to-manage-state-in-react-2d21dfb94482)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
Imagine a React app that shows a list of tasks.

### [209. 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?

### [210. 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.

### [211. 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

### [212. 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.

### [213. 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!

### [214. 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. 

### [215. 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.

### [216. 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)

### [217. I Cloned a Youtube Page to Learn HTML & CSS, And It Was Awesome](https://hackernoon.com/i-cloned-a-youtube-page-to-learn-html-and-css-and-it-was-awesome-1wm43xt9)
![](https://cdn.hackernoon.com/drafts/iopn32id.png)
My new year's resolution this year was to land a remote job as a web developer. I'm glad to say that, so far, I've been very fortunate! 

### [218. 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. 

### [219. 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.

### [220. Polyfills: everything you ever wanted to know, or maybe a bit less](https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
The browser world we live in today is pretty great. You can use promises and fetch and arrow functions and const and let — all the hip new gear — and it will work in every major browser. No polyfills, no transpiling, it will Just Work.

### [221. 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.

### [222. 8 Top Programming Languages in 2020 According to TIOBE & Stack Overflow [An Overview]](https://hackernoon.com/8-top-programming-languages-in-2020-according-to-tiobe-an-overview-1kab30to)
![](https://cdn.hackernoon.com/drafts/yh3y3wn4.png)
At the moment, the TIOBE index monitors 265 popular programming languages. The TIOBE includes a language on the list if it matches three key requirements: it is Turing complete, has its own Wikipedia page, and provides more than 5,000 search results on Google. 

### [223. 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?

### [224. 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

### [225. 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

### [226. How to Build an Angular Image Feed](https://hackernoon.com/how-to-build-an-angular-js-image-feed-ea6193fa0b75)
![](https://cdn.filestackcontent.com/oB7fO8iQb2tITCQdvhUa)
In this tutorial I’m going to show you how to build a user-driven photo gallery, powered by Angular, hosted on the Cosmic JS App Server.

### [227. 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.

### [228. 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.

### [229. 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.

### [230. Can You Use FreeBSD for a Developer Machine in 2020?](https://hackernoon.com/can-you-use-freebsd-for-a-developer-machine-in-2020-fc653bk5)
![](https://cdn.hackernoon.com/drafts/ut18037rf.png)
FreeBSD is a solid choice on a server, and it’s ubiquitous in the infrastructure world, but how does it hold up as a desktop machine? As a developer workstation? I found out.

### [231. 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. 

### [232. 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.

### [233. 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.

### [234. Building a Serverless Contact Form with AWS Lambda and AWS SES](https://hackernoon.com/building-a-serverless-contact-form-with-aws-lambda-and-aws-ses-fbf01d523678)
![](https://cdn.filestackcontent.com/SAdyeL8yTzi3B6HydqZb)
What if I told you it can be done with zero dependencies? Hope you’re up for a challenge because that’s exactly what we’ll be doing.

### [235. You might not need if statements: a better approach to branching logic](https://hackernoon.com/you-might-not-need-if-statements-a-better-approach-to-branching-logic-59b4f877697f)
![](https://cdn.hackernoon.com/images/story-image-default.jpg)
What a ridiculous title, of course you need if statements.

### [236. Java or Python? Which is better to Learn to Code?](https://hackernoon.com/java-vs-python-which-is-better-to-learn-for-beginners-in-2020-yq1t3y58)
![](https://images.unsplash.com/photo-1529101091764-c3526daf38fe?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Hello guys, if you are thinking about career in tech like programming, web development, data science,  test automation, machine learning and other career Java and Python are two of the most popular and influential programming language of the present time and future to start with. 

### [237. 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.

### [238. Getting Started with AWS Lambda and Node.js](https://hackernoon.com/getting-started-with-aws-lambda-and-node-js-4ce3259c6dfd)
![](https://cdn.hackernoon.com/hn-images/1*qf7IuoB2nc_qJKLeLgsVGA.jpeg)
Once upon a time, not so long ago, a word caught my ear. Lambda. That struck a chord, remembering the good old days of playing Half-Life as a kid. Little did I know what AWS Lambda was, and how incredibly awesome it is. If you’re intrigued, stick around. I’ll only take a few minutes out of your already busy day, and you surely won’t mind.

### [239. A guide to cross-browser testing: installing all the things](https://hackernoon.com/a-guide-to-cross-browser-testing-installing-all-the-things-6e56c2bd8182)
![](https://cdn.hackernoon.com/drafts/7x5f3q0h.png)
So, you’ve written a website. Your carefully crafted HTML, CSS and JavaScript sits waiting to be sucked through the ether into the wild world of browsers.

### [240. Building an Inventory Management App Using Vue.js and Laravel](https://hackernoon.com/building-an-inventory-management-app-using-vue-js-and-laravel-1abc492d95d7)
![](https://cdn.filestackcontent.com/43PYT70iRimOPO06YKJO)
This article originally appeared on the Cosmic JS Blog.

### [241. 30 Most Trusted Java Development Companies on the Market in 2020](https://hackernoon.com/top-java-development-companies-641b3y3j)
![](https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0)
Java is a general-purpose programming language designed by Sun Microsystems in 1995. Since then, the language has become widely spread—it was one of the five most used programming languages in 2019, and a fifth of Google search requests for programming tutorials were related to Java. No wonder both product owners and developers tend to use Java for software development, as Java is:

### [242. Gatsby Won Against Next.js in this Heads Up Competition](https://hackernoon.com/gatsby-won-against-nextjs-in-this-heads-up-competition-xa7p3ysc)
![](https://cdn.hackernoon.com/images/t71b2e95.gif)
A comparison of static site generators and how server-side rendering hurt performance

### [243. Freelancer vs Web Development Company: what to choose?](https://hackernoon.com/freelancer-vs-web-development-company-what-to-choose-89765e44fd18)
![](https://cdn.hackernoon.com/hn-images/1*elOLyrKQj81Dfpj4DYZcTw.png)
Freelancer vs Web Development Company: what to choose?

### [244. 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.

### [245. We Built A Search Engine With MeiliSearch and JavaScript: Here's How You Can Too](https://hackernoon.com/we-built-a-search-engine-with-meilisearch-and-javascript-heres-how-you-can-too-zz2d3zae)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2F83Q593Q01ZbEJfEJP1UgpqjbzdA3-i48c3dvm.jpeg?alt=media&token=d2a261d8-803b-4774-b76e-53c03bcb4716)
Struggle to find the chemistry Nobel prize winner for 1979? Try out MeiliSearch's super-fast-search JavaScript tutorial to find Nobel prize winners in a matter of milliseconds. 🌬️

### [246. 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.

### [247. Build an Appointment Scheduler Using React, Twilio and Cosmic JS](https://hackernoon.com/build-an-appointment-scheduler-using-react-twilio-and-cosmic-js-95377f6d1040)
![](https://cdn.hackernoon.com/drafts/mz133yt5.png)
TL;DR

### [248. 39 Web Developer Tools You'll Want To Take With You Into 2021](https://hackernoon.com/39-web-developer-tools-youll-want-to-take-with-you-into-2021-il2j3wlp)
![](https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images%2FV9J0kJWT15dwSuG3CLQTn9lZjeE3-diae3w2g.png?alt=media&token=8a07a476-49d6-45fb-b14c-dbe50a3d2828)
In this article, we will review 39 of the best software development and programming tools, ranging from web development and interactive development to rapid application development.

### [249. 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.