WeCP (We Create Problems) is the fastest and the most accurate way for businesses to evaluate candidates on technical skills — software engineering, cloud, DevOps, data science, enterprise tools, and more — in one unified technical hiring platform. By connecting the world’s leading ATS and Onboarding tools, businesses can automate all of the manual work they normally need to do to evaluate candidate skills before hiring. Take hiring a software engineer, for example. With WeCP, you can just click a button and invite candidates to take a coding test. In about an hour, you’ll find which candidates are worth interviewing face-to-face. You can then click another button to conduct a code pair video interview between interviewers and the candidates. By doing this, you will be able to eliminate bias in your hiring and make it skill-based, while you will be able to reduce your hiring cycle from months down to just a few days. HQ in Bangalore, Karnataka (India) and Austin, Texas (United States), WeCP is used by the world’s top brands — including Infosys, Microsoft, Robert Bosch, Mindtree, and Larsen Toubro — and was named one of India's fastest growing startup by YourStory (#top 100 to soon becoming a billion revenue company). WeCP can help you in the following use cases: 1. Candidate’s Technical Skills Assessment 2. Technical Interviews 3. University Hiring 4. Lateral Hiring 5. Hackathons 6. Upskilling Assessments

WeCP (We Create Problems)

As a web architect, one of the many issues is asset management. And the most significant issue in assets is images. A naive approach would be to set an image and let the browser resize the image via : CSS img {
    height: 100%;
    width: 100%;
    object-fit: contain;
} However, it means that you download the original image. It entails two problems: the size of the original image and the suboptimal browser-based resizing. This post will cover two alternatives: traditional and brand-new solutions. Ahead-of-time resizing The traditional solution to a single image source has been ahead-of-time resizing. Before releasing, designers would take time to provide multiple image versions in different resolutions. On this blog, I'm using this technique. I provide three resolutions to display the post's main image in different contexts as background images: large for the post on its page medium for the post on the home page small for related posts on a post page I also remove JPEG metadata for an even higher size reduction. Yet, the traditional approach is to take advantage of the HTML tag: picture The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios. <picture> <source> <img> The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element. <source> <picture> <img> <img> -- The Picture element on MDN web docs In turn, one can use it like the following: <picture>
    <source media="(max-width: 199px)" srcset="ai-generated-200.jpg" />
    <source media="(max-width: 399px)" srcset="ai-generated-400.jpg" />
    <source media="(max-width: 599px)" srcset="ai-generated-600.jpg" />
    <source media="(max-width: 799px)" srcset="ai-generated-800.jpg" />
    <source media="(max-width: 999px)" srcset="ai-generated-1000.jpg" />
    <img src="ai-generated.jpg" />
</picture> This way has worked for ages, but it has two issues. First, providing multiple resolutions for each image takes a long time. One could automate the process and get . good results with AI However, the volume of necessary storage could be twice or thrice the size of the original image, depending on the number of extra resolutions created. In an assets-rich environment, , e-commerce would significantly increase costs. e.g. On-the-fly resizing I recently stumbled upon , a component to resize images on-the-fly: imgproxy imgproxy makes websites and apps blazing fast while saving storage and SaaS costs -- imgproxy website It offers an endpoint where you can send an encoded URL that defines: The image to resize and its location, _e.g., local, an HTTP URL, a S3 bucket, etc. Different sizing parameters, , the dimensions, whether to fit or to fill, etc. e.g. The format. imgproxy supports standard formats such as JPEG and PNG but also more modern ones like WebP and AVIF. It can also choose the best format depending on the ' Accept ' header. Many (many!) other options, like watermarking, filtering, rotation, etc. imgproxy offers both an Open Source free version and a paid version; everything included in this post is part of the former. One solution would be for the web developer to code each imgproxy URL in the HTML: <picture>
    <source media="(max-width: 199px)" srcset="http://imgproxy:8080//rs:fill/w:200/plain/http://server:3000/ai-generated.jpg@webp" />
    <source media="(max-width: 399px)" srcset="http://imgproxy:8080//rs:fill/w:400/plain/http://server:3000/ai-generated.jpg@webp" />
    <source media="(max-width: 599px)" srcset="http://imgproxy:8080//rs:fill/w:600/plain/http://server:3000/ai-generated.jpg@webp" />
    <source media="(max-width: 799px)" srcset="http://imgproxy:8080//rs:fill/w:800/plain/http://server:3000/ai-generated.jpg@webp" />
    <source media="(max-width: 999px)" srcset="http://imgproxy:8080//rs:fill/w:1000/plain/http://server:3000/ai-generated.jpg@webp" />
    <img src="ai-generated.jpg" />
</picture> It leaks topology-related details on the web page. It's not a maintainable solution. We can solve the issue with a reverse proxy or an API Gateway. I'll use Apache APISIX for obvious reasons. With this approach, the above HTML becomes much more straightforward: <picture>
    <source media="(max-width: 199px)" srcset="/resize/200/ai-generated.jpg" />
    <source media="(max-width: 399px)" srcset="/resize/400/ai-generated.jpg" />
    <source media="(max-width: 599px)" srcset="/resize/600/ai-generated.jpg" />
    <source media="(max-width: 799px)" srcset="/resize/800/ai-generated.jpg" />
    <source media="(max-width: 999px)" srcset="/resize/1000/ai-generated.jpg" />
    <img src="ai-generated.jpg" />
