Weekly News for Designers № 615

DOOM Rendered via Checkboxes – Check out this playable version of the classic game recreated with checkboxes.
Example from DOOM Rendered via Checkboxes

In Web Design, Easier Doesn’t Always Mean Better – Why products that promise an easier experience may not be the best option.
Example from In Web Design, Easier Doesn’t Always Mean Better

WebVitalsRobot – Analyze your website and be alerted when its Core Web Vitals scores go down.
Example from WebVitalsRobot

CSS is Going Gosh-Darned Hog Wild, I Tell Ya What – A look at new CSS features that are examples of progress and innovation.
Example from CSS is Going Gosh-Darned Hog Wild, I Tell Ya What

Redesigning PowerToys for Windows 11 – How the PowerToys project adapted to Microsoft’s latest OS.
Example from Redesigning PowerToys for Windows 11

Building a multi-select component – How to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.
Example from Building a multi-select component

8 ASCII Artwork Snippets That Utilize CSS & JavaScript – How old-school ASCII artwork is being super-charged by the latest web technologies.
Example from 8 ASCII Artwork Snippets That Utilize CSS & JavaScript

futurecoder – This free tool will help you learn Python from scratch.
Example from futurecoder

replace-jquery – A library that locates jQuery methods in your project and provides vanilla JS alternatives.
Example from replace-jquery

25 Quirky & Highly Creative Free Fonts for Designers – These free fonts may not be for everyone, but they will undoubtedly help get your creative juices flowing.
Example from 25 Quirky & Highly Creative Free Fonts for Designers

Free iPhone 13 Mockup – Download this collection of 30 high-quality mockups for Apple’s flagship phone.
Example from Free iPhone 13 Mockup

The Types of Freelance Design Clients You Should Avoid – Why it will always cost you more to maintain a bad client than it’s worth.
Example from The Types of Freelance Design Clients You Should Avoid

iconsax – A collection of 1,000 icons, featuring six different style variations.
Example from iconsax

Smart CSS Solutions For Common UI Challenges – Learn how to solve common problems with modern CSS.
Example from Smart CSS Solutions For Common UI Challenges

20 Beautifully Designed Coming Soon Pages for Inspiration – Get inspired and create anticipation for your projects with these outstanding coming soon pages.
Example from 20 Beautifully Designed Coming Soon Pages for Inspiration

CSS background patterns – Find your new favorite background with this free CSS generator.
Example from CSS background patterns

CSS Nesting, specificity and you – How native CSS nesting will impact your workflow.
Example from CSS Nesting, specificity and you

Focus – A collaboration platform for designers, developers and product teams, directly within Adobe XD.
Example from Focus

The post Weekly News for Designers № 615 appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

The 10 Best Free One-Page Themes for WordPress in 2021

When you’re just getting started with your business, you might not have a lot of information for a full-featured, multi-page business website. If that’s the case, a one-page WordPress theme is exactly what you need. A one-page website will make it easy to share important information about your business and even provide your visitors with a better experience as they won’t have to click through multiple pages.

You don’t have to spend hours searching for the perfect one-page WordPress theme, though. We’ve done the research for you and compiled the best free one-page themes for WordPress in this collection.

Shapely – One Page WordPress Theme (Free)

The Shapely theme is a versatile WordPress theme that’s suitable for a variety niches. The theme has plenty of sections to showcase your skills, portfolio, testimonials, and more. You can also add parallax sections which are perfect to add a call to action.

Griddr – Animated Grid Creative WordPress Theme (Envato Elements)

The Griddr is a perfect choice if you want to stand out from the competition. The theme has stunning animations and a responsive, grid-based design. Griddr comes complete with portfolio, team, and various blog layouts.

Griddr Animated Grid Creative wordpress theme one-page single page scroll

Illdy – One-Page WordPress Business Theme (Free)

The Illdy theme is a perfect choice for small businesses and startups looking to get online. The theme has several sections for showcasing company history, sharing past projects and skills, and displaying testimonials.

Illdy free wordpress theme wp responsive one-page single page scroll

Pixova Lite – Customizable One-Page WordPress Theme (Free)

Try the Pixova Lite theme if you want your website to have a stunning parallax effect. The theme is fully responsive and offers a plethora of customization options.

Pixova Lite Customizable free wordpress theme wp responsive one-page single page scroll

Catch Fullscreen – One-Page WordPress Theme (Free)

The Catch theme is a perfect one-page theme for bloggers and business owners. It comes with features such as header media, featured content, featured slider, several layout options, portfolio, testimonials, and more.

Catch Fullscreen free wordpress theme wp responsive one-page single page scroll

The Agency – Creative One-Page Agency WP Theme (Envato Elements)

If you’re looking for a perfect one-page theme for your creative agency, look no further than The Agency theme. Not only will you be able to share all the important information about your company but you will also benefit from responsive and customizable design.

The Agency Creative agency wordpress theme one-page single page scroll

FreeBook – Ebook Landing Page WordPress Theme (Free)

The FreeBook theme is perfect if you need to promote your upcoming book release. Share snippets from the book, reader testimonials, and invite visitors to buy the book or sign up to get it.

FreeBook Ebook Landing Pag free wordpress theme wp responsive one-page single page scroll

LandingSumoWP20 – One-Page Landing Page Theme (Free)

Consider the LandingSumoWP20 theme if you want a one-page theme that’s easy to customize. The theme comes with an easy to use drag and drop page builder and plenty of customization options.

LandingSumoWP20 landing free wordpress theme wp responsive one-page single page scroll

Fagri – One Page WordPress Theme (Free)

The Fagri theme is a great choice if you’re looking for a one-page WordPress theme with WooCommerce integration. On top of that, the theme is highly customizable, responsive, and optimized for SEO and fast loading times.

Fagri free wordpress theme wp responsive one-page single page scroll

Cimol – One-Page Portfolio Theme (Envato Elements)

If you need a one-page theme with portfolio options, the Cimol theme is for you. It includes a drag and drop page builder, several premade header and footer layouts, and predefined blog templates.

Cimol portfolio wordpress theme one-page single page scroll

One Page Portfolio WordPress Theme (Free)

