A tutorial explains how to build a basic network vulnerability scanner in Go, covering core concepts such as port scanning, service detection, and identifying common weaknesses. It presents the project as a practical way to learn network security and Go programming by implementing a hands-on scanning tool.

Read Building a Network Vulnerability Scanner with Go and learn Web with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more. Continue reading Building a Network Vulnerability Scanner with Go on SitePoint.

Building a Network Vulnerability Scanner with Go

React Conf 2024, SSR & TypeScript Weekly

This week’s Frontend Weekly highlights a strong mix of practical JavaScript and TypeScript learning, modern rendering strategies, and key ecosystem updates. Standout reads include a clear refresher on JavaScript functions and why they remain the foundation of organized, reusable code, plus a helpful guide to optional properties in TypeScript for designing safer and more flexible object types.

On the architecture side, there’s a solid explainer on server-side rendering (SSR) and why it still matters for performance, SEO, and accessibility in modern web apps. We also have a roundup of the biggest announcements from React Conf 2024, with updates across the React ecosystem that could shape how frontend teams build and optimize applications going forward.

Beyond core frontend topics, the issue also features a practical tutorial on building a network vulnerability scanner with Go, offering a hands-on way to explore security concepts, plus a useful guide to customizing a GitHub Pages blog without extra cost. There’s also a brief freelance update from a developer working across JavaScript, React, and Magento.

Overall, this edition is a good one for developers who want to sharpen fundamentals, stay current with React, and explore tools and techniques that improve both developer experience and end-user performance.

This week in Frontend Weekly: JavaScript functions and TypeScript optional properties explained, why SSR still matters for performance and SEO, key takeaways from React Conf 2024, plus a practical Go security project and GitHub Pages customization tips.

Issue %%issue_number%%

This article discusses implementing simple yet elegant toast notifications using React, offering a practical guide for developers looking to enhance user experience in their applications.

