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.

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

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

1. Bootstrap Icons

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

2. 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.

3. 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 together.

4. 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. I’m sure both designers and developers will appreciate this collection.

5. Ionicons

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

6. Tabler Icons

Contains over 1300 icons, Tabler is one of the perfect collections to put in your web or app design. It looks crisp, consistent, and customizable. Each icon is available in several other formats besides the 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.

7. Radix Icons

A set of icons designed with thin outline characteristics. 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.

8. Heroicons

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

9. 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 SVG.

It also comes in three styles — Outlined, Filled, Two-tone — and is compatible with either 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.

10. 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 for the home icons. This allows you to pick the perfect fit of the icon for your site persona.

11. Material Design Icons

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

12. Octicons

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

13. 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.

14. 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 to ease of collaboration between designers and developers when designing websites and transforming the design into code.

15. 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 looks sharp and crisp regardless of the screen resolution.

The post 15 Websites to Download Free SVG Icons 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.

It also covers the building of complex client-side applications. Since its release in 2009, Angular has been widely used by many developers for its convenient extending of custom HTML tags and attributes, known as ‘directives’.

For some people, learning Angular through its official documentation is not enough. They prefer a video-based tutorial instead, or a more sophisticated learning site with specific discussions, a demo, then try it yourself feature and the like.

So in this post, we’re listing 10 Angular tutorials and screencasts that will kickstart your Angular learning.

Angular Start

This is te official guide from the Angular team and Google to help you get started with Angular right from the basics. This guide will walk you through the initial setup of Angular, the prerequisites, the concept of Angular, and even a reference to the glossary used on Angular.

Furthermore, it also provides some example project codes and advanced techniques if you like to jump right into the codes. This guide is overall a great first reference whether you’re a beginner or a seasoned developer.

Angular on Dev.to

Dev.to is a community hub for web developers to share and discuss anything with other developers. It covers many things related to web development, including Angular. The community is diverse, vibrant, and pretty active. You can find new posts on web development every day.

Angular on FreeCodeCamp

FreeCodeCamp.org is a non-profit community-driven organization and one of the active hubs for developers to learn and share. It provides thousands of guides, tutorials, and tips on a lot of topics around software development, including web development and Angular itself within their News section.

On top of that, it also provides certification with hundreds of hours of materials. It’s a great place if you aim to become a professional developer.

A Better Way to Learn Angular by Thinkster

Thinkster offers you a unique method of learning Angular. They split up all of the Angular-related topics into 12 parts.

In each part, you’ll see a brief topical explanation followed by tick-able useful readings. The reading materials are mixed up, coming from other sites and Angular official docs.

Udemy Angular Course

Udemy provides a vast collection of video courses on Angular. However, most of these video courses cover only the basics.

Angular Playlist by LetsBoot

A video playlist from LetsBoot containing 15 videos on some advanced topics on developing apps with Angular such as end-to-end testing, deployment, and continuous integration and delivery (CI/CD).

These are great materials if you’re already pretty familiar with Angular and ready to brush up your skill on web development with Angular.

Build Your First Angular App by Scrimba

A collection of 33 screencasts to learn Angular that’ll teach you from the basics to the advanced topic. You’ll learn a real-life application.

What’s really cool is that each screencast is incorporated with an interactive IDE where you can put your hands on the code taught on the screencast. And you can switch between the screencast and the IDE seamlessly.

Angular Beginners Guide

Here is a two-hours long video that’ll teach you about the key features that you will likely use on 90% of the time when developing with Angular.

As the name implies, the course is a beginner’s guide that’ll walk you through the entire process – from the beginning to set up your development environment and will use the CLI to scaffold an Angular project from scratch.

So, if you’re not a fan of reading the lengthy text-based tutorials, this could be a great alternative for you.

Learn Angular & TypeScript

Another great video course that is aimed for beginners with some advanced topics and concepts such as TypeScript, architecture, and dependency injection. Once you’ve got the hang of basic Angular, this video course could be a great follow-up.

Angular Cheatsheet

Angular is a vast framework and documentation can be a bit overwhelming. For that, the Angular team provides a cheat sheet for quick reference of common code snippets and configurations, which can be handy at times.

The post 10 Best Tutorials to Learn Angular appeared first on Hongkiat.

Many WYSIWYG editors are available, each with its own features and capabilities. This article will take a closer look at several popular WYSIWYG editors. We will explore the key features and capabilities of each editor, as well as their pros and cons.

Whether you’re a developer looking to integrate a WYSIWYG editor into your web application, or a user looking for a simple and powerful way to create and edit rich text content, this article will provide valuable insights and help you make an informed decision.

Froala

Froala is a user-friendly rich-text editor that is visually appealing and easy to integrate into any project, regardless of the developer’s preferred technology stack and coding knowledge. It supports more than 15 native integrations and over 35 plugins, including React.js, Vue.js, Angular, CraftCMS, and WordPress.

On top of that, it is used in over 100 countries and supports many languages, including East Asian languages. The editor is also compatible with various browsers, including Safari and Edge, making it accessible for users regardless of their preferred platform.

Price:

It has a starting price (free trial) of $0, making it an ideal choice for testing the tool. For commercial apps, CMS, and SaaS applications, subscription plans starting at $199/year is available and include dedicated support and more features.

PROS

CONS

TinyMCE

A popular WYSIWYG HTML editor that allows users to create and edit HTML content directly in their web browser. It is open-source and easy to integrate into web-based applications. Some key features of TinyMCE include support for text and media formatting, the ability to add and edit images and links, and the option to customize the editor with plugins and themes. It is widely used in content management systems and other web-based applications, and it is available in a number of different languages.