One Page Portfolio is creative multi-purpose WordPress theme.It’s clean and modern and allows you to showcase your past projects and share your knowledge in style.

portfolio free wordpress theme wp responsive one-page single page scroll

BeOnePage – One-Page Creative WordPress Theme (Free)

The BeOnePage theme is perfect for designers, artists, photographers, illustrators and any other creative freelancer. You will find sections that allow you to showcase your skills and past projects as well as display testimonials from past clients.

BeOnePage free wordpress theme wp responsive one-page single page scroll

Parallax One – One-Page Business Theme (Free)

The Parallax One is a perfect choice for a one-page business website. The theme is fully responsive and easy to use, on top of being SEO-friendly and translation-ready. It also includes plenty of customization options to make this theme your own.

Parallax One business free wordpress theme wp responsive one-page single page scroll

One-page WordPress themes are perfect when you don’t need to share a lot of information about your company and when you want a simple theme that loads fast. Choose any one-page theme for your WordPress website from this list and get your site up and running in a matter of hours.

The post The 10 Best Free One-Page Themes for WordPress in 2021 appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

30 Fantastic Branding Identity Mockup Templates for Photoshop

Branding isn’t just what you do. It’s also how you present yourself. So when you’re creating your next branding strategy for your own products or clients, it’s important to take visuals into account.

Yes, you could create a few versions of the branding materials and call it a day, letting your client pick the ones they like the most. But let’s be real: it’s one thing to see your design on a computer screen, and it’s another to see it in real life.

What would your design look like on stationery? Would the logo fit on the pen your clients are planning on giving away to their own customers? Does the business card carry the weight of expertise, backed by professional design and structured information?

If you’re a designer, you know how much a single branding identity material can say. It’s a game-changer. So the next time you prepare branding identity materials, look into mockups.

Realistic representations of what your designs would look like in 3D and when placed in various settings, branding identity mockups help you assess your own designs and convince your clients.

From business cards and coffee cups to stationery and contextual mockups, there’s something for every project you’re passionate about in this beautiful collection of branding identity mockup templates for Photoshop.

You might also like our inspiring collection of beautifully designed brand presentations.

Craft Branding Mockup Templates (Photoshop PSD)

Natural and versatile, this craft branding mockup template set lends itself perfectly to your artistic vision. You’ll get 10 different mockups to create a professional stationery branding kit in Photoshop; from envelopes, to business cards. You can completely adjust colors, backgrounds, and shadows to get beautiful, photo-realistic results.

Corporate Identity / Branding Mockup Templates (Photoshop PSD)

Simple and professional, these branding identity mockup templates are perfect for companies and corporations. You can pick from 3 different styles for phone, envelope, business card, and other mockups. You can hide the ones you don’t want, and easily win over your audience with a photo realistic presentation!

Corporate Identity Branding Photoshop PSD Mockup Template

Corporate Identity Branding Mockup Templates (Photoshop PSD)

Minimalist and incredibly professional, these isometric corporate branding identity mockups for Photoshop are perfect for B2B audiences! Composed of crucial mockups such as stationery, business cards, small boxes, and envelopes, this set offers a simple way to showcase your design. Add it to your branding toolkit, and wow your clients!

Corporate Identity Branding Photoshop PSD Mockup Template

Coffee Cup & Business Cards Mockup Templates (Photoshop PSD)

There’s nothing like the smell of coffee in the morning. Evoke that feeling in your clients with this beautiful coffee cup and business cards mockup template set! It’s easy to customize both the colors and designs of business cards, coffee cups and bags, and sugar packets.

Coffee Cup Business Cards Photoshop PSD Mockup Template

Colorful Stationery Branding Mockup Templates (Photoshop PSD)

Elegant and sophisticated, this stationary branding mockup template set is perfect for your next presentation. Pick from various elements; from standard branding mockups such as business cards and letterheads, to leather files and CDs. You’ll also get 5 different PSD scenes – there really is something for everyone!

Colorful Stationery Branding Photoshop PSD Mockup Template

Stylish Stationery Branding Mockup Templates (Photoshop PSD)

Feminine and elegant, this set of branding identity mockups is perfect for highlighting your stationery designs. Choose from 3 PSD scenes featuring elements such as: envelopes, jewel cases, CDs, brochures, and more. You can easily customize the mockups and change the background in Photoshop to get beautiful and photo-realistic results.

Stylish Stationery Branding Photoshop PSD Mockup Template

Blank Corporate Identity Set Mockup Templates (Photoshop PSD)

If you want your branding identity to shine, choose this corporate identity mockup set. With plenty of elements (which also include lanyard straps, flash drives, lighters, and more), you can make sure that your design fits your clients’ needs. Easily add your work in Photoshop, and delight your audience!

Blank Corporate Identity Set Photoshop PSD Mockup Template

Coffee Cup Mockup Featuring Sugar Packets & Business Cards (Photoshop PSD)

Pull your audience into the atmosphere of your designs with this adorable branding identity mockup template set. Featuring two paper cups, sugar bags, and business cards, you’ll get everything you need for simple branding presentation! And the professionally-lit and set scene promises beautiful, photo-realistic results for your presentation.

Coffee Cup Featuring Sugar Packets Business Cards Photoshop PSD Mockup Template

Minimal Stationery Branding Mock-Up (Photoshop PSD)

Photo-realistic and elegant, this minimal stationery branding mockup template comes with everything you need to share your vision with the world. From flash drives and business cards, to letterheads, and pens, you’ll get plenty of options to showcase your design. You can even edit background textures and colors!

Minimal Stationery Branding Photoshop PSD Mockup Template

Corporate Branding Identity Mock-ups (Photoshop PSD)

Perfect for tech brands, this corporate branding identity mockup set for Photoshop has everything you need: 8 photo-realistic PSD scenes, elements such as business cards and letterheads, as well as shopping bags and diaries with decorative elements. Mix and match to get beautiful results that seamlessly combine professional and practical!

Corporate Branding Identity Photoshop PSD Mockup Template

Black & Yellow Corporate Identity Set Mockup Templates (Photoshop PSD)

