Month: November 2021

In the past, the admin section of a web application tended to be built solely for functionality, with not much, if any at all, consideration for design. Thankfully things have changed. Powerful functionality and beautiful design, especially over the last few years, have been merging nicely. And with the massive rise in popularity of the Bootstrap framework, creating a beautiful and functional admin panel has never been easier.

Why would you choose to use Bootstrap at all? Well, with Bootstrap, you know exactly what you are getting. It is relatively easy to customize mobile-first framework that includes ready-made design patterns and comes packaged with a vast library of components and widgets. And perhaps more importantly, your Bootstrap build will look consistent across all screen resolutions and platforms. So it does make sense to build the dashboard or the admin panel of your web application with something that you know works well.

All of the free Bootstrap (mostly version 5) admin and dashboard templates and themes below have been pre-built to be used as a complete solution so that you can rapidly create the front-end dashboard of your web app. As well as all of Bootstrap’s handy collection of widgets, they all include many extra addons, plugins, and features (plugins for charts and graphs, calendars, file managers, and so much more). Everything you will ever need for building professional and responsive dashboards.

And on top of all of those features, these free templates have all been beautifully designed as well.

Free Bootstrap 5 Admin Templates

Star Admin 2 for Bootstrap 5 (Free)

Star Admin 2 is the new and much-improved version of the hugely popular Star Admin Pro. Now, powered by Bootstrap 5, the free template comes bundled with a multitude of layouts, widgets, components, and so much more.

Synadmin Bootstrap 5 Admin Template (Envato Elements)

The Bootstrap 5 powered Synadmin dashboard template comes bundled with over sixty HTML page templates, a huge collection of UI components (including multiple charting options), making it flexible enough to be used on any type of project.

AdminWrap Bootstrap 5 (Free)

The simple and beautifully designed AdminWrap dashboard template comes with everything you would ever need for building powerful, user-friendly web applications.

Matrix Bootstrap 5 Admin Template (Free)

Powered by Bootstrap 5, the Matrix Admin is a fairly basic dashboard template but does offer everything you need to get the backend of your web application up and running quickly.

NobleUI Bootstrap 5 Admin Template (Envato Elements)

NobleUI is a lightweight and beautifully designed Bootstrap 5 powered dashboard template that includes a huge collection of reusable UI components and widgets, including charting options (ApexChart, ChartJs, Flot, Sparkline, and more).

Xtreme Lite Bootstrap 5 Admin Template (Free)

The minimally designed Xtreme Admin is a Bootstrap 5 powered dashboard template that will allow you to display, track and manage all of your data in an efficient way. There is a Pro version available, but Lite does give you everything you need to get started quickly.

Portal Free Bootstrap 5 Admin Dashboard (Free)

Portal is a clean and modern Bootstrap 5 dashboard template that offers modularly written code, making it much easier for you to edit and change the template to suit the needs of your application.

Rocker Bootstrap 5 Admin Template (Envato Elements)

Rocker is a well-documented Bootstrap 5 admin template that comes bundled with over seventy pre-built page templates, and also includes color, light, and dark versions.

Adminator Bootstrap 5 Admin Dashboard Template (Free)

The Adminator is a free Bootstrap 5 Admin Template that boasts a clean and simplistic design and offers a vast collection of copy and paste code snippets, utilities, custom pages, components, and widgets.

Material Dashboard 2 Free Bootstrap 5 Admin Template (Free)

This free Bootstrap 5 template has been heavily inspired by the design aesthetics of Google’s Material Design. It comes with 60 pre-designed components and a multitude of pre-built design blocks making it a fantastic starting point for your next dashboard design.

Vue Material Design Bootstrap 5 Admin UI Kit (Free)

The Vue Material Design is a Bootstrap-based admin UI kit. It includes more than 500 elements, hundreds of icons, and plenty of templates and tutorials to help you design the perfect Material-inspired admin dashboard.

Free Bootstrap 4 Admin Templates

Vibe – Free Bootstrap 4 Dashboard Template (Free)

Built with Bootstrap 4, Vibe is a free React.js admin template that offers a clean interface and plenty of UI elements and components to help you create a beautiful dashboard for your application. You will find a few helpful starter page templates as well.