</picture> Apache APISIX intercepts requests starting with , rewrites the URL for , and forwards the rewritten URL to . Here's the overall flow: /resize imgproxy imgproxy The corresponding Apache APISIX configuration looks like the following: routes:
  - uri: /resize/*                                          #1
    plugins:
      proxy-rewrite:                                        #2
        regex_uri:
          - /resize/(.*)/(.*)                               #3
          - /rs:fill/w:$1/plain/http://server:3000/$2@webp  #4
    upstream:
      nodes:
        "imgproxy:8080": 1 Match requests prefixed with /resize Rewrite the URL Catches the width and the image in the regular expression Format the URL for . is the server hosting the original image; indicates a preference for WebP format (if the browser supports it) imgproxy http://server:3000 @webp With the above, to is rewritten as to . /resize/200/ai-generated.jpg Apache APISIX /rs:fill/w:200/plain/http://server:3000/ai-generated.jpg@webp imgproxy Testing We can set up a small testing sample with Docker Compose: services:
  apisix:
    image: apache/apisix:3.5.0-debian
    volumes:
      - ./apisix/config.yml:/usr/local/apisix/conf/config.yaml:ro
      - ./apisix/apisix.yml:/usr/local/apisix/conf/apisix.yaml:ro
    ports:
      - "9080:9080"
  imgproxy:
    image: darthsim/imgproxy:v3.19
  server:                                                         #1
    build: content Simple web server hosting the HTML and the main image We can now test the above setup with the browser's Developer Tools, emulating small screen devices, , iPhone SE. The result is the following: i.e. Because of the screen resolution, the image requested is the 400px width, not the original one. You can see it in the request's URL The returned image is in WebP format; its weight is 14.4kb The original JPEG image weighs 154kb, more than ten times as much. It's a lot of network bandwidth saving! Discussion Cutting your storage costs by ten is naturally a great benefit. However, it's not all unicorns and rainbows. Computing the resized image is a compute-intensive operation; it costs CPU time for each request. Moreover, however efficient is, it takes time to create the image. We traded storage costs for CPU costs and now incur a slight performance hit. imgproxy To fix it, we need a caching layer in front, either a custom one or, more likely, a Content Delivery Network. You may object that we will store assets again; thus, storage costs will rise again. However, a considerable difference is that the cache works only for images, whereas we previously paid for storing all images in the first solution. You can also apply known recipes for caching, such as pre-warming, when you know a group of images will be in high demand, , before an event. used e.g. Conclusion In this post, we described how to use Apache APISIX with to reduce the storage cost of images in multiple resolutions. With caching on top, it adds more components to the overall architecture but shrinks down storage costs. imgproxy This post was inspired by Andreas Lehr's talk at . StackConf The complete source code for this post can be found on . GitHub To go further: imgproxy documentation imgproxy interactive demo Also published . here

Optimizing Web Images: On-the-Fly Resizing and Ahead-of-Time Resizing

Let's learn about via these 84 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Javascript Fundamentals /Learn Repo How do you comfort a JavaScript bug?  You console it. 1. Decoding the Three Dots (…) Or Spread Operator in Javascript The spread operator, spread syntax or 3 dots (...), is a type of syntax in Javascript that is used by both function calls and arrays/objects. 2. How to Set the Default Node.JS version with nvm 3. Javascript Cheatsheet: Spread Operators This Javascript Cheatsheet for Spread Operators explains the use case scenarios and the basic concepts behind Spread Operators when coding in Javascript. 4. How to Fetch Data in Javascript like a Pro Fumbling with APIs? Learn how to use the fetch API to get your data in Javascript like a pro. 5. The Recommended Way to Iterate Over Arrays in JavaScript When dealing with an array, there is a number of ways one can iterate
through the elements starting  from the first at index 0 all the way
to the last element in the array. In my learning process I have come
across 6 looping methods namely 6. 5 Complex TypeScript Problems Solved Using One Simple Example I will try to tell with a simple example of how TS can be applied, and how to solve seemingly complex problems step by step. 7. 10 JavaScript Interview Questions and Answers to Help you Land Your Next Role 10 JavaScript questions for experienced developers that can help you crack your next interview. 8. How to Declare Variables in Javascript: Let Vs. Var Vs. Const A brief introduction on Let, Var, and Const keywords in Javascript. 9. How To Use The Spread Operator on a Function You can’t officially do it, but you can write a function that does virtually the same thing. Let’s see how and maybe why you should. 10. 5 Tips for a Novice React Developer There's a lot to learn when you're a new React Developer. These 5 Intro Tips will help you avoid simple mistakes many new developers make when starting out. 11. How to Sort an Array by Date in Javascript We've all been in a situation in Javascript where we have a set of data, all with different dates, which we want to sort by date quickly. 12. Understanding the Difference Between Object.create and New Operator There are two ways of conducting Object Creation in Javascript, Object.create and New operator. While very similar they do have their subtle differences. 13. Run, JavaScript, Run JavaScript runs the world (at least the virtual part), but what runs JavaScript? That's exactly the question we are going to answer! 14. JavaScript Explained By a Non-Developer Ever wonder how people on the outside of a specific industry such as software development understand and describe the common terms within that field? d. 15. If You Think 100 Days of Code is Hard: Try One Game a Month Challenge A popular challenge that beginner programmers participate in is called 100 Days of Code. Although I never participated in it myself, I see countless tweets with screenshots and progress reports of people sharing bits of apps they made. 100 Days of Code is a great way to keep people in the programmer mindset. It gets them familiar with what it is like to code every day. Still, I wonder if it is the best approach for everyone.  For them, One Game a Month could be a great alternative. 16. The ABCs of JavaScript: apply, bind, and call The ABCs of Javascript are: A - apply(), B - bind(), and C - call(). Using them, we can set what 'this' should refer to. 17. 7 Tips For Becoming A Better JavaScript Developer Sometimes I find myself going through the same steps when I work on different projects. These are just some of the things I've found helpful over the years. 18. Coding 101: Who is Json? A.) Jason Voorhees (Friday the 13th) 19. Angular JS or React - What's Best for Client-side JS Framework AngularJS and React are two of the most popular choices for developing client-side applications. Both offer a variety of benefits and differences . 20. Top 5 React Interview Questions in 2022 ReactJS is the most popular choice, and this lesson on how to answer ReactJS interview questions will help you get the job. 21. Six ‘Java 9’ API Improvements You Should Know Java 9 comes with a whole host of new features that help you with your projects. These Java 9 API improvements can help with everything from pictures to process 22. Display Desktop Notifications Using JavaScript Learn how to use the Notification Web API to display desktop notifications in JavaScript. 23. ​​Choosing Between SASS vs CSS Modules vs CSS-In-JS How we chose our styling: ​​SASS vs CSS Modules vs CSS-In-JS 24. 10 Fantastic JavaScript Projects for Beginners Here are 10 Fantastic JavaScript Projects for Beginners. 25. Reduce Javascript: Master the Basics The reduce Javascript array method is an essential component of functional programming that takes an array and reduces it into just a value. 26. Add Event Listener to Multiple Elements in Javascript If you've ever worked in vanilla Javascript, you might be familiar with adding event listeners to elements using the following formula: 27. The Coffee Poem A poem about coffee, a script that wrote your life before the pulse of your digital signals. 28. Dolby.io Connects With the JavaScript Community With a Virtual Workshop at CascadiaJS Conference Finding and building community theme is pervasive in the JavaScript community as there are frameworks. You can build community while app building. 29. Understanding isObject Method in JavaScript Hence, in this article, we will see how to create an isObject function and use it to check if an object is actually an object. So, let's get started! 30. Understanding Chrome V8 — Chapter 4: Scanner, Token generation Welcome to other chapters of Let’s Understand Chrome V8 31. Pocket Guide to Javascript Array Some Method The some array method lets us check if some elements pass certain criteria. Let's look at how it works. 32. Defining Javascript Variables: Why You Should Ditch Var for Let and Const Learn why it's recommended to use let and const instead of var in JavaScript. 33. A Simple Introduction to Arrays In JavaScript Arrays are one of the most used Data Structures in JavaScript and pretty much any language. 34. Javascript: No More callbacks, Use Promisify to Convert Callback to Promise We need to convert callback to promise because the promise is more readable and easier to handle. 35. A Quick Look at NodeLists and How They Work Did you know that Javascript does not class a selection of multiple elements as an array? 36. What is JavaScript? - A Beginner's Guide An overview of the JavaScript programming language, its uses, basic concepts, and brief history, all tailored for beginners. 37. Learn Fundamentals of JavaScript : Number Variable, Multiple Variables, Booleans, Strings After exams and lots of procrastination, I finally resumed my #100DaysOfCode journey with JavaScript 38. How to Delete an Item in an Array at a Specific Index If we want to delete items from an array, we can use the splice method that all arrays have. Let's look at how it works. 39. 6 Things You Should Not Do in JavaScript In JavaScript, there are many ways to do the same things. But not all of them are equally good. And some of them you should not use at all. 40. Advanced JavaScript Tutorial: How to Reload a Page with Location.reload(true) Have you ever felt like you needed to start over and press the refresh button? 41. How to Install NVM to Manage Node Versions Easily nvm is used to manage the versions of Node.js installed on your computer, so it's a really useful tool. 42. How to Utilize Javascript Array Methods Arrays are a data structure that allows us to store multiple values in one variable. Array methods... 43. Javascript Sets: An Essential Guide A Set in Javascript is a unique list of values, similar to the set data type in Python. 44. Demystifying Javascript Array Methods with Practical Examples Understand how JavaScript array methods work by implementing three of the most common methods: map(), filter() and reduce. 45. 8 Essential Tips To Make Your JavaScript Code Perform Faster JavaScript has ranked as the most popular language in the world by the StackOverflow survey for the seventh year in a row. With the rising popularity of JavaScript, it is clear that it is the most used language for coding frontend applications. It is interesting to note that visitors to websites, lose interest or leave your website if the content doesn’t load within two seconds. The two seconds benchmark is hard to keep up with and that means you need to optimize your JavaScript code for better performance. In this blog post, we will learn some quick tips that you can follow to keep you JavaScript code concise and improve the overall performance of your application. Alright, let’s dive in. 46. Take These 12 Quick Challenges to Find Out if You Know Javascript Do you know Javascript? The language we all love has some weird and sometimes unexpected behaviors. 47. Keeping Your Units Testable in JavaScript Unit tests are a challenging topic, with many interconnected aspects that make it difficult for beginners. 48. Everything You Need to Know About Javascript Arrays Here is a list of pretty much any action you would want to perform on an array, and how to do it in Javascript. 49. Why Do Programmers Choose to Learn Java as a Programming Language? What is the best programming language to learn for a developer? Can’t name the best, but yes, Java is surely one of the Best! You can dive in for the reasons. 50. How "This" Binding Works in JavaScript In this article, we will learn  how  "This" binding works in Javascript. 51. JavaScript, Memory, Architecture and Lifecycle Explore JavaScript memory architecture. Main concepts and organization. Processes of memory allocation and release. Garbage Collection. 52. CheatSheet: 20 JavaScript Array Methods Arrays are objects that enable storing a collection of items and data under a single variable name and have the capability to perform a certain operation. 53. Learn Javascript Fundamentals-Local Scope Javascript fundamentals series Scopes, Hoisting, Closures 54. How to Force JavaScript Variables to use Specific DOM APIs To take advantage of JavaScript IntelliSense and code completion when using a certain awesome text editor VS Code , you need to be able to declare the correct interfaces for variables containing DOM elements. ehem ehem 55. Testing for Image Format Support Using Simple JavaScript Here are two simple Async/Await JavaScript scripts that will detect and indicate browser support for the AVIF and WEBP image formats. 56. Understanding Chrome V8 — Chapter 14: What is Dynamically Typed JS "Let's Understand Chrome V8" are serial technology articles that explain the V8 code, it covers many V8 kernel functions and fundamentals. 57. Understanding JavaScript Event Loop JavaScript Event Loop is a fundamental concept. In this tutorial, we will know JavaScript Event Loop on a high level. 58. Three Different Ways to Create Objects in JavaScript Almost everything in Javascript is an object, whether it’s an array or a function. In this post, we’ll learn three different ways to create objects in JavaScript: 59. Difference between let, var and const in Javascript With javascript, variable declarations have always been one of its tricky parts. Unlike most of the C-based languages, javascript variables are always not created at the spot where you declare them. Where a variable is created usually depends on how you declare it. 60. The Fastest Ways to Teach Yourself JavaScript JavaScript,  the language known for “running the internet,” is entrenched in the programming world. Here are a few of the best ways to learn JavaScript. 61. What Are Template Literals In Javascript And Why You Should Use Them 62. Three Main Components of JavaScript 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. 63. Understanding Symbol: Javascript's Newest Primitive Type Symbol, the brand new primitive type for JavaScript is worth to know more for each single front-end hacker. 64. Let's Talk About Vanilla JavaScript: What Is Vanilla JS, and Why Should I Spend Any Time On It? Know a little JavaScript, but can't do much with it yet? This tutorial, "Vanilla JS in the DOM", will help you understand the background of Vanilla Javascript. 65. An Anthology of Essential Frontend Resources to get you through 2019 Frontend development has taken the world by storm in the last decade with extreme progress in all web technologies (HTML, CSS, JS, etc.) sponsored and led by the biggest software companies in the world. It is arguably one of the highest paid, the most in-demand and satisfying job in the software industry for quite some time. This is the best time to learn it if you haven’t started already 😃! 66. Speeding up Promises in JavaScript 67. Javascript Pointers Do Exist! I bet you didn’t know that Javascript has pointers. Well, it does! Let’s take a quick look at how they are implemented and how they work. 68. The State of Copy-Pasting in JavaScript You may think "Surely there's a library for that!", and yet, there isn't. 69. How Memoization Can Help You Boost Your Javascript Code Memoization is a technique that saves the results of executing functions to avoid recalculations. In this article, we will use this to find Fibonacci numbers. 70. Understanding Promises in JavaScript Promise is a common object in JavaScript but is pretty complicated to use when it's the first time you see it. Learn about promises and the basics of using it! 71. How to Insert an Item Into an Array at a Specific Index in Javascript We use the splice method to insert an item into an array at a specific index in javascript, which takes 3 arguments - and also lets us delete items too. 72. Revealing Module Pattern in JS [A How-To Guide] Let’s understand a bit of the theory behind the module pattern and the purpose it serves on implementing this pattern. The Module pattern was originally defined as a way to provide both private and public encapsulation for classes. 73. Exploring Bitwise Operations in JavaScript: A Beginner's Guide Learn how to use & | ^ ~ << >> >>> operators in JS with clear examples. Demystify bitwise operations for a more powerful and efficient code. 74. Little Dev Tools in Your Pockets Every web developer has, at a point in their development journey used one of the various dev tools available in the browser. I am talking about the console object which provides access to the web debugging console. 75. How to Use foreach() to Iterate Through an Array in JavaScript Knowing how to use forEach in JavaScript is an important first step in writing code that is optimized for speed and efficiency. 76. How to Use else if in JavaScript with Examples Syntax of if else, else-if, nested if, and logical operators like AND OR and NOT in Javascript. Switch statement can be used as an alternate to If statement. 77. Scoping in JavaScript: The Basics The Goal: Understanding the difference between lexical and block scoping 78. Insert JavaScript into HTML Using the Script Tag The script tag is the primary method to insert JavaScript into the HTML page. We will look at all the ways to use the script tag and the importance of each. 79. Learn Javascript Fundamentals-Scope, Context, Execution Context In the road of understanding Javascript, difference between scope, context and execution context is crucial.In Javascript, you write some code and they get interpreted by the Javascript engine. To understand behind the scenes, you need to have an understanding of basics. To achieve that, in this article, we will be focusing on the difference between scope, context and execution context.Scope 80. How Javascript Was Created and Why The History Behind It Is Important Having a humble beginning of starting as a language that was intended to handle browser validations to a full-blown programming language that powers a lot of desktop applications as well, JavaScript has traveled a long journey. 81. 4 Modern JavaScript (ES6+) Features You Need To Use JavaScript has progressed a lot over the past few years. Whether you are new to JavaScript or have some experience and want to quickly get up to speed with the most commonly used features in modern JavaScript, this post is for you. 82. How To Yield Generators (Javascript) Generators are a kind of special function that can stop its execution midway and start again from the same point where it stopped after some time. 83. What is 'this’ in JavaScript? ‘this’ is always been a pain in the a** for many JavaScript developers, but it’s time to say ‘I got this’. 84. A Simple Guide To Vanilla JavaScript: How To Set CSS Styles [Part 2] Learn to use JavaScript to style your project with CSS! A tutorial for beginners. Thank you for checking out the 84 most read stories about Javascript Fundamentals on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

84 Stories To Learn About Javascript Fundamentals

React is a tool for building a front end. Next.js serves the same purpose. However, both instruments offer a slightly different set of features. More precisely, Next.js gives you more than React. But it doesn't mean you should choose it every time. A difference between Next.js and React: Next.js gives you more features Advantages of React.js If you don't know what React is, it's an instrument that simplifies the development of web pages. It allows you to build components(thus, separating your pages and UI elements into convenient parts) using an advantageous markup(JSX). Angular and Vue do the same job with some implementation differences. However, these tools bring us convenience in developing the web. With React, it's simple to start a project(use ), and we have a bundler and a compiler. The next step is to run the app with one command. "We got it. It's simple, fine, fine!" create-react-app To compare React and Next.js, let's look at what Next allows us to do. Next.js benefits A satisfactory would be: " " Next is a framework that uses React. React is a library that gives you the pros you read above, but also it gives you freedom of choice. tl;dr Next.js is React but with more features. You may use a different compiler or bundler, or you may use it in the react-native platform. Also, you choose your set of tools: a routing system, an SCSS compiler(if you need SCSS over CSS), and so on. Next.js gives you React but with an improved developer experience. You don't need to spend time making the choices. But if you want, you can, of course. Let's look at the specific benefits of Next over React. Next.js saves you time, while React gives more choices, which you may not need Routing Why care: you don't need to spend time choosing a router. There are many routers for React, and you may not know the best fit for your situation. Next has the router built-in. You only need to put your pages in the `src/pages` folder. So, the "contact.tsx"(`tsx` is a JSX with Typescript) file will be available as a page at "yourAppAddress/contact". There is dynamic routes support too. Static pages generation Why care: if you need static pages for your app(e.g., a landing page that leads to the app), and you don't want to make them dynamic(because of the performance), you'll need to configure a server that will serve HTML pages in addition to your React app. You can generate static pages with Next.js because it has a built-in server. Server-side rendering Why care: the same thing as above, except that you want to generate a page upon each request. Static generation outputs the HTML that . The Server-side rendering method will generate HTML upon each request. The former is recommended because of better performance. will be reused on each request Data Fetching Why care: if you want to fetch data skipping CORS or get data from the database directly from your app or read files, you'll need a server. Next.js data-fetching methods allow you to do all of that without configuring a server. For example, you can generate a static page using fetching local files at build time. Or, you can request a third-party server omitting CORS because Next has an intermediary - an API server. Image optimization Why care: you don't need to think about image optimization. I.e., how to reduce an image size, what format to choose, and how to lazy-load the images. There are usually two apparent problems with images: Image size. I.e., reducing a 3MB JPG into a 40KB Webp. Loading them after a page is rendered reduces the network load. Next.js solves these problems for a developer, so they can think about the other parts of the app. All the images inside that use `next/image` will be optimized and lazy-loaded. Also, you may set a loading priority for each of them. It uses SWC Why care: you need faster build times. Next uses , which is, according to their claim, " on a single thread and on four cores". Such speeds are a good enhancement during build times and "hot" reloading. SWC 20x faster than Babel 70x faster Built-in ESlint Why care: you spend time configuring ESlint. Imagine you wrote a few lines of code and already have the lint issues warnings. Built-in TypeScript support Why care: you want to write in Typescript, but configuring it takes some time. This feature is a huge dealbreaker for me because configuring Typescript takes time. Sometimes it's merely installing the package(`npm install typescript`), and adding the basic `tsconfig.json`. Still, you need to configure it correctly according to your project needs. Since you have various files in a Next.js project(stylesheets, `public` files, JSX, js), imagine going through them to figure out what can be ignored, what rules(configuration) to add, and then to have to break changes with the framework updates. Next.js does it for us, yay! Environment Variables Why care: if you want to store some private information like secrets, API keys, etc., and you don't want to expose them in an app's bundle. You may create a server to pull that data from or use some third-party provider, but it takes time and one more place for your code. The framework supports `.env` files: create a `.env.local`, add the secrets, and nobody will see them. You may also expose some by prefixing them with `NEXT_PUBLIC_`. Scripts handling and performance Why care: you're thinking about lazy-loading some Javascript scripts(3rd-party ones, too), loading them first, or setting any other priority. Next.js can do all of that if you use `<Script>` instead of the standard `<script>`. Also, it can offload the scripts to a web worker using . Partytown It has a server Why care: you need a server environment. E.g., to make database queries. We talked about it in the Data fetching section, but it's a good point to highlight one more time because you may need a server for not data fetching only. For example, maybe you need to do some filesystem-heavy logic and then fetch the results via the Next.js API server. So, why React, then? Next.js has more features than I described here(those I like personally and wanted to highlight). So, we come to the question of why we need React when starting a new project. Sometimes, you don't need such a beast for a simple use-case. For example, if you have a single static page and you don't fetch any data. Also, you don't have much dynamic logic. Thus, there's no need to bring all of the mentioned features because you need to learn the framework(though its docs are great) and the resources to support the build overhead i.e., why configure the Next.js CI process if you can have merely an HTML page? Choose Next.js for a better developer experience, so you don't need to spend time configuring some tools but coding. Also published . here

Next.JS vs. React: What Should You Use?

Humans! One interesting twinkle in the dark, vacuous expanse of the cosmos. Trapped on a floating ball of rock to mope into space and be tormented by relentless, conflicting emotions. Prison within and prison without. Awaiting the summon of death. What the hell is this existence and what is its use? At least we have each other. Right? Yes, we do. Plus, the resources of the earth. And most importantly, there's that small voice that keeps telling us to become more. So, we stagger on. Nothing is certain in this great maze of existence but we don't just give in. We grope for purpose in the confusing unknown. We do what we do in search of fulfillment. Thus, we solve problems for those we love. We really dig in and harvest ingenious creations from within us. It makes us happy, so we keep going. We keep chasing that which our heart yearns for. What is it many have asked? What is it that we really want? Some of the smartest among us have given a name to it, and I dare agree with them. It is what it is; Freedom! Freedom from wants, death, and ourselves. Freedom from whatever dares limit us. Freedom from this great bondage that is us. Hence, in our relentless yearning, we build this great bridge of science. Into matter, into space, into life. Into technology! Oh that we may find that which we seek. Oh that we may find; Autonomy! Autonomy Has Always Driven Technology Humans have always been bound by limitations that we constantly rebel against. Imagine the caveman days. Small, slow, and weak as we were, we were completely bound by the harsh laws of the jungle. Dominated by powerful creatures. Yet, our big brain brought us to the very top of the food chain. Inventions like the spear, knife, and arrow with advanced hunting strategies helped us overcome the powerful beasts that ruled the wild. Then, we created our own societies and were ruled by tribal laws. Not very different jungle laws though but strong humans were in charge now. Then came the reign of religion, and priests were in charge. Then came countries with cunning politicians. Then came capitalism with wealthy businessmen who are now running the show. All these changes have been driven by advancements as humans try to take more control of their lives. From being ruled by wild beasts to strong men to priests to politicians and businessmen, people have always invented systems that gave them more control of their lives. And this progress is not only evident in the technology of our leadership but also in the everyday devices that we use. First, we had caves and stone tools, then came villages and metal tools, and then came towns and analog machines. Now, we have cities and digital technology. This drive for autonomy in our technology has culminated in what we call a decentralized internet or web3. Autonomy in Web3 Web 3 remains a relatively recent technology that is yet to be widely understood. Yet, it is already being widely adopted as the advantages are very obvious. Simply put, web3 aims to put the Internet and financial system under the control of everyone and not just a few giant corporations. Why is this necessary you may ask? Well, the answer is simple: "Power corrupts and absolute power corrupts absolutely!" The internet and financial systems represent the most critical technologies that humans have been able to develop. Hence, there is a great power in the hands of anyone who controls them. It's no wonder that top government officials and tech billionaires dominate the list of most powerful people in the world. This great power which allows such people to exercise control around the world is akin to the legendary absolute power that absolutely corrupts the wielders. And we have already seen this corruption at play. For example; , , , etc. Facebook has recorded multiple user data breaches Twitter has been accused many times of stifling free speech US politicians were caught cheating through insider trading in the stock market Hence, the internet and financial market which have lasting effects on people’s lives need some level of democracy. This is what web3 promises. Cryptocurrencies were introduced as a means for people to transact directly without passing through middlemen in the banking institutions who often benefit fraudulently from people’s money with little or no punishment. Combining crypto with blockchain technology provides the world with a global decentralized financial internet that no one fully controls and everyone can benefit from. Is Autonomy Truly Possible? Many reservations have been raised about the practicality of web3 and whether it can be truly autonomous. For example; fundamental blockchain infrastructures are often hosted on web2 servers with centralized control. Also, mining cryptocurrency is energy intensive which makes the entire system dependent on power companies. Would the power companies and server owners not be the new bosses in town? Well, that's a critical problem that is yet to be solved. However, blockchain technology is slowly solving the centralized server problem through compressed distributed storage of the technology on the devices of its users. Basically, a blockchain is a database, and every device that connects to the blockchain has a version of the database stored on it. This makes it possible for the billions of devices that users use to connect to the blockchain to function as servers distributed around the world instead of just one central server. Fingers crossed for what will come in the future. About the electricity problem, well, most cryptocurrencies have a limited amount of tokens to be mined, hence, mining is not a forever thing. Also, alternative versions of power like solar make it possible for miners to set up affordable sources of personalized power. Hence, centralized power companies can possibly be bypassed. With these considerations, the autonomy that web3 promises can foreseeably be accomplished. Future of Autonomy Picture this... You fall asleep now and awaken in the autonomous age. Robots run the world now. The planet is one big country run by the United Nations and headquartered in Earth City (a giant circular artificial island built in the Atlantic Ocean on longitude 0 degrees and latitude 0 degrees). Networks of underwater hyperloop lines and speed train bridges interconnect all the continents in minutes and the former countries are nothing but political provinces for proper documentation and security. Autonomous vehicles with little or no accidents dominate the roads and autonomous spaceships transverse space to transport people and resources around the solar system. Humans have finally colonized the solar system. The world lives in abundance as automated high-tech farms meet all our agricultural needs. Basic amenities like water, electricity, and education are free, and everyone gets a living wage to cover secondary needs like real estate around the planets, internet access, and transportation. Advanced amenities like technology, art, entertainment, exploration, and financial trading are where businesses operate. Web3 is fully operational. Hologram devices are all over the place for people to experience the dinterverse (decentralized internet metaverse) which uses all those devices as servers. DAOs, running on open-source technology, are the global means of voting, with Auth ID being the prominent open-source platform for decentralized technology. Industry-based crypto coins are the means of exchange (e.g., techon for technology, agrocoin for agriculture, muse for music, etc.) and cryptex trading (forex trading of the time) is the primary means of employment for everyone with people speculating on which industry will do better based on the season. Bitcoin is, however, immortalized as the only currency accepted around the world across all industries. Global poverty has been eradicated and financial inequality is very low around the world with cryptex trading available to everyone. A decentralized financial system was the game changer as it led to an explosion of prosperity through relatively easy cryptex trading. You investigate your trade on your holophone. You're doing very well and will be making another $50,000 this week. You smile to yourself as you glance out the window of your noiseless starjet (silent speed jets that ferry people around the world in minutes). The city below is a great wonder as people said. You're on vacation in Earth City. It's your first time. You came for it. The statue of autonomy or "the human spirit" as it is fondly called. Many weep upon first beholding its glory. The symbol of human victory on the earth. It appears on the horizon. The shiny bust of a crowned androgynous human child stops at the waist so it's neither male nor female. Completely transparent as if entirely made of glass, hence, the name human spirit. With both hands upraised in freedom, it holds Bitcoin (the first global crypto) in the right hand and a scroll in the left. Your ship does the ceremonial circling of the statue. Then it passes the scroll and you behold those legendary words. You read it in a low voice. "We humans hold that all of us are born free. Free to live, free to love, free to prosper!" A smile crawls up your face, and you resolve to uphold this great motto. Then you hear a phone ring. A familiar ancient music. It gets louder and louder. It's your phone. You were dreaming of course. You curse as you pick up your phone. It's your boss calling you to return to work. You cut the call and sigh in disappointment. That dream was just beautiful. Then it occurs to you: The current world is one big nightmare! WHAT DOES THIS MEAN Web3 is upon us. Cryptocurrencies are everywhere and blockchain infrastructure gets more sophisticated every day. Many crypto millionaires roam the earth to prove the real value of the technology. Decentralization is on its way. Below are the predictions you should know about web3; Decentralization is the future. Digital commodities e.g., NFTs, in-game items, virtual real estate, and decentralized exchange (DEX) will create a new industry. Currencies will become more globalized. Companies will become smaller and more personalized. Self-service will become the new way of operating the financial industry. HOW DO I PREPARE FOR AUTONOMY Educate yourself on cryptocurrencies, blockchain technology, and the metaverse. Invest in promising crypto coins. Participate in public web3 forums. Fund web 3 projects if you can. Learn how to make money on your own from the internet.

Behold: The Autonomy We Always Sought

দেখুন: যে স্বায়ত্তশাসন আমরা সবসময় চেয়েছি

Siehe: Die Autonomie, die wir immer gesucht haben

He aquí: la autonomía que siempre buscamos

Voici : l’autonomie que nous avons toujours recherchée

देखिए: वह स्वायत्तता जो हम हमेशा से चाहते थे

見よ、私たちが常に求めていた自律性

보라: 우리가 항상 추구했던 자율성

Eis: a autonomia que sempre buscamos

Вот: автономия, к которой мы всегда стремились

Bakın: Her Zaman Aradığımız Özerklik

Kìa: Quyền tự chủ mà chúng tôi luôn tìm kiếm

看哪：我们一直寻求的自主权

There is a myth that the easiest thing about web development is building a web-page layout. Based on this, some developers decide not to waste time on learning a competent approach to layout. And it’s in vain. There are many ambiguous moments in the layout, which are worth paying attention to. In this article, you will learn how good layout affects the quality of web applications, its promotion in search queries, and conversion. We will consider the following topical issues: semantic layout, accessibility, images on the web, and so on. Let’s start with a partial list of how a valid and semantic layout can improve any project: Users make their first impression by the appearance of a website — the design and layout. If a page has a bad layout or is loaded too long — it is unlikely that this first impression will be positive. This is important because the first impression affects how long the users will stay on the page, whether they will perform targeted actions and pay for the product. Website SEO. On which position pages will take in SERP affects many factors: semantics, accessibility, optimization. A layout is a basis for improving SEO. It is important to optimize the speed of a page loading. Users are less and less willing to wait for websites to load. And also the speed of loading affects the ranking of pages in SERP. As you can see, building a good layout is very important for the quality of the product. Let’s look at the best practices that will help make it better. Semantic HTML What is semantic HTML? provides a popular definition of semantic HTML: Wikipedia is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML But it is possible to give another definition that clearly explains why this approach is necessary. is a tool with which you can explain to search algorithms on how to analyze the content of the page. Special tags and techniques in semantic HTML show algorithms what the page about and how its parts are related to each other. Semantic HTML On the basis of this information is formed search queries for the website. This is what you need dozens of specific tags instead of one universal. In addition, the code is read not only by search robots but also by other developers. And the semantic code is easier to read. Search robots Let’s find out what are search algorithms that decide when and to whom to show pages. When users enter a query into a search box, the following happens: Analysis and interpretation of words in the query. At this stage, the latest research in the field of natural language understanding is applied — from correcting spelling errors to determining the correct meaning of a word. After interpreting the query, suitable pages from the index are selected and ranked based on keywords and headings. The index is a repository of scanned pages. It contains information about the location and content of a page. When scanning and indexing a page many factors are taken into account: the content of meta tags, website navigation, accessibility, page loading speed, the relevance of content, and page optimization for mobile devices. If a page does not meet , it may not be included in the search index, and therefore will not be shown to users in SERP. Read more about scanning, indexing, and ranking pages and . the recommendations for webmasters here here The most relevant results are then shown to the user. Various information is also taken into account when selecting pages: location, country, interests, user search history. So, in order to increase the position of your pages in the ranking of results, it is important to think about user-friendliness, the relevance of the content, and following the recommendations for creating web pages. Semantic HTML solves many problems, including helping algorithms to find the right pool of requests for the site. POSH (Plain Old Semantic HTML) The principle sounds like this: use HTML elements for their intended purpose. Many new semantic tags have been added to HTML5. Before using think about which HTML tag you can use to explain to the search engine how to interpret this element. But it is important to understand what specific tags are used for. div For example, you are likely to be familiar with the tag. It is presented as a special tag for a sidebar layout. But there’s been some confusion — the tag is needed ( ) primarily to place content that is not related to the main topic of the page. Thus, search algorithms understand that there is no need to take into account this content when indexing the page. This tag is suitable for advertising. But to place there important and related to the main content will be a big mistake. aside according to the documentation Also for someone may be the discovery that such tags as and may not be on the page . And does not have to be the in the section. header footer in a single copy footer last element So, it is important to use HTML tags for their intended purpose. They are a convenient tool for manipulating the attention of search algorithms. But it is important to study and understand which tags to use in which case. Headings Headings are one of the most important things that search algorithms rely on when indexing a page. They make robots understand what your page is about. Even if you are new to web development, you have probably heard the rule “You can’t use more than one tag per page”. But if we look at the , we’ll know that this is not quite true. There can be as many tags on a page as you want. It is important to follow one rule — “one header per section”. You can also use the headings of other levels to point to more specific content. h1 documentation h1 According to the documentation, these two options are identical in terms of semantics. It is important to understand that the title of level 2 will be considered more specific than the title of level 1. The title of the 3rd level is more specific than the title of the 2nd level, and so on. Links and Buttons Links and buttons are important interactive elements of an interface. But the question often arises: when to use links (<a>), and when to use buttons (<button>)? Sometimes it can be difficult to decide because the appearance of these elements can be very similar. Pay attention not to the appearance, but to the function of these elements. Ask yourself, what happens after you interact with the element? If the element directs the users to another page or sends them to a specific fragment of the current page, it‘s a link. A link has an attribute that stores the address. A button doesn’t have this attribute, because a button doesn’t send the user anywhere. The button is needed for other interactions with the page — sending a form, calling modal windows, and so on. href Accessibility When developing a web application, you should take into account that some users have limitations such as visual impairments, low-speed internet, lack of a mouse, and so on. Accessibility is taking care of comfort the maximum number of users. It is nice to use an application where you can see that the developer has thought about users. As mentioned earlier, the accessibility of the site is important when scanning and indexing pages. This means that compliance with the principles of accessibility will help raise the website at the top of SERP. Screen readers There is special software to help visually impaired people interact with the interface — screen readers. Like search robots, it is easier for them to read structured and semantically correct code. It is also important to have the attribute in images, tags for form elements, and a valid layout in general. Check for page accessibility during development and run the page through a screen reader (e.g., ). alt label NVDA Alternative text for images Always add alternative text for your images. The attribute is read by screen readers and is used for image optimization. alt Page navigation from the keyboard An important indicator of accessibility is the ability to interact with the interface using a single keyboard. Many people navigate through web pages without using the mouse. They should have access to basic interactive elements — links, buttons, forms, and navigation. Check the navigation of your page with the tab key. Do not remove the property of important interactive elements from your page. outline Accessibility at low-speed internet connection Accessibility principles also include taking care of users with low-speed internet. It is important to understand that not all users have fast internet. Check and optimize your page speed. While optimizing you should pay attention to: Pictures. Select the correct format (see below), use lazy loading for images. Learn more . here Fonts. Use modern formats (WOFF2, WOFF), link rel=”preload” and CSS “font-display” properties. Learn more . here Optimize Critical Rendering Path. CRP is the minimum set of resources needed to start rendering a page (HTML, CSS, JS files). Optimization of CRP is usually achieved by the delaying of resources that are not needed for rendering. Learn more . here Accessibility for mobile devices According to , more than half of the users use mobile devices to access the Internet. And only part of them has access to high-speed Internet. What is important for optimizing the page for mobile devices: statistics Fast loading; Easy navigation; Ease of interaction with the interface. Graphics Work with images in the layout is a vast topic. The global problem with graphics layout — it weighs a lot. This affects the speed at which pages are loaded. Below is a list of the main recommendations aimed at solving this problem. Image format What image format should I use? JPEG, PNG, SVG? Here it is important to understand the differences in formats and use a suitable format for a particular situation. Graphics can be a bitmap (JPEG, PNG) and vector (SVG). Raster graphics should be used for photos. It supports the ability to create more complex images with a large number of colors and transitions. From minuses — it is not scaled without losses and weighs more. For other cases (icons, logos, simple illustrations) vector graphics are suitable. It is scalable and has a relatively small size. WebP WebP — graphics format from Google, created as a replacement for JPEG and PNG. It has a smaller size with the same quality. Supports lossy and lossless compression, transparency, and animation. Minuses: is not supported by all browsers. But this problem can be solved by applying the following point. Adaptive images You can use and tags to make images adaptive. This allows you to use different images depending on the conditions. For example, you can upload two different images for different screen resolutions. Or you can upload two images that are the same. One — in WebP format, another — in PNG, for those browsers that do not support WebP. picture source Lazy loading Lazy uploading of images allows you not to upload images until the user needs them. Previously, third-party libraries were used to implement lazy loading. Chrome 76 has an attribute “loading=lazy” for images as well as for iframe. Although it is not yet supported by all browsers, it performs its work perfectly. The “img” tag and the “background-image” property Use the tag only for illustrations, semantic images. For presentation materials (background, icons) it is better to use CSS property. By doing this, you get rid of one HTML element (which is good) and improve accessibility. img background-image Working with a browser Responsive mode The responsive mode in the DevTool is a development tool that allows you to understand how a page will look like on different devices. Unfortunately, it may not show platform-specific bugs. So always check the layout on real devices at the final stages of development. Page audit Special attention is paid to the Lighthouse tab in Chrome. There you can get an audit of the page. Lighthouse will analyze the page and make a report where you can see the strengths and weaknesses of the website, detect problems, and solve them. The report is presented on such parameters as Performance, Availability, SEO, Best Practices, and Correct PWA usage. Lighthouse will help you both in general orientation, how the page meets the standards of web development, and point out specific errors. More about Lighthouse metrics you could find . here Browser support New technologies are always good — everyone loves handy tools. But when using new technologies, you should remember to check the support of browsers. You can do this at . caniuse.com Conclusions Of course, this is not a complete list of practices to make the layout better. The world of web development is constantly changing. Tools and algorithms are changing too. But one thing’s constant you should take care of the users. With semantic HTML you will help users find the information they need. By applying accessibility principles you enable people with disabilities to use the product. By optimizing your pages, you take care of users who do not have access to a high-speed Internet connection. When building a web application, it is important to remember that the products are made for , not for . people horses Previously published at https://blog.maddevs.io/its-not-just-a-layout-what-do-you-need-to-know-to-make-a-good-markup-ff178a1b2a95

How To Create a Good Markup

367 Stories To Learn About Web Design

Hey there. Scott here. Today, let's rip apart some lazy clichés about success (one of my favorite things to do). You know the drill: "Find a mentor." "Surround yourself with the right people." Blah, blah, blah. There's this whole industry built on pimping out "gurus" promising secret keys to the magic kingdom. You'll pay some six-figure mastermind fee to sip bad coffee while some pay-to-speak “thought leader” on stage feeds you recycled platitudes. Here's the newsflash nobody wants to tell you: The fastest way to master something is to TEACH it. You think mentors got to where they are by sitting on their butts waiting for handouts? Hell no. They learned in the trenches, by DOING. They made mistakes, learned from them, and figured out how to do it better next time. Real wisdom isn't downloaded – it's forged in the fire. Teach it to Keep It Let's talk about brain science for a second. There's this thing called the "protégé effect." Turns out, when you EXPECT to teach something, you learn it on a deeper level. Why? Because it forces you to organize your thoughts, spot holes in your understanding, and break things down in a way that makes sense to someone else. You think those business influencers got all their knowledge overnight? Nope. They started out fumbling their way through, probably screwing things up just as much as the rest of us. But somewhere along the way, someone asked them a question, or they started explaining their process, started explaining all the things they figured out by doing…and BOOM. Lightbulb moment. Think about it – have you ever truly understood a concept until you had to explain it to a total newbie? Suddenly, all that fuzzy thinking goes out the window. You have to crystallize that stuff. That’s where the magic happens. The Ultimate Hack: Don't Seek, BE You want a mentor? Flip the script and become one. Find someone a few steps behind you on the path. Offer to help them out. You don't need to be the ultimate expert – just further along than they are. Here's the crazy thing: in the process of mentoring, YOU'LL level up faster than you could have imagined. Suddenly, you're revisiting stuff you thought you knew, only to see it with a whole new perspective. Your mentee asks questions you never thought of, forcing you back to fundamentals. Boom, lightbulb moments all over again. This isn't about charity. It’s pure, calculated selfishness (while simultaneously helping out someone else). "But Scott, I Have Nothing to Teach!" This is the #1 excuse I hear every time. I call BS. Every single one of you has something valuable to share. The trick is that it might not be what you think. Maybe you just: Figured out this crazy productivity hack for squeezing an extra hour into your day. Took your dog through basic training without losing your mind. Mastered a killer 20-minute bodyweight workout. Found a budgeting app that finally stopped you from blowing all your cash every weekend Think that stuff's too basic? Wrong. For someone struggling with those things, your 'basic' skill is worth its weight in gold. Your secret is the starting point someone else is craving. What makes you valuable as a mentor isn't just knowledge, it's relatability. When a 'guru' is on some pedestal, that creates distance. People are afraid to ask the "dumb" questions. however, were just in those beginner shoes. You remember the suck, the confusion, the "why the hell can't I get this" vibes. That makes you approachable. You, The Overflow Effect Here's the part no one tells you about 'pouring into others': it creates this crazy energy loop that comes back to you tenfold. Think about it like this: Every time you invest in helping someone else, you: Solidify your own understanding. Build confidence like a damn muscle. Gain clarity about your own path. Open doors to unexpected opportunities. Form valuable connections with people motivated to grow. Remember the old rule, "Give without expectation of return?" Guess what – the universe isn’t stupid. Your generosity creates this abundance mindset shift. New insights start rolling in. You notice solutions to problems you were stuck on. That side project you had on the back burner suddenly starts picking up steam. Call it karma, call it energetics, whatever. Helping others unlocks something that directly fuels your own success. From Talk to Action Enough philosophizing. You're a doer, right? Okay then, here's your homework. This is how you (start) to be a mentor, build a mentoring loop, and start helping others, while simultaneously, helping yourself. Don't try to be all things to all people. What specific skillset or knowledge have you been geeking out over lately? That's your jam. Don't overthink it – just pick something you genuinely enjoy talking about and feel you can provide a little guidance on. Niche Down: We're not going straight for paid mentoring here. Start small. Could you offer: Low-stakes offers: A 30-minute Q&A session in a relevant Facebook group? A mini-training video on a single, super-specific topic? A one-page PDF cheat sheet that breaks down a complex process? Zoom Office hours every Friday afternoon? Pull people in from LinkedIn. Social media, baby. Tell your network you're open to helping a handful of folks with [your niche topic]. Let your enthusiasm for the subject shine through – that's how you attract like-minded people. Don't worry about looking fancy. People connect with real. Put it out there: Overcoming Your Inner Critic Guess what? Your brain's gonna freak out. Imposter syndrome will throw up roadblocks. You'll hear whispers like: "Who the hell am I to teach this?" "Everyone else knows this stuff already." "What if I give bad advice and look like an idiot?" Here's how you fight back: Flip it: That fresh perspective is gold. "Who am I to teach this?" I'm the perfect person to teach this because I just figured it out myself. Nope. They don't. That's your ego talking. Everyone starts somewhere. Don't underestimate the value of a "beginner's mind." "Everyone else knows this stuff." Dude, relax. No one expects perfection. Focus on being helpful, sincere, and open to learning your mentees. That humility builds trust like nothing else. "Bad advice = idiot" alongside This Is YOUR Learning Lab The beauty of starting small is it takes pressure off. This isn't some permanent contract you're locked into. You're dipping your toes, testing the waters, and evolving right along with the folks you're helping. Don't worry about having all the answers right this second. Be transparent about your journey. People love rooting for the underdog. Your scrappiness and genuine desire to help are your winning qualities. Now you’re wondering, ok - I’ll do it… but I’ve never done this before. No problem, here’s how to start. First Interactions: Set the Stage Your goal isn't to be some all-knowing sage. No, you're the supportive guide on the side – here to provide helpful signposts and cheer your mentees on. With that in mind, here's how to kick things off on the right foot: – Ditch the generic "What do you need help with?" That’s too damn open-ended, especially for newbies who likely don't know where to start. Instead, dive into the specifics: Ask Powerful Questions "What's your biggest pain point with [your niche] right now?" "What's one small win you'd love to achieve by the end of this week?" "What part of this process feels the most overwhelming/confusing?" These force focus and get them thinking strategically rather than flailing around in overwhelmed. – Beginners get obsessed with end results. They want to hit some arbitrary number or get that dream outcome NOW. Your job is to bring them back to Earth: Instead of: "How do I make $10k a month?" ask "What's one concrete thing you can do to move closer to that goal?" Focus on Actions, Not Outcomes today This creates manageable momentum and prevents paralysis. Progress is your real measure. – Let's get real: a lot of people are addicted to the struggle. Watch out for red flags like, "I don't have time," "This won't work for me," and "I've tried all that before." Your job is to call gentle BS. Don't be mean, but be firm: Challenge Excuses "If you found just 15 minutes a day, what could you chip away at?" "Great! What makes your situation different?" "That might be true, what could you try instead? else Don't let them off the hook with their self-limiting story. You're here to crack open possibility, not coddle comfort zones. Beware of Scope Creep Early on, set clear boundaries. Are you offering a one-time Q&A? Ongoing email support? Be specific about what's included and what's not. Your time is valuable. Generosity doesn't mean martyrdom. Also, beware of those who confuse freebie mentoring with therapy. Your job isn't to fix their entire life. Keep steering things back to specific action within your area of expertise. Celebrate Every Damn Win This is HUGE. Most folks spend an unhealthy amount of time fixating on what they accomplished. Flip the script. When they share even the smallest victory, go BIG – shout their praises, share their wins, and give 'em virtual high fives. haven't This wires their brain for success more than anything else you could do. You Are the Ultimate Beneficiary It sounds counterintuitive, right? Shouldn't your focus be on value? That's part of it, but here's where the secret kicks in – mentoring unlocks hidden growth avenues for YOU in ways you don't expect. giving Your mentees won't hold back. They'll tell you which explanations landed brilliantly, and which instructions left them scratching their heads. This kind of direct critique is pure gold for honing your communication skills and pinpointing gaps in your understanding. Feedback Loop from Hell: Remember those "dumb" questions that used to plague you? They make you a better innovator. Every time you're stumped by a newbie's inquiry, you must flex your creative problem-solving muscles to find new ways to explain complex concepts. Forced Innovation: Turns out, having someone count on you is damn motivating. When you promise a mentee you'll tackle a certain topic or show them how to do something, welp, now you gotta walk the walk. No hiding behind lazy procrastination anymore. Accountability on Tap: The universe works in mysterious ways. When you throw out generous energy, those ripples come back multiplied. Maybe a mentee connects you with someone who solves a key problem for your business. Maybe that blog post you cranked out to explain a topic suddenly leads to paid collaboration offers. Unexpected Opportunities: This is pure social dynamics. By actively being the leader, the teacher, and the one with (even a little) more experience, you naturally step into a different social role. People begin to look at you differently. Their belief in fuels belief in yourself. Leveling-Up by Association: you Don't Just Mentor, Find Your OWN Mentors Now, here's the twist: even as you become a rockstar mentor to others, don't think you've outgrown being mentored yourself. Always seek out people a few rungs further up the ladder than you. The game never really ends. Look for people who: Embody the results you want to create. Share your values and energy. Have different skills or areas of expertise than your own. It's tempting to only get involved with the most famous, "successful" folks. Sometimes, the greatest mentoring relationships blossom with someone not that far ahead of you – they still remember the challenges vividly. A Call to Arms Listen, I won't sugarcoat this. Stepping into the mentor role ain't always easy. It requires commitment, vulnerability, and the willingness to confront your own BS alongside those you help. But you know what's harder? Staying stuck in the eternal student loop. Spinning your wheels, forever waiting for that perfect course, magic guru, or secret roadmap to fall from the sky. Here's the truth: the knowledge you need is already inside you. All that's needed is unlocking it. By sharing your journey, embracing the messiness of learning, and pouring into others, you create this unstoppable flow that benefits everyone involved. The world is starving for real. People are sick of the overpolished, "I've got it all figured out" BS. What they crave is someone willing to admit they don't have all the answers and figure things out alongside them. That's where you come in. Your imperfections are your biggest assets. Your willingness to show up, share your wins and losses, and lift others up as you rise – that's what makes a true difference. So, my challenge to you is simple: Pick THAT ONE THING you're most excited about right now, and start talking about it. Find those one or two people who could use your support, and offer a helping hand. Get comfortable being uncomfortable. Mess up. Admit what you don't know. Learn out loud. This is what creates that overflow effect. This is how you tap into something you haven't even fully glimpsed yet. The Anti-Guru Movement This isn't just about self-growth. It's bigger than that. It's about flipping the script on the entire model of success. Imagine a world where knowledge flows freely, where collaboration wins over competition, and where anyone with drive and curiosity can find the support they need to rise. We're the ones who have to create that world. We're the anti-gurus, the knowledge rebels, the ones who pave the way for something bolder, better, and far more sustainable. So go forth, my friends. Teach. Share. Connect. Lift as you climb. The best form of knowledge seeking is knowledge creation – so unleash that inner wisdom you don't even realize have, and watch the magic unfold. That's a wrap, folks! I hope this ignites some fires. I'd love to hear what you think. Have a great weekend! Scott Also published here

The Anti-Guru Movement: Reconsider What Mentorship Is All About

Recently, a client approached us with a complaint that our product loads slowly in regions where old mobile devices and slow internet prevail. As a result, users are opting to switch to our competitors. In this article, I will share how I was able to improve the app's load time by implementing techniques such as import and render on visibility, image proxy, proficient work with SVG images, and other methods. I hope you'll find something useful for your app as well. Brief Introduction On our page, we have a lot of components, including a banner, interactive dynamic content in the center, several sliders, and extensive navigation in the header and sidebar. However, this leads to a large number of DOM elements (6500) and a lengthy total blocking time (12 seconds) on mobile devices. Additionally, the fully rendered main page has a total height of 11000 pixels. Even React Profiler in DevTools can’t handle it and crashes. We use . The majority of the content on the main page is dynamic and interactive, updating in real time. React with Next.js Some obvious performance enhancements have already been made: Caching on the CDN side Gzip compression http/2 server Correctly set loading priorities for resources: defer and async Images are set to lazy All internal pages are lazy-loaded by default The bundle is split into chunks. Shortcut First, what I started with and what could quickly solve many problems:
🥁 1..2..3… just reduce the amount of content on the main page. or create a special main page in pure HTML and vanilla JS for such regions. However, in my case, I was unable to convince the business, and I had to solve the problem using an engineering approach. Render on Visibility The question I asked myself was: why spend so much time and resources rendering something the user doesn't even see? The entire page height is 11000px, but a mobile user typically only sees about 700px upon starting. Therefore, 10300px of content can simply be skipped from rendering. The situation is the same on the desktop. I created a basic component that only renders content when it is about to be visible in the user's viewport. It starts loading the content in advance, with an additional 100px on top, to accommodate slower CPUs. This optimization also applies horizontally. For example, if a slide's content is not within the user's view, it won't be rendered. This approach has proven to be beneficial, especially considering that each slide contains logic and multiple components. // The component receives two props:
//
// 1. Children - the content which will be hidden
// 2. Classname - a special class with height and skeleton loader to avoid layout shifts after content appear
function LazyLoadedComponentUI({ children, className }) {
  const intersectionRef = useRef(null);
  // useIntersection is used from the react-use library
  // However, it can be easily implemented manually.
  const intersection = useIntersection(intersectionRef, {
    root: null,
    rootMargin: '100px 0px',
    threshold: [0, 1.0],
  });

  const [isShown, setIsShown] = useState(false);

  useEffect(() => {
    // Content won't be removed after it has been rendered. 
    // However, this behavior can be easily changed.
    if (intersection && intersection.intersectionRatio > 0 && !isShown) {
      setIsShown(true);
    }
  }, [intersection, isShown]);

  return isShown ? children : <div ref={intersectionRef} className={classNames('lazy-rendered-component', className)} />;
} How it looks: const FooterNav = () => 'complicated component';

...

// It's important not to forget to include loader styles to avoid layout shifts.
<LazyRenderedComponent className="footer-nav-loader loader">
  <FooterNav />
</LazyRenderedComponent> My goal was to include only the necessary content for the earliest visuals in the main bundle. This includes what the user sees. Modal windows and collapsing sidebars are downloaded and displayed only when needed. Sometimes, it wasn’t as obvious as it seemed to be. We have a list of 20-30 dynamic items with nested components and logic inside. To prevent layout shifts and maintain smoothness, I implemented lazy rendering specifically for the content of each item on this list. This means that the application reserves empty spaces for a specific item and renders it only when it is near. Eventually, after applying the to many items, we ended up with approximately 700 DOM elements. lazy load component Import on Visibility This allows us to go even further. If we don’t render it outside the viewport, maybe we can even don’t download it? It is possible that the user never scrolls to this content at all. All that remains is to pass the content to our Suspense. LazyRenderComponent const FooterNav = dynamic(
  () => import('./footer-nav'), 
  { loading: () => <div className="footer-nav-loader loader" /> }
);

...

<LazyRenderedComponent>
  <FooterNav />
</LazyRenderedComponent> The alternative usage with the plain React: const FooterNav = lazy(() => import('./footer-nav'));

...

<LazyRenderedComponent>
  <Suspence fallback={<div className="footer-nav-loader loader" />}>
    <FooterNav />
  <Suspence>
</LazyRenderedComponent> Now, when the viewport is near this component, it will start loading it. ⚠️ As in the previous item, it is very important not to forget about the loading state in order to avoid layout shifts. Here, we pass the fallback property to the Suspense component. Selective Hydration During React hydration, React recreates the state it had on the server, essentially re-recreating the . This process can be time-consuming as React needs to parse the current DOM tree. Initially, there may be content in the viewport that should be visible, but it doesn't necessarily need to be interactive right away. To improve performance, I tried deferring hydration by wrapping these components in Suspense, which temporarily delays hydration and keeps them inactive. I initially believed that it completely transformed the game and reduced everything to zero seconds. However, it actually only removed two seconds from TBT. virtual DOM Image Proxy In our application, the LCP (Largest Contentful Paint) refers to a banner. Typically, these banners are high-resolution PNG files with an average size of around 3 MB each. However, the challenge lies in the fact that we have no control over the sizes or file formats uploaded by the operator. Furthermore, imposing restrictions on the operators would not be a favorable design approach. We agreed to convert, compress, and resize images on the fly during the request. This means that we only need to specify the desired URL. https://IMG_PROXY_URL/resize:fit::300/quality:75/plain/image.jpg@avif Our solution was to use . It perfectly fits our needs in terms of performance, functionality, and scalability. image-proxy We use three formats: , , and . The browser automatically loads the best format based on its capabilities. For example, if a browser does not support avif format, it will use webp. If no supported formats are available, the default tag will be used. avif webp jpg/png img <picture>
  <source srcSet="URL_TO_AVIF" type="image/avif" />
  <source srcSet="URL_TO_WEBP" type="image/webp" />
  <img src="URL_TO_DEFAULT_FALLBACK" />
</picture> The resize and compression operation is performed only once. Immediately after that, the result of each image request is cached on CDN. This makes sure we don't sacrifice speed. Now, each image is 120-200 kb instead of 1-2 Mb. They are in the optimal format and have an optimal size based on the device. Alternative Solutions If you are using Next.js, perhaps will be sufficient. However, you won’t be flexible enough, and you lose an opportunity to reuse this solution in a different place other than Next. next/images There is also a library that Next.js itself uses: . It can be set up as a Node.js service. I even played around a little: sharp image-proxy-service Cloudflare and other services offer their own service for resizing and converting images. Loading Priority Since only one image is visible in the main LCP banner, we explicitly set it to , and for the other slides, we used . They will load as soon as the user sees them. loading=eager loading=lazy Also, for the first slide, I added the attribute , which allows the image to be loaded as a priority. As we had up to 100 different requests in the first seconds, prioritizing LCP-images was crucial. fetchPriority="high" SVG images We had around 150 SVG icons and several images that we stored directly in React components. This significantly increased the bundle's weight by 60 KB, and their rendering clogged up our thread during the initial paint. We consolidated all icons into one large SVG sprite and placed it on a CDN. The icons are loaded just once to avoid clogging network connections and to save time on connection establishment. We use the element to display the required sprite from the entire list. use <svg
  height={size}
  viewBox="0 0 512 512"
  width={size}
>
  <use href={`#${id}`} />
</svg> <symbol id="icon-1" width="10" height="10" viewBox="0 0 2 2">
  <circle cx="1" cy="1" r="1" />
</symbol>
<symbol id="icon-2" width="10" height="10" viewBox="0 0 2 2">
  <circle cx="1" cy="1" r="1" />
</symbol>
... Another solution could be to move them to the icon font, although it may not offer the same level of flexibility. Regarding images, we just relocated them to a CDN as separate files. DNS Prefetch Before starting to load a resource from an external URL, the browser spends 20 - 120 ms just on DNS resolving. I marked two tags with the attribute so the browser could start the handshake processes in advance: DNS, TCP, and TLS. <link> rel="preconnect" <link 
  crossOrigin="anonymous" href="https://fonts.gstatic.com" 
  rel="preconnect" 
/> Conclusion Undoubtedly, this was a significant step in performance improvement. Some of the core web vitals on low-end : mobile devices LCP decreased from 12s to 2.5s. Number of DOM elements decreased from 6500 to 700. The lighthouse score was increased from 3 to 52 TBT was decreased from 12s to 5.6s. These numbers have not yet reached the green zone. It means that there is a lot of work to be done. See you in the second part, where I'll share new results! Future Plans Consider replacing the default virtual DOM with an alternative solution. For instance, Million.js Experiment with service workers. Remove SSR from components where it causes rehydration and negatively affects performance. Let's Learn Together Each of us has our own unique experiences, challenges faced, and solutions discovered. I'd love to hear about your own adventures in front-end optimization. What worked for you? What would you recommend doing? Please share your experiences in the comments below!

WeCP (We Create Problems)

wecreateproblems.com

11-50 employees

Since 2016

COMPANY RANKING

WECP (WE CREATE PROBLEMS)

EVERGREEN INDEX #11612

WeCP (We Create Problems) WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

WeCP (We Create Problems)

wecreateproblems.com

11-50 employees

Since 2016

COMPANY RANKING

WECP (WE CREATE PROBLEMS)

EVERGREEN INDEX #11612

RELATED COMPANIESRANK

STORIES ABOUT WECP (WE CREATE PROBLEMS)

WeCP (We Create Problems) WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!