It can be easily integrated into a range of technology stacks, including React.js, Vue.js, and Svelte. It offers native Web Component integration and provides numerous APIs to simplify development. It is also compatible with popular frameworks such as Rails and Laravel and is already integrated with some popular CMS like WordPress.

Price:

TinyMCE is open-source and free. The core features are suitable for most common use cases. But if you need a commercial license and support with additional advanced features like the Enhanced Tables, Enhanced Media Embed, and Checklist, a subscription is available starting at $45/month.

PROS

CONS

Trix

A lightweight and flexible text editor that can be integrated into web applications. It is built using HTML, JavaScript, and CSS and is based on the contenteditable of a web standard feature, which allows users to edit the content of an HTML element directly within the browser.

Some of the features of Trix include support for rich text formatting, including bold, italic, and strikethrough text, as well as support for lists, blockquotes, and links. Trix also includes tools for inserting images and other media into the text, and it has support for undo and redo functionality.

Price:

Trix is maintained by the team at Basecamp, and it is released under the MIT license. It essentially means that it’s free and you can do whatever you like with the editor.

PROS

CONS

EditorJS

An open-source rich-text editor that is designed to be lightweight and easy to use. Its simple and intuitive interface allows users to quickly create and edit content with a variety of formatting options, including text formatting, lists, and links. This editor also includes tools for inserting and editing images and videos.

It is highly customizable and extensible, with a variety of plugins and integrations available to enhance its functionality.

Price:

Editor.js is free to use for both personal and commercial purposes. It is maintained by a community of developers and released under the MIT license.

PROS

CONS

ProseMirror

An open-source JavaScript library for building rich-text editors and structured document editors. It is designed to produce clean and semantically meaningful documents that are easy for users to understand while still allowing for customization or adding some extensions.

It includes built-in support for collaborative editing, where multiple people can work on the same document in real-time. It also has a modular architecture, a plugin system, and an immutable, functional architecture that makes it easy to integrate into modern web apps and confidently implement complex behavior.

Price:

ProseMirror is maintained by a community of developers and is released under the MIT license. It is suitable for building CMS or used as a base to create a more complex WYSIWYG editor. It’s open-source and will be forever free.

PROS

CONS

Conclusion

WYSIWYG editors offer a convenient and user-friendly interface for creating and editing rich text content for users on your applications. In this article, we’ve examined some popular choices and compared their key features and their cons.

Ultimately, however, the right WYSIWYG editor for your applications will depend on your specific needs and requirements. We encourage you to evaluate each of these editors to determine which one best meets your needs, and we hope this article has provided valuable insights and helped you make the decision.

The post 5 Best WYSIWYG HTML Editor for 2023 appeared first on Hongkiat.

In this post, we’ll take a look at some of the fresh resources for our fellow web developers to stay ahead of the curve and start the new year off right. This includes a host of new JavaScript, PHP, HTML, JS, and CSS libraries, plus a breakthrough in WordPress.

GithubUnwrapped

A handy little web app to show off your GitHub activity for 2022. Just enter your username and you’ll get a personalized video that summarizes all your public Github activities for the year.

You can download the video and share it on social media like Twitter and LinkedIn, or just keep it for yourself. And if you want to add a little flair, it provides three different themes to choose from.

Unovis

Another cool open-source project from F5, the company behind Nginx. Unovis a data visualization framework that works with React, Angular, Svelte, and vanilla JavaScript. It has different types of charts, maps, and network graphs that allow you to visualize almost any type of data.

It lets you import individual components to keep your file sizes small. And if you want to customize the look of your charts, it’s super easy to do with the CSS-variables support.

Lighthouse PHP

Google Lighthouse helps you improve your website by checking things like performance, accessibility, and SEO. This PHP library makes it easy to use Lighthouse and create reports in HTML format.

You can customize how you use it and integrate it into your existing workflow. A handy library, especially if you’re already using PHP in your project.

Splade

A library that makes it super easy to build Single Page Applications (SPAs) using Laravel Blade templates and some extra interactive components from Vue 3. Basically, you can write your app using the simple Blade syntax, and then add some “magic” to make it feel like an SPA.

ConsoleNinja

Using the console.log is a quick way to debug your code, but it can quickly get messy if you have too many log statements. This is a tool that helps you use console.log in a more organized way.

It lets you see the logged values right next to your code, which makes it easier to understand what’s going on in your codes. It’s easy to use — just start your editor and your development server, and you’re good to go. No need for any special setup or configuration.

Nextra

Nextra is a framework that sits on top of Next.js and helps you build websites that are all about content. It has all the good stuff from Next.js, plus some extra tools to make it easier to create content using Markdown.

It also comes with built-in support for syntax highlighting, internationalization, and search. And right out of the box, you can choose between two different templates: one for creating Docs and one for a Blog to get you started quickly.

Vuefire

A tool that helps you keep your Vue app in sync with a Firebase database. It’s designed to be easy to use and aligns with the declarative approach of Vue. It takes care of things like nested collections and document references for you, and it works with other Firebase features like authentication.

You can choose which parts of the tool to include in your project, so you don’t have to use everything if you don’t need it.

OSCS

OSCS is a website that helps you choose colors for your digital interface, like a website or mobile app. It gives you different color palettes and shows you how to use them, along with examples of what they look like in an actual application.

If you’re having trouble finding the right colors for your project, OSCS is a good place to start to get some inspiration.

Hyde