Make your branding stand out with this corporate branding identity set! It’s a perfect fit if you’re working on a corporate project, and want to showcase bold logos in colors complementary to black and yellow. Add your branding to mugs, lanyards, envelopes, flash drives, and more!

Black Yellow Corporate Identity Set Photoshop PSD Mockup Template

Sketchbook Mockup Featuring Watercolor Paints & Brushes (Photoshop PSD)

Perfect for showcasing your art, this sketchbook mockup with decorative watercolors and brushes will delight you! It’s really easy to customize; in just a few clicks, you’ll add two designs, your logo, and even customize the notebook color. Let the world see how talented you are!

Sketchbook Mockup Featuring Watercolor Paints Brushes Photoshop PSD Mockup Template

Multiple Blank Branding & Stationery Mockup Templates (Photoshop PSD)

Photo-realistic and effective, these branding and stationary mockup templates for Photoshop are perfect for putting your designs in the spotlight. Featuring elements such as business cards, pencils, and tablets, this branding identity set offers incredibly photo-realistic results. You’ll get 7 distinct mockups and replaceable backgrounds for beautiful presentations!

Multiple Blank Branding Stationery Photoshop PSD Mockup Template

Branding / Stationery Mock-Up (Photoshop PSD)

Fun, yet professional, these branding stationery mockup templates offer everything you need to amaze your clients! With 7 PSD files, and plenty of elements such as: papers, folders, envelopes, badges, tubes, and pencils, you’ll love showcasing your designs. You can easily change the color of backgrounds and elements!

Branding Stationery Photoshop PSD Mockup Template

Stationery Set Scene Creator Mockup Templates (Photoshop PSD)

With an already set scene and endless combinations, these branding identity mockup templates are easy to customize in Photoshop. Pick from a plethora of elements such as coffee cups, letterheads, tubes, and flash drives. Then, combine them as you see fit, replace the background texture, and have fun while presenting!

Stationery Set Scene Creator Photoshop PSD Mockup Template

Stationery Branding Mockup Creator (Photoshop PSD)

With photo-realistic scenes and over 60 elements, this versatile stationary branding identity mockup creator is an absolute dreamboat. Add your designs, change the background textures and colors, add layer styles (unlimited foil stamp colors), and more! Add this set to your kit – you can use it for every project!

Stationery Branding Photoshop PSD Mockup Template

Office Stationery Branding Mockup Templates (Photoshop PSD)

Realistic and personable, these office stationary branding mockup templates are perfect for friendly, down-to-Earth brands that want to emphasize their personality. With elements like letterheads and CDs, and 5 different scenes, you can easily bring your designs closer to your audience. All it takes is a few clicks in Photoshop!

Office Stationery Branding Photoshop PSD Mockup Template

Business Stationery Set Mockup 1 (Photoshop PSD)

A professional flat-lay business stationery mockup set, this asset is perfect for presenting your branding identity designs in a simple and straightforward manner. You’ll get a few key elements set against a blue backdrop, such as letterheads, business cards, and envelopes, all easily customizable with Photoshop smart objects.

Business Stationery Set Photoshop PSD Mockup Template

Coffee Branding Mockup Templates (Photoshop PSD)

Coffee branding and merchandising has never looked this good! This gorgeous set of photo-realistic coffee branding mockups comes with all the elements you need: coffee and sugar bags, cups, shopping bags, brochures, and more! And with 5 beautiful PSD scenes, your audience will really wake up and smell the coffee!

Coffee Branding Photoshop PSD Mockup Template

Branding Mockup Essentials Vol. 1 (Photoshop PSD)

You’ve never seen a set of branding identity essentials as comprehensive as this one! With five different PSD mockups, and every element under the sun (from lanyards and tubes, to professional business cards and journals), you’ll get everything you need for a perfect corporate branding presentation!

Branding Mockup Essentials Photoshop PSD Mockup Template

Mugs at a Table with Beer Bottles Mockup Templates (Photoshop PSD)

If you’re working with a beer brand, it’s time to display your designs in an informal setting. And nothing works better than this mockup template featuring two people clinking beer mugs. You can customize the tablet illustration, as well as the beer bottle labels. Have fun!

Mugs Table Beer Bottles Photoshop PSD Mockup Template

Athena Branding Mockup Templates (Photoshop PSD)

Elegant and depicted in earthy tones, Athena branding identity mockup templates are a perfect fit for fashion, beauty, and other aesthetically-conscious brands. You can completely customize the 11 branding mockups: adjust colors, replace the background, and add foil stamping. Make your designs shine with these stunning, photo-realistic branding identity templates!

Athena Branding Photoshop PSD Mockup Template

Corporate Identity Mockup Templates (Photoshop PSD)

A pristine 2D and 3D corporate identity mockup templates for Photoshop, this set comes with all the essentials (tablet, phone, letterhead, business cards, envelopes, and more). You can easily customize these branding identity mockup templates with Photoshop smart objects to create professional and photo-realistic presentations your corporate clients will adore.

Corporate Identity Photoshop PSD Mockup Template

Luxury Branding Mockup Templates (Photoshop PSD)

Nothing says luxury more than this branding identity mockup set! With 6 high-quality background textures, and 11 Photoshop elements, you can paint an atmospheric picture with your designs depicted on leather file covers, crisp envelopes, and business cards that send a clear message: this is a brand you can trust.

Luxury Branding Photoshop PSD Mockup Template

Branding & Identity Mock-up (Photoshop PSD)

This simple, photo-realistic branding identity mockup template set will help you create a convincing presentation! Pick from 9 incredible mockups, change the background color, and add your designs to: lanyards, envelopes, business cards, and other corporate identity essentials. Save time, and showcase your work with these phenomenal corporate identity mockups!

Branding Identity Photoshop PSD Mockup Template

Blck Branding Mockup Kit (Photoshop PSD)

Let your audience get up close and personal with your design through this atmospheric branding mockup kit. The scene is staged – and it’s time for your designs to shine! Change colors and backgrounds, experiment with foil stamping, and make this mockup work for you and your brand.

Blck Branding Kit Photoshop PSD Mockup Template

Corporate Identity Set on Desk Mockup Templates (Photoshop PSD)