Amanda Responsive Bootstrap 4 Admin Template (on Envato Elements)

The Amanda Bootstrap 4 admin dashboard template features a beautifully designed corporate look and feel. It comes with a collection of starter page templates, and various charts widgets, email templates, toggle switches, time pickers, and many other components, elements and plugins.

Now UI Free Bootstrap 4 Dashboard Template (Free)

Now UI is a Bootstrap 4 admin dashboard with a beautiful color scheme, elegant typography, a vast collection of pre-designed components and widgets, and seven pre-built HTML page templates.

Flatkit Bootstrap 4 Admin Template (on Envato Elements)

If you love flat design, you will love this Bootstrap admin template. It comes with six prebuilt layout templates and all the necessary UI elements and components to create the admin dashboard of your web application.

CoreUI Bootstrap 4 Admin Template (Free)

CoreUi is a free Bootstrap 4 admin template with a simple and modern color scheme. It comes with all of the components you would expect from Bootstrap, such as breadcrumbs, accordions, buttons, code editors, and more.

Gentelella – Free Bootstrap 4 Admin Template (Free)

Gentelella is an elegant admin template that features three dashboard variations and a collection of starter page templates. You will also find various UI elements, forms, tables, multi-level menus, a set of useful extra pages, and more.

Light Bootstrap 4 Dashboard Template (Free)

The Light dashboard template has a spacious and minimal design. You will find tables, user profiles, icons, and Google Maps integration. The template is fully responsive and has been designed so that you can get the dashboard of your application up and running quickly.

AdminLTE – Free Bootstrap 4 Admin Template (Free)

The lightweight AdminLTE Bootstrap 4 admin template comes with six pre-designed skins, and includes a multitude of components, plugins, and page templates to help you quickly create a dashboard for your web application.

Free Bootstrap 3 Admin Templates

Bootflat Admin – Flat UI Bootstrap 3 Admin Dashboard (Free)

Bootflat Admin is an open source flat dashboard template. It’s based on Bootstrap 3 and it comes equipped with numerous templates and UI elements that will help you design a beautiful and colorful admin interface.

Bracket Bootstrap 3 Admin (on Envato Elements)

Bracket Bootstrap Admin is an admin and dashboard template with a corporate look and feel. It comes with starter pages as well as various charts, email templates, toggle switches, time pickers, and many other elements.

Startmin – Open Source Admin Dashboard Template for Bootstrap 3 (Free)

Startmin is an open source admin dashboard template based on Bootstrap 3. It features a modern design and comes with charts, tables, form elements, and a useful set of starter pages.

Admin.io Bootstrap 3 Admin Template (on Envato Elements)

If you’re looking for a Bootstrap 3 admin dashboard template with material design, look no further than Admin.io. This dashboard template also includes vector maps, flowcharts and graphs, icons and styling.

Paper Dashboard – Free Bootstrap 3 Admin Template (Free)

Paper dashboard is a clean and minimal admin template based on Bootstrap 3. The template comes with 16 different components, 4 customized plugins, and 4 example page templates.

SB Admin 2 – The Original Free Bootstrap 3 Admin Theme (Free)

The SB Admin 2 dashboard template comes with an elegant, corporate design. It comes packaged with tons of UI elements, various charts, forms, tables, and a set of demo pages that you can use as a starting point.

Lumino Free Bootstrap Admin Template (Free)

The Bootstrap 3 Lumino dashboard template has a fresh and clean design. It comes with dozens of widgets including forms, charts, UI Elements, panels, alerts, tooltips, menus, and much more.

Klorofil Free Bootstrap 3 Admin Template (Free)

The Klorofil admin template features a clean and professional design. It comes loaded with all the necessary page templates, UI elements, and components for creating any type of dashboard design.

Free Bootstrap 2 Admin Templates

RDash Bootstrap 2 AngularJS Admin Dashboard (Free)

RDash Angular has been built on Bootstrap 3 and Angular JS. It comes with a nice set of UI elements, tables, and a responsive, colorful design. It’s a great choice if you need a straightforward, simple interface.

Clean Dashboard Responsive Bootstrap 2 UI Theme (Free)