A tool that helps you create static HTML pages, blog posts, and documentation sites using Laravel. It comes with a front-end starter kit based on TailwindCSS that works right out of the box and is responsive and customizable.

You can use Markdown or Blade to create your content, and Hyde comes with templates to help you get started.

Dinero.js

A JavaScript library that makes it easier and safer to work with money in your app. It lets you express monetary values and do things like change, convert, compare, and format to different currencies for display. Dinero.js makes it easier to manipulate money in your application.

The Component Gallery

A collection of user interface components that you can use as a reference when building your own component-based UI. It’s updated regularly and has examples of components and design patterns from real-world design systems.

You can find components like navigation, pagination, progress indicators, breadcrumbs, etc. It’s a great resource for designers and developers looking for inspiration.

useMemos

An open-source, self-hosted web app for managing and sharing knowledge and information. It’s free and easy to set up on your own servers using Docker. It has a simple text area for writing memos, with some basic Markdown support.

You can choose to make your memos private or public, and an API is available for customizing the tool to fit your needs. It’s a great way to organize and share memos within your organization, company, or with the public.

CodeImage

A tool that helps you make your code screenshots look nice. You can use it to share code snippets. You can customize your snippets by changing the syntax theme, colors, and window theme, and once you’re happy with how it looks, you can generate the image and share it with others on social media.

Expo

A package for React Native apps that gives you a ton of useful features. With it, you can build apps entirely in JavaScript that work on all kinds of devices, without having to use tools like Xcode or Android Studio. Expo has great support for TypeScript. All these allow you to use the same codebase to develop incredible apps.

Blogster

A collection of fast and accessible blog templates with a variety of customizable themes. It’s built with Astro and Markdoc. It includes features like a built-in dark mode, support for custom markdown components, and an RSS feed for SEO.

All of the templates are performant and have a perfect score on the Lighthouse accessibility and performance testing tool.

UserAgents.me

A collection of common user agents for various operating systems and browsers, including Windows, Linux, and macOS. It provides a free API that lets you access the data in a convenient JSON format, which you can use in your code or application.

I think it’s a really handy source for web scrapers, researchers, and website administrators who need accurate, up-to-date user agent strings.

Vite Plugin SSR

A plugin for building server-side rendered apps with Vite.js, a fast JavaScript build tool. It works with any UI framework, like React, Vue, Svelte, or Solid, and you can use it with other tools as well.

You can choose between client routing and server routing, and it supports all types of rendering, including Single-page (SPA) and Multi-page Apps (MPA). It’s easy to use and requires almost no configuration.

SVGGobbler

A browser extension that helps you work with SVG files. It works with Chrome and Firefox and gives you options like downloading, copying, viewing the code and exporting the icons as images. It’s a convenient tool for anyone who works with SVG icons on the web.

WordPress Playground

A recent experimental tool that lets you run WordPress in your browser without a PHP server. It uses WebAssembly to make this possible.

It has a lot of potential uses, like running code snippets in documentation, testing plugins and themes, switching between PHP and WordPress versions, and fixing failed CI tests.

It’s not completely stable yet, but it has the potential to revolutionize how we use WordPress in the future.

Pocketbase

An open-source backend tool that includes SQLite, real-time subscriptions, built-in file and user management, a dashboard UI, and a simple API. It’s designed to handle a large number of concurrent connections that could work even on a budget VPS.

It’s currently in active development and overall has the potential to be a good alternative to paid SaaS options.

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

If you just get started however and not sure which code editor you’d like to use, here we highlight several of the best options — free and paid — editor that comes with great features. Without further ado, let’s jump to see the full list.

Visual Studio Code

Windows Mac Linux

A relatively new code editor compared to the others that are on this list, Visual Studio Code has quickly become one of the most popular code editor currently, especially among web developers.

It features numerous syntax highlighting for many languages out of the box, including CSS and CSS Pre-processor like SCSS and LESS. Some of the extentions such as CSS IntelliSense, CSS Peek, and CSS Modules make it even more powerful when working with CSS.

Notable Feature: Fast, Works out of the box with many language and tools like Gulp and Grunt, and great collection of extensions.

Notepad++

Windows

A free source code editor, and notably a “Notepad” replacement in Windows. It’s simple, run fast, and supports several languages, including CSS and comes with features like Word completion, Function completion and Function parameters hint to help be more productive when composing CSS.

Notable Feature: Syntax highlighting and folding, Macro recording and playback, and Document Map

WebStorm

Windows Mac Linux

JetBrain’s IDE that implements proper auto completion for everything, including CSS, also you can get notified about CSS problems on the fly. It also integrates with tools like Stylelint out-of-the-box which could help you on format and maintain consistency on your CSS codes.

Notable Feature: Seamless integration withe web development tools like Stylelint, Grunt, Gulp, and NPM. Built in tools for debuggin and tracing, and smarter auto-completion.

Coda

Windows

An advanced code editor with a built-in CSS editor that provides you two CSS editing mode for more flexible designing experience, able to see the result instantly after changes made. On top of that, you can also override a site’s CSS right within its Live Preview tool in the editor.

Notable Feature: TouchBar integration, live preview, and built-in SFTP/FTP.

Atom

Windows Mac Linux

A free and open-source code editor built by Github. It comes with more than just code editing features. It has an embedded Git Control that seamlessly integrates with GitHub. You can also install numerous add-ons for CSS to enhance the experience with CSS editing.

Notable Feature: Easily extendable and hackable through various APIs and works with CSS and popular CSS pre-processors out of the box.

Sublime Text

Windows Mac Linux

