So, let’s dive right into the list without further delay.

v0

v0 is an AI-generated UI system developed by Vercel. After you input a prompt, you’ll receive three AI-crafted UI choices made with Shadcn UI and Tailwind CSS. You can pick one, copy its code, or customize it by adjusting individual UI components. v0 aims to simplify your development workflow, enabling you to create and integrate beautiful UIs effortlessly.

Dprint

Dprint is a robust command-line tool for automated code formatting. Developed in Rust, it provides a flexible platform for various code-formatting tasks. One of its unique features is its plugin architecture, which utilizes WebAssembly. You can import these plugins from URLs or your local filesystem. The plugins, including the official ones, are highly customizable, allowing you to adjust code formatting to your particular needs.

UK Gov Design System

The UK government arguably has one of the best official websites. Their development team offers a vast array of reusable UI elements designed to support a multitude of applications. While you may not directly use this design system on your site, there’s a wealth of knowledge to glean from it – especially concerning accessibility and UI consistency.

Taxonomy

Taxonomy is a sample Next.js 13 project that comes with several modern features like authentication, subscriptions, API routes, and static pages. Additionally, it incorporates a blog and thorough documentation created with Contentlayer and MDX. It serves as an excellent inspiration for setting up a full-stack Next.js application.

Medusa

Medusa offers a suite of open-source modules and tools geared towards streamlining the development of e-commerce applications, including online stores and marketplaces. These modules cover essential functionalities like Inventory, Cart, Checkout, Orders, and Products. The best part? You can easily customize them to suit your specific needs.

Dub

Dub is an open-source link management solution built on technologies like Vercel Edge Functions, Upstash Redis, and PlanetScale MySQL. It offers a simplified approach to creating, sharing, and tracking short links. With features like built-in analytics, custom domain support, QR code generation, and OG image proxy, Dub streamlines the management of short links.

Next SEO

Next SEO makes SEO metadata management in Next.js applications a breeze. It allows you to easily add title tags, meta descriptions, and more. This enhances your website’s SEO and simplifies metadata customization on each page.

Next Intl

Next Intl simplifies the task of adding internationalization to Next.js apps. It offers a robust yet straightforward API for handling multiple languages, and includes features like ICU message syntax for rich text, and date, time, and number formatting. It’s both type-safe and efficient, thanks to its hooks-only API.

Nue.js

Nue.js is a lightweight JavaScript library aiming to simplify web development. It offers an alternative to popular frameworks like React and Vue. By eliminating complexities like hooks and props, Nue.js makes web development more accessible to those with a basic understanding of HTML, CSS, and JavaScript. Though still under development, it shows promise for the future.

useHooks

useHooks-ts is a library of custom React hooks crafted in TypeScript. It provides utilities for common React development tasks. You’ll find hooks like useEffectOnce for running code only once, useScript for script loading, and many more.

Next Sitemap

Next Sitemap is a specialized tool for generating SEO-friendly sitemaps for Next.js projects. It integrates smoothly with Next.js and supports all types of page rendering, including static, pre-rendered, dynamic, and server-side pages. The tool offers various customization options for tailoring sitemap structure and content.

Superplate

Superplate is a ready-to-use frontend boilerplate for React and Next.js, complete with TypeScript support. It includes an array of popular libraries like React Testing Library, styled-components, React Query, Axios, and Prettier. The CLI interface simplifies project setup and removes the need for additional configurations. Truly superb!

Notion Avatar

If you’re interested in crafting a unique online persona, Notion Avatar is an online tool that lets you create avatars similar to those found in Notion. It offers a multitude of customization options, such as different face shapes, noses, mouths, eyes, eyebrows, glasses, hairstyles, beards, facial details, and accessories.

FloatUI

FloatUI is a free, open-source collection of modern UI components and templates for React, and soon for Vue, built with Tailwind CSS. It provides well-designed components and ready-to-use templates, speeding up development for projects of any scale.

Reactime

Reactime is a Chrome Extension designed to enhance debugging for modern React apps. It features time-travel debugging, state component display, performance visualization, and even allows you to download the state history as a JSON file.

OpenStatus

OpenStatus is a self-hosted, open-source status page system built using Next.js, TailwindCSS, and shadcn/ui. It provides real-time service health updates, customization features, and can be integrated with other monitoring tools. This makes it an excellent choice for organizations looking to transparently communicate their service status.

Outstatic

Outstatic is a static site Content Management System (CMS) tailored for Next.js. It comes with a user-friendly interface and doesn’t require external databases. The setup is quick and simple, and it supports custom fields. You have the freedom to host it on any server of your choice.

Peppermint

Peppermint is a self-hosted alternative to Zendesk, featuring Markdown-based ticket creation, client history tracking, and a responsive design. It includes a notebook function that also uses Markdown. You can easily deploy it on your own server using Docker and pm2.

Drift

Drift is a clone of GitHub Gist that allows you to self-host your code and text snippets. It supports GitHub Extended Markdown, user authentication, and both private and public posts. Additional features include syntax highlighting and file upload capabilities.

ESLint Stylistic

eslint-stylistic provides style-specific rules for ESLint and TypeScript-ESLint. This project was initiated to keep formatting and style rules separate from ESLint, especially after the core ESLint team decided to deprecate such features. It will be interesting to see how this project evolves.

The post Fresh Resources for Web Designers and Developers (September 2023) appeared first on Hongkiat.

In this post, we have collected a handful of jokes, that have been floating around the Web, which showcase a programmer’s sense of humor. Don’t worry if you don’t get all of them — just get a programmer to explain it to you.

Some People Call It Magic

This Is Why You Should Hug Your Programmer

So That’s What It Is!

We Should Thank The Inventor Of “Hardware”

Courtesy: csl

Well, Technically It’s True

Courtesy: Claudio

Get It?

Courtesy: Robert S.

Where Programmers Usually Hang Out.

Programmers Are People Too

Courtesy: gaylard

Riiiiiight

Courtesy: CCH

The difference between nerd introvert and extrovert.

Brace For Backlash

That’s Why You See Most Programmers Bespectacular!

Courtesy: Arjan Einbu

Seriously, Try It

0, 1, 2, 3…

Good Luck Getting An Explanation About This

The Greatest Programmer Of All Time

For Him Nothing Is Impossible.

It’s An Addiction

Hello World

Courtesy: Don Neufeld

Java Programmers Should Know This

Monkey See, Monkey Do

Sometimes We Wonder Why Do We Bother

Once Upon A Time…

#programmerlogic

Courtesy: GnevZmaja

Loop-dy-doo

Courtesy: Adam Liss

SQL Clubbing

Unix friends

Courtesy: CodingBytes

The Programmer Has A Good Point

Courtesy: Martin Cote

Ladies…

Courtesy: Macke

Well, Does It?

Courtesy: Adam Liss

Think Of The Possibilities!

Reigning Champion

Be awesome

Hooray!

Do You Think This Is A Game?

XOR

Never ever…

No Class

Which Are You?

Conditional Love

Courtesy: CommitStrip

The post Insider Jokes Only Programmers Will Get appeared first on Hongkiat.

In this edition, we offer tools to help you manage monorepos, a PHP library for internationalization, several UI libraries, and much more. So without further ado, let’s delve into the full list.

Shikiji

Shikiji is an open-source JavaScript library that’s inspired by the popular syntax-highlighting library, Shiki. It focuses on ESM support and introduces several changes to enhance portability across various JavaScript engines, including regular browsers, Deno, Node.js, and Bun.

Twolash

Twoslash is an extension of Shiki that simplifies code embedding for the JavaScript and TypeScript languages. It provides type-driven insights and error detection through text editor compiler APIs. Code samples are generated server-side to reduce dependence on client-side JavaScript. It’s an excellent library for those wanting to present detailed code snippets to their audience.

Lerna

Lerna is a renowned open-source tool that facilitates the management of multiple packages within a single repository. Recently acquired by the team behind NX, it has seen renewed direction and focus. With Lerna, upgrading versions for multiple packages and subsequently releasing them to the NPM registry becomes a breeze. It’s an invaluable tool for projects encompassing several related packages or libraries that need concurrent development and versioning.

Semi Design

“Semi Design” is a UI library boasting over 60 components. It integrates with Figma, allowing for a seamless transition from design to code. The library emphasizes accessibility, supports internationalization, and ensures rigorous quality assurance through an exhaustive testing process (unit, e2e, and visual tests). Moreover, it’s SSR-compatible, making it compatible with modern tools like Next.js, Astro, and more.

Brick DateTime

Brick\DateTime offers a collection of immutable classes designed for easy handling of date and time in PHP. Built on top of PHP’s native date-time classes, it extends their capabilities with additional concepts and APIs. These include LocalDate, LocalTime, YearMonth, and MonthDay. Adhering to the ISO 8601 standard, these classes ensure the accurate representation of date and time right out-of-the-box.

Vanilla Components

Vanilla Components is a lightweight and adaptable UI library tailored for Vue 3. Constructed using Vue 3, TypeScript, and Tailwind CSS as its foundational styles, it streamlines all the intricate details, allowing developers to concentrate on development and achieve higher productivity.

Hyperf

Hyperf stands out as a high-performance, flexible, and extensible framework purposed for crafting modern, scalable web applications and microservices using PHP. It is particularly recognized for its speed, user-friendliness, and competence in managing concurrent connections. Additionally, Hyperf offers a comprehensive set of features right out-of-the-box, including a router, database adapters, middleware, and more.

TotalTypeScript Tips

This collection offers useful tips to help you understand TypeScript better and tackle common challenges effectively. Each tip is presented in a concise, annotated video that lasts between 2 to 5 minutes, making this a go-to resource for those seeking quick and practical insights into TypeScript troubleshooting techniques.

Valibot

Valibot is an all-in-one data validation library that seamlessly integrates with data from servers, forms, and configuration files. Impressively, it doesn’t depend on any external components and is compatible across various JavaScript environments, including browsers, Node.js, and Deno. This library is essential for ensuring the accuracy of your data inputs and outputs.

LaRecipe

LaRecipe is a PHP library crafted to streamline the creation of documentation for products or applications in Laravel-based projects. It empowers developers to generate and manage documentation directly within the code using markdown format, facilitating easy maintenance and updates as the project evolves.

Consola

Consola is a contemporary and highly configurable logger suitable for both Node.js and browser environments. It aims to offer developers an efficient and customizable method for managing logs and outputting information during development and debugging phases. Users can configure the display of logs, introducing custom formats, timestamps, and color-coding, as well as applying various styles and themes.

OFetch