As the name suggests, the Clean Dashboard template has a clean design. The Bootstrap 2 dashboard template includes several unique UI elements that aren’t usually included in the Bootstrap package.

The post 25 Free Bootstrap Dashboard & Admin Templates appeared first on Speckyboy Design Magazine.

These days, no website should go without at least some basic social media integration. If you’re a content creator, enabling readers to share various services is a must. But you can also go beyond just the basic share buttons.

You might even want to automate the process of sharing that same content on your own social accounts. Then there are the methods for enabling social media login, commenting, and analytics.

If your website is powered by WordPress, adding this type of functionality couldn’t be any easier. Some plugins cover everything mentioned above and more.

Here are some outstanding free WordPress plugins that run the gamut of social media integration:

Smash Balloon Social Photo Feed

Photo galleries are a popular feature for many websites. But, if you’re already on Instagram, why reinvent the wheel?

Smash Balloon Social Photo Feed is tied to your Instagram account. Set it up and the plugin will display your feed as an attractive gallery. And it also brings back oEmbed functionality – something that had previously left WordPress core. The pro version offers advanced features, such as the ability to display hashtag feeds and image lightboxes.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

If you run an online community or membership website, users will have to fill out yet another registration form – and keep track of one more account. But with WordPress Social Login, you can enable the use of their social media accounts instead.

The plugin integrates with all the major social media networks. In addition, it works with popular WordPress plugins such as BuddyPress and WooCommerce.

Flow-Flow Social Feed Stream

Want to combine all of your social media posts into a single feed? Flow-Flow Social Feed Stream can make it happen. It works in conjunction with the “big four”: Facebook, Instagram, Pinterest, and Twitter.

This can be a server-intensive process. That’s why the plugin utilizes AJAX and caching to speed things up. You’ll also find post-share counts, mobile compatibility, and plenty of design settings. If you’re looking for even more social networks for your feed, the pro version has you covered.

AddToAny Share Buttons

AddToAny Share Buttons is one of those plugins I find myself turning to over and over. It provides an easy-to-use and highly customizable way to add your basic social sharing icons.

Place them directly into your template or create a floating share bar. You have access to virtually every social media platform (over 100 in all), and it integrates with Google Analytics. Use the included icons or your own.

Jetpack

Indeed, with over 3 million active installs, Jetpack is one of the most widely used plugins out there. And since you may already have it installed, it’s worth mentioning that there are some powerful social media tools built right in.

Besides adding social sharing buttons, you can also automatically post your content to Facebook, Twitter, LinkedIn, and more through their Publicize feature. Your readers can also use their WordPress.com, Twitter, or Facebook accounts to comment on your posts. Who knew?

WPSSO

WPSSO is a plugin that works behind the scenes to make sure your WordPress website contains valid Open Graph and Schema Markup, among other things. This helps ensure that when your content is shared on social media, it’s properly read by services like Facebook, Pinterest, and Twitter. For example, this information will make sure that Twitter Cards grab the right images, etc.

Even more advanced features are available in the Pro version of the plugin.

Facebook for WooCommerce

If you’re running a WooCommerce shop, the free Facebook for WooCommerce plugin will help you harness the power of the popular social media network. Integration with Facebook Ads provides conversion tracking, optimization, and remarketing.

But you can also create a Facebook store that connects your WooCommerce products directly to Facebook. You can list your entire catalog on Facebook. And, when you make changes to products, they will automatically sync with the social network.

Blog2Social: Social Media Auto Post & Scheduler

Blog2Social is a suite of tools to make automatic posting of WordPress content to social media work on your terms. It connects to your Facebook, Google+, Instagram, Reddit, Twitter or other social profile and lets you customize messages, hash tags and more for each service.

It’s also great for re-sharing older posts. The Premium version features advanced scheduling, allowing for more than one concurrent profile on a specific network and more.

BONUS: Scriptless Social Sharing

Minimalists and speed demons, rejoice! Scriptless Social Sharing provides an absolute barebones version of social sharing buttons. No JavaScript and no increased load times.

The plugin claims to build a set of links and can be displayed as simple icons with or without labels. Accessibility is also ensured – even if you choose not to show labels on the included icons. Frankly, I’m scared scriptless.

Becoming Fully Socialized