Envision your designs in their true environment: a desk. This corporate branding mockup allows you to add your logos and other graphics to elements such as: screens (laptop, tablet, phone, and Mac), letterheads and envelopes, coffee cups, tubes, and more! Add designs in Photoshop, and your clients will love you!

Corporate Identity Set Desk Photoshop PSD Mockup Template

Branding & Identity Mockup Templates (Photoshop PSD)

Dynamic and interesting, these branding identity mockup templates are a perfect fit for engaging brands! Easily add your designs to letterheads, tri-fold brochures, calendars, hangers, and more! You’ll definitely get plenty of options, including 2 photo-realistic scenes. Not even the sky is the limit with these branding mockups!

Branding Identity Photoshop PSD Mockup Template

Copperstone Branding Mockup Vol. 3 (Photoshop PSD)

Create a stunning brand presentation with these beautiful branding identity mockups. Copperstone branding templates for Photoshop contain 10 PSD files, as well as plenty of options such as selective foil stamping, customizable backgrounds and colors, and more! Professionally lit, these mockups offer incredibly photo-realistic results that your clients will love.

Copperstone Branding Photoshop PSD Mockup Template

Coffee Branding Mockup Templates (Photoshop PSD)

Working with a coffee brand, or just designing visual identity for coffee lovers? These coffee branding mockup templates are the perfect choice! With plenty of elements (including coffee bags, shopping bags, and labels), and customization options for shadows, backgrounds, and colors, you’ll love creating your next branding presentation!

Coffee Branding Photoshop PSD Mockup Template

Back to School Office Supplies Mockup Templates (Photoshop PSD)

Can school actually be cool? You bet! These back-to-school and office supplies mockups prove that everything is possible with a design as gorgeous as yours. Pick from plenty of elements (notebooks, screens, envelopes, erasers, glue, and more), adjust the background and colors, and get ready to amaze with your presentation!

Back to School Office Supplies Photoshop PSD Mockup Template

Show your brand’s personality! Your design is the first gateway to your brand. And when you’re creating branding identity materials, you have to make sure that they’re enticing and keep the prospect interested in your products.

Fortunately, you no longer have to rely on your hunch. Instead, pick one of these beautiful mockups, and show your clients how they’ll win over their customers. From coffee cups to stationery mockups, you’ll get plenty of incredible options.

More Mockup Templates: Banners, Books, Booklets, Bottles, Box Packaging, Dresses, Flyers, Frames, Hoodies, iPads, iPhones, Laptops, Logos, MacBooks, Magazines, Mobile Apps, Mobile Devices, Mugs, Packaging, Sweatshirts, T-Shirts, Tote Bags.

The post 30 Fantastic Branding Identity Mockup Templates for Photoshop appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Is It Really Worthwhile Having a Personal Portfolio?

We all know blogging and personal portfolio sites have been very important for designers looking to increase their visibility to clients and others who admire their work.

But some key developments have risen up over the past decade, which, in my opinion, are threatening to eliminate the need for a personal website.

Information is spread so quickly these days through social media that it’s impossible to keep up with all of it, and the truth is that potential clients and people who like your work are rarely going to take time out of their busy day to visit your website.

A Faster Way To Market

These days, you don’t really need your own website to market yourself as a designer (I don’t have one). You can reach out to the design community via social media, as we saw earlier, but there are other ways to distribute your content.

You can do guest posts on other blogs, create a newsletter list, or even do something like a podcast. All of these things will spread the word much faster than simply creating content and putting your stuff on it.

If you’re looking to market your services as a designer, then time is always of the essence. Yes, you can still build your personal brand extremely slowly, relying on organic search to send you tiny increments of traffic over a period of years. But who has time for that? You’ve got clients to get and a reputation to build, pronto!

Let me be clear here: I definitely think that websites can be an important part of your marketing plan. They do provide a certain legitimacy to a designer’s online presence that social media doesn’t – at least not yet.

At a later date, you can make your personal blog as elaborate and inviting as you please. But if you’re just starting out and need a boost to your visibility, ditch the personal site and start circulating your content in a broader variety of places.

The personal portfolio of Chungi Yoo

What’s Your Ideal Outlet?

You might think that blogging is a straightforward thing: you get a blog, write some posts, and voila – now you’re a blogger. That used to be the case about 8 or 9 years ago, but now, the market is saturated with others doing the exact same thing.

The explosion of social media has also affected the landscape quite a bit. Designers have far more choices through which to spread their message, and each one has its pros and cons.

Should you be blogging on your own website, or is there a social media outlet that’s more ideal for the type of work that you do? The best way to find out is to try a few of the most popular channels: Behance, Facebook, Dribbble, et cetera, and figure out exactly what’s right for you.

Are you an Instagram person, or would Twitter or Pinterest be more your style? What does your audience respond best to?

sabice raffaele sabella portfolio
The personal portfolio of Raffaele Sabbella

Getting The Knowledge Out There

Again, I’m not saying that having your own website or blog isn’t important at all. But there is definitely a right way and a wrong way to blog as a creative professional, and, I’m sorry to say, most people are going about it the wrong way.

The point isn’t to put something on your blog and have it live there forever. If you want to change minds and affect people with your ideas and your work, it needs to float out there in cyberspace, far from home, and find new homes with others who find the most value in it.

Sharing your knowledge and ideas helps connect you with others in the industry whom you can bounce ideas with. They can also carry your message into far-flung corners of the industry which you might not be able to reach yourself.

This is the science behind “viral” content. A group of readers finds your content valuable, and they each share it with their friends. Those friends find it equally valuable and share it with their friends, and so on.

Designers like Jessica Hische, Marian Bantjes, and Michael Bierut are all vocal about their opinions on the design industry, and many people know them as much for that as they do for their beautiful designs.

The more visible you are, the more people trust you, and the more your opinions can be far-reaching – much more so than your actual design work.

The post Is It Really Worthwhile Having a Personal Portfolio? appeared first on Speckyboy Design Magazine.

Fresh Resources for Web Designers and Developers (August 2021)

There are new tools and techniques coming up every day in the field of web development. And sometimes, it gets pretty difficult to keep up with all the new advancements.