OFetch serves as an enhanced library for the Fetch API, designed for compatibility with Node.js, browsers, and Workers. It streamlines HTTP requests and response management by facilitating automatic JSON parsing, effective error management, and providing “retry” options. Given its lightweight nature, OFetch stands out as an excellent alternative for fetching data over APIs.

Omnivore

Omnivore has been crafted to simplify the collection, organization, and management of articles, newsletters, and documents intended for future reading. It boasts beneficial features such as note-taking and highlighting to enrich the reading journey. Additionally, Omnivore allows users the freedom to organize reading lists based on individual preferences and ensures seamless synchronization across various devices.

TypeScript Challenge Video

This collection comprises over 100 videos that tackle various TypeScript challenges along with their solutions. The length of each video varies based on the topic; some are concise, while others may exceed 1 hour. It’s a comprehensive collection that is worth bookmarking for anyone looking to enhance their TypeScript skills.

PHP ECMA Intl

This PHP extension adheres to the ECMA-402 internationalization standard. It offers functions and classes to manage locale-sensitive data, such as date, time, currency, and numerals. With this extension, you can ensure consistent and secure internationalization content for your web application using PHP.

Astro Portofolio

This Astro template is specifically designed for building a portfolio site. Crafted by the Astro design team, it showcases a landing page that highlights your skills and recent projects. Additional features include a user-friendly light and dark mode toggle, a prominent contact call-to-action on all pages, type-safe frontmatter, and a curated collection of icons.

Marigold UI

Marigold is a UI framework and component library built upon react-aria and Tailwind CSS. Its primary goal is to offer a collection of accessible and pre-designed UI components that seamlessly integrate into any web application. Marigold aids in the development of consistent and visually striking user interfaces.

Untun

Untun provides a useful tool that lets you establish a “tunnel” from your local HTTP(s) server to the global internet, using Cloudflare Quick Tunnels. This tool is invaluable for testing your web application across various devices, including mobile ones, without the need for deployment on a public server.

Laravel Folio

Laravel Folio introduces a page-based router, reducing routing complexities in Laravel applications. By seamlessly integrating with Blade templates found in your application’s resources/views/pages directory, routing becomes simpler. However, you still have access to all the potent features Laravel offers in its traditional routing, including Middleware, Caching, Model Binding, and more.

Siyuan

Siyuan is an open-source, self-hosted note-taking and knowledge management application. It boasts a myriad of features for crafting and organizing notes, documents, and other content types. For instance, you can employ Markdown for note formatting, arrange notes hierarchically, design custom templates for varied note types, and so much more.

The post Fresh Resources for Web Designers and Developers (August 2023) appeared first on Hongkiat.

So here we’ve put together the best resources from which you can get high-quality SVG icons. Some of the resources provide more than just icons, offering convenient features to boost the productivity of designers and developers.

Without further ado, let’s jump into the full list.

Freepik Icons

Home to the world’s largest icon library, Freepik has more than 10 million icons for personal or commercial use. Each icon is freely available in PNG format, allowing for easy integration into your projects, and simply requires attribution. However, premium members will gain access to download each icon in SVG format, with no need for attribution, and they will also have access to a bunch of pioneering features designed to increase productivity.

Visit Freepik

Flaticon

Flaticon is one of the largest libraries of icons on the web. It provides more than 10 million icons in several styles from which you can pick to download and customize them for your projects. These icons are available as PNG, SVG, EPS, PSD files, so they can be easily used with other graphic software. You can even find animated icons and stickers in its library. Plus, you can use Flaticon’s online editor to change the color and size of the assets.

Visit Flaticon

Bootstrap Icons

An official icon collection from Bootstrap, one of the most popular HTML/CSS frameworks. It contains over 1500 icons in SVG format, giving you much flexibility. Though these icons are developed for Bootstrap, you can still use them with any other framework.

Visit Bootstrap Icons

Boxicons

Boxicons contain more than 1500 icons grouped into several categories, such as E-Commerce, Finance, and Music, that allow you to sort and find the particular collection easily.

Each icon comes in a different format; not only can you select and download them as SVG, but you also use them as a Font icon and Web Components. It’s one of my go-tos when I need icons for a website or application.

Visit Bootstrap Icons

Feather Icons

Search over 200 beautifully designed icons. One thing that I love about the collection is that it allows you to customize the size, stroke width, and color before downloading the icons. On top of that, you can choose to download particular icons or download them all at once.

Visit Feather Icons

Iconoir

Iconoir is a free and open-source collection with more than 900 icons. It comes in several formats, including SVG, Font, React.js, and even Figma and Framer. Both designers and developers are sure to appreciate this collection.

Visit Iconoir

Ionicons

A collection of icons from the Ionic framework is designed for use on Web, Mobile, or Desktop applications. Each icon comes in three different styles: Outline, Filled, and Sharp. They are available as SVG and Font icons.

Visit Ionicons

Tabler Icons

Containing over 1300 icons, Tabler is one of the perfect collections to incorporate into your web or app design. It looks crisp, consistent, and customizable. Each icon is available in several formats besides SVG, including JSX, Data URI, React Component, Webfont, SCSS, plus it also shows you some examples on how you can apply the icons on a UI component.

Visit Tabler Icons

Radix Icons

A set of icons designed with thin outline characteristics is available. Each icon is 15×15 pixels and looks crisp on the screen. You can get the collection as a Figma file, Sketch file, IconJar, SVG, or NPM. These various formats allow smooth collaboration between designers and developers.

Visit Radix Icons

Heroicons

Heroicons is a set of icons designed by the people behind Tailwind. It provides more than 200 icons. Each icon comes in two styles: “Outline” and “Filled”, and is available as an SVG, JSX, or Vue component library. For designers, you can download the Figma file for all the icons.

Visit Heroicons

Ant Design Icons

This icon is part of the Ant Design system, but you can install the icon collection as a standalone component through NPM. Each icon is available as a React.js component and will be rendered as an SVG.

It also comes in three styles — Outlined, Filled, Two-tone — and is compatible with either the Light or Dark mode color scheme out-of-the-box. If you’re building a React.js application, this is one of the best icon collections to pick up.

Visit Ant Design Icons

Remix Icon

Remix Icon is an amazing collection of more than 2000 icons. Some of the icons have several variations. For example, there are more than a dozen variations of the home icon. This allows you to pick the perfect fit for the icon that matches your site’s persona.

Visit Remix Icon

Material Design Icons

This is an icon collection from Google’s “Material” design system. It comes with an intuitive UI that provides convenience for implementing the icons on several different platforms, including the Web, either with SVG or icon files, Android, iOS, Flutter, and it’s also specially integrated with Angular.

Visit Material Design Icons

Octicons

An icon library from Github, these icons have been created for the “Primer” design system, specifically for Github applications, making it a perfect set if you’re building a website or application integrated with Github. You can install and use the icons through Gem (a Ruby package), NPM, or as a React.js component.

Visit Octicons

Icons Grommet

A set of SVG icons built as React.js components. You can find some unique icons in the collection, and some icons are even available in full color instead of just white and black.

Visit Icons Grommet

CSS.gg

This site provides around 700 high-quality icons. The icon collection is available in many formats, including CSS, SVG, TypeScript, Figma, Adobe XD, and as an API endpoint. This allows for ease of collaboration between designers and developers when designing websites and transforming the design into code.

Visit CSS.gg

Typicons

Typicons is a collection of nice, modern-looking icons designed for web or native — mobile and desktop — applications. At the time of this writing, there are around 300 icons. Each is available in both SVG and icon font format and is resolution-independent, which makes it look sharp and crisp regardless of the screen resolution.

Visit Typicons

The post 15 Websites to Download Free SVG Icons appeared first on Hongkiat.

In this post, we will delve into some of these new tools, as well as other resources within the Laravel ecosystem that you might have overlooked.

NativePHP

Unveiled at Laracon 2023, NativePHP is a framework designed for the swift creation of native desktop applications using PHP. It is user-friendly and caters to both seasoned and beginner PHP developers, facilitating cross-platform app development with HTML, CSS, JavaScript, and PHP. NativePHP introduces a new realm of possibilities in the app development world, particularly for those with a background in PHP.

Laravel Herd

Herd, another tool introduced at Laracon 2023, is a new addition to Laravel development. It provides a one-click PHP development environment with no dependencies. Exclusively built for macOS, Herd is a remarkably fast, native environment that includes everything you need to jumpstart your Laravel projects, from PHP to nginx.

Lighthouse PHP

Lighthouse PHP flawlessly incorporates GraphQL into PHP applications. It offers a schema-first approach with effortless integration with Laravel Eloquent. Lighthouse PHP provides GraphQL directives, authentication, pagination, sorting, and robust error handling.

Radix Vue

Radix Vue is a Vue.js adaptation of Radix UI Primitives, an open-source UI component library. This library is designed with a focus on accessibility, customization, and an enhanced developer experience. It serves as a solid foundation for building high-quality design systems and web applications, with a particular emphasis on addressing the limitations of existing web platform implementations.

Draft UI

Draft UI is a collection of React components that prioritize web accessibility, and are designed to be easily copied and pasted into your projects. Drawing inspiration from shadcn/ui, these components provide full control over the code, facilitating easy customization and adaptability. Draft UI is compatible with any React framework.

Devpod

DevPod is a tool designed to simplify development environments. It supports devcontainer.json setups and has the capability to analyze projects to determine optimal environments. As an open-source tool with a declarative file standard, it provides a powerful desktop application and command-line interface (CLI), free from vendor lock-in or server-side setup. DevPod enables the creation of repeatable development environments for any infrastructure, IDE, or programming language.

Coolify

Coolify is an open-source alternative to Heroku and Netlify that can be self-hosted. It enables you to host your applications, databases, and open-source services on your own machine or hardware. It is an ideal solution for companies, teams, hobbyists, and individuals who prefer hosting in-house and wish to maintain independence from large cloud providers.

Cachet

Cachet is an open-source status page system that allows you to keep your users informed about service incidents, maintenance, and uptime. It provides easy customization, incident tracking, API support, and subscriber notifications.

Orchid Software

Orchid is an open-source platform designed for building admin panels with Laravel. It features a visual builder, customizable themes, and access control. It also offers data visualization and is extensible, allowing developers to add new functionality on top of it.

Wave

Wave is the ultimate Software as a Service (SaaS) Starter Kit, built on the Laravel framework. It provides a robust foundation with features such as authentication, subscriptions, invoices, announcements, and user profiles. This makes it an ideal base for constructing your SaaS project.

Canvas

Canvas is an open-source package that can enhance your Laravel application by setting up a blog within minutes. It offers a distraction-free writing environment and provides valuable insights such as monthly trends, traffic, and other statistics. These insights offer valuable data to enrich your blogging experience.