The ways and reasons for integrating social media into your WordPress website have grown tremendously. It’s no longer a matter of just helping users share your content (although that’s still an important piece of the puzzle).

Now, it’s also about ensuring that the social networks you care about can properly read your content. And, when users do share, you’ll want some data to see how it’s working out. Beyond that, many social network integrations add a layer of convenience for users.

With that in mind, it’s important to consider both your needs and those of visitors to your site. Choose the functionality that will make the most impact. With the plugins above, you’ll be up and running in no time.

The post 8 Powerful Plugins for Integrating Social Media into WordPress appeared first on Speckyboy Design Magazine.

I like to think of the typical WordPress website as a collection of parts. Themes, plugins, and custom code can be combined to power virtually any type of site.

But, in most cases, these various pieces don’t necessarily work together. That is, they each serve their own purpose independently of one another. Unless they’re tied into the same ecosystem (a WooCommerce extension, for example), they can usually be changed without causing a domino effect.

That has both positives and negatives. On the plus side, it’s possible to add or remove functionality at any time. But it also means that getting things to work in tandem can be difficult.

It’s a challenge for developers. There are many scenarios where you may want user actions in one plugin to also trigger a response in another. Unless these features are intentionally built into a plugin, it may require building that functionality from scratch.

That’s where the power of automating WordPress comes into play. There are now tools specifically designed to trigger a chain reaction among multiple plugins and third-party services. Best of all, they can be configured with relative ease.

If that sounds like something that could change your life (or at least your website), read on! We’ll introduce you to some WordPress automation tools and basic examples of what they can do for you.

WordPress Automation Plugins

The first step involves choosing a WordPress automation plugin. This will serve as the glue that links your site’s various plugins and services together.

There are a couple of compelling options we’ll focus on. Each has a free version that includes plenty of possibilities. If you’re looking for something more robust, commercial versions provide advanced features and wider compatibility.

Before you choose, be sure to review what’s included. While both options have similarities, there may be some key differences that will determine the best fit for your situation.

AutomatorWP

AutomatorWP comes loaded with integrations for popular plugins such as WooCommerce, BuddyPress, Gravity Forms, LearnDash, and Restrict Content Pro – among many others. In addition, you can tie in with service providers like HubSpot, Twilio, Zapier, and Zoom.

Note that integrations are limited on the free version of the plugin. Premium add-ons are available, which can be purchased individually or as part of a package deal. They expand upon the types of tasks (a.k.a. “triggers”) available in your automation workflow.

Uncanny Automator

In addition to the plugin integrations listed above, Uncanny Automator works with the likes of Easy Digital Downloads, Elementor, MemberPress, and The Events Calendar. Third-party services include Facebook, FluentCRM, and Twitter.

The free version includes over 100 automation triggers and actions. More are available via the pro version. Note that there is no a la carte option– you’ll need to buy the pro version to access the advanced functionality.

Creating a Few Basic Automations

Now that we know a bit more about both AutomatorWP and Uncanny Automator, it’s time to put them to work. We’ll use them to create a couple of automations that reflect common use cases.

But first, a little background on how things are put together.

How Does It Work?

While each plugin uses slightly-different terminology, the process for adding automation to your website is essentially the same.

Both have a similar back-end UI for creating automated functionality. AutomatorWP calls them “automations,” while Uncanny Automator refers to them as “recipes.” It is possible to have multiple automations/recipes on your site.

Either way, these configurations have two components:

Triggers
A trigger is the initial step in the process when a user performs a specific task. For example, common triggers could be when a user enters a comment on a blog post or purchases a product. Triggers can be set up for either logged-in or anonymous (logged-out) users.

Actions
An action is what happens after the trigger has been completed. Let’s say a user has joined a BuddyPress group on your website. You could create an action that automatically emails them a welcome letter or adds them to a mailing list.

It’s also worth noting that a given automation/recipe can contain multiple triggers and actions. In some situations, you can even set a sequence for them.

Example #1 (Uncanny Automator): When a Customer Purchases a Specific WooCommerce Product, Add Them to a BuddyPress Group

Our first example will tie both WooCommerce and BuddyPress together. When a customer purchases the “Beanie” product from our fictional store, we’ll also add them to our “Fashion Forward” BuddyPress user group.

