Fresh Resources for Web Designers and Developers (February 2024)

 Welcome to our February collection in the Fresh Resources series! As the new year unfolds, what better moment to explore new tools and resources? This edition is packed with exciting finds for both designers and developers.

We’ve got everything from a site that guides you on creating components across different frameworks, to a brand new JavaScript package repository, a tool for diving deep into color spaces, and insights on CSS specificity. Let’s dive right in and discover what this month has to offer.

Fresh Resources for Web Designers and Developers (January 2024)

Fresh Resources for Web Designers and Developers (January 2024)

It's a new year and a new month, so what better time to start learning something new? This...Read more

Component Party

Component Party offers a concise overview of web component frameworks, highlighting syntax and features through practical examples. It’s an ideal starting point for developers seeking a quick introduction before exploring specific frameworks in depth.

The coverage includes a variety of frameworks such as React.js, Vue, and Angular.

Tempo

Tempo is a compact JavaScript library designed to ease the handling of dates and times, drawing inspiration from popular tools like moment.js, day.js, and date-fns.

Unlike these, it enhances the native Date object without introducing proprietary date types, utilizing Intl.DateTimeFormat for managing timezone offsets and locale-specific formats. Its API is intuitive, focusing on date formatting, parsing, and manipulation.

JSR

JSR represents a fresh package repository initiative from the Deno team, aimed at addressing current challenges within the JavaScript ecosystem. It’s tailored for the evolving landscape of JavaScript, ensuring compatibility with modules, TypeScript, and various runtime environments such as Node, Bun, Deno, and Cloudflare Worker.

Dax

Dax introduces a collection of cross-platform shell utilities compatible with both Deno and Node.js, inspired by the well-known tool zx.

Hueplot

Hueplot is an innovative web tool aimed at enhancing your understanding of color within data via intuitive visualizations. It provides an array of plots and charts for analyzing color distribution and relationships in datasets. The tool supports various color spaces, including sRGB, HSL, OKLAB, and others, for comprehensive color analysis.

Aceternity UI

Aceternity UI is making waves with its library of micro-interactions and animations. Designed for effortless integration, these elements can be copied and pasted directly into your projects, streamlining the design and development process. It’s an excellent resource for those seeking to enrich their websites with dynamic features, all while minimizing complexity.

Kysely

Kysely is a type-safe SQL query builder for TypeScript users, offering a seamless experience with type safety and auto-completion. It’s designed with Node.js in mind but works well in other JavaScript settings, including Deno. This tool makes SQL query construction both intuitive and efficient.

Counterscale

Counterscale is an innovative, self-hosted analytics solution for Cloudflare users. It boasts easy deployment and affordability, capable of supporting up to 100k daily hits on Cloudflare’s complimentary tier. Still in its early stages, Counterscale invites users to test its features and contribute feedback.

Hurl

Hurl simplifies HTTP request testing with its command-line interface, allowing for easy execution and assessment of HTTP calls.

It supports a range of functionalities like chaining requests, capturing values, and performing evaluations on headers and body responses. Ideal for REST, SOAP, GraphQL, and other API formats, Hurl streamlines testing across various data types.

GitButler

GitButler enhances the Git user experience by simplifying the management of multiple branches. It allows for easy organization of file changes into distinct branches and their application to the working directory. With AI integration, GitButler suggests commit messages based on current progress and generates descriptive branch names, making Git operations smoother and more intuitive.

Bundown

Bundown transforms Markdown documents by allowing the execution of code in various programming languages directly within the content. This Markdown runtime and bundler leverages Bun to run TypeScript, JavaScript, and Shell scripts.

Additionally, it supports pretty-printing and syncs code across a wide range of languages, including c, php, and go, offering a versatile platform for documentation and coding.

XO

XO elevates the JavaScript development experience by enforcing a uniform coding style and early detection of common mistakes. It’s built for speed and efficiency, offering both out-of-the-box configurations and extensive customization options to suit various project requirements.

Standards

prinsfrank/standards is a pioneering PHP library that introduces PHP native enums for a variety of standards, including ISO3166 for countries, ISO4217 for currencies, and ISO639 for languages.

It simplifies the integration of these standards in projects by enabling straightforward typehinting, with regular updates from authoritative sources such as ISO and IANA.

Bruno

Bruno reimagines the API client experience, offering an innovative alternative to traditional tools like Postman. It allows for API collections to be stored in a folder on your filesystem, utilizing the Bru markup language for detailing API requests.

Its compatibility with Git and version control systems facilitates collaborative API development and documentation.

Revisions Extended

Revisions Extended enhances WordPress’s revision system by enabling scheduled updates for published posts. This plugin introduces future post statuses, streamlining the content management process for editors and writers aiming for precise timing of their updates. It’s suggested as a valuable addition to the core WordPress experience.

Waku

Waku is a React framework tailor-made for enhancing the development process of small to medium-sized projects. It leverages React Server Components to offer an alternative approach for creating marketing websites, e-commerce sites, and web applications, focusing on delivering a superior and enjoyable development experience.