VSCode Blade Formatter

The VSCode Blade Formatter is a Visual Studio Code (VSCode) extension designed for automatically formatting Blade templates in Laravel projects. It provides customizable rules and seamless integration, ensuring your code remains consistent and well-organized. If you’re a Laravel developer using VSCode, this extension is a must-have.

TastyIgniter

TastyIgniter is an open-source restaurant management system with online ordering capabilities, built on top of Laravel. It simplifies restaurant operations by handling online ordering, managing menus, processing orders, and handling table reservations, all through a user-friendly interface. It also offers multi-language support and allows customization through extensions and themes.

Laravel Compass

Laravel Compass is an open-source Laravel package that can be used to test API calls or generate interactive RESTful API documentation based on defined routes. It supports all standard HTTP methods, various authentication mechanisms, and is compatible with the OpenAPI Specification. If you’re looking for a simple tool to develop your API that integrates well with Laravel, this is the package to install.

TypiCMS

TypiCMS is an open-source CMS built with Laravel. It offers essential features such as content management, user management, multilingual support, and customizable themes. Its modular architecture allows for easy integration with existing Laravel installations and enables developers to extend or include specific features as needed.

Ziggy

Ziggy is an open-source JavaScript library specifically designed for Laravel. It simplifies route handling, providing a seamless way to interact with backend routes from the frontend. Overall, it’s a handy library for building Single Page Applications (SPAs) with Laravel.

Jigsaw

Jigsaw is an open-source static site generator that utilizes Laravel’s blade templates and Markdown for content creation. It manages asset compilation, offers a local development server, and includes essential features for a website such as Markdown support, pagination, customizable themes, and more. If you prefer working with Laravel or PHP, this library is an excellent choice for building static sites.

Ripgrep

Ripgrep is an open-source, exceptionally fast line-oriented search tool that performs recursive regex pattern searches in the current directory. It automatically adheres to gitignore rules, skips hidden/binary files, and can be highly configured to exclude specific files or directories. It operates cross-platform and integrates seamlessly with Git.

Unhead

Unhead is a platform-agnostic universal document <head> tag manager. It offers an intuitive API with automatic deduplication and ordering. It also includes powerful plugins for optimizing tags and inferring SEO meta tags. Unhead is compatible with runtime builds for minimal client overhead and offers full extensibility.

Plane

Plane is an open-source alternative to JIRA or Linear. It provides solutions for issue tracking, epic management, and product roadmapping. It also comes with essential features including a rich text editor, file attachments, customizable layouts, cycle planning, module breakdowns, custom filters, and even GitHub sync for enhanced tracking and collaboration.

The post Fresh Resources for Web Designers and Developers (July 2023) appeared first on Hongkiat.

JSON Parser

This is a PHP library with zero dependencies, designed to efficiently read large JSON data from a variety of sources. It supports strings, arrays, file paths, streams, API endpoint URLs, and more. The library even allows for the implementation of custom sources not supported by default.

Microsoft Wallpapers

At the recent Microsoft Build 2023 event, the Microsoft Design team unveiled a collection of 16 free 4K wallpapers. These are ideal for users with high-resolution monitors, offering a visually engaging and immersive experience, particularly for software developers.

Panda CSS

PandaCSS is a CSS-in-JS framework that offers a type-safe, scalable CSS-in-JS solution for web developers. It allows you to write styles directly in your JS files, which can then be extracted during build time. It also supports the setup of high-level design tokens for theme creation, and provides type-safe auto-completion to help avoid common errors and increase productivity.

Freefaces Gallery

This website showcases a curated collection of typefaces with free licenses from across the internet. It features a wide range of font styles, including cursive, display, monospace, serif, sans-serif, and slab fonts. These fonts can enhance the appearance of your site or simply provide inspiration.

NuxtLabs UI

NuxtLabs UI offers a comprehensive UI solution for Nuxt applications. It includes components, icons, colors, dark mode support, and keyboard shortcuts. Built with Headless UI and Tailwind CSS, it provides HMR support, bundled icons, and full typing for an improved development experience.

Intel One Mono

Intel One Mono is a monospace font family specifically designed for developers. The font family includes four weights — Light, Regular, Medium, and Bold — each with matching italics. It supports over 200 languages that use the Latin script.

Landing Love

Landing.love is a curated showcase of the best animations applied to websites. It features top examples of landing pages and provides design inspiration for creating beautiful and effective landing page designs.

Modern CSS for Dynamic Component Based Architecture

As more and more websites are built on component-based architecture, this article explores the latest features and improvements in CSS with a focus on theming, responsive layouts, and component design. It includes examples of code organization, layout techniques like grid and container queries, and other real-world examples.

QNM

QNM is a command-line tool designed to query the node_modules directory. It offers a quick way to check module versions without the limitations of similar solutions like npm list. QNM focuses on delivering only the relevant module information and supports both npm and yarn.

Castor

Castor is a PHP-based task runner or command tool that enhances the developer experience. It simplifies input handling, supports autocomplete, executes processes smoothly, enables parallel processing, triggers actions on file modifications, provides customizable notifications, and offers logging. Castor can replace tools like Makefile and Shell scripts.

LemonSqueezy Laravel

The LemonSqueezy Laravel package streamlines the process of integrating your Laravel application with Lemon Squeezy. This package allows you to set up payments for your products and enable customers to subscribe to your product plans. It also manages functionalities like grace periods, subscription pausing, and free trials, making the setup process effortless.

LottieFiles Figma

The LottieFiles Figma plugin allows designers to export their Figma designs as Lottie animations with ease. It enhances workflow by directly connecting Figma and LottieFiles. This useful plugin can increase productivity for both designers and developers when dealing with animations.

Design System Checklist

The Design System Checklist website offers a thorough checklist for designing and implementing a design system. It covers various aspects such as typography, colors, spacing, components, accessibility, documentation, and versioning. This resource aids designers and developers in creating user-friendly experiences and streamlined development processes.

Astro Starlight

Starlight is a tool for creating documentation with the Astro framework. It provides essential features like site navigation, search, internationalization, SEO, typography, code highlighting, dark mode, and more. It also supports various markup languages, allowing you to use frameworks like React, Vue, Svelte, Solid, and others.

Alf

Alf is a ticket reservation system designed for events like conferences, trade shows, workshops, and meetups. Being free, open-source, and self-hosted, it’s an ideal platform for organizers seeking privacy, security, and fair pricing policies for attendees.

Clear

Clear is a unique image search engine that operates entirely on the client side, eliminating the need for a backend server. It doesn’t store images or build search indices, offering a fresh approach to image search while ensuring privacy and eliminating data storage needs.

Automatisch

Automatisch is a business automation tool that integrates services like Twitter and Slack to streamline workflows. It can run on your own servers for enhanced privacy and GDPR compliance. Automatisch simplifies automation without requiring programming knowledge or high costs, and without vendor lock-in.

Next.js Drupal

Next.js for Drupal empowers you to create an advanced front-end for your Drupal website. It supports various page rendering methods including SSG, SSR, and incremental static regeneration (ISR). It also supports Drupal’s built-in features like multi-site functionality, authentication, webforms, search API, internationalization (i18n), and preview mode. It works seamlessly with both JSON:API and GraphQL, providing a robust and flexible development experience for Drupal users.

Day Progress

Day Progress is a macOS application that visually displays the remaining time in your day via a menu bar icon. It allows you to customize the start and end times of your day and choose between a progress pie or bar, or a percentage display. It serves as a useful reminder to stay motivated and manage your time effectively.

Variant Vault

Variant Vault is a resource that provides a collection of elegantly designed, free, and easily accessible animations and variants created using Framer Motion. It serves as a handy tool for developers looking to enrich their projects with pre-designed, aesthetically pleasing animations.

The post Fresh Resources for Web Designers and Developers (June 2023) appeared first on Hongkiat.

In this post, we will delve into 30 basic Git commands that every developer should know. These commands will help you initialize a repository, make commits, create and switch branches, and much more. By mastering these commands, you’ll be well on your way to becoming a more efficient and effective developer.

1. git init:

This command is used to initialize a new Git repository. It creates a new .git subdirectory in your current working directory. This will also create a new branch named master.

Example:

git init

This will initialize a Git repository in your current directory.

2. git clone:

This command is used to clone a repository. It creates a copy of a remote repository on your local machine.

Example:

git clone https://github.com/username/repository.git

This will clone the repository at the given URL to your local machine.

3. git add:

This command adds a file to the staging area in preparation for a commit.

Example:

git add filename

This will add the file named “filename” to the staging area.

4. git commit:

This command is used to save your changes to the local repository. It takes a snapshot of the changes you’ve staged using git add.

Example:

git commit -m "Commit message"

This will commit your changes with a message describing what you changed.

5. git status:

This command shows the status of changes as untracked, modified, or staged.

Example:

git status

This will display the status of your working directory.

6. git pull:

This command fetches changes from a remote repository and merges them into your current branch.

Example:

git pull origin master 

This will pull changes from the master branch of the origin remote repository.

7. git push:

This command sends your committed changes to a remote repository.

Example:

git push origin master 

This will push your committed changes to the master branch of the origin remote repository.

8. git branch:

This command lists all of the branches in your repository.

Example:

git branch

This will list all of the branches in your repository.

9. git checkout:

This command is used to switch between branches in a Git repository.

Example:

git checkout branch-name

This will switch to the branch named “branch-name”.

10. git merge:

This command merges the changes from one branch into another.

Example:

git merge branch-name

11. git diff:

This command shows the file differences which are not yet staged.

Example:

git diff 

This will show unstaged differences since the last commit.

12. git reset:

This command unstages the file, but it preserves the file contents.

Example:

git reset filename 

This will unstage the file named “filename“.

13. git rm:

This command deletes the file from your working directory and stages the deletion.

Example:

git rm filename

This will delete the file named “filename” and stage the deletion.

14. git log:

This command shows a listing of commits on a branch including the corresponding details.

Example:

git log 

This will display an ordered list of the recent commits.

15. git show:

This command shows the metadata and content changes of the specified commit.

Example:

git show

This will display the metadata and content changes of the latest commit.

16. git tag:

This command is used to give tags to the specified commit.

Example:

git tag v1.0

This will tag the latest commit with “v1.0”.

17. git fetch:

This command fetches all the objects from the remote repository that are not present in the local one.

Example:

git fetch origin

This will fetch all objects from the origin remote that don’t exist in your current repository.

18. git rebase:

This command is used to apply the changes made on the current branch ahead of another branch.

Example:

git rebase master

This will apply any changes made on the current branch ahead of the master branch.

19. git revert:

This command creates a new commit that undoes the changes made in a previous commit.

Example:

git revert HEAD

This will create a new commit that undoes the changes made in the last commit.

20. git stash:

This command temporarily saves changes that you don’t want to commit immediately. You can apply the changes later.

Example:

git stash 

This will temporarily save all modified tracked files.

21. git stash pop:

This command restores the most recently stashed changes.

Example:

git stash pop

This will apply the most recently stashed changes and remove them from the stash list.

22. git stash list:

This command lists all stashed changesets.

Example:

git stash list 

This will display all stashed changesets.

23. git stash drop:

This command discards the most recently stashed changeset.

Example:

git stash drop

This will discard the most recently stashed changeset.

24. git cherry-pick:

This command applies the changes introduced by some existing commits.

Example:

git cherry-pick commitID 

This will apply the changes introduced by the commit with the given ID.

25. git bisect:

This command uses a binary search algorithm to find which commit in your project’s history introduced a bug.

Example:

git bisect start
git bisect bad
git bisect good commitID

This will start the bisecting process, mark the current commit as bad, and mark the commit with the given ID as good.

26 git blame:

This command shows what revision and author last modified each line of a file.

Example:

git blame filename 

This will show what revision and author last modified each line of “filename”.

27. git clean:

This command removes untracked files from your working directory.

Example:

git clean -n 

This will show what will be removed without actually doing it. Replace -n with -f to actually remove the files.

28 git reflog:

This command shows a list of all references to commits in the local repository.

Example:

git reflog 

This will display all references to commits in your local repository.

29. git grep:

This command lets you search through your repository.

Example:

git grep "hello" 

This will search the repository for any occurrences of “hello”.

30. gitk:

This command launches the Git repository browser.

Example:

gitk

This will launch the Git repository browser.

Conclusion

In conclusion, Git is a powerful tool that can greatly enhance your productivity and efficiency as a developer. The 30 basic Git commands we’ve discussed in this post are just the tip of the iceberg. There are many more commands and options available in Git, and we encourage you to explore them further.

Remember, practice makes perfect. The more you use these commands, the more comfortable you’ll become with them. So, don’t be afraid to dive in and start using Git in your projects. It may seem daunting at first, but with time and practice, you’ll find that it’s an invaluable tool in your development toolkit.

The post 30 Basic Git Commands You Should Know appeared first on Hongkiat.

In this blog post, we’ll shine a light on the ten common CSS mistakes developers make; whether you’re a beginner just dipping your toes into the CSS pool, or an experienced developer looking to brush up on best practices, this post is for you.

By understanding and avoiding these common CSS mistakes, you can write cleaner, more efficient code, ensure your websites look and function as intended across all browsers and devices, and ultimately provide a better user experience.

1. Not Using a Reset CSS

Different browsers have different default styles for elements. For example, the default margin and padding for the <body> element might be different in Chrome and Firefox. This can lead to inconsistencies in how your website looks across different browsers.

Example:

Let’s say you have a simple HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>

And you have some CSS:

body {
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    padding: 0;
}

Even with this CSS, the <h1> might still have some margin in some browsers, because they have a default style for <h1> that includes a margin.

Fix:

To fix this issue, you can use a reset CSS. A reset CSS is a set of styles that you apply at the beginning of your CSS file to reset the default styles of elements. Here’s a simple reset CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

This CSS resets the margin and padding of all elements to 0, and sets their box-sizing to border-box. This can help eliminate inconsistencies between browsers.

However, this is a very simple reset and might not cover all elements and styles. There are more comprehensive reset CSS files available, like the Meyer’s reset, which you can find online and use in your projects.

Using a reset CSS can make your website look very plain, because it removes all default styles. After applying a reset, you’ll need to style all elements yourself. But this gives you complete control over the look of your website.

2. Not Using Shorthand Properties

CSS has shorthand properties that allow you to set multiple related styles at once. If you’re not using them, your CSS can become unnecessarily long and harder to maintain.

Example:

Let’s say you have the following CSS:

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

This CSS applies margin to all four sides of elements with the class “box“. But it’s quite verbose.

Fix:

You can use the shorthand margin property to set all four margins at once:

.box {
    margin: 10px 20px;
}

This does the same thing as the previous CSS. The first value is the top and bottom margin, and the second value is the right and left margin.

Here’s another example with the background property. Instead of this:

.box {
    background-color: #000;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

You can write this:

.box {
    background: #000 url('image.jpg') no-repeat center;
}

Shorthand properties can make your CSS much shorter and easier to read and maintain. They can also help ensure consistency in your styles.

However, be aware that when you use a shorthand property, any unspecified sub-properties are set to their initial values. For example, if you use the background shorthand property and don’t specify a background size, the background size is set to its default value of “auto“.

3. Using Inline Styles

Inline styles are CSS declarations that are applied directly within your HTML elements. While they might seem convenient for quick styling, they can lead to several issues:

Maintenance Difficulty: If you have a large HTML file with many elements using inline styles, it can become very difficult to maintain and update your styles.

Specificity Issues: Inline styles have a very high specificity. This means that they will override any styles declared in your external or internal CSS, making it difficult to override them when needed.

Reusability: Inline styles are not reusable. If you want to apply the same styles to multiple elements, you would have to repeat the inline styles for each element.

Example:

Here’s an example of an inline style:

<h1 style="color: blue; font-size: 2em;">Hello, world!</h1>

Fix:

Instead of using inline styles, it’s better to use external or internal CSS. Here’s how you can do the same thing with internal CSS:

<head>
    <style>
        .blue-heading {
            color: blue;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1 class="blue-heading">Hello, world!</h1>
</body>

And here’s how you can do it with external CSS. First, create a CSS file (let’s call it “styles.css”):

.blue-heading {
    color: blue;
    font-size: 2em;
}

Then, link it in your HTML file:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="blue-heading">Hello, world!</h1>
</body>

Using external or internal CSS makes your styles easier to maintain and update, allows you to reuse styles, and avoids specificity issues. It’s a best practice to avoid using inline styles whenever possible.

4. Not Using Vendor Prefixes

Vendor prefixes are a way for browser makers to add new CSS features before they become part of the official CSS specifications. Not using them can lead to some CSS properties not being recognized by some browsers, causing inconsistencies in your design.

Example:

Let’s say you want to use the box-shadow property, which is a relatively new addition to CSS:

.box {
    box-shadow: 10px 10px 5px #888888;
}

This CSS will work in most modern browsers, but older versions of some browsers might not recognize the box-shadow property.

Fix:

To ensure that your CSS works in as many browsers as possible, you can use vendor prefixes. Here’s how you can add a box shadow with vendor prefixes:

.box {
    -webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
    -moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
    box-shadow: 10px 10px 5px #888888; /* non-prefixed, works in most modern browsers */
}

This CSS will apply a box shadow in Safari, Chrome, Firefox, and most other modern browsers.

However, keep in mind that vendor prefixes should be used as a last resort. The use of vendor prefixes can lead to bloated and hard-to-maintain code. It’s better to write standard CSS and let tools like Autoprefixer add the vendor prefixes for you.

Also, note that as CSS evolves and browsers update, the need for vendor prefixes decreases. Many properties that once required vendor prefixes now are universally supported without them. Always check the current browser compatibility for a CSS feature before deciding to use vendor prefixes.

5. Using Too Specific Selectors

In CSS, specificity determines which CSS rule is applied by the browsers. If your selectors are too specific, it can make your CSS hard to override and maintain. It can also lead to unnecessary complexity in your CSS.

Example:

Let’s say you have the following CSS:

body div#container ul.nav li a {
    color: blue;
}

This selector is very specific. It selects an <a> element that is a descendant of an <li> element, which is a descendant of a <ul> with a class of “nav”, which is a descendant of a <div> with an ID of “container”, which is a descendant of the <body>.

Fix:

It’s better to use classes and keep your selectors as simple as possible. Here’s how you can simplify the previous selector:

.nav a {
    color: blue;
}

This selector does the same thing as the previous one, but it’s much simpler. It selects any <a> element that is a descendant of an element with a class of “nav”.

Simplifying your selectors makes your CSS easier to read and maintain. It also reduces the likelihood of specificity conflicts, where more specific selectors override less specific ones.

However, be aware that simplifying your selectors can also increase the likelihood of naming conflicts, where two elements have the same class name but should have different styles. To avoid this, you can use methodologies like BEM (Block, Element, Modifier) to name your classes in a way that reduces the likelihood of conflicts.

6. Not Organizing Your CSS

If your CSS is not organized, it can be hard to find and change styles. This can lead to difficulties in maintaining your code, especially when working with large stylesheets or in a team environment.

Example:

Let’s say you have a CSS file with hundreds of lines of code, and the styles are all mixed up:

h1 {
    color: blue;
}

.footer {
    background: black;
}

h2 {
    color: green;
}

.header {
    background: white;
}

In this example, the styles for different sections of the website are scattered throughout the CSS file. This can make it hard to find the styles for a specific section when you need to update them.

Fix:

A good practice is to organize your CSS in a logical way. Here’s how you can organize the previous CSS:

/* Header */
.header {
    background: white;
}

h1 {
    color: blue;
}

h2 {
    color: green;
}

/* Footer */
.footer {
    background: black;
}

In this example, the styles are grouped by the section of the website they apply to. This makes it easier to find and update the styles for a specific section.

There are many ways to organize your CSS, and the best method depends on the specifics of your project. Some developers prefer to organize their CSS by component, others prefer to organize it by page, and others prefer to organize it by type of style (typography, layout, color, etc.).

In addition to organizing your CSS within each file, it’s also a good idea to organize your CSS files themselves. For large projects, it can be helpful to split your CSS into multiple files (for example, one for typography, one for layout, one for colors, etc.) and then import them all into a main stylesheet using @import statements. This can make your CSS easier to manage and maintain.

7. Not Using CSS Variables

CSS variables, also known as custom properties, allow you to store specific values for reuse throughout your CSS. If you’re not using them, you might find yourself repeating the same values over and over, which can make your CSS harder to maintain and update.

Example:

Let’s say you have a specific shade of blue that you use frequently in your CSS:

.header {
    background-color: #007BFF;
}

.button {
    background-color: #007BFF;
}

.link {
    color: #007BFF;
}

In this example, the same color value is repeated three times. If you decide to change this color, you would have to find and update every instance of it in your CSS.

Fix:

You can use a CSS variable to store this color value:

:root {
    --main-color: #007BFF;
}

.header {
    background-color: var(--main-color);
}

.button {
    background-color: var(--main-color);
}

.link {
    color: var(--main-color);
}

In this example, the color value is stored in a variable called --main-color, and this variable is used wherever the color is needed. If you decide to change this color, you only need to update the variable, and the change will be applied everywhere the variable is used.

CSS variables can make your CSS easier to maintain and update. They can also help ensure consistency in your styles. However, be aware that CSS variables are not supported in some older browsers, so if you need to support this browser, you might need to provide a fallback or use a preprocessor like Sass or Less, which have their own systems for variables.

8. Not Considering Accessibility

Accessibility in web design means making your website usable for all people, regardless of their abilities or disabilities. This includes people with visual, auditory, cognitive, and motor impairments. If you’re not considering accessibility in your CSS, you might be excluding a significant portion of your audience.

Example:

Let’s say you have a website with light gray text on a white background:

body {
    color: #999;
    background-color: #fff;
}

This might look stylish, but it’s hard to read for people with low vision or color vision deficiencies.

Fix:

To make your website more accessible, you can use high contrast colors for your text and background:

body {
    color: #333;
    background-color: #fff;
}

This is much easier to read, even for people with vision impairments.

In addition to color contrast, there are many other aspects of accessibility to consider in your CSS. Here are a few examples:

• Use relative units like em and rem for font sizes, so users can adjust the text size if needed.
• Avoid using CSS to hide content that should be accessible to screen readers. For example, use visibility: hidden or opacity: 0 instead of display: none.
• Use media queries to make your design responsive, so it’s usable on all screen sizes.
• Use ARIA roles and properties when necessary to provide additional information to assistive technologies.

Remember, accessibility is not just a nice-to-have feature, it’s a requirement for good web design. Making your website accessible can improve its usability for all users, not just those with disabilities.

9. Not Testing on Multiple Browsers

Your website can look and behave differently on different browsers due to differences in how they interpret and render CSS. If you’re not testing your website on all major browsers, you might be unaware of these differences, leading to a poor user experience for some of your visitors.

Example:

Let’s say you’ve used the CSS grid layout in your website design:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

While CSS Grid is supported in all modern browsers, it may not be fully supported or may behave differently in older versions of some browsers.

Fix:

To ensure your website looks and works correctly on all major browsers, you should test it on each one. This includes Chrome, Firefox, Safari, and Edge. There are also tools available that can help you with cross-browser testing, such as BrowserStack and BitBar.

If you find that a certain CSS feature is not supported or behaves differently in a certain browser, you can use feature queries (@supports rule) to provide a fallback:

.container {
    display: flex;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

In this example, the container will use the flex layout by default. If the browser supports CSS Grid (as determined by the @supports rule), it will use the grid layout instead.

The goal of cross-browser testing is not to make your website look exactly the same on all browsers, but to ensure a consistent and usable experience for all users.

10. Not Using Responsive Design

With the variety of devices and screen sizes today, it’s important to make your website responsive. This means that the layout and design of your website should adapt to the screen size of the device it’s being viewed on. If you’re not using responsive design, your website might be hard to use on some devices, particularly mobile devices.

Example:

Let’s say you have a website with a fixed width:

.container {
    width: 1200px;
}

This website will look fine on screens that are 1200px wide or larger, but on smaller screens, it will cause horizontal scrolling, which is generally considered a poor user experience.

Fix:

To make your website responsive, you can use media queries to apply different styles for different screen sizes. Here’s how you can make the previous example responsive:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

In this example, the container will take up 100% of the screen width on smaller screens, and it will be centered with a maximum width of 1200px on larger screens.

You can also use media queries to apply completely different styles for different screen sizes. For example:

.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
        margin: 0 auto;
    }
}