Therefore, in this post, we’ve put together some of the most exciting resources to help our fellow web developers to stay up to date. In this round of the series, we have tools and frameworks, a couple of learning materials, and some design resources. Without further ado, let’s jump to the full list.

Fresh Resources for Web Designers and Developers (July 2021)

Fresh Resources for Web Designers and Developers (July 2021)

As a web developer, there’s always something you can learn every day and grow. You can learn design… Read more


A test framework for JavaScript with some interesting takes. First, it includes a nice-looking UI where you can run and monitor the tests of each file.

Secondly, it supports modern JavaScript out-of-the-box, including Aysnc/Promise, TypeScript, and many more to come. All these I think make it stands out from the rest of similar frameworks.

Awesome Guidelines

Awesome Guidelines contains guidelines for code standard and best practices for many programming languages, frameworks, and development environments.

So, if you’re managing a team of developers, this would be a great reference for you to formulate guidelines for your team. You need to have it in your bookmark.


IDB KeyVal

Did you know that browser has a built-in database? It’s called IndexedDB. It works similar to SQL where you can add a database and the columns except that it lives right in the browser.

This library makes it easy to deal with IndexedDB. It addresses all the quirks and compatibility across the different browsers and versions.


Github Open Graph Image

Github has made an interesting update to their platform. Before this update, it used to looked weird when shared a repository URL from Github as it shows the repository author.

Now with the update, Github shows a more relevant image to the repository which includes the repository name, languages, author, etc. In this blog post, Github shared how it works behind the scene.


Absurd Design

A collection of abstract illustrations that look absurd. If you ever need to design a website with a unique persona, you can try to use these illustrations in your design. The illustration comes in two formats: PNG and SVG.



A custom VSCode theme. It comes in a light and dark color scheme and looks great in Retina and in HTML, CSS, and JS codes. Another nice looking theme, you should install to give your code editor a fresh look.


Schema API

A tool where you can parse a website to get structured meta data of the website defined in Schema.org. A pretty handy tool to spy on what your competitors are doing with their metadata. Also, it’s free.



A collection of icons designed for web designers and developers. The collection contains more than 1500 icons from various categories. Here you can find some regular icons to build websites and apps as well as logos of popular tech and services.



A lightweight JavaScript library to highlight code syntax with the proper color. It’s fast and supports 100 languages out-of-the-box including one written in traditional Chinese. It also includes some popular themes such as Monokai, Dracula, Github both dark and the light versions.

Bulletproof React

A pre-defined architecture that covers almost everything you need to build a robust application using React.js. It sets the directory structure and configuration, styled components, state management, authentication, testing, etc.

It’s a great time saver and allows you to start developing immediately. If you ever need to build an application with React.js, this is a great starting point.



A library to render code syntax with a proper color that requires no JavaScript. Yes! unlike similar libraries for the purpose, Torchlight runs on the server-end and outputs a fully rendered HTML with the syntax colors. It supports many lanuages and provides several themes out-of-the-box.


Laravel Zero

A framework to create a command-line (CLI) using Laravel. It comes with some different takes than one built-in Laravel. For example, it adds support for an interactive menu where you can select options right in Terminal, and the ability to send a desktop notification to name a few. It’s a framework to build a robust CLI application.


WP-CLI Fixtures

A WP-CLI extension to generate dummy content. You can generate not only posts but other types of content in WordPress such as Menu, Taxonomy, and Users. This comes in handy for performing automated testing.



Starship is a tool that extends the Shell environment. It adds command completion, extra information of your current projects such as the current Git branch, Git metrics, and version of the current programming language.

It also provides many options that make Shell environment more joyful to use and boost productivity.



A modern command-line application to perform HTTP requests. Unlike some of the existing apps, HTTPie provides a more intuitive syntax. It also has JSON support built-in with more readable output. It’s an all-around HTTP client that helps you be more productive when dealing with HTTP requests.


Learn Anything

Interested in learning something new but not sure where to get started? Head over to this unique search engine that will provide you with guidelines and resources for learning materials. You can search anything – from web design to mobile applications, etc.


VSCode JS Debug

The new and improved JavaScript debugger for Visual Studio Code. It works across different platforms, not only in the browser like Chrome and Edge but also Node.js environment and a VSCode extension.


Lint Staged

Keep your source in compliance with the code standard with this extension. It allows you to check code upon staging it in Git and would prevent it to push before it passes the check. It’s pretty handy if you manage a project in a team or open-source with multiple contributors.



This PHP library allows you to orchestrate a Chrome-headless through PHP. You can use this library to run some automation testing in the browser. I’m sure PHP developers would appreciate this library as they can maintain most of their projects that are using a single language: PHP.


Vitesse WebExt

A boilerplate and development environment to get you up quickly on developing browser extensions built on top of Vue.js and its supporting components.

It also has taken care of the prerequisite configurations such as with the WebExtension polyfills, WindiCSS for styling, ESLint for code lint, TypeScript, etc.


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

10 Free Plugins to Supercharge WordPress Comments

Commenting is built right into WordPress – which is great. But utilizing the default setup is an invitation to a big old mess.

Annoyances such as spam and the potential for abuse can make a blogger seriously consider closing off comments altogether. It’s understandable but far from hopeless.

There are several quality plugins out there to help take the pain out of utilizing comments on your WordPress website. Here are 10 worth considering when you’re looking to improve an otherwise unruly situation.

Lazy Load for Comments

A long thread of comments can be a drag on site performance. Lazy Load for Comments helps by deferring this content until it’s actually in view.

Choose between loading comments on scroll or via a button click. Either way, it should speed up your website.

Disable Comments – Remove Comments & Stop Spam

Perhaps there are certain areas of your website where you’d like to turn off commenting. Disable Comments can help. The plugin lets you remove commenting from any WordPress post type.

If you’re using multisite, it will also let you turn off comments for individual network sites as well. And, if you no longer use comments, you can disable them completely.

Disable Comments – Remove Comments & Stop Spam

WP Social Comments

Facebook has billions of users. Therefore, it’s likely that your site’s readers also have an account with the social media behemoth. WP Social Comments lets you take advantage by integrating Facebook-based comments onto your website.

The pro version of the plugin offers more customization and the ability to moderate comments directly from the Facebook app.

WP Social Comments