Tempest

Tempest is a PHP MVC micro-framework crafted with the developer’s experience at its core. It allows for a focus on application development without the burden of framework complexity.

With its minimalistic approach, Tempest provides the fundamental components — Model, View, and Controller — in an accessible format, making it ideal for developers at any skill level.

Hydration Overlay

Hydration Overlay is a tool designed to ease the debugging of Hydration Errors by providing a visual overlay that highlights discrepancies between server-side and client-side rendering.

Ideal for developers wrestling with Next.js and React hydration mismatches, this library offers a practical solution for pinpointing and resolving render inconsistencies.

Specificity Battle

This tool is a boon for developers looking to navigate the complexities of CSS specificity. By inputting two selectors, it quickly identifies which one prevails in specificity. Such insights are invaluable for avoiding styling conflicts and enhancing the understanding of CSS specificity rules in web development projects.

Figma Checklist

The Figma Checklist emerges as an essential resource for those using Figma for design and development. Split into ‘Design’ and ‘Testing’ categories, this tool facilitates a comprehensive review of components for quality and completeness.

While it offers structured guidance, it remains flexible enough to be tailored to individual project needs, aiding in the refinement of design processes and ensuring rigorous component testing.

Handling the Business Side of Design

 One aspect of the American Dream is owning your own business. The idea of becoming your own boss, setting your own hours, and pursuing your passion is highly appealing. However, having a love for design doesn’t automatically make you a good business owner. Conversely, lacking an MBA doesn’t preclude you from starting a successful design company.

Consider the following factors if you’re thinking about launching your own small business. Read the full article for more insights.

Education and Training Beyond Design

Having a degree, certificate, or extensive training in design equips you with the skills to create impressive promotional materials across various mediums. Yet, as many have pointed out on David Airey’s blog, formal education often falls short in preparing designers for the business realities they face.

There’s a clear need for more comprehensive business education, covering areas such as:

• Diverse subjects like calculus, economics, history, and public speaking.
• Legal aspects, including contract creation.
• Insights on starting and managing a design firm.
• Marketing strategies for client acquisition.
• Customer service to attract and retain clients.

If you’re currently studying design, consider taking business courses or aiming for a minor or double major in business. For those already in the field:

• Check out business courses at your local community college.
• Reach out to your chamber of commerce for seminars that could provide business insights or networking opportunities.

Managing People and Resources

Being your own boss means taking responsibility for others, whether you’re managing a team of one or ten. New entrepreneurs often lack the funds to fill every role individually, yet there are effective strategies to navigate these challenges.

• Consider hiring freelancers: Many bookkeepers offer their services to multiple businesses on a part-time basis, managing payroll, taxes, and benefits efficiently.
• Explore outsourcing HR functions: The trend of outsourcing human resources is growing. This approach can be cost-effective, allowing you to pay for services on an as-needed basis without the obligation of full-time salaries or benefits.

Effective Marketing Strategies

In today’s economy, innovative entrepreneurs are discovering cost-effective ways to promote their businesses without the hefty expenses of past advertising strategies. The era of costly media campaigns is over, thanks to the rise of social media, which offers free avenues for company promotion.

Moreover, despite the digital age making us seem less connected physically, traditional networking continues to hold significant value.

Social Media Marketing

Creating Facebook and Twitter profiles is a quick process. However, it’s crucial to invest time in them to maximize their potential. For Facebook, ensure your company’s contact information is complete, including website and X (Twitter) links.

Upload photos of your products and team to add personality. Use status updates and tweets for engaging content like contests, sales, and events. Remember, social media should be informal yet professional. Always double-check your grammar and spelling before posting.

Personal Networking

Personal referrals often outperform traditional advertising methods such as Yellow Pages ads, especially now that consumers are more cautious with their spending and value recommendations. The more people you know, the more your business name circulates.

Engaging in community events and being proactive with networking can lead to your name being recommended by individuals who may not have directly used your services but remember you positively. Supporting local businesses and interacting with community members can foster a vibrant local economy.

Exploring New Ventures

The economic downturn and subsequent rise in layoffs have sparked an entrepreneurial spirit among many. With the instability of corporate jobs, starting your own business may now seem like a more appealing option than entering the workforce under another employer.

This shift highlights an opportunity to take control of your career path and pursue your entrepreneurial dreams.

12 Best Sublime Text Tips and Tricks

 You probably know by now that we are fans of Sublime Text. It might look like a very simple code editor, but it has a lot of hidden features underneath.

After exploring it for a while, you might be surprised to find that you can do quite a number of cool things in Sublime Text. We went in and dug around for a bit, and here are just some of the tips and tricks that we think you would like to play with.

Let’s supercharge your coding experience in Sublime Text.

Read Also:  How to Identify Code Errors in Sublime Text

1. Selection

As web developers, we frequently edit code. Below are some handy keyboard shortcuts that allow you to make different types of selections in Sublime Text.