In this example, the container will be full width on screens smaller than 768px, 750px wide on screens between 768px and 1199px, and 1170px wide on screens that are 1200px or larger.

Using responsive design can make your website more user-friendly and accessible to a wider audience. It’s a crucial aspect of modern web design.

The post 10 Common CSS Mistakes Developers Often Make appeared first on Hongkiat.

In this guide, we take a look into each type of CSS unit, providing an explanations and practical examples to help you grasp their usage. We’ll cover everything from absolute and relative length units like px, em, rem, and viewport units like vw, vh, to more specialized units like degrees deg for rotation, seconds s and milliseconds ms for animation durations, and even dots per inch dpi for resolution.

By understanding these CSS units, you’ll gain more control over your layouts, leading to more precise, responsive, and visually appealing designs.

1. Absolute Lengths

px (Pixels)

This is the most commonly used unit in web design. A pixel represents a single point on a computer screen.

Example: font-size: 16px; sets the font size to 16 pixels.

cm (Centimeters)

This unit is not commonly used in web design because screen sizes and resolutions vary greatly between devices. However, it can be useful for print media.

Example: width: 10cm; sets the width of an element to 10 centimeters.

mm (Millimeters)

Similar to centimeters, millimeters are not commonly used in web design but can be useful for print media.

Example: width: 100mm; sets the width of an element to 100 millimeters.

in (Inches)

This unit is also more useful for print media than web design.

Example: width: 4in; sets the width of an element to 4 inches.

pt (Points)

Points are traditionally used in print media (1 point is equal to 1/72 of an inch). In CSS, points are useful for creating styles that can be printed with precision.

Example: font-size: 12pt; sets the font size to 12 points.

pc (Picas)

A pica is equal to 12 points. It’s another unit that’s more commonly used in print than in web design.

Example: font-size: 1pc; sets the font size to 12 points.

Absolute length in CSS:

Here’s an example of how these units might be used in a CSS rule:

div {
    width: 300px;
    height: 20cm;
    padding: 5mm;
    border: 1in solid black;
    font-size: 14pt;
    margin: 1pc;
}

Code explanation:

The div element would have a width of 300 pixels, a height of 20 centimeters, padding of 5 millimeters, a border that’s 1 inch wide, a font size of 14 points, and a margin of 1 pica.

However, keep in mind that these units may render differently on different screens and devices due to varying pixel densities and screen sizes.

2. Relative Lengths

em

This unit is relative to the font-size of the element.

Example: If an element has a font-size of 16px, then 1em = 16px for that element. If you set margin: 2em;, the margin will be twice the current font size.

rem

This unit is relative to the font-size of the root element (usually the <html> element). If the root element has a font-size of 20px, then 1rem = 20px for any element on the page.

Example: font-size: 1.5rem; will set the font size to 1.5 times the font size of the root element.

ex

This unit is relative to the x-height of the current font (roughly the height of lowercase letters). It’s not commonly used.

ch

This unit is equal to the width of the “0” (zero) of the current font.

Example: width: 20ch; will make an element 20 “0” characters wide.

vw (Viewport Width)

This unit is equal to 1% of the width of the viewport.

Example: width: 50vw; will make an element 50% as wide as the viewport.

vh (Viewport Height)

This unit is equal to 1% of the height of the viewport.

Example: height: 70vh; will make an element 70% as tall as the viewport.

vmin

This unit is equal to 1% of the smaller dimension (width or height) of the viewport.

Example: font-size: 4vmin; will set the font size to 4% of the viewport’s smaller dimension.

vmax

This unit is equal to 1% of the larger dimension (width or height) of the viewport.

Example: font-size: 4vmax; will set the font size to 4% of the viewport’s larger dimension.

%

This unit is relative to the parent element.

Example: If you set width: 50%;, the element will take up half the width of its parent element.

Relative length in CSS:

Here’s an example of how these units might be used in a CSS rule:

div {
    font-size: 2em;
    padding: 1.5rem;
    width: 75vw;
    height: 50vh;
    margin: 5vmin;
    line-height: 200%;
}

Explaination:

The div element would have a font size twice that of its parent, padding 1.5 times the root font size, width 75% of the viewport width, height 50% of the viewport height, and a margin of 5% of the viewport’s smaller dimension. The line height is 200% of the current font size.

3. Time Units

s (Seconds)

This unit represents a time duration in seconds. It’s commonly used with animation and transition properties.

Example: animation-duration: 2s; would make an animation last for 2 seconds.

ms (Milliseconds)

This unit represents a time duration in milliseconds, where 1000 milliseconds equals 1 second. It’s also used with animation and transition properties.

Example: transition-duration: 500ms; would make a transition last for 500 milliseconds, or half a second.

Time units in CSS #1:

Here’s an example of how these units might be used in a CSS rule:

div {
    transition: background-color 0.5s ease-in-out;
    animation: move 2s infinite;
}

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

Code explanation:

The div element would have a transition that changes the background color over 0.5 seconds, and an animation that moves the element from its current position to 100 pixels to the right over 2 seconds. The animation repeats indefinitely due to the infinite keyword.

Time units in CSS #2:

Another example could be a delay in transition or animation:

div {
    transition: all 2s ease 1s; /* transition will start after 1 second delay */
    animation: spin 4s linear 0.5s infinite; /* animation will start after 0.5 second delay */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

Code explanation:

The div element has a transition that starts after a delay of 1 second and an animation that starts after a delay of 0.5 seconds. The animation makes the div spin indefinitely.

4. Resolution Units

Resolution units in CSS are used to specify the pixel density of output devices. They are primarily used in media queries to serve different styles to devices with different pixel densities.

dpi (Dots Per Inch)

This unit represents the number of pixels per inch.

Example: A a media query like @media (min-resolution: 300dpi) {...} would apply the styles in the curly braces only to devices with a pixel density of at least 300 dots per inch.

dpcm (Dots Per Centimeter)

This unit represents the number of pixels per centimeter. It’s similar to dpi, but uses centimeters instead of inches.

Example: @media (min-resolution: 118dpcm) {...} would apply the styles to devices with a pixel density of at least 118 dots per centimeter.

dppx (Dots Per px Unit)

This unit represents the number of dots per CSS pixel unit. A CSS pixel might correspond to multiple physical pixels on a high-density display.

Example: @media (min-resolution: 2dppx) {...} would apply the styles to devices with a pixel density of at least 2 dots per CSS pixel unit.

Resolution Units in CSS:

Here’s an example of how these units might be used in a CSS rule:

@media (min-resolution: 2dppx) {
    body {
        background-image: url("high-res-background.png");
    }
}

@media (max-resolution: 1.5dppx) {
    body {
        background-image: url("low-res-background.png");
    }
}

Code explanation:

Devices with a pixel density of 2 dots per CSS pixel unit or higher would use the high-resolution background image, while devices with a pixel density of 1.5 dots per CSS pixel unit or lower would use the low-resolution background image.

5. Angle Units

Angle units in CSS are used to specify rotation and direction. They are often used with properties like transform and gradient.

deg (Degrees)

This unit represents an angle in degrees.

Example:

transform: rotate(45deg); would rotate an element 45 degrees clockwise.

grad (Gradians)

This unit represents an angle in gradians, where 100 gradians equals a right angle.

Example:

transform: rotate(100grad); would rotate an element 90 degrees clockwise.

rad (Radians)

This unit represents an angle in radians, where 2π radians equals a full circle.

Example:

transform: rotate(3.14159rad); would rotate an element 180 degrees.

turn

This unit represents a full circle.

Example:

transform: rotate(0.5turn); would rotate an element 180 degrees.

Angle Units in CSS:

an example of how these units might be used in a CSS rule:

div {
    transform: rotate(45deg);
}

div:hover {
    transform: rotate(0.5turn);
}

Code explanation:

The div element would be rotated 45 degrees by default. When you hover over the div, it would rotate 180 degrees (0.5 of a full turn).

Bonus: Flex

fr (Fractional Unit)

This unit is used with CSS Grid Layout and represents a fraction of the available space in the grid container. If you have a grid with two columns defined as 1fr 2fr, the first column will take up one third of the available space, and the second column will take up two thirds.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

The total available space is divided into 3 equal parts (1fr + 2fr = 3fr), the first column takes up 1/3 of the space, and the second column takes up 2/3 of the space.

The post Understand Units in CSS: A Comprehensive Guide appeared first on Hongkiat.

The beauty of Python lies in its simplicity and the breadth of its applications. However, to truly tap into its potential, it’s essential to go beyond the basics. This is where our handy tips come in. From list comprehensions and generators to the use of zip, map, and filter functions, these tips will help you navigate Python’s unique features and idioms.

1. List Comprehensions

List comprehensions provide a concise way to create lists based on existing lists. For example, if you want to create a list of squares from another list, you can do:

numbers = [1, 2, 3, 4, 5]
squares = [n**2 for n in numbers]
print(squares)  # Output: [1, 4, 9, 16, 25]

2. Generators

Generators are a simple and powerful tool for creating iterators. They are written like regular functions but use the yield statement whenever they want to return data. Each time next() is called on it, the generator resumes where it left off.

def fibonacci():
    a, b = 0, 1
    while True:
        yield a
        a, b = b, a + b

fib = fibonacci()
for i in range(10):
    print(next(fib))  # Output: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34

3. The with statement

The with statement simplifies exception handling by encapsulating common preparation and cleanup tasks in so-called context managers. This is particularly useful when working with file I/O.

with open('file.txt', 'r') as file:
    print(file.read())

This code automatically closes the file after it is no longer needed.

4. Lambda Functions

These are small anonymous functions that can be created with the lambda keyword. They are useful when you need a small function for a short period of time, and you don’t want to define it using def.

multiply = lambda x, y: x * y
print(multiply(5, 4))  # Output: 20

5. The enumerate function

This is a built-in function of Python. It allows us to loop over something and have an automatic counter. It’s more pythonic and avoids the need of defining and incrementing a variable yourself.

my_list = ['apple', 'banana', 'grapes', 'pear']
for counter, value in enumerate(my_list):
    print(counter, value)

Output:

0 apple
1 banana
2 grapes
3 pear

6. Dictionary Comprehensions

Similar to list comprehensions, dictionary comprehensions provide a concise way to create dictionaries.

numbers = [1, 2, 3, 4, 5]
squares = {n: n**2 for n in numbers}
print(squares)  # Output: {1: 1, 2: 4, 3: 9, 4: 16, 5: 25}

7. The zip function

The zip function is used to combine two or more lists into a list of tuples.

names = ['Alice', 'Bob', 'Charlie']
ages = [25, 30, 35]
combined = list(zip(names, ages))
print(combined)  # Output: [('Alice', 25), ('Bob', 30), ('Charlie', 35)]

8. The map and filter functions

These functions allow you to process and filter data in a list without using a loop.

numbers = [1, 2, 3, 4, 5]
squares = list(map(lambda x: x**2, numbers))  # Output: [1, 4, 9, 16, 25]
evens = list(filter(lambda x: x % 2 == 0, numbers))  # Output: [2, 4]

9. The args and kwargs syntax

This syntax in function signatures is used to allow for variable numbers of arguments. args is used to send a non-keyworded variable length argument list to the function, while kwargs is used to send a keyworded variable length of arguments to the function.

def my_function(*args, **kwargs):
    for arg in args:
        print(arg)
    for key, value in kwargs.items():
        print(f"{key} = {value}")

my_function(1, 2, 3, name='Alice', age=25)

10. The __name__ attribute

This attribute is a special built-in variable in Python, which represents the name of the current module. It can be used to check whether the current script is being run on its own or being imported somewhere else by combining it with if __name__ == "__main__".

def main():
    print("Hello World!")

if __name__ == "__main__":
    main()

In this case, main() will only be called if this script is run directly (not imported).

The post 10 Basic Python Tips Developers Should Know appeared first on Hongkiat.

Zap

Zap is a plugin manager for Zsh that streamlines the installation, updating, and management of plugins, themes, and configurations. It provides a wide range of community-contributed plugins, including options for syntax highlighting, Git integration, NVM, and more, allowing you to enhance your computer’s Terminal experience.

Full Site Editing

Full Site Editing in WordPress introduces a new approach to theme development. It introduces a Site Editor for customizing templates, global styles for adjusting colors and typography, block themes for creating complete pages using blocks, and theme.json for developers to define default settings. This website aims to simplify the process of generating a theme boilerplate within this new paradigm by providing an easy to use form.

UnderscoreTW

UnderscoreTW is a tool that generates a WordPress starter theme optimized for modern development using Tailwind CSS and Tailwind Typography. It comes with pre-configured Tailwind settings and allows customization via the theme.json file. The theme is compatible with Tailwind 3’s JIT compiler and includes JavaScript bundling using esbuild for efficient development.

trurl

Trurl is a command-line tool that simplifies URL parsing and manipulation for shell script. It eliminates the need for reinventing the wheel by utilizing the same URL parser as the curl command-line tool. It is also designed to address security concerns and make URL handling easier, it’s a perfect companion tool for working with URLs in scripts and command-line interface.

Icones

Icones is a web tool that provides a collection of popular icon sets, including Tabler, Bootstrap Icons, Ionicons, Octicons, and more. It aims to simplify the process of finding and using icons in projects by providing a user-friendly interface and workflow. Icones is also available as a VS Code extension and is planning to introduce a desktop app in the near future.

Million

Million.js is a lightweight library that significantly enhances the performance of a React component. This library integrates seamlessly with React by merely wrapping the component. It optimizes the virtual DOM, leading to improved rendering and loading efficiency, which can be up to 70% faster. Utilizing Million.js can be an easy win for those who desire to optimize their React.js applications.

Gradient Style

Gradient.style is a user-friendly website for generating CSS gradients. It supports various gradient types, real-time previews, and generates corresponding CSS code for easy adding in your websites. On top of that, it supports the latest CSS Color 4 specification including oklch, lch, and hsl.

Vant

Vant provides a wide range of customizable and reusable UI components, such as buttons, forms, and navigation elements built for Vue.js. It aims to simplify the development process by offering ready-to-use components with consistent styles and behavior.

Infisical

Infisical is an open-source, end-to-end encrypted secret management platform. It centralizes secrets like API keys, database credentials, and configurations, offering a user-friendly dashboard for easy management across teams, projects and environments. It also provides seamless integration through SDKs, a CLI, including simple deployments to AWS or Digital Ocean.

EnvPane

EnvPane is a convenient app for managing environment variables on macOS. It allows you to easily view, add, edit, and remove environment variables through a user-friendly interface without the need for command-line operations or editing configuration files manually.

Pasteboard-Viewer

Pasteboard-Viewer is a macOS app that provides a convenient way to inspect the contents of the system clipboard. It allows you to view and analyze the data stored in the clipboard, which can be useful for troubleshooting, debugging, or simply understanding the data being copied.

Plugin PHP

The plugin-php is an extension of Prettier.io‘s capabilities that enables the automatic formatting of PHP code. You can utilize this tool to ensure your PHP code and your team adheres to a standardized and easily readable format. Try it out on its Online Playground to see how it operates.

Leantime

Leantime is an open-source lean project management system. It provides a range of features such as task tracking, milestone management, team collaboration, and time tracking. Serving as an excellent alternative to SaaS platforms like ClickUp, Notion, Asana, it’s a suitable fit for diverse needs, from startups to enterprise-level businesses.

Nitro

Nitro is an open-source TypeScript framework for running a web server. It offers rapid development with zero config setup and HMR for development. You can deploy anywhere, including AWS, Deno, DigitalOcean, and even Github Pages without needing additional configuration.

Katana

Katana is an open-source crawling and web-spidering framework. It provides powerful features such as customizable spidering rules, concurrency control, dynamic target discovery, and support for various output formats.

Lucia Auth

Lucia is a user and session management library that offers a straightforward and adaptable approach to authentication. It acts as an intermediary between your application and the database, providing a simplified and easily comprehensible solution. With a minimalist design, Lucia prioritizes simplicity and user-friendliness.

Plane

Lucia is a user and session management library that simplifies the process of managing users and validating sessions. It offers database adapters for seamless integration with popular databases and ORMs, and supports frameworks like SvelteKit, Next.js, Express, and Astro. It also includes packages for handling authentication strategies like OAuth, providing developers with a flexible solution.

Lychee

Lychee is a web-based photo management system that can be installed on your server within seconds. You can easily upload, organize, and share your photos as if using a native application. It provides all the necessary features, ensuring the secure storage of your precious photos.

HTTPie App

HTTPie has released a web app designed for interacting with APIs. This app provides the functionality of the Terminal version, but with a sleek UI. Users can utilize the web app to:

• Work easily with APIs
• Leverage AI-assistance to make their work more seamless
• Organize API with spaces and collections
• Add parameterized requests
• Achieve seamless sync across multiple devices

Furthermore, the app enables users to build and preview requests, even when offline or without having an account.

wp-now

wp-now is a development environment from WordPress.com, the same environment that powers WordPress Playground. It provides a more seamless setup and currently the fastest method to create a local WordPress site. This tool is believed to change how developers work with WordPress in the future.

The post Fresh Resources for Web Designers and Developers (May 2023) appeared first on Hongkiat.

This month’s collection includes a free icons gallery, online tutorials, web applications, and a handful of JavaScript frameworks. So, jump into the full list to see if you can find something interesting.

Docus

Docus is a framework that allows you to write documentation using Markdown and Vue components. It’s built on top of Nuxt architecture and comes with over 50 components for building pages, navigation, and table of contents.

Docus is highly extensible, allowing you to customize the design or add components using slots to make it your own.

React Dev

This is the official website for React.js, developed and maintained by Facebook. It provides a comprehensive guide to using React, including documentation, tutorials, and examples.

The site serves as an essential resource for anyone who would like to get started with React, and stay up-to-date with the latest updates and best practices in React development.

IconHunt

IconHunt hosts a vast collection of free and open-source icons with a simple and user-friendly interface that makes it easy to search and browse through. You can download or import the icons to Notion and Figma easily. A useful resource for both designers and developers looking for free and high-quality icons.

BlockNote

Blocknote is an open-source JavaScript library to create a WYSIWYG editor. Aside from basic text editing like bold, italic, and underline, it also highlights some advanced features like real-time collaboration, drag-n-drop blocks, and a customizable / menu.

It’s flexible and customizable, which makes it a great choice if you’re looking to add a modern editor to your web applications.

Docker Image PHP

A Docker image from ServerSiderUp that allows you to run PHP applications. It’s production-ready and comes with many things preconfigured, including Nginx, PHP-FPM, and automatic health checks.

It’s also highly optimized for Laravel and includes and handles queues, tasks, storage linking, and migrations out of the box. One of the better alternatives to the official PHP Docker image, and it also runs faster.

Arktype

ArkType is a runtime validation library that automatically infers TypeScript definitions. It provides immediate feedback in the editor as you type in the code editor, displaying fully-inferred types or specific parse errors. This feedback reflects what will happen at runtime.

A useful library if you’d want to ensure type safety both during development and at runtime of your application.

Houston

HoustonAI is an experimental support bot designed to help users to use Astro – a static site builder for modern web apps. The bot is powered by GPT-3, LangChain, and trained on the Astro documentation website. It’s currently experimental, and it may return the wrong answer. But it’s exciting to see how AI would change the way we learn.

TS-REST

TS-REST is a tool that provides a simple way to define a contract that offers end-to-end type safety for your web application APIs. The contract can be easily defined with a Zod schema or TypeScript type.

It is well-tested, production-ready, and framework agnostic that, allows you to use it with a wide variety of frameworks including Express, Nest, Next, and react-query.

MRSK

MRSK is new a tool from the people in Basecamp. It deploys web applications to any environment, from bare metal to a cloud VM, using Docker without any downtime. It uses Traefik as a dynamic reverse-proxy to manage requests during the container-switching process. Although originally built for Rails applications, it can work with any web application.

Grep

Grep.app is a search engine for developers that allows you to search through billions of lines of code across repositories and package managers such as GitHub, GitLab, and NPM.

It shows results with context highlighting and can be further filtered and sorted by language, file type, project, and date. A useful search engine if you’d to search for specific codes for research, debugging, or simply inspiration.

magic-regex

magic-regex is an NPM library that makes RegEx easier. Instead of having to write strange RegEx syntax that’s hard to understand, you can use a function and a natural language syntax. This library will compile and transform the function into a pure valid RegEx.

Bite-Sized Accessibility

This site provides short, easy-to-digest lessons on web accessibility. Each lesson is presented in a bite-sized format, with clear explanations and examples that make it easy to understand and apply the concepts covered.

It covers a range of topics, including color contrast, keyboard accessibility, screen reader compatibility, and more. It is a great resource for anyone looking to improve accessibility knowledge.

Nodl

Nodl is a framework that allows you to create a computational node graph for your Node-based applications. This library allows you to easily design, manipulate, and execute these graphs.

A great library if you need to visualize complex data in your application while also providing some form of interface for your users to interact with the data.

Stark Accessibility Checker

Stark Accessibility Checker is a Google Chrome extension that provides a suite of integrated tools for testing website accessibility. Its features include the Contrast Checker, Vision Simulator, Alt-Text Annotations, and Typography Analysis, which can help you find and fix accessibility issues on your website.

Bearclaw

Bearclaw is a tool that simplifies generating websites from Markdown without the need for knowledge in templating languages. You can simply add content in a Markdown file and run the tool to transform it into HTML, ready for deployment on Github Pages or any server. It doesn’t require frameworks, NPM, or any complicated configurations. It just works.

WordPress Developer News

The WordPress Developer Blog is a new official resource from WordPress for developers to stay up-to-date with the latest software features, tutorials, and learning materials relevant to the open-source project.

It covers topics such as theme and block development tutorials, WordPress APIs, best practices, and learning resources whether you’re a beginner or experienced WordPress developer.

Slic

Slic is a CLI command tool that provides a containerized environment for running automated tests on. It’s designed for WordPress and Codeception, simplifies the setup process for testing, and ensures consistency in running the tests, which can be a challenge as a project and the team size grows.

Additionally, it provides useful development tools and utilities for use during project development or CI builds.

Windstatic

A collection of 161 elements and layouts crafted with Tailwind CSS and Alpine.js, featuring visually appealing designs and serving as a great foundation for your next project. In the collection, you can find some common design patterns or layouts such as the Hero section, Grid layout, CTA, testimonials, and more.

Kitchen

Kitchen provides customizable styled-components in React or React Native. It contains accessible components that follow WAI-ARIA standards, can be themed to match design needs, and offers support for all platforms.

It also includes a simple responsive system and reusable hooks that guarantee to boost your productivity during development.

Transforms

This site provides a variety of data conversion tools for developers. For example, you can convert SVG to React.js or React Native, HTML to JSX, and JSON to many data types, including TOML, YAML, JSDoc, GraphQL, and many more. It’s super handy that I think all developers should bookmark it.

The post Fresh Resources for Web Designers and Developers (March 2023) appeared first on Hongkiat.

React.js Documentary

This YouTube video from Honeypot will walk you through the story of React’s early days, featuring interviews with various developers who played a key role in its development. It’s pretty cool to see how React.js started from scratch and has now become a widely used library.

Related:

• Getting Started with React.js
• 15 React.js Tools & Resources for Developers

Product Design Roadmap

On this site, you can find an interactive diagram that can help you learn some of the concepts and skills of product design. The diagram is well-organized and covers all the necessary topics.

It is divided into five main sections, each with its own branches that lead to useful resources. Whether you’re interested in pursuing a career in product design or creating your own products, this website can provide you with some valuable knowledge.

Clack

Clack is a NPM package that enables you to easily build command-line interfaces (CLIs) in Node.js. It is 80% smaller than a similar option as well as provides a simple API like text, confirm, select, and spinner capabilities.

The package already comes with a nice UI, making it effortless for developers to create beautiful interactive CLIs in a matter of minutes using.

AI-Powered Error Solutions for Laravel

This blog post from Marcel Pociot delves into the use of AI to resolve errors in Laravel applications. He shares his insights on creating effective prompts and provides a detailed technical explanation.

Additionally, he offers guidance on how developers can integrate this technology into their own applications. It is a valuable resource if you’re interested in leveraging AI in your development workflow.

Laravel Pennant

Laravel Pennant is an official package released by the Laravel team alongside Laravel 10 that provides an easy way for Laravel developers to utilize Feature Flags for their applications.

Feature Flags are a release mechanism that allows developers to enable features based on specific user conditions, gradually releasing them in stages and performing A/B testing before fully rolling them out to all users.

Nuxt Studio

Nuxy Studio is a web app that provides a Git-based CMS for Nuxt. It allows you to work on your content files through Github as if in development. You can create a new project from a template or import an existing one from GitHub and easily share real-time preview links.

A great app for those who work on content collaboratively and use GitHub for version control.

TresJS

TresJS is a JavaScript library that brings ThreeJS in Vue. It simplifies the process of creating 3D objects with Vue components. So if you don’t have prior experience with 3D modeling, you can now easily build stunning 3D scenes with lights, materials, and special effects that will impress your site visitors.

React.js Email

This is a library that helps you create a beautiful email using React and TypeScript. It comes with unstyled components that make coding responsive emails easier. It handles inconsistencies between Gmail, Outlook, and other email clients for you, so you don’t have to worry about it. It even supports dark mode.

Automatisch

Automatisch is an automation tool that connects different services like Twitter and Slack to automate workflows without the need for programming skills. It is similar to Zapier, except it is an open-source tool.

It provides more flexibility since you can store the data on your own servers, which can be especially important if your businesses is handling sensitive information.

CodeEdit

CodeEdit is an open-source and lightweight tool designed and developed for macOS. It’s built with Swift which allows it to run more efficiently and makes the editing smoother and faster on macOS. Although it is not ready for production yet, at the time of this writing, it has the potential to be one of the most popular code editors among macOS users.

useCannon

useCannonis a React.js hook that allows you to easily integrate physics simulations into your React.js applications. You can create objects with mass, force, and velocity, apply gravity and other forces and even detect collisions between objects. It’s a great tool for creating realistic 3D simulations and games using React.js.

Frontend Learning Kit

This is a open-source project that provides a quite comprehensive list of resources to learn frontend, including video tutorials, online courses, and books, covering a wide range of topics from HTML, CSS, JavaScript, React, Redux, and more.

The materials are carefully selected and regularly updated, making it a valuable tool whether you’re just get started or improving your frontend skills.

TypeTrials

TypeTrialsis a free web-based tool that allows users to experiment and test various fonts, both variable and static, and create quick designs to share with others. The tool is designed for anyone who wants to explore the full potential of different fonts.

Spaghettify

Spaghettify is a VS Code extension that aims to rewrite your codebase into spaghetti code using A.I. It is intended to be a fun and educational tool for developers to experience the negative effects of poorly written code. Don’t use the spaghetti code in your production site for real!

AtalsIcons

AtalsIcons is an open-source library of free and consistent icons that you can use in various design projects. The library consists of 2,701 icons in SVG format and is also available as a web font, Figma, React, Vue, and Flutter packages.

With Atlas Icons, designers and developers can easily access a wide variety of icons that are consistent in style and can be used on various platforms.

Native CSS Masonry Layout

CSS masonry layout is gaining popularity among UI and UX designers. It is popularized by Pinterest where elements are arranged to fill vertical gaps instead of being aligned to the row axis.

There are a number of JavaScript libraries where you can add Masonry layout on your website. But soon you can implement it using just CSS. No JavaScript required.

OKLCH

OKLCH is a tool that helps designers to pick and convert colors using LCH and OKLCH color spaces. OKLCH is a newer color space like RGB and HSL coming in as part of the CSS Color 4 specification.

It has better support for modern screens and always has predictable contrast after color transformation. If you’d like to dive into this new color space, Check out this post and see why it’s better than RGB and HSL.

CSS clamp() Calculator

CSS clamp() is a feature in CSS that sets a value between a minimum and maximum value based on the size of the viewport. However, setting these values can sometimes be confusing. This tool makes it easier and will help you to calculate and generate the clamped values required for the website.

Mitt

Mitt is a small and fast JavaScript event emitter library that can be used both in the browser and in Node.js. It provides a simple API to add listeners to events and to emit events with data. It has no dependencies and supports IE9+. If your application needs a custom event listener, this is a perfect library to install.

Vesper

Vesper is a free VS Code theme that provides a clean and minimalistic view for comfortable coding. It has a dark background with peppermint and orange syntax highlighting color that helps to reduce eye strain during long coding sessions.

It is available on the VS Code Marketplace and can be installed with just a few clicks. If you’re looking to refresh your code editor, this might be a good option to try.

The post Fresh Resources for Web Designers and Developers (February 2023) appeared first on Hongkiat.

Here, we’ve put together some of the best podcasts for developers, covering various topics such as software development, frontend development, JavaScript, CSS, and more. Whether you’re a seasoned developer or just starting out, I’m pretty sure you will find a podcast that fits your needs. So grab your headphones and get ready to learn!

1. Inside Marketing Design

Inside Marketing Design is a podcast that can help you learn more about a different side of design in tech. The show is focused on marketing and brand design, which is not as much mentioned or discussed as product and UI/UX design.

Each episode features an interview with marketing design experts from large tech companies such as Zendesk, Stripe, Zapier, Shopify, etc. You’ll hear about how they design things like landing pages, brand illustrations, and campaigns.

By listening to these interviews, you’ll get a better understanding of how design teams work, how they tackle projects, and what challenges they face.

Listen in:

YouTube Spotify Apple Podcasts

2. Boagworld

Paul Boag is a well-respected name in the web design industry. He is an author who has released several bestselling books and is a founder of the UK-based design agency, Headscape.

His podcast, Boagworld, has been on air since 2011 with more than 100 episodes on website building and digital strategy, making it one of the longest-running podcast channels in the industry. You can subscribe to Boagworld through RSS or iTunes.

Listen in:

Spotify

3. ShopTalk Show

ShopTalk Show is one of the most popular web design podcasts hosted by Chris Coyier of CSS-Tricks and Dave of Paravel; ShopTalk invites web design and programming experts to share their ideas and experiences.

They currently have more than 100 episodes already and counting, and podcast releases are weekly.

Listen in:

YouTube

4. Beyond Coding

Beyond Coding is a weekly podcast covering various software development and engineering topics. But as the name implies, it goes beyond just coding.

It also includes discussions on leadership, communication, self-improvement, and happiness. The show is hosted in a friendly and informal format, with host Patrick Akil and his guests having relaxed conversations about their experiences and perspectives. There’s a new episode every Wednesday.

Listen in:

YouTube Apple Podcasts

5. Syntax FM

A podcast hosted by two experienced web developers, Scott Tolinski and Wes Bos, and they cover a wide range of topics related to frontend development, back-end development, and design.

They’ll provide you with practical advice, tips, and insights to help you improve your skills and stay up-to-date with the latest trends and best practices in the industry. It’s one of the most popular podcasts in the web community for its in-depth conversations and insightful commentary.

Listen in:

Spotify Apple Podcasts

6. CodePen Radio

A podcast from codepen.io, a popular online code editor for frontend developers and designers. The podcast focuses on web development, design, and the intersection of code and creativity.

The show is hosted by Chris Coyier and Marie Mosley, and they explore a variety of topics related to the web, including design patterns, CSS, JavaScript, and more. It is a great resource for front-end developers and designers looking to stay up-to-date with their field’s latest trends and best practices.

Listen in:

Apple Podcasts

7. CodeNewbie Podcast

A podcast for people who are new to coding or who are thinking about starting a career in technology. The show is hosted by Saron Yitbarek and features conversations with developers and tech professionals from various backgrounds.

It covers a wide range of topics from coding and the technology as well as how to get started with programming, tips for staying motivated, and stories about the ups and downs of learning to code.

The podcast is part of the CodeNewbie community, which is dedicated to helping people learn to code and find their place in the tech industry.

Listen in:

Spotify Apple Podcasts

8. Frontend Happy Hour

Hosted by a group of experienced web developers from well-respected names in the tech industry, such as Netflix, Twitch, Atlassian, Evernote, and LinkedIn. It features discussions on various topics related to frontend development, including the latest trends, best practices, and latest shiny tools.

It’s great podcast for frontend developers who want to stay up-to-date with the latest trends and best practices in their field, as well as for those who are looking for inspiration and advice on how to grow and succeed as a frontend developer.

Spotify Apple Podcasts

9. Web Rush

A weekly podcast for web developers hosted by John Papa, Ward Bell, Craig Shoemaker, and Dan Wahlin. It covers various topics, from JavaScript to general web development. The show aims to provide practical insights and discussions about the challenges faced by developers today.

Each episode features expert guests who share their experience and knowledge. It is a great resource for learning development in the fields, whether you’re a beginner or an experienced web developer.

Apple Podcasts

10. JavaScript Jabber

Another weekly podcast covering a wide range of topics related to JavaScript, web development, and the web platform. It aims to provide insights, tips, and advice to help developers improve their skills and stay up-to-date.

A great resource for anyone interested in web development, especially those working with JavaScript, and is accessible to developers of all levels, from beginners to experts.

Apple Podcasts

11. Views on Vue

A podcast about Vue.js, featuring conversations with developers and experts who are working with Vue.js. Each episode covers various topics around Vue.js, such as the best practices, emerging trends, and some real-world projects using Vue.js.

A perfect podcast for any developer looking to learn more about Vue.js or who is already using it in their work.

Spotify Apple Podcasts

12. DeveloperTea

A podcast for web and software developers hosted by Jonathan Cutrell. This podcast is designed to be a quick and easy way for developers to stay informed about to things related to web development.

Each episode is around 10-15 minutes long and covers a variety of topics, from technical skills and tools as well as non-technical areas for developers. It is a great podcast for developers at all levels or anyone interested in web and software development.

Listen in:

Apple Podcasts

13. Podrocket

A weekly podcast that focuses on front-end web development. It is hosted by LogRocket co-founder Ben Edelstein and the LogRocket engineering team, along with other experienced developers.

The show provides in-depth knowledge and insights on libraries, frameworks, and current industry issues related in web development.

Listen in:

Spotify Apple Podcasts

14. The Changelog

A weekly podcast that covers topics related to open-source, software development, and technology in general. Hosted by Adam Stacoviak and Jerod Santo. The show features interviews with developers, engineers, and other experts in the software development industry.

The podcast covers many topics, including new and emerging technologies, tips, and the future of open-source software. If you’re into open-source, it’s a great resource for anyone interested in staying up-to-date with the latest developments in the open-source field.

Listen in:

Spotify Apple Podcasts

15. The CSS Podcast

A podcast covering all things CSS. It is hosted by Una Kravets and Adam Argyle, discussing a wide range of topics related to CSS, including the latest CSS features, design and development tips, tricks, and more.

They also interview experts in the field to provide insights and perspectives on the current state of CSS and its future direction. Stay tuned to this podcast if you want to learn more about CSS and keep up-to-date with the latest advancements in this field.

Listen in:

YouTube Spotify Apple Podcasts

The post 15 Podcast Channels for Web Developers appeared first on Hongkiat.

In this article, we will be showcasing 10 of the most powerful resources built on top of ChatGPT and GPT-3 based AI model, making it easier for you to take advantage of their full potential. So, if you’re looking to leverage AI technology in your life or work, this article is a must-read. Let’s begin.

1. ChatGPT Desktop

The ChatGPT Desktop is a multi-platform solution available on macOS, Linux, and Windows. You can use ChatGPT in your desktop and export your conversation history in PNG, PDF, and Markdown formats.

The app offers common shortcut keys and integrates with awesome-chatgpt-prompts for easy import of prompts which can be synced with one click and disabled if needed.

2. ChatGTP Everywhere

A Google Chrome extension for instant access to ChatGPT. With this extension, you can quickly gather information while using Google search. It also includes a sidebar that can be easily accessed with just one click, providing full access to the capabilities of ChatGPT’s language model anywhere on the web.

3. ChatGPT for Gmail

A Chrome extension to help you deal with emails productively whether composing or answering the email. With the ability to complete the email subject, fix typos and provide an accessible button to activate the completion process, this extension makes email writing more efficient. Plus, the feature can be enabled or disabled at any time.

4. AI Engine

A WordPress plugin that allows you to add a ChatGPT-style chatbot to your website with a simple shortcode. You can generate fresh content, do translations and corrections and find suggestions in its AI Playground.

The plugin also provides quick title and excerpt suggestions, tracks your OpenAI usage with built-in statistics, and has an internal API for other plugins to tap and integrate into the plugin.

5. AI Post Generator

Another AI-powered WordPress plugin that helps you with creating high-quality content for your website. The plugin is powered by OpenAI’s GPT-3 language model and supports multiple languages, automatically detecting the language of the title and generating content in the same language.

What makes it cool is that it can find high-quality images for your post that go with the topic or theme of the writing.

6. GPT3 WordPress Post Generator

This script generates a WordPress post by utilizing the OpenAI GPT-3 API and the OpenAI Python library for API calls, and the WordPress XML-RPC library for post creation. You can control the length of the content, topic, and even tone (e.g., funny, serious, formal) for the generated post.

7. ChatGPT for Google

This browser extension integrates ChatGPT into popular search engines including Google, Baidu, Bing, DuckDuckGo, Brave, Yahoo, and Naver to display ChatGPT responses alongside the search results.

It features Markdown rendering, code highlighting, dark mode, copying to the clipboard, and language switching. All in all, this extension will enhance your search engine experience.

8. ChatGPT VSCode

A Visual Studio Code extension integrates ChatGPT API. It allows you to ask natural language questions and get answers from OpenAI’s ChatGPT directly in the editor. It provides a user-friendly input box in the sidebar to ask questions, a panel to view responses, and the ability to follow up with additional questions while maintaining conversation context.

Additionally, code snippets from the AI’s response can be inserted into the active editor with a click.

9. ChatGPT macOS

A simple macOS application that integrates ChatGPT API into the menubar. It allows you to access it quickly with the Cmd+Shift+G shortcut from anywhere.

There’s no Windows version is currently available, but it can be run on Windows by cloning the repository, installing electron-forge, and running the build command. In Windows, you can access it with the Ctrl+Shift+G shortcut.

10. ChatGPT for JetBrains

This is a plugin for the JetBrains IDEs series that allows for integration with ChatGPT. It adds a section within the IDE where you can input prompts and view ChatGPT’s responses, providing a convenient assistant for code development.

The post 10 Most Useful ChatGPT Tools So Far appeared first on Hongkiat.