Another popular code editor for web development. It works cross-platform and natively supports many languages and markup languages including CSS and provide numerous extensions to improve the CSS editing experience within the editor. It is arguably the base inspiration of modern code editor. It introduces several features such as the Multiline selection, “Go to Anywhere”, and the Command Pallete which also improves the developers productivity.

Notable Feature: Super fast, advanced code editing features like “Go to Anywhere” and Multiline selection, and subl CLI.

Brackets

Windows Mac Linux

A free and and lightweight editor created by Adobe Systems specifically for web development. It is written in JavaScript, HTML and CSS, and natively supports CSS Pre-processors.

It introduces a unique experience in editing with so called “Inline Editing”. You can press Command / Ctrl + E and it will show you all the CSS selectors with that ID in an inline window and allows you edit the CSS selector directly within the current file instead of jumping between multiple files.

Espresso

Windows

A beautiful macOS app for code editing. It comes with a nice GUI tool to easily edit CSS styles. This tool will appear in the lower half of the right sidebar when editing the stylesheets. It allows you to adjust text styling, text color, alignment, font, size, line-height as well as the layout such as including padding, margins, display style, floats, etc.

Notable Feature: GUI tool for editing CSS, native SCSS and LESS supports, auto-completion.

TextMate

Windows

A code editor for macOS with some advanced editing features and native support for many programming language including CSS. TextMate is quite popular for its TextMate grammar, .tmLanguage, which is adopted in many popular code editors like Atom and Sublime Text to create custom syntax highlighting for a language.

Notable Feature: Native Macros support to automate repeated task, Snippets and Shell integration.

bbEdit

Windows

bbEdit also known as TextWrangler is a lightweight but advanced code editor built for macOS. Aside of some essential features like syntax coloring for various programming languages, code folding, and code auto-completion, bbEdit also comes with a built-in SFTP/FTP support, and seamless integration with various macOS features such as AppleScript, Automator, and Unix scripting.

Notable Feature: macOS integration, and built-in GUI tool for editing HTML.

The post 10 Best Free CSS Editors appeared first on Hongkiat.

In this edition, we have several JavaScript libraries, some learning resources to level up your skills, and a couple of Deno-based tools.

Arrow.js

ArrowJS is a JavaScript library; not a framework, but it is just as powerful as one. It provides two fundamental capabilities to develop an engaging and sophisticated user interface for websites, observable data and declarative/reactive DOM rendering.

Other noteworthy points include that it does not require build tools, is less than 3KB, and has no dependencies.

A11yphant

a11yphant makes learning about web accessibility simple and easier. It breaks down web accessibility learning into a manageable chunk of challenges. You will not have to read large amounts of text, which can often be hard to digest. Rather, you will learn by applying the concept in code.

It’s a great resource whether you just got started with web accessibility or simply trying to improve your skills.

Design Principles

You can find everything related to design principles on this site. It aims to help us determine what effective design principles are, how they are produced and evaluated, how they develop, and how much value they bring to our projects.

You can also find plenty of real-world examples of applied design principles on its Examples page.

Deno WordPress Theme

Deno allows you to run JavaScript applications on the server. Unlike Node.js, it adheres to web standards more closely, so that we may develop with a single code base and does not require complicated configuration or build steps.

Furthermore, if you are coming from WordPress, it recently open-sourced two WordPress themes. It is built on top of Fresh and allows for a great starting point to develop a “headless” configuration for WordPress.

Mona Sans

Mona Sans is a variable font from Github. Variable fonts allow for different versions of a font to be contained in one file, granting performance advantages and fine-grained design control over weight, width, and slant, and all major browsers support them.

Mathics

Mathics is an open-source general-purpose computer algebra system that supports Mathematica-compatible syntax and functions. It has a modular structure that enables you to reuse parts of Mathics with minimal dependencies and footprints.

CanIInclude

This project provides functionality to test whether one tag can be included in another based on information from the WHATWG HTML Specification. It’s a great tool to check HTML element specifications and help you structure your HTML elements semantically.

Wireit

This tool upgrades npm scripts so that they run smarter and more efficiently. It uses the npm run commands you already know and wires it (no pun intended) so that they run dependencies in parallel.

It can also continuously re-run on changes and handle cache locally or remotely on GitHub Actions to make the command run faster. You can use it with various setups, whether you have a single package, an npm workspace, or a monorepo.

SolidStart

SolidStart is a comprehensive framework that provides databases, servers, front-ends, bundlers, data sourcing/mutations, caching, and infrastructure using Solid.js and the Solid router at the core.

You can use SolidStart to render your application in a variety of ways to suit your needs, whether it is Client-side rendering (CSR), Server-side rendering (SSR), or Static site generation (SSG).

At the time of writing, this framework is currently in beta, and I can see it has the potential to be the next wave of the JavaScript framework.

Pixi.js

Pixi.js is a fast and flexible 2D WebGL renderer for creating beautiful digital content. It is one of the fastest to render 2D graphics. It’s equipped with a sophisticated API yet easy to grasp for newcomers and seasoned developers alike.

It is simple to use yet powerful, covering the fundamentals of 2D rendering so you can focus on generating remarkable cross-platform experiences.

REST Countries

This website provides API endpoints where you can get information about every country on earth. This information comprises country names, native names, currencies, capital cities, alphabetic and numeric codes, telecom codes, and much more. Developers who need country lists and details will find it handy.

JavaScript Testing Best Practices

This GitHub repo serves a guide for JavaScript and Node.js testing and development. You can find plenty of resources and references that gather and summarise from blog posts, books, and other resources.

