--- title: Best asayer posts — August 2022 | daily.dev description: The most upvoted asayer posts from August 2022, curated by the daily.dev community. canonical: https://daily.dev/sources/asayer/best-of/2022/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/asayer/best-of/2022/08 og:type: website og:site_name: daily.dev og:title: Best asayer posts — August 2022 | daily.dev og:description: The most upvoted asayer posts from August 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of asayer — August 2022 1. 1 [](https://daily.dev/posts/11-authentication-mistakes-and-how-to-fix-them-kil1c-fx5 "11 Authentication Mistakes and how to fix them") Article asayer · 4y 11 Authentication Mistakes and how to fix them When authenticating a form on your web application, you must be careful not to display just one error message. Displaying a specific error message is dangerous because it could let an attacker use an automated trial-and-error method to determine a user’s username and password. Injection attacks, memory leaks, and compromised systems can occur if data provided in form input is not properly checked. All of the libraries I recommend for validation. 195 4 2. 2 [](https://daily.dev/posts/modern-css-selectors-0crla1mbq "Modern CSS selectors") Article asayer · 4y Modern CSS selectors This tutorial discusses three recent pseudo-class selectors which target elements based on their state. This creates identical CSS code and reduces typing effort and reduces Typing effort. The tutorial also reduces typing efforts and reduces writing effort. OpenReplay is an open-source, session replay suite that lets you see what users do on your web app. For more information, visit www.openreplay. www. Open Replay is a session replay. Click here for more information. Click HERE for more details. 186 13 3. 3 [](https://daily.dev/posts/deep-dive-into-javascript-s-iterators-iterables-and-generators-zshnkpe7b "Deep dive into JavaScript's Iterators, Iterables and Generators") Article asayer · 4y Deep dive into JavaScript's Iterators, Iterables and Generators The for...of loop is the protocol for iterating over data structures provided by JavaScript. We'll discuss and explore these concepts and learn how to implement them within your next JavaScript project. The concept of anIterable is any structure that has the Symbol.iterator key; the corresponding method has the following behavior. In JavaScript, the Array object is the most iterative iterable in nature. The following behavior has the same behavior. The code block will attempt to create a LeapYear of leap year. The first element is the first element and the last element of a leap year and the next element of our iteration. 66 3 4. 4 [](https://daily.dev/posts/semantic-elements-in-html-why-use-them-vdh0zhv1l "Semantic elements in HTML: why use them") Article asayer · 4y Semantic elements in HTML: why use them Semantic elements have to do with the syntax that makes the HTML very easy to understand. It makes our code cleaner and make more sense where each element uses the appropriate word. The navElement makes it immensely more accessible for us to create a neat menu of text links and help screen readers correctly identify the primary navigation areas in a document. 51 5. 5 [](https://daily.dev/posts/four-top-front-end-monitoring-tools-for-your-website-dab76cfxr "Four top Front End Monitoring Tools for your Website") Article asayer · 4y Four top Front End Monitoring Tools for your Website Front-end or front-end application monitoring includes the process and tools for tracking and managing an application's presentation layer. For example, NGINX Amplify, a SaaS-based monitoring tool, monitors performance, tracks infrastructure assets, and enhances configuration using static analysis. OpenReplay tracks critical slowdowns, crashes, CPU/memory usage, rendering times, etc. It can capture JavaScript errors and sync with recordings. You can upload your source maps to see the source code in the stack trace. 50 1 6. 6 [](https://daily.dev/posts/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses-59vh1un95 "Next.js vs NuxtJS: a comparison of two powerhouses") Article asayer · 4y Next.js vs NuxtJS: a comparison of two powerhouses New features in NuxtJS 3’s public beta, released in October, gave developers more time to focus on creating wonderful user experiences. Nuxt JS offers a module system that enables the core to be expanded. If there is an existing NuxJS module, you don’t need to create it all from scratch or maintain boilerplate. Plugins and configuration settings can be added. In addition to hybrid rendering permits various caching rules per route. If you share an article on Facebook, it can appear with the title “undefined” rather than the original article’SEOs. 46 2 7. 7 [](https://daily.dev/posts/how-to-build-a-progress-bar-indicator-for-next-js-e3ntxe3nn "How to Build a Progress Bar Indicator for Next.js") Article asayer · 4y How to Build a Progress Bar Indicator for Next.js Next.js is a server-side framework with an emphasis on performance. It is also of the most widely used JavaScript frameworks (beneath React) worldwide. The server- side rendering for React apps is then done by Next.js. It can be making an API request or rendering a complicated page component in the background. For more information, visit our next-app.js, or create a new next-apartment.js to see the new project. 34 1 8. 8 [](https://daily.dev/posts/recognizing-speech-with-vanilla-javascript-7inpt4kou "Recognizing Speech with vanilla JavaScript") Article asayer · 4y Recognizing Speech with vanilla JavaScript Speech recognition, or speech-to-text, is a capability that enables a program to process human speech into a written format. The chat app will be able to access your microphone when the start listening button is clicked and will have a response to specific questions asked. When you head to the browser and hit the refresh button and hit you’s. The words are meant to be in a single sentence. To correct that we will need to map through each of our results. For that to happen, we will make a variable. 30 9. 9 [](https://daily.dev/posts/understanding-css-positioning-0kwjp0o-i "Understanding CSS positioning") Article asayer · 4y Understanding CSS positioning The position property allows us to move our elements around the webpage using the top, left and bottom properties. Without setting a position type, the top is left, right, right and bottom will have no effect. The bottom sets the left margin for a positioned element left sets the top margin for an element left. All elements have a Static position - by default. With the static position. For more information, you can use the position position. 23 [See all asayer archives](/sources/asayer/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/asayer/best-of/2022/08#page","url":"https://daily.dev/sources/asayer/best-of/2022/08","name":"Best asayer Posts — August 2022","description":"The most upvoted asayer posts from August 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/asayer/best-of/2022/08#items","numberOfItems":9,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/11-authentication-mistakes-and-how-to-fix-them-kil1c-fx5","name":"11 Authentication Mistakes and how to fix them"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/modern-css-selectors-0crla1mbq","name":"Modern CSS selectors"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/deep-dive-into-javascript-s-iterators-iterables-and-generators-zshnkpe7b","name":"Deep dive into JavaScript's Iterators, Iterables and Generators"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/semantic-elements-in-html-why-use-them-vdh0zhv1l","name":"Semantic elements in HTML: why use them"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/four-top-front-end-monitoring-tools-for-your-website-dab76cfxr","name":"Four top Front End Monitoring Tools for your Website"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses-59vh1un95","name":"Next.js vs NuxtJS: a comparison of two powerhouses"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-build-a-progress-bar-indicator-for-next-js-e3ntxe3nn","name":"How to Build a Progress Bar Indicator for Next.js"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/recognizing-speech-with-vanilla-javascript-7inpt4kou","name":"Recognizing Speech with vanilla JavaScript"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/understanding-css-positioning-0kwjp0o-i","name":"Understanding CSS positioning"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"asayer","item":"https://daily.dev/sources/asayer"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/asayer/best-of"},{"@type":"ListItem","position":5,"name":"August 2022"}]}]} ```