DCO Comment Attachment

Community-based websites may find DCO Comment Attachment quite handy. As the name suggests, it allows file attachments to be uploaded in the WordPress comments area.

Administrators can restrict the feature to logged-in users, specific file types, and choose how those files are displayed. It even works in conjunction with various lightbox plugins.

DCO Comment Attachment

Subscribe To Comments Reloaded

Subscribe To Comments Reloaded provides your readers an opportunity to receive new comment notifications via email.

Admins will love that the emails can be fully customized (HTML is allowed) and that subscriptions can be disabled for specific posts.

Subscribe To Comments Reloaded

Akismet Anti-Spam

Sure, everybody knows about this one. But if you haven’t used it, you’re missing out. There’s a reason why Akismet is included by default with every WordPress install – it works. Spam is reduced to rubble as the plugin scans incoming comments.

You can even choose to automatically discard comments marked as spam – a real timesaver. The plugin is free to use for personal blogs, but commercial use requires a subscription.

Akismet Anti-Spam


The biggest problem when it comes to comment spam is those pesky bots. They hammer away at any post with open comments. Trying to squash it on your own will drive you crazy. Anti-Spam is there to do away with spam that comes from bots.

Just install the plugin, and it will start detecting and removing the junk. Their pro version will also help you take care of spam from human sources as well.



wpDiscuz provides a boost to the native WordPress comment system. It uses Ajax, so everything loads super-fast. You can also create your own custom comment form fields to gather more extensive user info.

Plus, it’s compatible with other popular plugins such as Akismet and BuddyPress (commercial add-ons are available for more integrations). Overall, it’s a completely modern facelift for commenting.


WP Ajaxify Comments

So maybe your comments area doesn’t need a total facelift – just some more efficiency. WP Ajaxify Comments will do that in the form of adding in some common-sense Ajax.

That means comments will be validated and loaded in without the need to refresh your entire post. It takes some load off of your server and generally makes for a better user experience.

WP Ajaxify Comments

Decent Comments

Decent Comments provides a highly-configurable widget, shortcode and API that enables you to display recent comments on your site.

Author avatars, excerpts, links and more can be included. Just about every aspect of the plugin is configurable to fit your needs.

Decent Comments

A Few Worthy Comments

A well-managed commenting system can be of great benefit to a WordPress blog. While you can’t necessarily make everyone behave themselves, you certainly can provide readers with a place to voice their opinions and ask questions. Above all, it’s about making a connection.

The tools above can help get you by making the experience more pleasant for everybody.

The post 10 Free Plugins to Supercharge WordPress Comments appeared first on Speckyboy Design Magazine.

For Casual Users, Information on New WordPress Features Can Be Hard to Find

Virtually every software application evolves over time. For users, keeping track of the additions, subtractions, and bug fixes can be difficult. And, the more users an app has, the more challenging it is for developers to keep everyone in the know.

WordPress faces a unique uphill climb in this area. As a volunteer-driven, open-source project, there is a constant stream of changes. Various teams tackle their assigned tasks and, somehow, everything comes together and makes it to release.

It’s a testament to their hard work. But it also means that information regarding new features and compatibility changes can be spread amongst these different channels. Thus, they’re often difficult to locate.

For casual users (i.e., those who don’t follow every new development), this frequently leads to an information gap. When it comes time to apply an update to WordPress core, that could leave these users unaware of what’s included and scrambling to catch up.

Why is this so important? Let’s talk about what’s at stake, along with some ways to potentially close that gap.

The WordPress ‘Knowledge Bubble’

WordPress has seen several major changes in recent times. Features such as the Gutenberg block editor have reinvented how we work with the content management system (CMS). As it provides a relevant example, that’s the feature we’ll explore here.

For all of the community debate during the runup to launch, there were still users who had little or no idea that a change was coming. For those of us within the WordPress knowledge bubble, that may be hard to believe. But it speaks to the issue at hand.

There is a group of project contributors, web designers, and business people who pay close attention. They were able to stay on top of the information trickling out about the new editor. They were also the ones testing the beta plugin, becoming acutely aware of what the change would mean to the average website.

For others, that news may have completely missed them. True, there were assorted teasers within the WordPress dashboard before the launch. But some may have simply dismissed them without a full understanding of what was being communicated.

The result could leave you completely unprepared. Imagine logging into your website one day and seeing that the entire content creation process has changed. In addition, undetected theme and plugin incompatibilities posed their own potential to wreak havoc.

As for the information itself, it was scattered. There were several posts spread throughout various sections of WordPress.org. Outside of that official source, one would have to frequent sites such as WP Tavern or even this one. Otherwise, your only chance to get a detailed explanation would be through the odd link on social media – if you happen to follow relevant feeds.

The Structural Challenges

To be clear, any difficulty in accessing information isn’t due to a lack of effort. Indeed, the project’s dedicated volunteers can only work through the channels available to them.

The way I see it, the issue is more of a structural one. There currently isn’t an official one-stop location that puts all the need-to-know information in a single place. We’ll discuss some possible solutions (feasible or not) in a moment.

Outside sources can be quite valuable but are sometimes hit and miss in terms of what they cover. For instance, they may offer an outstanding Gutenberg tutorial for developers – but nothing that focuses on the everyday user.

And, let’s face it, there aren’t a lot of publications out there that are solely dedicated to WordPress news. It may be part of their mission, but it takes a lot of resources to provide the whole picture.

Then there are the users themselves. With a worldwide user base and all skill levels represented, it’s going to be nearly impossible to reach them all.

Still, it’s worth the effort to get the word out to as many people as possible.

An overhead view of multiple pathways.

A Multi-Pronged Approach to Spreading the Word

Realistically speaking, there probably isn’t a silver bullet that will bridge the WordPress information gap. But there are a few things that, when combined, could certainly help to keep more users in the know. Here are a few ideas:

Create an Official Source for Impactful Developments

Getting the details of upcoming changes usually requires sifting through a variety of posts on WordPress.org. These items may be strewn about the site, but are regularly updated.

Perhaps a dedicated, user-friendly page that focuses on the most impactful developments could bring these posts under one umbrella. That is, changes and features that are likely to affect a large segment of users and developers. I’ll leave defining the exact criteria to the experts.