Are you interested in frontend/UI development, backend development, CI, or all of the above? You can find it here.

NocoDB

NocoDB is a no-code open-source platform to transform any database into a smart spreadsheet. It works like Airtable, but it is free and may be hosted on your server.

You may create an unlimited grid, image, form, and search, filter, and sort columns and rows from your own data, as well as create new ones.

Backstage

Keeping track of all the applications, tools, and software used on your team or organisation can be a time-consuming challenge. With Backstage, you can manage everything in one place, making it much simpler for your team to manage everything.

By using Backstage, managing thousands of software within your team or company will be much more manageable.

Saleor

A headless, GraphQL commerce platform that delivers fast, dynamic, and customized shopping experiences. You can build beautiful online stores anywhere on any device whether it’s for desktop or mobile.

It is battle-tested by big companies, is secure, scalable, stable, and provides flexible API that you may connect to any payment platform.

Warp

Warp is a Terminal application developed for modern needs. In addition to executing command lines, Warp allows you to select and cursor positioning in a manner similar to a code editor. It works straight out of the box with some of the most common Shell programmes such as “zsh”, “fish”, and “bash”.

It is currently available only for macOS only, but will soon be available for Windows and Linux.

DenoDB

DenoDB is a Database ORM for Deno. Similar to a Database ORM on other languages, it provides a unified API to interact with the database. You can create a database, and a table, define model and perform a database query.

It supports various databases including MySQL, SQLite, MariaDB, PostgreSQL, and MongoDB. It’s fully written in TypeScript that it helps you to boost productivity while minimizing the chance of error.

Cac

Stands for “Command and Conquer”, Cac is a JavaScript library for building CLI apps. It’s light-weight and contains just a single file with no other dependencies. It’s also simple yet so powerful.

Cac provides some essential features like default commands, git-like subcommands, validation, variadic arguments, dot-nested options, automated help message generation and so on.

Denon

Denon is a simple file-watcher and replacement for nodemon. It offers all the functionality you would expect, such as restarting deno projects automatically, a drop-in deno executable replacement, extensive configuration options with script support, and a configurable file watcher that watches for filesystem events and directory walking.

JanePHP

Jane is a set of PHP libraries to generate Models and API clients based on JsonSchema or OpenAPI specification. It’s an overall handy tool that will save you a lot of time when developing a Software Development Kit (SDK) for an API.

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

We will highlight some JavaScript libraries for web or mobile app development, a TypeScript learning resource, and other helpful productivity tools.

So let’s jump in to see the full list.

Unpoly

Unpoly is a JavaScript framework designed to be used with server-side web applications. It has some features out-of-the-box that are commonly needed, such as Forms, Events, Network requests, and many others that are needed to build an interactive web application.

FrankenPHP

FrankenPHP is a modern PHP Server built on top of Caddy. It’s a full-fledged web server that allows you to run PHP applications without the limitations or complexities of configuring Apache or Nginx.

Plus, it comes with all features included to run a web server such as HTTPS, HTTP/2, HTTP/3, logging, zstd, and gzip compression.

Randoma11y

Randoma11y is a color combination generator that complies with accessibility standards. The colors are generated by a “robot”, and you can also vote for your favorite color combo that will help to improve the quality of these color combinations, making them more accurate and reliable.

If you’re not sure what colors to use on your website, this is the tool you could try.

TypeRunner

TypeRunner is an open-source high-performance TypeScript compiler. It can be used as both a CLI and a library, or simply for type-checking JavaScript code.

The compiler supports interactive type debugging, which means that the user can see the inferred types in real time and fix errors on the fly, making it quite a sophisticated development tool.

StackBricks

Stackbricks is a free database-management app that works on your desktop and allows you to manage many different databases. It supports various database types such as MySQL, PostgreSQL, and MariaDB. It is available for Windows, macOS, and Linux.

Tremor

Tremor is is a simple and modular React component library to build a dashboard. With just a few lines of code, you can create a beautiful dashboard.

Furthermore, it comes with some pre-built components to display data such as charts, tables, and lists. Each component is flexible and customizable so you can fit them into your own use cases and requirements.

CanIDevTools

CanIDevTools is similar to CanIUse, but instead of listing CSS supports in browser, it lists features for the DevTools on the browser such as Accessibility, the Console, Network, and many other features. It’s pretty useful if you decide which main browser you want to use for development.

html.to.design

Figma enables you to create designs, whether it’s for a website, mobile, or any other medium. Now with the Figma plugin, html.to.design, you can convert an existing website and import its HTML into Figma to start your own designs. It’s really a time saver.

TamaGUI

TamaGUI is a complete suite of UI components. Each component is equipped with composoable APIs, size variance, and configurable themes. These make it highly customizable and allow you to build unique websites and a perfect library to build a design system.

Beginners TypeScript

This above is a TypeScript interactive course for beginners. In this course, you will be able to gain foundational knowledge and skills such as how to declare type in variables, functions, some common problems, and some challenges to find the solution. This is a perfect course if you’re just get started with TypeScript. This online course is also free!

FlashList

Creating a list is easy but maintaining a long list can be tricky and cause performance issues in your application. This is where FlashList comes in. It’s a React Native component designed to handle displaying a long list of items in your application. This will allow your application to remain performant while the user scrolls the list.

Shortcat

A desktop app for macOS that allows you to navigate the operating system just using the keyboard. It works similar to a Command Palette in Visual Studio Code and opens up a new dialog window, where you can type in and hit Enter. It enables you to operate your Mac faster and thus, boosts your productivity.

