Frontend Blog (@frontblog)

How to specify that a server component should be rendered dynamically at runtime if it does not use dynamic APIs in Next.js. #reactjs #nextjs #css #html #javascript

Defining the system theme The prefers-color-scheme media query can be used to determine whether the user is using a light or dark theme in their operating system window.matchMedia allows you to access media queries from JS and subscribe to their triggers const mediaQueryList = window.matchMedia('(media query)') #CSS #js #javascript #frontend #html

A sleek credit card input form with soft and pleasant micro-interactions Supports automatic number formatting, validation, and card type detection. Created with Vue.Js. Code: Credit Card Form - VueJS https://codepen.io/JavaScriptJunkie/pen/YzzNGeR #codepen #vue #javascript #html #css

display: none; and visibility: hidden; aren’t just different ways to hide elements. They have completely different implications. #recomendation #developer #css

I started as a front-end developer focused on clean code and design, but I soon realized that clients wanted more than just aesthetics... they needed visibility. A stunning website means nothing if it doesn’t rank and attract traffic. #seo #developer #recomendation

🔰 HTML Input Types With Demo #html

Once you start using it in different contexts, you realize it’s a small tweak that can make a big difference in user experience, design aesthetics, and even performance optimization. #css

Default browser highlights in auto-filled fields can clash with a site’s design. By leveraging the :-webkit-autofill pseudo-class, developers can override these styles and ensure consistent branding across modern browsers. #tutorial #recomendation #developer #css

How keen are your eyes 🧐 can you spot the bugs in these three JavaScript snippets? 😎 #javascript #tutorial #recomendation #developer

The best way to learn JavaScript is by practicing examples. In this post, I have posted some basic programs for internships purpose and pratice. #developer #recomendation #tutorial #javascript #resourse

RegEx is perfect for tasks like validating input, searching, or replacing text. Let’s explore its key features step by step! 📝 Patterns Define your search criteria using sequences of characters or symbols, allowing you to extract or manipulate specific parts of a string. 🎯 Matches The .test() method lets you check if a string matches a defined pattern. Remember, RegEx is case-sensitive by default unless you use flags! 🔤 Character Classes Match specific types of characters, like vowels [aeiou] or digits [0-9], to identify patterns in your strings. 🎌 Flags Add flags like /i for case-insensitive matching or /g for finding all matches instead of just the first one. 🔢 Quantifiers Specify how many times a character or group should appear. For instance, {2,4} matches a pattern appearing 2 to 4 times. 🔗 Anchors Pin your search to specific positions in a string, like ^ for the start or $ for the end. 📦 Groups Use parentheses () to group patterns and capture parts of a match, making it easier to work with subpatterns. 💡 Why use RegEx? * Simplify text processing tasks. * Improve data validation and extraction. * Make your code efficient and elegant. Did this breakdown make RegEx seem less intimidating? Let me know your thoughts or questions in the comments below! 🌱👇 #regex #javascript #tutorial #recomendation #developer

TypeHero, a platform for learning TypeScript in practice with ready-made tasks and the ability to create your own tasks https://typehero.dev #resourse #typescript #developer #chrome #resourse

Convenient work with localStorage Chrome extension for quickly viewing, editing, and deleting data in localStorage directly from the browser. It eliminates the need to constantly navigate in DevTools and work through the console Extension in Chrome Link: https://chromewebstore.google.com/detail/local-storage/nnlekldijoehomfgfciodmolohhfkfpm #recomendation #frontend #resourse #chrome #developer

Balancing text using text-wrap: balance The text is wrapped in such a way as to best balance the number of characters in each line, which improves the layout quality and readability. It is supported only for text blocks containing a limited number of lines (the Chromium implementation uses up to six hyphenated lines), i.e. it is useful for cases such as headings or quotations h1, h2, h3, h4, h5, h6, blockquote{ text-wrap: balance; } The support is 88.65% — you can safely use it, as nothing will break in browsers where it is not supported. #CSS #javascript #frontend #html #recomendation