Command + D	Select a word.
Command + L	Select a line.
Command + A	Select the entire content within the document.
Ctrl + Command + G	Select everything inside the bracket (which is useful when working with CSS or JavaScript).

Furthermore, Sublime Text allows us to select multiple lines at once, which can significantly boost our productivity. There are several ways to perform this feature:

Command	Hold the Command key and click on the lines you want to select.
Command + Ctrl + G	Select a code, line, or word first, then hit this combo to select the others with the same instances.
Command + D	Hit this key to quickly select the next code, line, or word that has the same instances as the one you are currently selecting.

See how multi-line selection works below.

2. Sorting CSS

Commonly, we do not mind how CSS properties are sorted, as CSS will give us the desired output in the browser regardless of their position. However, putting them in a particular order can make your code more organized. In Sublime Text, you can select CSS properties and hit F5 to sort the properties in alphabetical order.

You can also use a third-party plugin like CSSComb for more control over the property sorting rule.

3. Command Palette

You can quickly perform many tasks with the Command Palette, such as renaming files, setting file syntax, and inserting snippets. To show the Command Palette in Sublime Text, hit Command + Shift + P, then enter the command you intend to perform. Here are some examples.

Renaming file

Set file syntax to HTML

Insert code snippet

4. Switching Between Tabs and Projects

When working on a project, we may have many files open. In Sublime Text, you can quickly switch through these files (or tabs) with the following shortcuts:

Command + T	Lists the tabs that are currently open. Select one to go to the tab.
Command + Shift + ]	This will take you immediately to the next tab.
Command + Shift + [	This key will take you to the previous tab.
Command + Ctrl + P	Switch between the projects listed in the Sublime Text Sidebar.

5. Cross-File Editing

This feature is very useful when working with multiple files. For example, suppose you have several code blocks that are very similar and spread across different files in the project. To change these codes efficiently, you can:

1. Hit Command + Shift + F in Sublime Text. Enter the words, sentence, or lines of code that you want to change in the Find field. Pro Tip: hit Command + E to quickly place the selected code into the Find input field.
2. Specify the file names within the Where input field or add <open files> to only affect files that are currently open.
3. Enter the word or code replacement in the Replace input field, and hit the Replace button.

6. File Crawling

This feature is really helpful when editing CSS. Hit Command + R. A dialog will appear with a list of CSS selectors in the document, as shown in the screenshot below. You can search and select the selectors you wish to navigate to.

This is a more convenient way to search for a code block than using the regular Find feature.

7. Spell Checker

I frequently write in a code editor and often make spelling mistakes. If you’re like me, you can enable the spell checker in Sublime Text in this way:

Go to Preferences > Settings – User in Sublime Text, and add the following line:

 "spell_check": true,
 

8. Sidebar Enhancement

This plugin, SideBarEnhancements, brings great enhancements to the Sublime Text sidebar. Once installed, right-click on the sidebar, and you will find additional menus such as Open in Finder, New File, New Folder, Open With, and Open in Browser.

Tip: Hit the F12 key to open the file in the browser.

9. Change Sublime Text Theme

We can also change the entire appearance of Sublime Text. One of my favorites is called the Soda Theme, which can be installed through Package Control.

If the theme you intend to install is not available in the Package Control repository, you can install it manually:

1. Download and unzip the Theme package.
2. Go to Preferences > Browse Packages…
3. Put the theme folder in the Packages folder.
4. Then go to Preferences > Settings – User, and add the following line to activate the theme:

 "theme": "Soda Light.sublime-theme"
 

10. Change Sublime Text Icon

Apart from changing the theme, you can also change the icon. There are many nicely designed Sublime Text icons available on Dribbble. Here’s how you can change the icon:

1. Download one of the icons from Dribbble. Ensure that the icon comes in the .icns format, or convert it first with this tool: iConvert.
2. Run the following command in the Terminal:

open /Applications/Sublime\ Text.app/Contents/Resources/

3. Replace the Sublime Text 3.icns or Sublime Text 2.icns file with the one you downloaded.

11. Sync Setting

If you are working on multiple computers, you might want to keep and apply the same settings for Sublime Text across these computers. We can set this up with the help of Dropbox (and a small tweak).

First, run the following command in the Terminal:

 mkdir $HOME/Dropbox/sublime-text-3/
 mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"
 mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"
 

Then, run this command in the Terminal on every other computer you want synchronized with the settings that we have put in Dropbox:

 DSTPATH="$HOME/Library/Application Support/Sublime Text 3"
 DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"
 rm -rf "$DSTPATH/Installed Packages"
 rm -rf "$DSTPATH/Packages"
 mkdir -p "$DSTPATH"
 ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"
 ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"
 

Thanks to xMarekacross for the tip.

12. Clickable URL

ClickableURLs is a tiny Sublime Text plugin that is very useful when you find a bunch of URLs within your codes. It makes the URLs clickable.