Operator Lookup

As a JavaScript developer, have you ever wondered what these symbols mean |=, &&=, and >>=? If you are uncertain, then you can find the answer in this operator lookup tool. This site explains what these operators are along with some examples of usage.

Depcheck

Depcheck is an NPM package that checks Node dependencies in your project and finds which are unused. It’s a pretty handy package to audit your projects.

Tabby

Tabby is a terminal emulator, SSH and serial client. It offers more features and capabilities than the built-in Terminal client in Windows, macOS, and Linux.

Nativebase

With NativeBase, you can build consistent UI across Android, iOS, and Web platforms. It is extensively theme-able. There are no limits on customizing your app theme and component styles. It is also a great library to build cross-platform applications.

Shoelace Style

Shoelace is a collection of professionally designed UI components. It works with all frameworks and is built with a web standard, it also works with just plain HTML, CSS, and JavaScript as well as CDNs, can be customised with simple CSS, and is also accessible.

NocoBase

NocoBase is a no-code development platform. You can build various tools like your own collaboration platform or management system in minutes without or with very little programming. If you need to create an internal tool quickly, this may be the tool for you.

Qwik Builder

Qwik is a new web framework that can be used to develop any sort of website. Qwik delivers pure HTML content and loads JavaScript as-needed. This enables it to be performant, allowing for instant page loads even on mobile devices and producing fast-loading web applications of any size or complexity.

React Flow

A React component that allows you to create interactive graphs and the editor. The editor provides a friendly UX out-of-the-box, which makes it easy to use, such as seamless zooming and panning, single and multi-selection of graph elements. It also supports keyboard shortcuts.

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

Webc

WebC is a JavaScript library that makes developing a Web Component more manageable. Not only can you define a Web Component, but it can also expand it into a basic HTML markup with web standard conventions and generate the scoped CSS of the HTML.

It’s compatible with SSR (Server-side rendering) so you can use it with some popular SSR frameworks like Next.js and Gatsby.

LightningCSS

Lightning CSS is more than just a CSS minifier. It also allows you to write next generation of standard CSS now, such as nesting, custom media queries, logical properties, and some new selectors.

It will automatically convert these features into a compatible syntax based on your browser’s target configurations. All in all, it’s like Babel but for CSS.

WhyFrame

A tool that allows you to develop in isolation. You can design each component that lives on its own, making optimizing and encapsulating issues easier without affecting other components. It’s fast, flexible, and compatible with many front-end frameworks including Svelte, Vue.js, React.js, Solid.js, and React.js.

JSONCrack

JSON makes data portable across different programming languages. Reading JSON is also easy unless when there are just too many in there. This is where JSONCrack comes in.

JSONCrack is an online editor that allows you to render the data structure into a graph, which in return will make it easier to scan and grasp the data. On top of that, you can also adjust the graph layout, share it, and even embed it on your website.

Maestro

Maestro is a software that allows you to test your mobile application. It means that you can perform test assertions and interactions such as pressing on the back button, scroll, swipe, and even taking screenshot. A must-have tool installed for every mobile developer.

Motionity

A free and open-source web application to compose and edit motion graphics for developers. It’s like Adobe After Effects with the ease of use of Canva. It has features like keyframing, masking, filters, and many more. You can download the animation as a WebM, GIF, or just an image.

Fluid Type Scale

Traditionally, we use a static font size for the website. But as the website medium to view the website, we need the ability to use font size more dynamically so the content looks good. This is now possible with just CSS, and as the name implies, this tool will make it easier to generate the CSS codes.

Bootcamp

A new official source to learn Laravel. This new guide is designed to get you started faster with building a working application with modern practice in Laravel. You can choose your path between using Vue.js or React.js. Overall, I think this is a great source for either beginner or seasoned Laravel.

StarbeamJS

A JavaScript library to add “reactivity” to your application. This Reactivity makes your applications more dynamic and feels more fluid. It’s an agnostic library that works with any front-end framework such as React.js, Vue.js, and Svelte.

Corset

Corset is a JavaScript library to add reactivity to your application without the complexity. It works similarly to jQuery in a way that it binds directly to HTML and provides an expressive CSS-like syntax. Since it works with just HTML, it’s easy to pick, fast, and it can integrate with your existing application easily.

StorySet

A collection of free illustrations that you can use on your website. It provides illustrations on various themes. Each illustration is configurable. You can customize the background and color, hide some of the properties and download it as SVG or PNG.

Iconmonstr

Iconmonstr is a collection of more than 4000 icons. Another good source for web designers. Each icon is uniquely designed. It also comes in several variations and is available in SVG and PNG. Regardless of application need, I’m pretty sure you’ll find the right icons.

FontShare

A handy online tool to generate beautiful font pairs. It’s free for both personal and commercial use. We can select the font type such as sans-serif, handwritten, or script. It even makes it easier where you can generate the font pair by the font “feel” or “personality”.

Solid Toast

A React.js library that allows you to add beautiful toast notifications. It’s lightweight, just 4kb. You can customize the content, icons, colors, and attributes. It’s compatible with SSR and provides Promise API.

Mocked API

A free online tool that provides APIs to retrieve mocked data for testing your application. You can find several types of data such as Animals, Countries, Currencies, etc.

React Awesome Reveal

A library for React.js that provides a set of animated effects, such as Bounce, Fade, Flip, Roll, Rotate, and Slide animation. You use it to add revealing animations to your components when they enter the browser viewport as users scroll the page.

OpenMoji