But there’s plenty of room for creativity here. For example, the page could be sorted by topic, release, or even target audience (site administrators, developers, content creators, etc.). From there, readers could access a summary of the change and an archive of related posts.

This would provide users with an easy-to-digest source of information – one they can come back to time and again. With that in hand, they can gain an understanding of what’s happening and prepare their websites in advance.

It might also make for an engaging dashboard widget on WordPress installations. When someone logs into their website, they’ll have a summary of what they need to know right at their fingertips. Of course, care would need to be taken so as not to interfere with their ability to get things done.

A Community That Amplifies the Message

The WordPress community does a fantastic job of sharing information. Whether it’s code snippets or a helpful plugin, they can be counted on to pay it forward.

And, something tells me that having a well-organized source for new developments would encourage them to share even more. They’d have the opportunity to pass along official details, along with their own related content.

Helpful items like tutorials and summaries would add further context to what lies ahead. And the great news is that many people are already creating this type of content. The difference would be that, combined with the official source, an even bigger impact could be made.

In theory, users could first view the official rundown of a change. Then, they could dive into a community-driven tutorial that helps them better understand it and act accordingly.

Educate Users

Users, whether they’re website owners or designers, also have a key role to play. However, not everyone is keenly aware of the importance of staying informed.

Therefore, education is a big part of the solution. By helping them develop good website maintenance habits, users will be more likely to stay on top of upcoming changes. For some, just the mere practice of logging into their dashboard once a week could make all the difference.

WordPress is already taking some great steps in this area. Through their Learn WordPress initiative, users have access to a variety of helpful content. It can foster a connection that keeps people actively interested in the project.

A person holds a mobile phone.

The Quest to Reach Users

Even for those of us who follow WordPress closely, it’s easy to lose track of new features. For those who are a bit less involved, the ability to keep up is even harder.

For WordPress to continue growing, this information gap has to be narrowed. An informed user base is crucial for security, stability, and pushing the software forward.

The suggestions above are just that. I hope that they can serve as a catalyst for further discussion.

Regardless of how it’s implemented, opening up further lines of communication with users is a win for everybody.

The post For Casual Users, Information on New WordPress Features Can Be Hard to Find appeared first on Speckyboy Design Magazine.

8 Free Maintenance & Coming Soon Plugins for WordPress

When you run a WordPress website, you will inevitably have to perform essential maintenance that may result in temporary downtime. This could be testing new plugins, theme changes or updates, or some major server issues.

Many developers create offline sandboxes for testing, but once you push the updates to your live site, it’s good practice to take the site offline for a brief moment. This is also true with new domains where your site isn’t quite ready to launch, but you want to have something online – a coming soon page – to show potential users, visitors, or buyers.

The best solution you need is a good and reliable maintenance or coming soon plugin. Thankfully, WordPress has many of them freely available. We’ve curated the eight best choices here, with each having a different focus and set of resources for site admins to choose from.

Maintenance Mode by Lukas Juhas

I’ve used the Maintenance Mode plugin countless times and with great success. It’s probably the oldest plugin in this collection but is regularly updated and does come with many useful functions, so it does merit its place here.

If you are looking for something simple and easy to work with, then start with Maintenance Mode. It’s got years of experience behind it, so you know it’ll work right out of the box.

WP Maintenance by Florent Maillefaud

Another coming soon alternative is the WP Maintenance plugin. It comes with a great range of features, like a custom logo upload, extra languages, a countdown timer, and a shortcode area for adding an email opt-in field or contact form.

When you are updating your site, you may be doing so for only a few moments, but other times, you may be resolving time consuming server issues. Or you might not even have a site online yet, and you want to have a “stay tuned” message. With WP Maintenance, you can handle all of these situations with just one simple plugin.

WP Maintenance WordPress Plugin

Coming Soon Page By SeedProd

For a more focused resource you might like to take a look at the Coming Soon Page plugin created by SeedProd. The plugin is all pretty standard with a typical “check back soon” message and an optin field for gathering email addresses. The page is fully responsive and built with CSS transitions to create a nice fading animation.

You can edit the template code manually, but you’ll need to know your way around HTML. The whole thing is easy to set up with a few clicks and it supports most languages, multi-site setups, and WordPress add-ons like BuddyPress.

Coming Soon Page WordPress Plugin

Coming Soon by Supsystic by Supsystic

If you’re looking for even more features, then you should take a look at the Coming Soon plugin built by Supsystic. It comes with a fantastic drag & drop system so you can rearrange the page to fit your needs very easily.

Other features include countdown timers, auto-embed videos, social sharing buttons, custom logos and backgrounds, and will also directly connect to most email service providers, like MailChimp and Aweber.

Minimal Coming Soon & Maintenance Mode by WebFactory Ltd

This plugin combines a “sorry we’re closed” message alongside an “opening soon” message. It’s called Minimal Coming Soon & Maintenance Mode and has been created by the team at WebFactory.

If you have multiple authors on your site, you can set permissions for who sees the initial maintenance page before going live, allowing you to define who has access to the site when it is being worked on, all at the click of a button.

Maintenance Mode WordPress Plugin

Under Construction by WebFactory Ltd

The Under Construction plugin is a great choice if you need to make regular theme edits, restore database entries, or just to test new features.

The default templates are surprisingly nice, so you might start with them if you don’t want to (or know how to) restyle a page on your own.

Under Construction WordPress Plugin

Maintenance by WebFactory Ltd

Simplicity is at the core of this plugin, and it’s probably the best choice for web admins who want to set it and forget it. Maintenance is completely free and comes with all the basic features you need.

You won’t find a congested admin panel or many features to dig through. They’re all pretty simple, like changing the background, logo, or header text on the page. Anyone can use this plugin, and I think it would be perfect for non-technical site owners.

Maintenance Mode WordPress Plugin

IgniteUp by Ceylon Systems

IgniteUp is a feature-packed coming soon plugin that allows you to whitelist certain user roles, whitelist IPs, send the 503 HTTP message, and many more useful features. It is a bit more complex than the rest, but it’s a multi-purpose plugin that will work on almost any site.