🔰 A simple, CSS-only typing effect In CSS, the ch unit defines the width of a single character. The reason we are using a monospace font is because they have the same width for any character 😁 We use a simple key frame animation to automate the width of the element from 0 to some max size of the text. ✨ The steps animation timing function is important, because it enables to set the width in a staggered manner (1ch, 2ch, 3ch, etc) and not a continuous smooth way ✨ We also disable text wrapping so that the text is presented in a single line irrespective of the width - which is important for this effect #recomendation #html #frontend #javascript #CSS

🔰 Online CSS tools Building beautiful websites doesn’t have to be a grind... these online CSS tools are like secret weapons for any developer. #CSS #javascript #frontend #html #recomendation

🔰 Container queries in CSS If you have not tried out container queries yet, would highly recommend that you do 🤩 This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page. 👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container 👉 Some other examples include, when you want to style an individual card based on its size #CSS #javascript #frontend #html #recomendation

Do you need beautiful map components for your applications? It is an excellent library of clean and modern card components with zero configuration and one-command installation. Some possibilities: - Automatically adapts to light and dark themes - Works out of the box, without any configuration - Support for tooltips, signatures, and extended markers - Drawing routes and paths on the map - Fits perfectly with modern UI stacks such as shadcn GitHub: https://github.com/AnmolSaini16/mapcn #resourse #code #frontend #CSS #javascript

Brought an insane collection of Unicode characters Here you can find an unlimited number of characters and copy them in HTML, Unicode, Hex, JSON and other formats. It is possible to customize the symbol for yourself and export it in SVG or PNG format. https://symbol.so/ #resourse #javascript #CSS #frontend #code

Immutable alternatives for 9 arrays mutating methods #javascript #code #frontend #CSS #html

Node can run TypeScript files directly! #frontend #code #javascript #nodejs #typescript

#momentsof2025 #2025 #blogger #frontend #Итоги2025

CSS: Styling Scrollbar. #javascript #code #frontend #css #html

Masking in CSS using the mask property The property sets the image that is used as the mask layer for the element. <img src="picture.jpg " alt="..."> The property is defined like background: img { mask: url("../shape.png"); mask-repeat: no-repeat; mask-size: cover; mask-position: center; } Or you can write it in one line, as in the picture #CSS #html #javascript #frontend #code

I dug up the coolest repository with neatly made animated icons that you can immediately use in your projects without too much fuss. https://github.com/pqoqubbw/icons #resourse #frontend #nextjs #javascript #recomendation

A useful website that allows you to explore different React concepts through interactive visualizations Things like state, rendering, hooks, and component behavior are shown visually, so it's much easier to understand what's really going on under the hood. https://react.gg/visualized #resourse #reactjs #nextjs #javascript

Checking the spelling The spellcheck attribute tells the browser whether or not to check spelling and grammar in the text. The attribute is applied to input or textarea tags, as well as to elements that have the contenteditable attribute set. You can use the pseudo-element ::spelling-error to style an incorrectly written text segment (86.01% support) CSS: ::spelling-error { background-color: yellow; }

I came across one gorgeous thing: Lychee This is a web service that allows you to check if links are still alive in your projects. Very important for your SEO. - Finds broken links - Checks URLs, HTML and MD files - Developed on Rust, works super fast - Available as GitHub Action for CI Convenient, nimble and as easy to use as possible GitHub is here: https://github.com/lycheeverse/lychee/ #resourse #javascript #nextjs #frontend #recomendation

JavaScript Advice Use the rest parameter instead of the arguments object to accept a variable number of arguments. #javascript #programming #recomendation #frontend #css

The poster attribute Specifies the address of the image that will be displayed while the video is not available or is not being produced. If the poster attribute is not specified, the browser will try to display the first frame of the video. #HTML #css #frontend #reactjs #recommendations