An open-source and free library of Emojis. It contains more than 4000 Emojis. It supports standard Emoji standards as well as custom ones. It also fully supports the Fitzpatrick skin tones scale and multiple skin tone combinations.

A perfect library if you’d like to provide Emoji selection on your website or your application..

Web Dev Simplified

A blog that highlights some updates around web development. It covers various topics, including CSS, JavaScript, HTML, React.js, Node.js, and more. This is a good source to keep up with web development without feeling overwhelmed.

Design System for Figma

A collection of Design System made in Figma from a number of popular names and frameworks on the Internet. You can find the design system of Uber, Atlassian, and even from Goldman Sachs. This is such as a hidden gem that every designers should add in the bookmark.

TS Pattern

Pattern Matching is a programming technique that allows you to compose complex conditions or data structures in a shorter and more readable expression. This technique is implemented in Haskell, Rust, Swift, Elixir and other languages. With this library, you can apply the same technique in TypeScript.

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

In this edition of the series, we’ll feature some frameworks and resources for web designers, testing tools, and a lot more. If you are a front-end developer or designer, I’m pretty sure you’ll love what we have on the list. Let’s take a look.

Testing Accessibility Library

Testing Accessibility Library will allow you to perform automatic accessibility tests for the keyboard. Aside from improving the Accessibility, it can help to evaluate the usability of your website with a keyboard and reduce the time that you’d typically use in manual testing.

3D Icons

Trends come and go, but it seems that the use of 3D elements in web design is here to stay. The 3D icons library is a collection of 3D icons that you can use for commercial and personal projects. It’s available in many file formats including Blender, Figma, Sketch, and Photoshop.

Iconer

Iconer.app is a collection of icons from popular sources such as Bootstrap, Remix, Material, Radix, and many more. On top of that, it allows you to customize the icons. You can change the color, size, stroke width, etc., and you can even select the format to download.

It currently supports several formatting including JPG, PNG, JSX, and SVG.

Lofi Wireframe Kit

This design kit consists of 100 components for wireframing in Figma. It includes common components to build both mobile and desktop applications, like buttons, input fields, and images.

I think it’s a gem if you’re a web or app designer, as it will help you manifest your next great idea.

Vue TermUI

Building a Terminal application can be intimidating but with Vue TermUI, it does not have to be. It is a library that allows you to develop a beautiful CLI with Vue and comes with web tools that you might have familiar functionality for developing the web like HMR, Bundling, and DevTools.

WebDev Patterns

A collection of patterns, code snippets, and cookbooks to optimize your website. It’s divided into different categories: Animation, Component, Layout, Theming, and Web Vitals. All this together will help you to build a website that’s fast and engaging using modern best practices.

RakkasJS

A full-stack framework that allows you to build a website with modern technology: React.js and Vite. With Vite, it offers a much better and faster development environment. It also supports SSR rendering with new React.js Suspense, and file-based routing.

I think this library could be a good contender for some of the alternatives like Next.js and Gatsby.

CMDK

This library brings a composable React.js component to create CMD + K shortcut interface that you can ss to your website. Mac users should already be familiar with the shortcut, which in some applications, will launch an interactive search, dialog, or command pallete.

Learn Vue 3: Step by Step

After years of work, Vue 3 is finally stable. In this course, Jeffrey Way has done a fantastic job covering improvements and new features in Vue 3 from top to bottom. And he’s been generous to provide this course for Free!

Pure CSS Scroll Shadow

CSS has become more powerful over the years. Not only that it’s now much easier to center the div or create a complex grid layout, you can also create an interactive effect such as creating shadow hints for both horizontal and vertical scroll. Check the article to learn how.

Indonesians Who Design

This is a website where you can find a list of Indonesians who work as designers in many different fields whether it’s UI/UX, Web, App, Typography, etc. If you’re a developer trying to find a designer, a design partner, or a company trying to scout great talent in design, you should definitely check the list.

MillionJS

A JavaScript library that offers faster Virtual DOM implementation. It’s faster compared to React.js by about 11X and only less than 1KB. It’s designed as a drop-in replacement for React.js so you can have the best of both sides. A familiar development is ergonomic with faster performance.

myOctocat

Octocat is a mascot of Github. Designers have been creating various themes and faces of Octocat in Octodex. Now, you can create your own easily with myOctocat which you can use as your profile or avatar. You can customize almost everything including the hair, skin, eyes, and all the accessories.

Breakdance

Breakdance is a new page builder for WordPress. It brings more than 100+ design components, full site editing, and supports some popular plugins like WooCommerce, ACF, and Toolset out of the box. If you still find it hard to navigate Gutenberg, maybe you can try to give this alternative a shot.

Redis Architechture Notes

This article explains how Redis works and how it compares with Memcached. Even though this has nothing to do with the front-end, the illustration in this article has done a great job that I think designers and people who are less technical can easily understand it.

Testing Library Recorder

A Chrome extension to boost productivity with setting up automatic E2E testing. As you’ve it installed in Chrome, you will find a new option under the Recorder tab in DevTools that allows you to download it as a script to use in Testing Library.

Front-end Checklist

This checklist covers things you need to know to be a front-end developer. It provides the fundamentals like HTML and CSS, provides recommendation, best practices, and do’s and don’ts when developing a website. Whether you’re new or seasoned developers, I’m sure there’s something to learn from the list.

MUI-X

Rendering a large dataset like a list of tables and directory structure can be challenging. It can have a bad performance impact on your website if it’s not done right. This is where the MUI-X library comes in. It has been designed specifically to handle lots of data along with filtering, sorting, and pagination.