We’ll use Uncanny Automator to set it up. Here’s how we did it:

1. Inside WordPress, navigate to Automator > Add New.

2. Uncanny Automator will ask you to select a recipe type. In this case, we’ll want to choose “Logged-in users.”  Click on “Confirm”.

3. Give your recipe a name – in this example, we went with: “Add Beanie Buyers to the Fashion Forward BuddyPress Group.”

4. Under the “Logged-in triggers” area, click on WooCommerce.

5. Now, you’ll see a list of possible triggers. Choose: “A user completes, pays for, lands on a thank you page for an order with a product.”

6. Next, Uncanny Automator will ask for a Trigger condition. Select “completes” and click on “Save”.

7. Here, we’ll choose the product we want to target. From the list, select “Beanie” and click on “Save”.

Now that our trigger is set, it’s time to move on to the Actions portion of the recipe.

8. Click on “Add action”.

9. From there, click on BuddyPress.

10. Select “Add the user to a group” from the action list and click on “Save”.

11. Also, be sure to change the status on the upper right of the page from “Draft” to “Live”.

When completed, the recipe should look similar to the image below.

Example #2 (AutomatorWP): When a User Submits a Gravity Form, Create a New WordPress User

Our fictional website has a technical support form (powered by Gravity Forms) that users can submit to get help. If that user doesn’t have an account on our site, we can use AutomatorWP to create one for them.

This automation requires us to know the ID numbers of the fields in our Gravity Form. That can be found by clicking on specific fields within the form editor’s UI.

1. Inside WordPress, navigate to AutomatorWP > Automations. Once on the Automations screen, click on “Add New Automation”.

2. AutomatorWP will ask you to select the automation type. Select “Anonymous” and click on “Confirm”.

3. Give your automation a name – in this example, we went with: “Tech Support Form Entry Creates a New User”

4. In the Triggers area, click on Gravity Forms.

5. Choose “Guest submits a form” from the list of triggers. By default, the trigger will work with any form on our site. To change to a specific form, we clicked on “any form” and selected ours (Technical Support) from the list. Click on “Save”.

Now that our trigger is set, it’s time to move on to the Actions portion of the automation.

6. In the Actions area, click on “New user.”

7. We can now fill in portions of the new user’s profile with fields from our form (via the Guest submits a form action). As we mentioned, this requires us to know the ID number for the various fields. In this case, we have fields for the user’s first and last name, along with their email address.

Our form’s Email field (ID: 2) will be used to populate both the Username and Email fields in the user profile.

For the user’s name, we’ll use First Name (ID: 5) and Last Name (ID: 6) from the form.

8. There are a few more options within this action we’ll want to address:

The default user role is “Subscriber,” but we can change that in the Role setting if needed.

We’ll turn on the Send User Notification setting. This will send an email to the new user and provide a password reset link.

Then, we’ll set What to do if the user already exists: to “Do not run the actions”.

9. Click “Save” to save the new automation action.

10. Finally, click “Save & Activate” to put the automation to work.

When completed, the automation should look similar to the image below.

Making WordPress Plugins Work Together

WordPress automation plugins can turn an otherwise time-consuming process on its head. With just a few clicks, it’s possible to create some seriously useful functionality.

And while some of the more advanced options require commercial software, it may be well worth the investment. Think of how much time and effort it would take to create these features from scratch. The convenience alone is worth the price.

Finally, there’s an easy way to make your site’s WordPress plugins work together. Experiment and see how it can help improve your workflow.

The post The Power of Automating WordPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=756

(Guest writer: Amelia Harper)

Though it may look like a trivial element, however, choice of fonts influences the success of your web design. A suitable typeface helps maintain the UI’s overall consistency and makes the website look aesthetically satisfying. It also increases the website’s readability for a good user experience.

Choosing the fonts depends on the purposes and tone of your website, but if you are confused, or you do not have enough knowledge about how to select the correct fonts for web designing, don’t worry; this short and interesting guide contains the key points for you to choose the correct fonts.

So, just take a look at this interesting and helpful guide based on the tips shared by experts with the ten important things to consider before selecting the fonts for web designing.

Things to consider when choosing fonts:

Communications play an important role in web designing for establishing a good connection between the website and the users. Communication refers to the textual part of the website where good typography makes the reading seamless for the users, while bad typography turns users off.

Here are 10 key points that can help you choose the best fonts for web your web design for better readability and aesthetics.

1. Limit the number of fonts

If you use more than three different fonts for the same website, then your web design may turn out to be shapeless and unprofessional because the excess of type sizes and styles in one website can ruin its layout.

So, for a good website, you must have to limit the number of fonts to a minimum of 2 or 3 typefaces.

2. Use the standard fonts

You can access a lot of interesting standard fonts like Gotham, Garamond, Arial, and Roboto on the font embedding services like Google Fonts and Adobe Fonts (Typekit).

These fonts can give your website a fresh and professional look. These are also good for increasing readability for users, branding purposes, and providing a good user experience.

3. Type of font family

Try to opt for a versatile font family. Some font families like Gotham font free, Garamond, Open sans, and Yellowtail are super due to their amazing versatility that allows web designers to work with more freedom having a lot of options.

4. Use attractive themes

The theme of a typeface is a predefined combination of size, color, and style of the text that can be easily applied to the selected text.

It is a set of formatting choices, including effects, colors, and adjustment options for making your website more attractive to increase site users’ interest.

5. Set line length

The length of the line really matters. You can visit any professional website to check the limited number of characters used in each line.

The correct number of characters used in each line always increases the readability of the website. According to the Baymard Institute, you should have around 60 characters per line if you want a good reading experience.

6. Use a font that’s good for multiple sizes

The users may visit your website using different devices with different screen sizes, so you have to choose a suitable font for both small and big sizes and resolutions.

You should choose a font that is legible in multiple sizes because the extreme number of fonts can wreck your site and will not maintain readability and useability.

7. Avoid using similar fonts

Using similar fonts can make it easy to confuse the same letterforms. So be careful when choosing a font and make sure that it uses different contexts that will not cause any issue for the site users.

8. Avoid using all caps

Using ALL CAPS may be good for the text such as titles or logos. But for the body text you should never use all capital letters. Otherwise, it may be read as if someone is shouting out that text.

9. Do not use less spacing between the lines

In typography, you should not decrease the spacing between the lines, but you have another good term to use that is leading. By increasing the leading, you can increase the vertical space between the lines. Leading should be 30 % more than the character height, which is good for website viewers.

10. Use enough color contrast

Try to use different colors for text and background because it will make your website more attractive, and it will not let the user leave the site.

The small and large color contrasts should have the ratio of 4.5:1 and 3:1, respectively, that most professional designers use for web designing.

Conclusion

So, these were some key points you should consider when you’re selecting a font for your website. By following these key points, you can create a professional website that is seamless to read and aesthetically pleasing.

(This guest post is written by Amelia Harper for Hongkiat.com. Amelia is a professional graphic designer and writer. She has experience of 15 years experience in graphic design and a long stint of freelancing in Sydney and London. She relished the challenge of joining the international design school in New York City and her aim to introduce everyone to graphic design. She likes to write about graphic design, typography, and entrepreneurship.)

The post A Guide to Choose Fonts for Your Web Design appeared first on Hongkiat.

Being a web developer means constant learning as the field keeps evolving with new updates coming in every other day. Especially when it comes to HTML, CSS, and JavaScript, there’ll always be some new tools and materials we can learn from.

In this round of the series, we’ve gathered various types of resources for web developers. These include some handy tools, learning materials to brush up your skills in web development, and some PHP as well as JavaScript packages.

Without further ado, let’s see the full list.

Awesome CLI Apps

Command Line Interface (CLI) is powerful, fast, and allows you to automate tasks that would be slower or not possible at all if you do with its UI counterpart.

This is the list of all the available CLI applications – from a CLI to retrieve football score and download a Youtube video to interact with Facebook and Spotify and many other things.

TerminalsAreSexy

On this platform, you can find a list of Terminal applications such as Bash ZSH, and Fish, etc. editor applications like VIM, and emacs and other types of editors, package managers, plugins, and a list of community sites.

If you’re looking to learn more on using Terminal and CLIs, you should bookmark this site as a comprehensive learning resource.

Charts Blocks