This plugin does also have a premium version, but the templates that comes bundled with the free plugin should be more than enough for most websites.

IgniteUp WordPress Plugin

The post 8 Free Maintenance & Coming Soon Plugins for WordPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Defining a Vision for Your Web Design Business

One of the great aspects of starting your own web design business is that you can tailor it to fit your vision. Work with who you want, when you want, and set your own pricing. Sounds pretty ideal, right?

But what if you don’t have a clear vision of what your business should be? If that sounds like your situation, you’re not alone.

Figuring out what you want often takes time. In my case, it took several years of freelancing before I realized the path I wanted to take. And even then, things shift as the industry continues to evolve. Nothing is set in stone.

If you’ve yet to find that vision, you’re in the right place. Let’s look at some ways to better understand who you are and what you want out of web design.

Work with a Variety of Clients and Project Types

Not everyone starts out with a niche. But in an industry teeming with specialization, it’s easy to feel left behind without one.

However, there’s no reason to despair. In reality, you’re in an enviable position. It’s an opportunity to explore what’s out there, build your portfolio, and acquire valuable experience.

Since you’re not weighed down by a particular path, use this time wisely. Commit to working with a variety of different clients and types of projects.

This is often an effective way to get to know yourself. By covering the gamut of projects, you’ll find out which tools and technologies you enjoy working with. And it’s also a chance to learn which industries and price ranges work best with your business.

You should still have some basic guidelines, of course. For instance, it’s important to work with reputable clients who will compensate you fairly. A healthy screening process is always recommended.

The goal is to put yourself out there and absorb knowledge like a sponge. That’s the first critical step in building a vision.

Take Stock of Previous Projects

Each project is a learning experience. Therefore, the more you have under your belt, the better! Take some time to periodically revisit what you’ve learned.

When you look back, you’ll likely see that not every experience will have been a positive one. But those negative projects tend to be some of the most valuable. You can recognize missteps and figure out how to avoid them the next time around.

In addition, you’ll have a great idea of the things you don’t like. Whether it’s a finicky content management system (CMS) or a client who’s constantly changing their mind, these are important things to know.

Next, think about the positive experiences. What did they have in common? Perhaps they brought out your creativity or offered some exciting challenges.

This is when you can start to steer your business towards the places you want to go. Even if you don’t have a definitive vision just yet, you’ll be well on your way.

A person writing in a notebook.

Embrace Flexibility

Web design changes year-by-year, day-by-day. Design trends come and go, as do the techniques we use for building websites. Just as important, client needs and expectations evolve.

That likely means your business will need to keep pace. After all, it can be nearly impossible to keep doing the same old thing while continuing to thrive.

As such, don’t be afraid to redefine your vision. Maybe you’ve settled on a particular type of project or technology you want to work with. That’s great – but don’t let it prevent you from branching out into other areas of interest.

Back when I started out as a web designer, I hand-coded HTML and created page layouts with tables. We may get a good laugh out of that now, because so much has changed. However, it’s unlikely that I’d still be in this profession without having kept up with the times.

Being steadfast in your vision is one thing. Being unable or unwilling to make the necessary adjustments is another. Sometimes, the writing is on the wall. Be attentive enough to read it.

A sign that reads Live, Work, Create

Your Business, Your Way

Defining a vision for your web design business can bring about an entirely new level of focus. Instead of taking whatever comes along, you can look for projects with specific goals in mind.

This allows you to avoid the things you don’t want to do. Even better, it will help to establish you as an expert within your niche. You’ll have a detailed understanding of how to get things done. This is a huge benefit of specialization.

If you haven’t reached that point just yet – don’t worry. The journey takes time and will be filled with peaks and valleys. Besides, figuring it all out is part of the fun!

The post Defining a Vision for Your Web Design Business appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Weekly News for Designers № 614

The 2021 State of Digital Nomads – Get the lowdown on who remote workers are with this report.
Example from The 2021 State of Digital Nomads

Learn How to Create a Headless WordPress Site With Vue.js – Learn about “headless” configurations and how to implement one.
Example from Learn How to Create a Headless WordPress Site With Vue.js

How to Implement and Style the Dialog Element – Explore the native HTML dialog element and how to customize it.
Example from How to Implement and Style the Dialog Element

Gust – Check out this WordPress theme based on Tailwind CSS. Free and premium versions are available.
Example from Gust WordPress theme

The Challenge of Designing Websites for Large Screens – Helpful tips for keeping your designs usable on large screens.
Example from The Challenge of Designing Websites for Large Screens

Atropos – An open-source JavaScript library for creating touch-friendly 3D parallax hover effects.
Example from Atropos

9 Figma Design System Tips – Learn how to speed up your design workflow in Figma with these tips.
Example from 9 Figma Design System Tips.

The State of CSS Survey – Help define the direction of CSS by taking this annual survey.
Example from The State of CSS Survey

A Guide To CSS Debugging – Detect and resolve your CSS issues faster by using these tips.
Example from A Guide To CSS Debugging

The 10 Best Templates for Creating Business Brochures – Give your business a professional look with these easy-to-use brochure templates.
Example from The 10 Best Templates for Creating Business Brochures

Colorblind Accessibility Manifesto – Learn how to make designs accessible to those with color blindness.
Example from Colorblind Accessibility Manifesto

Skeleton Screen Loading Animation using HTML & CSS – Build your own “skeleton” screen animation with this tutorial.
Example from Skeleton Screen Loading Animation using HTML & CSS

Want UX Inspiration? Look To Classic Video Games – User experience lessons from the arcade.
Example from Want UX Inspiration? Look To Classic Video Games

TailwindCSS Buttons – Check out this collection of copy-and-paste button styles.
Example from TailwindCSS Buttons

FlutterFlow – A drag-and-drop Flutter UI builder.
Example from FlutterFlow

Pondering the Future of the WordPress Sidebar – The sidebar has survived a lot of changes over the years – can it remain relevant in the age of Gutenberg?
Example from Pondering the Future of the WordPress Sidebar

Admin System UI Kit – Download a copy of this attractive free UI kit for Figma.
Example from Admin System UI Kit

The post Weekly News for Designers № 614 appeared first on Speckyboy Design Magazine.