Remult

Remult is a JavaScript library that provides abstraction in TypeScript for CRUD operation. More specifically, it provides REST API as the controller, the front-end client, and the database query builder.

It supports common databases like MySQL, MongoDB, and SQLite. If you’re coming from a traditional MVC framework, you should get familiar with it pretty quickly.

What’s new in PHP 8.2

This article features changes that will happen in PHP8.2. I’m just excited to see how PHP has been improving in the last couple of years that encouraging best practices and minimizing bad practices.

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

If you’re a front-end developer, I’m sure you’ll appreciate what we have on the list. This post features a new JavaScript runtime contending with Node and Deno, new libraries for state management, a new build system for JavaScript, and a lot more.

Let’s jump in to see the full list.

Bun

Bun is a new JavaScript runtime similar to Node and Deno that allows you to run JavaScript applications on the server. Bun implements most Node APIs as well as Web APIs, so we get access to the filesystem, path, Fetch API, and Websocket.

Bun is currently in beta, but it promises on performance and provides better tools that would help developers be more productive.

Jotai

Jotai is a state manager for React.js applications with a focus on simplicity. It aims to solve the common re-render issues in React.js component, plus, it’s easy to implement. You can use it as a replacement of React State Hook function, and scale it up to build a more complex application.

Rematch

Rematch is a state manager adopting similar to Redux, except without the complexity. It works out of the box, without additional configuration. It also works with any framework; not just React.js but also Vue.js and Angular, and it’s only as small as 2kb.

Bao.js

Bao is a new framework to create web applications. Built on top of Bun, it’s similar to one of the popular frameworks, Express.js. In fact, it is also modeled after it which makes it familiar and easy to switch over from Express.js.

Autoregex

Regex is a special language that’s not easy to understand because of the complex syntax. And here’s where Autoregex comes in handy. It translates back the Regex into a human readable sentence which also makes it a great learning tool to understand RegEx.

Godly Website

If you feel that websites today look all the same, you need to check out Godly Website. It collects a lot of wonderful websites with unconventional designs. A great place to find design inspiration.

Moonrepo

Moonrepo makes building JavaScript applications much more manageable. It provides a set of tools that can help you maintain consistency in your project configuration, ensure the correct version of dependency is installed, and offers utilities that make your project build more efficient and productive.

Barebones

A collection of Vue.js components, and as the name implies, they are basic components. They carry functionalities but do not comes with design constraints so it’s up to you how you’d want to style it. It’s a great library as starting point for your website application UI with Vue.js.

Wails

Wails is a framework that allows you to build a Desktop application with Go. It compiles and handles native elements such as Windows, Menus, and Dialogs that it runs as good as native-built applications. Unlike Electron, Wails does not embed browsers a browser in the application, so it will run much faster.

Awesome Guidelines

Awesome Guidelines is a collection of high-quality coding standards of various languages from various sources and companies. You can find coding standards for C, Go, JavaScript, Kotlin, PHP, Python, and a lot more. If you’d like to learn what’s the coding standard of NASA and Google, check it out!

LazyGit

LazyGit is a Git application that adds UI inside the terminal. Similar to a Desktop application, it allows you to see current status, staged files, diff, stash, and many more. It’s a perfect tool for those working with Terminal who would like some convenience.

Bud

Bud is a JavaScript build framework. It combines all the good things from Symfony Encore and Laravel Mix and is pre-configured for all the common needs like Babel, React, PostCSS, Sass, and TypeScript.

It’s also a great framework for WordPress developers with @roots/bud-preset-wordpress package that you can install to build a WordPress theme or plugin.

HTMX

HTMX is a supercharged HTML. It provides convenient access to AJAX, CSS Transitions, and WebSockets just through the HTML attributes. This allows you to build a fairly dynamic UI with simple HTML such as creating infinite scroll, tabs, lazy loading, and a lot more.

Frappe Charts

A simple, lightweight, JavaScript library to create charts. It supports several different type of charts including the Pie, the Donut, and the Heatmap and renders the chart in SVG which makes it responsive and look sharp.

You can use the library as an NPM module or simply load the JavaScript file on the page. It just works.

NextUI

A collection of beautiful UI components to build modern applications with React.js. You can find common components required for an application like the inputs, buttons, pagination, table, and grid. If you want to build an application that instantly looks good, NextUI is what you might be looking for.

Elastic UI

Elastic UI is full of inspiration. It’s the design system library from Elastic. Even though, you might not be able to apply this library on to your own application, you can definitely learn how all these components are used to build a great popular application like Elastic Search, Kibana, and APM.

VueSax

A UI library built for Vue.js. It has buttons, input, table, and all base component for a website. Built from the ground up, Vuesax provides each component with customizability that allows your web application to stay unique to your style.

Create Block Theme

It’s a new official plugin from WordPress that allows you to create a block theme. You can design your own theme using full-site editing (FSE) and export it as a theme that you can install on any other WordPress site. I think this is going to change the game in the WordPress theme fields.

Colors.js

Color.js is a handy library that allows you to do all things colors with JavaScript. You can use it to read color and create color objects. You can even use it to manipulate colors such as changing the color, lightening it, and even converting color format.

VS Code Server

VS Code is a great code editor that is really popular among developers. You can run and use VS Code in Windows, macOS, and Linux… But what if we can run it in our own server.

Microsoft has recently opened up this possibility with VS Code Server allowing you to install the VS Code backend services which host extensions, the terminal, debugging, and then access it through vscode.dev. It’s more or less the DIY version of running your own Github Codespace.

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