A plugin to insert charts intuitively in the WordPress block editor with just a couple of clicks. The plugin supports several types of charts including the Bar, Line, Pie, and Doughnut chart.

Laravel Prose Linter

A Laravel package to check the textual content on your Laravel application. It can check translations, typos, slang, and can suggest a better writing style. It’s a quite unique linter actually.

Radar

An app that allows you to put together different types of real-time data that you’d like to monitor in one single place. You can add, for example, the Bitcoin price, Twitter follower count, currency exchange, AdSense earning, and a lot more.

Learderboard Performance

A tool to benchmark across several different websites to compare their performance. It utilizes Lighthouse under the hood and will generate not only the LCP and FCP but also the accessibility report and the carbon footprint. It’s a great tool if you need to monitor how other websites are doing.

Astro Build

A modern framework-agnostic tool to build a static site. You can use, your favourite framework like React, Vue, Web Components, or just plain old HTML+CSS while Astro will do all the work to compile all these components into a fast static site.

IconVG

IconVG is Google’s initiative for alternative format for simple small graphics like icons, logos, and emoji which is commonly used on the web. It’s up to 3x smaller compared to SVG and much smaller compared to PNG.

At the time of this writing, this format is experimental; nonetheless, it’s quite exciting to see how this format would be adopted in the future on the web.

DaisyUI

A UI kit built on top of Tailwind CSS. What’s unique about DaisyUI is the theme collection. It provides a number of options to choose from as your UI persona besides the traditional dark and light theme.

You can, for example, select the “Retro” theme to change the UI to old-looking colors or “Luxury” to make it more classy.

Mobile Palette

If it’s been hard to find the right color combination for your mobile app, this handy web application may help. Simply select the color base, it will automatically generate a nice color scheme for the mobile UI.

Boring Avatars

As the name implies, this is a tool to create an avatar image, a boring one. The tool generates the avatar based on the combination of pattern, colors, and usernames.

It provides 6 types of appearances, 2 shapes, and 3 sizes to create an avatar. You can copy the generated SVG or use the URL, for example:

https://source.boringavatars.com/marble/120/Jon%20Doe?colors=264653,2a9d8f,e9c46a,f4a261,e76f51

MoneyPHP

Dealing with currency can be tricky, and this is a PHP library that aims to make it easy. It allows you to do addition, subtraction, and comparison. You can do advanced stuff like calculating the ratio, converting currency, and formatting.

N8N

A tool for workflow automation without needing to code. It can connect to many services like Github, Slack, Google Spreadsheet, Dropbox, and many more. A great alternative to IFTTT and Zapier, N8N is free and open-source, and you can run it on your own server.

30 Seconds of Code

A collection of tips and code snippets for some common problems in programming and web development. It covers JavaScript, Python, React, and Git.

In the collection, for example, you can find several examples of algorithmic operations, math, dealing with Browser APIs, arrays, objects, and some practical examples like converting JSON to CSV.

HashID

A library that allows you to generate short, unique, and non-sequential ID. The ID would be like Vz5prKnEoo. It looks similar to an ID of a Youtube video. The library is available in many different languages including PHP, JavaScript, Ruby, Python, Swift, and many more.

DevToolsTips

Another useful site to bookmark, DevToolTips contains a lot of tips and tricks to use the DevTools. It covers DevTools of Chrome, Firefox, Edge, and even Safari. I’m sure you’ll find little tricks that you’ve never known before.

roave/no-leaks

A PHPUnit plugin to detect memory leaks in your tested codes. A great tool to make sure that your code won’t cause to exhaust memory when deployed to production.

Coffee with Charli and Shopify: Scaling Systems

An interesting talk in Coffee with Charli episode by Figma. This episode gives you a glimpse of how Shopify creates a design system that scales and handles the challenges.

Plow

A performant CLI for benchmarking web requests. It comes with a web UI and terminal that you can use to see how the benchmark progress in real-time.

The CLI accepts a number of options to emulate the request for the benchmark such as the number of concurrencies, the number of requests, duration, and the method request.

Tinywind

A small collection of components built with built-in Tailwind CSS classes. Each component is simple, with no additional or superfluous styles. It’s showing a great example of what we can build with Utility classes and HTML.

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