Bundlephobia is really starting to catch on these days as developers become more conscious of the packages they choose to install. Some devs, in the interest in fast turnaround, choose to willy-nilly install the first package they find that ' ll get the job done. However, this can very quickly lead to severe bloat and tons of unnecessary code being shipped to the browser. That is why the main theme of my blog has taken a real do-it-yourself approach to solving many user interface problems. In today ' s article, we are going to learn how to create simple (but also really cool!) toaster notifications in React, using zero dependencies! The examples in this article are taken directly from my current project react-poptart, an NPM package I published. These examples illustrate how you can architect your own notification system, but some parts of the code are missing (e. G. Types, helper functions, etc.) For the full repo code, please visit the link at the bottom of the page. You are also more than welcome to simply install react-poptart in your app. Using the React Context API We want to turn our notification system into a global service for our app, so we ' re going to leverage the power of the React Context API. Doing so will allow us to make our notifications available to any child component. // Provider. Tsx ' use client ' ; import React, { createContext, useContext, useState } from ' react ' ; import Matrix from ' . /Matrix ' ; import { getContrastColor, generateSecureString, deepMerge } from ' . /helpers ' ; import { defaultConfig } from ' . /constants ' ; import type { I_PoptartProviderProps, I_PoptartContext, I_PoptartItem, I_PoptartProps, I_PoptartConfig, I_PoptartUserConfig, } from ' . /types ' ; // Create the Poptart context const PoptartContext = createContext &lt; I_PoptartContext | undefined &gt; (undefined); export const PoptartProvider: React. FC &lt; I_PoptartProviderProps &gt; = ({ children, config: userConfig }) =&gt; { // Merge the default options with the user options const config = deepMerge &lt; I_PoptartConfig, I_PoptartUserConfig &gt; (defaultConfig, userConfig || {}); // State const [poptarts, setPoptarts] = useState &lt; I_PoptartItem [] &gt; ([]); // Methods const push = (props: I_PoptartProps): string =&gt; { const id = generateSecureString (64); const foregroundColor = getContrastColor ({ backgroundColor: config. Colors [props. Type || config. DefaultType], lightColor: config. Colors. TextLight, darkColor: config. Colors. TextDark, }); let duration = config. DefaultDuration; if (props. Duration! == undefined) { duration = props. Duration; } setPoptarts (prev =&gt; [. . . Prev, { id, props, expires: new Date (Date. Now () + duration), progress: duration &gt; 0? 100: 0, foregroundColor, },]); if (duration &gt; 0) { setTimeout (() =&gt; { dismiss (id); }, duration); } return id; }; // Dismiss a poptart const dismiss = (id: string) =&gt; { setPoptarts (prev =&gt; prev. Filter (poptart =&gt; poptart. Id! == id)); }; return (&lt; PoptartContext. Provider value = {{ poptarts, config, currentAlert, push, dismiss, }} &gt; { children } &lt; Matrix config = { config } poptarts = { poptarts } dismiss = { dismiss } / &gt; &lt; /PoptartContext. Provider &gt;); }; export const usePoptart = (): I_PoptartContext =&gt; { const context = useContext (PoptartContext); if (! Context) { throw new Error ( ' usePoptart must be used within a PoptartProvider ' ); } return context; }; Here ' s how it works: We establish a global state to store our notifications poptarts We create a push method that appends a new poptart object to the stack. We use a helper function to determine the correct contrasting color for the text based on the background color (this is makes contrast automatic!) We set a timer to dismiss the poptart if a duration is set. Each poptart is given a unique ID We create a dismiss method to be able to programmatically dismiss poptart by their ID. Building the Components We ' re going to need a component to display our poptarts. We ' re going to call it Matrix and it will be imported directly into the Provider context. Import React from ' react ' ; import Poptart from ' . /Poptart ' ; import { useAnimations } from ' . /animations ' ; import { I_PoptartConfig, I_PoptartItem } from ' . /types ' ; interface Props { config: I_PoptartConfig; poptarts: I_PoptartItem []; dismiss: (id: string) =&gt; void; } const Matrix: React. FC &lt; Props &gt; = props =&gt; { const { config, poptarts, dismiss } = props; // Inject the animation keyframes into the DOM useAnimations (); const styleAdditions: React. CSSProperties = {}; // Align the matrix based on config switch (config. DefaultAlign) { case ' tl ' : styleAdditions. JustifyContent = ' flex-start ' ; styleAdditions. AlignItems = ' flex-start ' ; break; case ' tc ' : styleAdditions. JustifyContent = ' flex-start ' ; styleAdditions. AlignItems = ' center ' ; break; case ' tr ' : styleAdditions. JustifyContent = ' flex-start ' ; styleAdditions. AlignItems = ' flex-end ' ; break; case ' bl ' : styleAdditions. JustifyContent = ' flex-end ' ; styleAdditions. AlignItems = ' flex-start ' ; break; case ' bc ' : styleAdditions. JustifyContent = ' flex-end ' ; styleAdditions. AlignItems = ' center ' ; break; case ' br ' : styleAdditions. JustifyContent = ' flex-end ' ; styleAdditions. AlignItems = ' flex-end ' ; break; default: styleAdditions. JustifyContent = ' flex-end ' ; styleAdditions. AlignItems = ' flex-end ' ; break; } // Main container styles const containerStyles: React. CSSProperties = { position: ' fixed ' , inset: 0, pointerEvents: ' none ' , display: ' flex ' , flexDirection: ' column ' , gap: ' 20px ' , padding: ' 20px ' , zIndex: config. ZIndex + 2, . . . StyleAdditions, . . . Config. StyleOverrides. Container, }; return (&lt; div className = " poptart-container " style = { containerStyles } &gt; { poptarts. Map ((poptart) =&gt; (&lt; Poptart key = { poptart. Id } dismiss = { dismiss } config = { config } {. . . Poptart } / &gt;))} &lt; /div &gt;); }; export default Matrix; Here, we ' ve created a &lt; div&gt; container that covers the whole screen. We allow the user to supply the base zIndex and then we add to it to create our layers. We use pointerEvents: ' none ' to prevent the &lt; div&gt; from blocking click events to the rest of the app below. The switch statement allows us to use a simple 2-letter code to set the spawn location of our notifications. This is all fully typed, too, so we ' ll get nice auto-completion. The useAnimations hook simply injects our animation CSS keyframes directly into the DOM. For sake of brevity, that code is not included here, but feel free to peruse the repo (link at bottom). Next, we import our &lt; Poptart&gt; component. This is the actual notification that will be displayed. // Poptart. Tsx import React from ' react ' ; import Icon from ' . /Icon ' ; import ProgressBar from ' . /ProgressBar ' ; import type { I_PoptartItem, I_PoptartConfig } from ' . /types ' ; interface Props extends I_PoptartItem { config: I_PoptartConfig; dismiss: (id: string) =&gt; void; } const Poptart: React. FC &lt; Props &gt; = superProps =&gt; { const { props, id, foregroundColor, config, dismiss } = superProps; const { message, onClick } = props; const type = props. Type || config. DefaultType; const backgroundColor = config. Colors [type]; const width = props. Width || config. DefaultWidth; const fontSize = config. FontSize; const paddingX = config. PaddingX; const paddingY = config. PaddingY; const progressBarHeight = config. ProgressBar. Height; const duration = props. Duration! == undefined? Props. Duration: config. DefaultDuration; const hasDuration = duration &gt; 0; const animation = props. Animation || config. DefaultAnimation; const animationDuration = props. AnimationDuration || config. DefaultAnimationDuration; const defaultPoptartStyle = config. DefaultPoptartStyle === ' default ' ? ' filled ' : config. DefaultPoptartStyle; let poptartStyle = defaultPoptartStyle; if (props. PoptartStyle) { poptartStyle = props. PoptartStyle === ' default ' ? DefaultPoptartStyle: props. PoptartStyle; } const isInverted = poptartStyle === ' inverted ' ; // Dynamic styles const dynamicStyles: React. CSSProperties = { backgroundColor: isInverted? Config. Colors. InvertedBackground: backgroundColor, color: isInverted? BackgroundColor: foregroundColor, width, maxWidth: ' 100% ' , paddingTop: ` ${ paddingY } px`, paddingLeft: ` ${ paddingX } px`, paddingRight: ` ${ paddingX } px`, paddingBottom: ` ${ paddingY + (hasDuration? ProgressBarHeight: 0)} px`, borderRadius: ' 10px ' , overflow: ' hidden ' , cursor: ' pointer ' , position: ' relative ' , pointerEvents: ' auto ' , fontSize, boxShadow: ' 0 0 10px rgba(0, 0, 0, 0. 2) ' , border: ' 1px solid rgba(0, 0, 0, 0. 1) ' , animation: ` ${ animation } ${ animationDuration } s ease-out`, . . . Config. StyleOverrides. Poptart, }; const innerStyle: React. CSSProperties = { display: ' flex ' , alignItems: ' center ' , gap: ' 10px ' , }; const textStyle: React. CSSProperties = { wordBreak: ' break-word ' , hyphens: ' auto ' , overflowWrap: ' break-word ' , textShadow: isInverted? `2px 2px 2px rgba(0, 0, 0, 0. 1)`: `2px 2px 2px rgba(0, 0, 0, 0. 3)`, }; const handleClick = () =&gt; { dismiss (id); onClick &amp; &amp; onClick (); }; const iconSize = fontSize * config. IconSizeFactor; return (&lt; div className = " poptart " style = { dynamicStyles } onClick = { handleClick } &gt; &lt; div className = " poptart-inner " style = { innerStyle } &gt; &lt; div className = " poptart-icon " style = {{ width: iconSize }} &gt; &lt; Icon type = { type } color = { isInverted? BackgroundColor: foregroundColor } size = { iconSize } / &gt; &lt; /div &gt; &lt; span className = " poptart-message " style = { textStyle } &gt; { message } &lt; /span &gt; &lt; /div &gt; { hasDuration? (&lt; ProgressBar poptart = { props } height = { config. ProgressBar. Height } backgroundColor = { backgroundColor } colorOverride = { isInverted? BackgroundColor: undefined } config = { config } / &gt;): null } &lt; /div &gt;); }; export default Poptart; Here, we create our base styles and then calculate user defined vs default config styles. We also allow all styles to be overridden. Next, we create a simple &lt; ProgressBar&gt; component to display a cool countdown timer at the bottom: import React, { useState, useEffect } from ' react ' ; import { getContrastColor } from ' . /helpers ' ; import { I_PoptartConfig, I_PoptartProps } from ' . /types ' ; interface ProgressBarProps { poptart: I_PoptartProps; height: number; backgroundColor: string; config: I_PoptartConfig; colorOverride? : string; } const ProgressBar: React. FC &lt; ProgressBarProps &gt; = ({ poptart, height, backgroundColor, config, colorOverride }) =&gt; { const color = colorOverride? ? GetContrastColor ({ backgroundColor, lightColor: config. ProgressBar. LightColor, darkColor: config. ProgressBar. DarkColor, }); const [width, setWidth] = useState (100); const duration = poptart. Duration || config. DefaultDuration; useEffect (() =&gt; { setTimeout (() =&gt; { setWidth (0); }, 100); }, []); const dynamicStyles: React. CSSProperties = { position: ' absolute ' , bottom: 0, left: 0, height: ` ${ height } px`, backgroundColor: color, width: ` ${ width } %`, transition: `width ${ duration } ms linear`, . . . Config. StyleOverrides. ProgressBar, }; return &lt; div className = " poptart-progress " style = { dynamicStyles } /&gt; ; }; export default ProgressBar; The trick here is we set the CSS transition duration value via our duration variable. Easy huh? There are a few more pieces to the puzzle to build your own notification library, but this is the basics of how to get started. Please feel free to browse through the entire repo. GitHub Repo React-poptart Website Thank you for taking the time to read my article and I hope you found it useful (or at the very least, mildly entertaining). For more great information about web dev, systems administration and cloud computing, please read the Designly Blog. Also, please leave your comments! I love to hear thoughts from my readers. If you want to support me, please follow me on Spotify! Also, be sure to check out my new app called Snoozle! It ' s an app that generates bedtime stories for kids using AI and it ' s completely free to use! Looking for a web developer? I ' m available for hire! To inquire, please fill out a contact form.

React: Simple Yet Elegant Toast Notifications

React Tips & Tailwind Tricks: Frontend Goldmine✨

This week's edition of Frontend Weekly delves into various intriguing aspects of frontend development. Notably, it features an in-depth exploration of React's useEffect hook, elucidating its workings with practical examples for enhanced project implementation. Additionally, there's a comprehensive guide on utilizing loaders in dashboards to optimize user experience, ensuring a balance between aesthetic designs and functional performance. The issue also explores data fetching optimizations in Next.js, weighing parallel and sequential approaches for performance improvements. Further included is a creative solution for editing Tailwind CSS classes in browser developer tools, alongside insights into fundamental frontend concepts crucial for building interactive applications. For developers interested in enhancing user interfaces, articles on simple, elegant React toast notifications and dynamic voting widgets using Tailwind CSS offer valuable guidance.

This week's Frontend Weekly covers key topics like mastering React's useEffect hook, enhancing dashboard UX with loaders, and optimizing Next.js data fetching. Learn about editing Tailwind classes, and implementing elegant React toast notifications.

The article provides insights into the key factors and considerations for understanding and managing a client's WordPress website, with an emphasis on communication and setting expectations. It highlights best practices for maintaining and optimizing WordPress sites from a professional perspective.

Inheriting a WordPress site can be risky without a full review. This article covers what to check first, including themes, plugins, custom code, hosting, APIs, DNS, and unused tools. The post 5 Things To Know About Your Client s WordPress Website appeared first on Speckyboy Design Magazine.

5 Things To Know About Your Client’s WordPress Website

Unlock Frontend Gems: Async, React & Dark Mode!

Discover the latest in frontend development with this week's edition of Frontend Weekly. Dive into the world of web development with our feature on the 10 essential Shadcn components every developer should know about. We also offer a comprehensive guide on understanding 'async' and 'defer' in JavaScript, perfect for interview preparation. Learn about the importance of module bundlers and how they enhance web development efficiency, as well as an in-depth look at higher-order components in React. For those working with WordPress, find out five key insights for managing your client's website. Discover how to effectively use the text-overflow property in CSS for text truncation. Explore the T4 Stack in our tutorial featuring Next.js 16, Vercel AI SDK, and local RAG. Finally, master implementing dark mode in your projects using Tailwind CSS and React.js.

Explore essential Shadcn components, async and defer in JavaScript, and module bundlers. Dive into React higher-order components and WordPress insights. Learn about the T4 Stack and implementing dark mode using Tailwind and React.

This article provides a curated list of the best free retro-vintage fonts available on Google Fonts, offering a valuable resource for designers looking to enhance their projects with classic typography.

Ever feel like modern design is a little too… clean? Sometimes you need a hit of personality, a dose of nostalgia that stops the scroll and makes people feel something. That’s where the power of retro typography comes in. But finding the right vibe without breaking the bank can be a challenge. That’s why I’ve [] The post 30+ Best Free Retro &amp; Vintage Google Fonts (2025 Guide) appeared first on CSS Author.

30+ Best Free Retro & Vintage Google Fonts (2025 Guide)

Frontend Gems: Secure Edge, Retro Fonts & More!

This week's edition of Frontend Weekly brings a plethora of invaluable insights and resources for frontend developers. First, explore 'Unlocking User Data' by building a secure Supabase Edge Function to manage user data effectively. Understand the intricate processes behind a URL click in 'What Happens When You Click a URL,' covering DNS lookups and HTTP requests. Designers can dive into a curated list of '30+ Best Free Retro & Vintage Google Fonts,' perfect for adding a classic touch to projects. Stay updated with 'New to the web platform in February' to keep abreast of the latest web advancements. Learn advanced techniques for enhancing React performance with the article on 'Optimizing React Performance' through the useMemo and useCallback hooks. Discover the 'Beer CSS' movement that promotes simplicity and lightweight frameworks as a standout choice in the HTML and CSS landscape. Further, understand the importance of building trust in AI writing tools in 'Building Trust Signals into AI Writing Features.' Finally, explore essential HTML5 APIs, including Geolocation and Web Storage, for modern web development success.

This week, learn to secure user data with Supabase Edge Functions, decode URL clicks, and discover top retro Google Fonts. Stay updated with new web platform features and optimize React apps using useMemo and useCallback. Explore the minimalist Beer CSS and incorporate trust signals in AI writing tools.

The initiative invites collaboration on a project aimed at making paid templates available for free, promoting open access and resource sharing.

Invitation to cooperate in the project " Making Paid Templates Free " Hello to all those interested in web design and development! We are launching an interesting and innovative project called " Making Paid Templates Free " . Our goal is to identify and redesign premium paid themes that are sold on sites like ThemeForest and Rast chin. Finally, we will publish these templates completely free on the Internet, on GitHub and other platforms. ▎The benefits of working with us: • Your name in the published works: Any format that is redesigned and free, if you participate in it, your name will be placed as one of the presenters at the bottom of its page. This is a great opportunity to introduce yourself and show off your skills. • Valuable experience: This project allows you to gain experience and collaborate with other creative people. • Growth opportunity: If this project is successful, the popularity and level of recognition of this project and its managers will be significant. These opportunities can help you participate in website development and make valuable connections. Let ' s change the web together and make beautiful and functional templates available to everyone for free! If you want to cooperate, send a message to the email below: alireza. Farahani123223@gmail. Com

Invitation to cooperate in the project "Making Paid Templates Free"

"Unlock 2025: React, SEO APIs & More!"

Dive into the latest from Frontend Weekly! This week's highlight includes an invitation to join the initiative to make paid templates freely available, encouraging collaboration and open access. Discover the top 10 SEO data APIs for 2026, a valuable resource for developers focused on programmatic search optimization. Get ready for 2025 with 10 essential React UI/UX practices every senior developer should employ to enhance their projects. Lucide 1.0 has launched, offering a streamlined icon library with over 1600 icons — perfect for developers keen on efficiency. Learn how to compress PDFs seamlessly with ToolCenter’s user-friendly online compressor, and enhance your blog with the Pastetime widget to display event times dynamically for your users. Explore color theory in UI design to elevate your projects, and immerse yourself in 'The Dev Journey' to gain insights into essential skills for developers.

Frontend Weekly: Collaborate on free templates, explore top SEO APIs for 2026, and essential React practices for 2025. Check out Lucide 1.0's optimized icons and the Pastetime widget for engaging blogs. Dive into color theory in UI design and 'The Dev Journey' insights.

An article detailing how to master colors, backgrounds, and gradients in CSS, enhancing frontend development skills by exploring practical examples and techniques.

Welcome to Day 24 of the 180 Days of Frontend Development Challenge. Today we ' ll explore professional techniques for working with colors, background properties, and gradient effects. For comprehensive styling techniques, see the Learn Frontend Development in 180 Days ebook. 1. Color Systems in CSS A. Named Colors. Primary { color: dodgerblue; background-color: whitesmoke; border-color: goldenrod; } B. Hexadecimal (Most Common). Secondary { color: #1e90ff; /* Dodgerblue */ background-color: #f5f5f5; /* Whitesmoke */ border-color: #daa520; /* Goldenrod */ } C. RGB/RGBA (Alpha Transparency). Overlay { background-color: rgba (30, 144, 255, 0. 7); /* 70% opaque dodgerblue */ color: rgb (255, 255, 255); /* Pure white */ } D. HSL/HSLA (Human-Friendly). Button { background-color: hsl (210, 100%, 56%); /* Dodgerblue */ color: hsla (0, 0%, 100%, 0. 9); /* 90% opaque white */ } E. Modern Color Functions: root { --primary: oklch (59. 59% 0. 151 252. 37%); /* Perceptually uniform */ --surface: color (display-p3 0. 96 0. 96 0. 96); /* Wide gamut */ } 2. Background Properties A. Background Basics. Card { background-color: #ffffff; background-image: url( " texture. Png " ); background-repeat: no-repeat; background-position: right bottom; background-size: 200px auto; } B. Background Shorthand. Hero { background: #2c3e50 url( " hero-bg. Jpg " ) center / cover no-repeat; } /* Order: color image position/size repeat */ C. Multiple Backgrounds. Promo-banner { background: url( " pattern. Svg " ) top left repeat, linear-gradient (to right, #3498db, #2c3e50), url( " logo. Png " ) center no-repeat; } D. Advanced Background Techniques /* Fixed background effect */. Parallax-section { background-attachment: fixed; } /* Clip background to text */. Text-fill { background: linear-gradient (45deg, #ff8a00, #e52e71); -webkit-background-clip: text; background-clip: text; color: transparent; } 3. Gradient Techniques A. Linear Gradients. Header { background: linear-gradient (135deg, #667eea, #764ba2); }. Button { /* Direction keywords */ background: linear-gradient (to right, #4facfe, #00f2fe); } B. Radial Gradients. Spotlight { background: radial-gradient (circle at center, rgba (255, 255, 255, 0. 8), rgba (255, 255, 255, 0)); } C. Conic Gradients. Color-wheel { background: conic-gradient (red, yellow, lime, aqua, blue, magenta, red); border-radius: 50%; } D. Advanced Gradient Patterns /* Striped background */. Stripes { background: repeating-linear-gradient (45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } /* Checkerboard */. Checkerboard { background: linear-gradient (45deg, #eee 25%, transparent 25%), linear-gradient (-45deg, #eee 25%, transparent 25%), linear-gradient (45deg, transparent 75%, #eee 75%), linear-gradient (-45deg, transparent 75%, #eee 75%); background-size: 20px 20px; } 4. Professional Color Systems A. CSS Variables for Colors: root { --primary: #3498db; --primary-dark: #2980b9; --text: #2c3e50; --surface: #f8f9fa; --error: #e74c3c; }. Button { background-color: var (--primary); color: white; }. Button: hover { background-color: var (--primary-dark); } B. Color Contrast Accessibility. Cta { background: #2c3e50; color: #ffffff; /* 11: 1 contrast ratio */ }. Warning { background: #fff3cd; color: #856404; /* 5. 74: 1 contrast ratio */ } C. Dark Mode Implementation: root { --text: #333; --bg: #fff; } @media (prefers-color-scheme: dark) {: root { --text: #f0f0f0; --bg: #1a1a1a; } } body { color: var (--text); background: var (--bg); } 5. Practical Examples Glassmorphism Effect. Glass-card { background: rgba (255, 255, 255, 0. 2); backdrop-filter: blur (10px); border: 1px solid rgba (255, 255, 255, 0. 1); box-shadow: 0 4px 6px rgba (0, 0, 0, 0. 1); } Gradient Text Animation. Animated-text { background: linear-gradient (90deg, #ff8a00, #e52e71, #ff8a00); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: shine 3s linear infinite; } @keyframes shine { to { background-position: 200% center; } } Complex Background Pattern. Geometric-bg { background-color: #2c3e50; background-image: radial-gradient (circle at 10% 20%, rgba (255, 255, 255, 0. 1) 0%, transparent 20%), radial-gradient (circle at 90% 80%, rgba (255, 255, 255, 0. 1) 0%, transparent 20%), linear-gradient (135deg, transparent 40%, rgba (52, 152, 219, 0. 2) 40%, linear-gradient (-135deg, transparent 40%, rgba (52, 152, 219, 0. 2) 40%); background-size: 100px 100px; } 6. Exercises Color System Implementation Create a color system using CSS variables Implement dark mode support Ensure all colors meet WCAG contrast ratios Gradient Challenge Create a conic gradient color picker Implement a striped loading indicator Design a gradient text effect Background Patterns Create a polka dot background Implement a diagonal stripe pattern Combine multiple backgrounds creatively What ' s Next? Tomorrow (Day 25) dives into CSS Typography covering web fonts, responsive text, and advanced text effects. For professional color systems and design tokens, see Chapter 19 in the Learn Frontend Development in 180 Days ebook. Pro Tip: Use these tools for professional color work: # Install color contrast checker npm install -g color-contrast-checker color-contrast #ff0000 #0000ff

Day 24/180 of Frontend Dev: Mastering Colors, Backgrounds & Gradients in CSS

"Unlock Hidden JS APIs & Master CSS Colors!"

This week's Frontend Weekly is packed with exciting developments in the world of frontend development. Discover innovative integrations between web and native apps through four lesser-known JavaScript APIs, enhancing developer versatility and user experience. Tailwind CSS takes the spotlight as a customizable, utility-first framework that empowers developers to create unique designs without relying on predefined components. Sharpen your CSS skills with a detailed exploration of mastering colors, backgrounds, and gradients in CSS. Dive into the ongoing battle between Vite and Webpack in 2025; learn where each stands in the frontend build ecosystem and find out which tool is ideal depending on your project's context. Plus, streamline your design process with Figma and Miro templates for creating insightful customer journey maps. Elevate your web accessibility approach by understanding the importance of WCAG guidelines. Finally, boost your React development skills with an ultimate guide on handling forms and increase productivity with strategies to optimize software development workflow.

Frontend Weekly dives into uniting web and native apps with unique JavaScript APIs, the power of Tailwind CSS, mastering CSS techniques, and the Vite vs Webpack showdown in 2025. Explore accessible design, optimize React forms, and boost your development productivity!

An informative article about using CompressorJS to automatically adjust image quality and compression settings for specified sizes.

本篇要解決的問題 很多網站功能會需要處理使用者上傳的圖片，比方讓使用者上傳會員照片。 但隨著手機相機愈做愈好，拍出來的照片隨便都是幾 MB，直接上傳的話，耗時也佔空間。 雖然網路上搜尋有許多圖片壓縮工具，但大多只能設定固定的壓縮的品質，無法保證壓縮後的檔案大小符合需求。 本筆記文將使用 Compressor. Js 套件，實作一個圖片壓縮功能，符合以下需求： 自動嘗試不同的壓縮品質，直到檔案小於指定大小（ex: 600KB）為止。 將圖片轉換為 WebP 格式。 長、寬限制最大尺寸。 這樣就可以確保壓縮後的圖片既符合檔案大小限制，又保有良好的質感。 核心概念：遞迴壓縮 一般網路上的圖片壓縮只能一次性設定品質參數，本篇用了 comporess. Js 後，採用 遞迴嘗試 的方式，執行方式如下： 從最高品質(quality = 1. 0)開始壓縮。 檢查壓縮後的檔案大小。 如果超過目標大小 600KB，則降低品質（減少 0. 05）後重新壓縮。 重複步驟 2-3，直到檔案符合大小要求，或品質降到下限（0. 40）。 這種方法能夠在保證檔案大小的前提下，盡可能保留圖片品質。 引入 Compressor. Js 首先，我們需要引入 Compressor. Js 這個圖片壓縮套件。 它可以在瀏覽器端直接處理圖片：無需後端支援: &lt; script src= " https: //cdn. Jsdelivr. Net/npm/compressorjs@1. 2. 1/dist/compressor. Min. Js " &gt; &lt; /script&gt; 上面是直接引用 CDN 的方式， 官方文件 也有其他引用方式，可以自己的需求引用。 建立 HTML 我們需要一個檔案上傳的 file input，以及一個用來預覽壓縮結果的 div： &lt; input type= " file " id= " upload " accept= " image/* " /&gt; &lt; img id= " preview " style= " max-width: 300px " /&gt; 實作智慧壓縮函式 這是整個方案的核心函式，接受四個參數: file ：要壓縮的原始檔案。 targetSize ：目標檔案大小，預設 600KB。 floor ：品質下限，預設 0. 40。 step ：每次品質遞減幅度，預設 0. 05。 function compressWithFloor (file, targetSize = 600 * 1024, floor = 0. 4, step = 0. 05) { return new Promise ((resolve, reject) =&gt; { let q = 1. 0; const attempt = () =&gt; { new Compressor (file, { quality: q, mimeType: " image/webp " , // 強制轉換為 WebP 格式 maxWidth: 2560, // 最大寬度限制 maxHeight: 1440, // 最大高度限制 success (blob) { console. Log (`q= ${ q. ToFixed (2)} size= ${ Math. Round (blob. Size / 1024)} KB`); if (blob. Size &gt; targetSize &amp; &amp; q - step &gt; = floor) { q = + (q - step). ToFixed (2); attempt (); // 繼續壓縮 } else { resolve (blob); // 符合大小或到達品質下限 } }, error (err) { reject (err); }, }); }; attempt (); }); } 參數說明 1. 強制輸出 WebP 格式 mimeType: ' image/webp ' 會將所有圖片（包括 PNG、JPEG）都轉換為 WebP。 WebP 是 Google 開發的現代圖片格式。在相同品質下。檔案大小通常比 JPEG 小 25-35%。 2. 尺寸限制 maxWidth: 2560 和 maxHeight: 1440 確保圖片不會超過 2K 解析度。 如果原圖尺寸較小，不會被放大; 如果較大，會等比例縮小。 這對於手機拍攝的 4K、8K 照片特別有用。 3. 遞迴壓縮邏輯 if (blob. Size &gt; targetSize &amp; &amp; q - step &gt; = floor) { q = + (q - step). ToFixed (2); attempt (); // 繼續壓縮 } 這段程式碼檢查兩個條件： 檔案是否仍大於目標大小？ 品質是否還有下降空間？ 只要 1、2 都符合，就會降低品質並重新嘗試壓縮。 Blob 轉 Base64 輔助函式 為了在瀏覽器中預覽和下載圖片，或是調用 API 傳到後端，我們需要將壓縮後的 Blob 物件轉換為 Base64 格式： function blobToBase64 (blob) { return new Promise ((resolve) =&gt; { const r = new FileReader (); r. Onloadend = () =&gt; resolve (r. Result); r. ReadAsDataURL (blob); }); } 整合上傳與下載功能 最後，我們監聽檔案上傳事件，執行壓縮流程，並自動觸發下載: document. GetElementById ( " upload " ). AddEventListener ( " change " , async (e) =&gt; { const file = e. Target. Files [0]; if (! File) return; try { const compressed = await compressWithFloor (file, 600 * 1024, 0. 4, 0. 05); console. Log ( " final size: " , Math. Round (compressed. Size / 1024), " KB " ); const base64 = await blobToBase64 (compressed); document. GetElementById ( " preview " ). Src = base64; // 取出原始檔名(去掉副檔名) const originalName = file. Name. Replace (/ \. [^/.] +$/, " "); const newFileName = ` ${ originalName } -compress. Webp`; // 建立下載連結並自動觸發 const link = document. CreateElement ( " a " ); link. Href = base64; link. Download = newFileName; link. Click (); } catch (err) { console. Error ( " 壓縮失敗: " , err); } }); 檔名處理邏輯 程式會自動處理檔名: 移除原始副檔名： file. Name. Replace(/\. [^/.]+$/, " ") 。 加上 -compress. Webp 後綴。 例如： vacation. Jpg → vacation-compress. Webp 。 壓縮流程示例 假設上傳一張 5MB 的照片，壓縮過程可能如下: q=1. 00 size=1200KB → 超過 600KB，繼續 q=0. 95 size=950KB → 超過 600KB，繼續 q=0. 90 size=750KB → 超過 600KB，繼續 q=0. 85 size=580KB → 符合要求，完成！ final size: 580 KB 如果原圖品質很差，即使降到最低品質仍超過 600KB，程式也會在 q=0. 40 時停止，避免過度壓縮導致圖片難以辨識。 完整程式碼 以下是完整的可執行範例： &lt; ! DOCTYPE html&gt; &lt; html lang= " zh-TW " &gt; &lt; head&gt; &lt; meta charset= " UTF-8 " /&gt; &lt; meta name= " viewport " content= " width=device-width, initial-scale=1. 0 " /&gt; &lt; title&gt; Let ' s write - 圖片壓縮 &lt; /title&gt; &lt; /head&gt; &lt; body&gt; &lt; h1&gt; Let ' s write - 圖片壓縮工具 &lt; /h1&gt; &lt; p&gt; 筆記文： &lt; a href= " https: //www. Letswrite. Tw/compressjs/ " target= " _blank " &gt; &lt; /a&gt; &lt; /p&gt; &lt; input type= " file " id= " upload " accept= " image/* " /&gt; &lt; img id= " preview " style= " max-width: 300px; margin-top: 20px; " /&gt; &lt; script src= " https: //cdn. Jsdelivr. Net/npm/compressorjs@1. 2. 1/dist/compressor. Min. Js " &gt; &lt; /script&gt; &lt; script&gt; function compressWithFloor (file, targetSize = 600 * 1024, floor = 0. 4, step = 0. 05) { return new Promise ((resolve, reject) =&gt; { let q = 1. 0; const attempt = () =&gt; { new Compressor (file, { quality: q, mimeType: " image/webp " , maxWidth: 2560, maxHeight: 1440, success (blob) { console. Log (`q= ${ q. ToFixed (2)} size= ${ Math. Round (blob. Size / 1024)} KB`); if (blob. Size &gt; targetSize &amp; &amp; q - step &gt; = floor) { q = + (q - step). ToFixed (2); attempt (); } else { resolve (blob); } }, error (err) { reject (err); }, }); }; attempt (); }); } function blobToBase64 (blob) { return new Promise ((resolve) =&gt; { const r = new FileReader (); r. Onloadend = () =&gt; resolve (r. Result); r. ReadAsDataURL (blob); }); } // 依序嘗試 q=1. 00, 0. 95, 0. 90, . . . ，直到 &lt; = 600 KB 或 q &lt; 0. 40 function compressWithFloor (file, targetSize = 600 * 1024, floor = 0. 4, step = 0. 05,) { return new Promise ((resolve, reject) =&gt; { let q = 1. 0; const attempt = () =&gt; { new Compressor (file, { quality: q, mimeType: " image/webp " , // 強制轉 WebP maxWidth: 2560, // 最大寬度限制 maxHeight: 1440, // 最大高度限制 success (blob) { console. Log (`q= ${ q. ToFixed (2)} size= ${ Math. Round (blob. Size / 1024)} KB`,); if (blob. Size &gt; targetSize &amp; &amp; q - step &gt; = floor) { q = + (q - step). ToFixed (2); attempt (); // 繼續壓縮 } else { resolve (blob); // 符合大小或到達品質下限 } }, error (err) { reject (err); }, }); }; attempt (); }); } // Blob -&gt; base64 function blobToBase64 (blob) { return new Promise ((resolve) =&gt; { const r = new FileReader (); r. Onloadend = () =&gt; resolve (r. Result); r. ReadAsDataURL (blob); }); } document. GetElementById ( " upload " ). AddEventListener ( " change " , async (e) =&gt; { const file = e. Target. Files [0]; if (! File) return; const targetSize = 600 * 1024; // 檢查原始檔案大小 if (file. Size &lt; = targetSize) { console. Log (`原始檔案大小 ${ Math. Round (file. Size / 1024)} KB，已小於目標大小 ${ Math. Round (targetSize / 1024)} KB，不需壓縮`,); alert (`圖片大小已符合要求 (${ Math. Round (file. Size / 1024)} KB)，無需壓縮`); // 仍然顯示預覽 const base64 = await blobToBase64 (file); document. GetElementById ( " preview " ). Src = base64; return; } try { const compressed = await compressWithFloor (file, targetSize, 0. 4, 0. 05); console. Log ( " final size: " , Math. Round (compressed. Size / 1024), " KB " ); const base64 = await blobToBase64 (compressed); document. GetElementById ( " preview " ). Src = base64; const originalName = file. Name. Replace (/ \. [^/.] +$/, " "); const newFileName = ` ${ originalName } -compress. Webp`; const link = document. CreateElement ( " a " ); link. Href = base64; link. Download = newFileName; link. Click (); } catch (err) { console. Error ( " 壓縮失敗: " , err); } }); &lt; /script&gt; &lt; /body&gt; &lt; /html&gt; Demo 與原始碼 想要實際體驗圖片壓縮工具的話，以下是完整的 Demo 頁面和原始碼供大家使用。 使用前，如果這個工具對你有幫助，歡迎到 GitHub 給我一顆星星 ⭐，你的小小動作，對本站都是大大的鼓勵。 Demo ： Demo GitHub 原始碼 ： GitHub Repository

圖片壓縮：用 Compressor.js 自動調整品質壓縮至指定大小

"Unlock Frontend Secrets + AI's Future Impact"

This edition of Frontend Weekly brings together a diverse array of articles focusing on personal and professional growth as well as innovative technology in frontend development. "Designers, (Re)define Success First" invites readers to reconsider their perception of success by aligning it with personal rather than societal standards. Dive deep into the software architecture realm with "Big Ball of Mud," which offers insights and avoidance strategies for this notorious antipattern. For seasoned freelancers, "FIVE Things You Can Start Doing as an Experienced Freelancer to Remain Valuable" presents essential strategies to stay competitive. Explore "O Futuro do Frontend com IA," detailing how AI is poised to transform frontend development processes. "Beyond Dashboards" delves into the role of predictive analytics in revolutionizing healthcare decision-making, promising improved patient outcomes. "Chris’ Corner: Processing" offers a creative perspective on coding and visual arts within CodePen. WordPress enthusiasts will find "Baseline Status in a WordPress Block" enlightening as it discusses aligning and enhancing content consistency. Lastly, "圖片壓縮：用 Compressor.js 自動調整品質壓縮至指定大小" provides a guide on efficiently compressing images using CompressorJS.

Discover fresh insights in Frontend Weekly! Redefine success with personal values, learn strategies to avoid the Big Ball of Mud antipattern, and explore AI's role in frontend development. Gain tips for freelancers, and dive into futuristic healthcare analytics. Plus, enhance your WordPress and visual coding skills!

The article explores Kimi ClAW, a new AI-powered assistant designed to leverage cloud and AI technologies to enhance productivity and streamline workflows. It delves into the capabilities and potential applications of Kimi ClAW in various industry settings.

OpenClaw is an AI assistant with personality and long-term memory—but setup has been painful. Kimi Claw brings OpenClaw to the cloud via kimi. Com with one-click deployment and no server wrangling. Continue reading What Is Kimi Claw? OpenClaw’s Memory-First AI Assistant, Now One-Click in the Cloud on SitePoint.

What Is Kimi Claw? OpenClaw’s Memory-First AI Assistant, Now One-Click in the Cloud

Frontend Innovations & AI: Dive In Now!

In this week's edition of Frontend Weekly, we explore a variety of topics essential for frontend developers and tech enthusiasts. Discover a groundbreaking method for mocking GraphQL servers, which promises to enhance testing and development efficiency. Dive into the integration of the SG Image Viewer Component across Angular, Vue, and React platforms to elevate user image viewing experiences. Uncover the features of Kimi ClAW, an innovative cloud-based AI assistant designed to optimize productivity. Stay informed with the latest updates to the web platform this May, highlighting new features and compatibility changes. We also bring you a comparative analysis of Vue.js and React.js, and emphasize the essential role of comprehensive UI/UX design in future product success. Additionally, read a personal story of professional growth in technology, offering inspiration and insights for your own journey.

Explore a new way to mock GraphQL servers, integrate SG Image Viewer across popular frameworks, discover the AI-powered Kimi ClAW assistant, and stay updated with May's web platform changes. Plus, compare Vue.js vs. React.js and understand why comprehensive UI/UX design is crucial for product success.

This article provides insights into CSS, offering readers a deeper understanding of its functionalities and potential applications in web development.

"Fresh UI, Flexbox vs Grid & More in Frontend!"

In this edition of Frontend Weekly, we're excited to introduce Inspira UI, a fresh open-source UI library tailored for Vue developers. This library offers innovative components and tools that promise to elevate front-end development experiences. Delve into a detailed exploration of CSS to unlock its full potential in web development. Chris’ Corner tackles accessible design with a focus on a straightforward multi-select UI component, ensuring inclusivity in web applications. Looking ahead, discover how design systems and reusable components are evolving, preparing developers for 2025 with practical strategies. Engage with the DeepSeek V4 API guide to enhance your data retrieval processes efficiently. Also, learn to optimize application performance by controlling concurrent requests using Redux-Saga Effects. For layout enthusiasts, a comprehensive comparison between Flexbox and Grid will guide you in choosing the right strategy for your design needs. Lastly, explore the 'Claude Code' workflow, a robust framework for developing terminal-based agent applications. Each article is crafted to enrich your knowledge and expertise in front-end development.

This week in Frontend Weekly: Discover Inspira UI, an open-source library for Vue developers, delve into CSS functionalities, and explore accessible multi-select UIs. Stay ahead with insights on 2025's design systems, DeepSeek V4 API, and Redux-Saga efficiency. Flexbox vs Grid tips included!

The article outlines 15 essential best practices for improving React development, providing developers with strategies to write more efficient and maintainable code.

Over the years, React, a JavaScript library designed for constructing user interfaces, has undergone substantial development and growth. With every subsequent update, React incorporates enhancements and optimal approaches, enhancing its efficiency, maintainability, and overall power. You ' ve embarked on a React journey, creating several apps along the way. Perhaps you ' ve honed your skills and are becoming proficient. However, the desire to go beyond mere proficiency lingers, doesn ' t it? To remain at the forefront and enhance your proficiency in React, we present 15 optimal strategies that will assist you in constructing React applications that are not only superior in performance but also more manageable and maintainable. Rest assured, we ' ll simplify the concepts with ample examples.   Functional Components Over Class Components React has consistently advocated for using functional components and is now the moment to adopt them wholeheartedly. They are more readable, writable, and testable. Now, let ' s examine the distinctions: Functional components offer greater conciseness, and when combined with React Hooks, they exhibit adept handling of both state and side effects.  Use React Fragments for Cleaner JSX At times, you may prefer to avoid introducing unnecessary &lt; div&gt; elements in your JSX solely for structural purposes. React Fragments prove useful in such situations: React Fragments enable you to group several elements without introducing additional nodes to the DOM.  Key Props for Lists Ensure that each item in a React list has a distinct key prop assigned when rendering. This aids React in efficiently refreshing the DOM when modifications occur in the list.  Avoid Unnecessary Re-renders Utilize the React. Memo higher-order components or employ the useMemo hook to avoid unnecessary re-renders of your components.  Use PropTypes or TypeScript Embrace type-checking as a valuable ally. It not only detects bugs at an early stage but also enhances the resilience of your code. You have the option to enhance type safety in your React components by employing PropTypes or TypeScript.  Optimize Renders with shouldComponentUpdate If you find it necessary to utilize class components, contemplate incorporating shouldComponentUpdate for enhancing rendering efficiency when there are modifications in props or state.  Code Splitting Leverage React ' s built-in capabilities for code splitting to break down your code into smaller segments, thereby diminishing the time it takes for the initial loading process. Employ React. Lazy and Suspense to create a smooth and uninterrupted user experience.  Destructure Props for Readability Utilizing prop destructuring enhances the cleanliness and readability of your component code: Keep an eye out for Part 2, coming soon!  Happy Coding!  LinkedIn X (Twitter) Telegram YouTube Discord Facebook Instagram

Elevate Your React Development: 15 Essential Best Practices 🚀 - Part #1

Boost Your Frontend: React Tips & JS Patterns 🚀

This week's Frontend Weekly newsletter brings you a wealth of knowledge to enhance your frontend development journey. Dive into 'Elevate Your React Development: 15 Essential Best Practices,' which provides valuable strategies for writing more efficient and maintainable React code. For JavaScript enthusiasts, explore '10 JavaScript Design Patterns Every Developer Should Know' to improve your code's structure and performance. Gain insights into extension development with 'Integrating DeepSeek-R1 with VS Code: HTTP API Extension Development,' complete with practical examples for seamless integration. The newsletter also helps clarify design nuances with 'Clarifying the Relationship Between Popovers and Dialogs,' illuminating their distinct use cases in web design. Additionally, learn how to spot and analyze Time to First Byte (TTFB) issues and understand the significance of state management in frontend performance in 'Does limiting state matter on the FrontEnd?' Lastly, stay ahead of the curve with 'Top 5 Frontend Frameworks for Web Development 2024,' a guide to making informed decisions on selecting the best framework for your projects. Enjoy these insightful articles and more!

Discover top React practices, must-know JS design patterns, and 2024's leading frontend frameworks in this week's Frontend Weekly. Stay updated with insights on DeepSeek-R1 integration, TTFB analysis, and the roles of popovers and dialogs in web design.

I'm creating this article for a newsletter, give me a 2 sentence summary of the article.  Make it factual and professional.  Do not mention the article title or source, just the summary of the article.

The best articles, links and news related to Frontend Development delivered once a week to your inbox.