30 Books For Web Designers and Developers

If you are a designer or developer, you probably know that this field is one of the most innovative and fastest growing industry in the world. If you want to keep up to date and stay ahead of your competitors you must learn new things all the time and follow trends.

Even though the Internet is the best place for the Creatives to learn anything for free, I would highly recommend you to spend a few bucks and get some design and development books. There are a lot of experts who have encountered problems and found solutions which they share with us in the books, so why not take advantage of their best practices and smart approaches to problems?

These books will definitely help you become a better designer, developer or both. You will gain a lot of useful and practical knowledge in design psychology, user experience, branding, storytelling, programming, coding, business and much more.

Hopefully this list of books will help you choose the next book to read during rainy evenings.

Why All Developers Should Learn Command Line

Why All Developers Should Learn Command Line

Some developers cringe at the mere thought of opening a terminal window. For the uninitiated it can be… Read more

1. How to Build Habit-Forming Products

Written by Nir Eyal, Hooked is a practical guide to help you create the kind of products that people would want to use. It introduces the ‘hook model’ – a four-step process that most brands use to shape consumer habits.

The book is packed with consumer behavioral insights, tips on taking actionable steps in creating enticing products, and many case studies to help you understand the concepts.

It is written for designers, product managers, marketers, start up founder, or just any one who’s interested in consumer behavioral patterns.

2. Don’t Make Me Think

Don't Make Me Think, Revisited:

Dubbed as the usability guru, Steve Krug is the writer of this wonderful book Don’t Make Me Think that talks about intuitive navigation and information design. This revised version gives you fresh perspectives and updated case studies along with a chapter on mobile usability.

You will find the book to be witty, highly practical, and full of commonsense-based points. Either you’re a web or graphic designer or a web developer, you’ll find the usability concepts mentioned in the book to be highly applicable to everyday designing.

3. Creativity Inc

Creativity, Inc.: Overcoming the Unseen Forces That Stand in the Way

Creativity Inc. is a cumulation of years of work and experience of Ed Catmull, one of the founders of Pixar Animation company and the creator of the amazing Toy Story. The book talks about ideas, techniques, and creativity process that goes on in Pixar.

From the very core of it, the book is about creating and nurturing a creative culture in your organization. Designers, developers, and team managers can take it as their guide book for taking their work to new heights of originality.

4. Invisible Women

Invisible Women: Exposing Data Bias in a World Designed for Men

Approximately half of the world’s population are women. However, they are constantly at the receiving end of gender bias that manifests in everyday life. This book The Invisible Women highlights how a world made by men systematic ignores women.

The book talks about data bias that almost all women face in their lives. Phone too big for your hands, medication not suitable for your body, greater likelihood of injuries you can get from an accident, and many such hurdles that are faced by women everyday.

5. The Lean Startup

The Lean Startup: How Today's Entrepreneurs Use Continuous

The Lean Startup is an interesting book that sheds light on some practical approaches to help startup businesses avoid failure through continuous innovation. It helps you shift your company’s direction and shorten product-development cycles.

By the dint of some useful concepts with practical examples in the book, you can change the way companies are built and new products are launched. It emphasizes on shorter more adjustable goals instead of creating elaborative business plans.

6. Paradox of Choice

Paradox of Choice: Why more is less

In today’s world, whether you’re buying something, choosing a career, or subscribing to a service, the choices are abundant. However, when the choices become a little too abundant, you start questioning your decision. And this is where this book comes in.

Written in accessible, engaging, and anecdotal prose, Barry Schwartz helps you understand the psychology of choice for humans. Designers and product creators can make good use of these insights when building their products and making them stand out from the rest.

7. Universal Principles of Design

Universal Principles of Design, Revised and Updated

Written by William Lidwell, The Universal Principles of Design is a richly-illustrated encyclopedia of designing and user experience. The book covers everything from usability, user perception, laws of design, guidelines, human biases, and general concepts important for a successful design.

You will find interesting visual examples to elaborated each concept as well as design guidelines that’ll encourage brainstorming and broaden your design knowledge.

It is equally useful for designers, artists, marketing managers, startup entrepreneurs, interior designers or anyone who’s designing a system for users.

8. Flow The Psychology of Happines

Flow: The Psychology of Happines

Penned by famous psychologist Milhay Csikszentmihalyi, this interesting book Flow explores the psychology behind optimal experience. According to the author, people are genuinely satisfied when things go in a certain flow.

The book further highlights that during the state of flow, people experience enjoyment, creativity, and total involvement. You can use these insights to work and improve your designs and products and create a better user experience.

9. How to Speak Machine

How to Speak Machine: Laws of Design for a Digital Age

Just as the name says, How to Speak Machine lays down some simple laws to control and manage computers of today and even machines of the future. It offers guidelines and useful framework for product designers, business leaders, and policy makers.

The author shares his vast experience as a design and tech thinker and shows trough this book how individuals and businesses can harness technology to create dynamic and inclusive products for users.

10. 1000000 Web Designer Guide

$1,000,000 Web Designer Guide

As more and more designers and creative professionals are going freelance, this wonderful book covers tips, tricks, and life lessons for designers who are on or planning to take the path to freelance career.

In this book, you’ll get some practical tips on taking a smart approach towards freelancing without getting overworked and underpaid. The book also has tips on balancing a successful work life and balancing it with a fulfilling personal life.

11. Client Centric Web Design

Client Centric Web Design

A client-centric web design methodology addresses the negative attitude that exists towards client work and has the potential to transform your business.

For the client/designer relationship, to work both parties need to respect the other. In this book you will explore how to move the clients’ perception of you as a pixel pusher to that of an expert.

12. Content Strategy for the Web

Content Strategy for the Web

Without meaningful content, your website isn’t worth much to your key audiences. But creating (and caring for) “meaningful” content is far more complicated than we’re often willing to acknowledge. Content Strategy for the Web explains how to create and deliver useful, usable content for your online audiences, when and where they need it most. It also shares content best practices so you can get your next website redesign right, on time and on budget.

13. A Project Guide to UX Design

A Project Guide to UX Design: For user experience designers in the field or in the making

User experience design is the discipline of creating a useful and usable website or application — one that’s easily navigated and meets the needs of both the site owner and its users.

But there’s a lot more to successful UX design than knowing the latest Web technologies or design trends: It takes diplomacy, project management skills, and business savvy. That’s where this book comes in.

14. JavaScript jQuery

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects, but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code.

You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.

15. JavaScript Web Applications

JavaScript Web Applications

Building rich JavaScript applications that bring a desktop experience to the Web requires moving state from the server to the client side — not a simple task. This hands-on book takes proficient JavaScript developers through all the steps necessary to create state-of-the-art applications, including structure, templating, frameworks, communicating with the server, and many other issues.

16. jQuery Novice to Ninja

jQuery: Novice to Ninja

jQuery: Novice to Ninja, 2nd Edition is the perfect book to jump-start your journey into jQuery. You’ll learn all the basics, so you’ll be able to truly appreciate the power of this JavaScript framework. Then you’ll move on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget.

17. Logo Design Love

Logo Design Love: A Guide to Creating Iconic Brand Identities

There are a lot of books out there that show collections of logos, but David Airey’s “Logo Design Love” is something different. It’s a guide for designers (and clients) who want to understand what this mysterious business about logos is all about.

Written in reader-friendly, concise language, with a minimum of designer jargon, Airey gives a surprisingly clear explanation of the process, using a wide assortment of real-life examples to support his points.

18. Neuro Web Design

Neuro Web Design: What Makes Them Click?

Neuro Web Design employs “neuro-marketing” concepts, which are at the intersection of psychology and user experience. It’s scientific, yet you’ll find it accessible, easy to read, and easy to understand. By applying the concepts and examples in this book, you’ll be able to dramatically increase the effectiveness and conversion rates of your own website.

19. PHP Solutions

PHP Solutions: Dynamic Web Design Made Easy

You want to make your websites more dynamic by adding a feedback form, creating a private area where members can upload images that are automatically resized, or perhaps storing all your content in a database.

This book doesn’t just provide a collection of ready-made scripts: each PHP Solution builds on what’s gone before, teaching you the basics of PHP and database design quickly and painlessly.

By the end of the book, you’ll have the confidence to start writing your own scripts.

20. Storytelling Branding in Practice

Storytelling: Branding in Practice

This book is written for practitioners by practitioners. Through real life examples, simple guidelines and practical tools, the book aims to inspire companies to use storytelling as a means of building their brand — internally as well as externally.

21. Stunning CSS3

Stunning CSS3: A project-based guide to the latest in CSS

By reading this book you’ll learn how to accomplish modern CSS3 effects and more by working through a series of practical yet cutting-edge projects.

Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques.

22. The Thank You Economy

The Thank You Economy

If this were 1923, this book would have been called “Why Radio Is Going to Change the Game”. The Thank You Economy is about something big, something greater than any single revolutionary platform.

It isn’t some abstract concept or wacky business strategy — it’s real, and every one of us is doing business in it every day, whether we choose to recognize it or not. It’s the way we communicate, the way we buy and sell, the way businesses and consumers interact online and offline.

23. The Elements of User Experience

The Elements of User Experience: User-Centered Design for the Web

The Elements of User Experience cuts through the complexity of user-centric design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design.

This accessible introduction helps any Web development team, large or small, to create a successful user experience.

24. Thinking with Type

Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students

Thinking with Type is the definitive guide to using typography in visual communication, from printed page to computer screen.

This revised edition includes forty-eight pages of new content, including the latest information on style sheets for print and the Web, the use of ornaments and captions, lining and non-lining numerals, the use of small caps and enlarged capitals, as well as information on captions, font licensing, mixing typefaces, and hand lettering.

25. Web Design Confidential

Web Design Confidential

Drawing on survey statistics from over 5,400 web designers from around the world, and the insight and experiences of several design veterans, Amanda Hackwith unlocks the door and sheds light on the web design industry in Web Design Confidential.

Have you ever wondered if your hourly rate is too low or too high? Are you torn between freelance design work and full-time employment? Are you missing an essential design skill without even knowing it?

Whether you’re looking for the latest web design practices, words of wisdom from design veterans, or just a better understanding of your profession, Amanda Hackwith and 5400 colleagues have the answers to your questions and you’ll find what you need in Web Design Confidential.

26. Design Is a Job

Design Is a Job

Co-founder of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, this brief book is packed with knowledge you can’t afford to not know.

27. Designing for Emotion

Designing for Emotion

Make your users fall in love with your site via the precepts packed into this brief, charming book by MailChimp user experience design lead, Aarron Walter.

From classic psychology to case studies, highbrow concepts to common sense, Designing for Emotion demonstrates accessible strategies and memorable methods to help you make a human connection through design.

28. CSS3 for Web Designers

CSS3 for Web Designers

From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm.

Learn what works, how it works, and how to work around browsers where it doesn’t work.

29. HTML5 for Web Designers

HTML5 for Web Designers

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice. HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

30. The Elements of Content Strategy

The Elements of Content Strategy

Content strategy is the web’s hottest new thing. But where did it come from? Why does it matter? And what does the content renaissance mean to you?

This brief guide explores the roots of content strategy, and quickly and expertly demonstrates not only how it’s done, but how it is done well. A compelling read for both experienced content strategists and those making the transition from other fields.

The post 30 Books For Web Designers and Developers appeared first on Hongkiat.

The Day When Web Design Gets Boring

Nothing can escape the iron teeth of time, and the day when web design gets completely boring and finally fades away will sooner or later come… or perhaps it has already happened? In an online world full of grid-based hero blocks, and yawn-inducing call-to-action buttons, we can’t be sure of anything anymore.

The best thing we can do is to approach the problem rationally, as it can be expected from good professionals.

In this post we try to figure out the time when the web will be fully deprived of creativity, and web designers won’t be anything more than framework-configuring bots. The clock keeps ticking, the dark times are coming, but don’t worry, if we know the schedule we can better prepare for the change.

First of all though, we need to take a look at the bigger picture, and understand how the field of design has managed to survive this long.

5 Free Tools to Design Creative Ads

5 Free Tools to Design Creative Ads

Whether you want to design ads for your new product or design banners for your online profile on… Read more

The Oldest Profession In The World

Design has been the oldest profession in the world. Have you heard it otherwise? Most likely those were just urban legends, dirty jokes or evil gossips.

Goods, products and everything that can be sold or bought need to be first designed. Money or other valuables that were offered in exchange for the service that is mistakenly considered the oldest profession also needed to be designed well before anything could have happened.

If you want to understand the impact design has had on humanity just quickly look around yourself wherever you are. Everything you see right now, other than natural forms and living creatures – objects, buildings, furniture, vehicles, clothes, your tea infuser and coffee mugs – first existed as ideas in designers’ minds, then were smartly prototyped by them.

The global influence of design is so enormous and has so many dimensions that it’s hard to grasp.

So how has the oldest profession in the world managed to survive this long? Throughout the neverending need for change, the constant diversification of the field, and via the theoretical and practical conflicts that have never ceased to exist.

Conflicts That Can Never Be Solved

Any domain that requires at least an ounce of creativity are full of conflicts. As design is creation per se, it is naturally loaded with a lot of dissent.

The questions have always been there: how to provide the best solution, what are the rules, are rules needed at all, along with many other debates and uncertainties. As this post is nothing more than an investigation about the final days of web design as we know it now, we will focus only on the conflict that has had the most impact on our field.

This conflict in design – and generally in art – began when mass production became widely available, around the beginning of the 20th century. Since then creators have been trying to comprehend how they can the best serve human needs while still coming up with creative and unique solutions that fill the void not only physically but also mentally and emotionally.

The opposition of Art Deco and Bauhaus – the handcrafted for the few and the functional for the masses – in the early 20th century excellently represents the nature of this conflict.

Art Deco

Both produced elegant solutions on their own way without invalidating the existence of the other. Something similar happens these days in web design.

The Ever-Expanding Online Universe

When the World Wide Web was created it was hard to figure out how it would finally look like, just like we are right now struggling with finding the magical date when web design will turn insufferably boring.

It’s more and more sure though that the web formed a virtual world parallel to the physical one, that needs to be populated with virtual objects that we know as applications and websites.

The number of things from the physical world that get a representation in the virtual one is growing every day: we buy cool stuff from e-shops, our personalities are represented online, and fabulous solutions for our burning problems are also stored on the web. But not just that.

The rapidly emerging hardware technology also expands our opportunities both as users and creators, just think about the rise of wearables and other smart devices.

The Gray Side of The Early Web

A more complex online world naturally requires more solutions and a wider approach than a simpler one that was mainly about creativity and fun. Or was it? What if there have always been a gray, boring side of web design?

Websites We Visit: How They Look Like 10 Years Ago

Websites We Visit: How They Look Like 10 Years Ago

Most of us probably got our Internet connection somewhere 10 years back. It was also around that time… Read more

We are lucky, as with the help of the Wayback Machine we can easily get an accurate reply at least to this question. Let’s go back to the beginning of the new millennium to see if this frightening assumption can really be true.

Yahoo From 2000
Reuters From 2000
Harvard From 2000
Trip Down Memory Lane: Early Designs of Popular Sites

Trip Down Memory Lane: Early Designs of Popular Sites

Over the years websites update and change their design style gradually, sometimes for better, sometimes for worse, but… Read more

Wait, What?

Yup, this is how the most part of the web looked like in the year 2000. Business sites that had to make profit and web pages of organizations that required easy usability chose the straightforward, simple designs that didn’t leave too much space for imagination, even back in the good old days.

The tools have been constantly changing though, so at least the coding part has never become boring: back then devs used HTML tables, transparent gifs and other sneaky techniques to achieve the logical, easy-to-understand layout; these days we tend to use frameworks like Bootstrap and Zurb Foundation.

10 Lightweight Alternatives To Bootstrap & Foundation

10 Lightweight Alternatives To Bootstrap & Foundation

Choosing the right framework that is the perfect fit for your projects could be a little bit overwhelming… Read more

Tools Are Just Tools

Tools are just tool; it has always been the client and the designer who decide what to achieve with them. It’s possible to build beautiful, award-winning websites with Bootstrap, but of course aesthetics is not always the primary consideration.

User Experience and Usability are more of a concern these days for business clients who need to provide accessible websites for a wide user base. Luckilyclients who want artistic websites are also out there, like they have always been – just think about the needs of a music band, an art gallery or a conference organizer.

Elephant Restaurant's Website

The Final Date

As it has just turned out, web design has always had a functional side that can only use subtler visual elements. We unfortunately run into an infinite loop that will hardly come to an end.

The conflict between functionality and aesthetics is not simply a binary question; it exists on a spectrum that is influenced by more and more factors, as the online world becomes more complicated. Web designers need to reconcile newer and newer needs.

As we exist within an infinite loop that can only be solved with formatting the whole system, it doesn’t bear much sense to stare at our clocks, and worrying about the time when our field will be deprived all of its creativity.

The best thing we can do is to get rid of our annoyingly ticking clocks, and replace them with perpetuum mobiles. Gazing at them with an open mind can be a good meditation practice that can help us understand how we personally can contribute the best to the ever changing world of web design.

Now Read:
Changing The Face Of Web Design: A Case Study Of 25 Years

The post The Day When Web Design Gets Boring appeared first on Hongkiat.

Did you miss our previous article…

Designing For People With Accessibility Needs

The people who use the web are not a homogeneous mass but rather a huge group with incredibly high diversity. Many of them are not native English, or highly educated city dwellers with excellent health conditions. When we design for the public we need to pay attention to this fact; otherwise, we miss out on many potential users, as well as a great possibility to boost the search engine rankings of a site.

Universality and inclusivity are in the focus of the Accessibility web standards that are one of W3C’s web design related standards. The final goal of the Web Accessiblity Initiative (WAI) is to design a web that works “for all people, whatever their hardware, software, language, culture, location, or physical or mental ability”.

When we think about accessibility the most important thing we need to understand is that a user doesn’t need to have full loss of a sense or an ability to be in need for accessibility support. People who have problems such as partial sight loss, or mild hearing impairment also have acessibility needs.

Now let’s see who are the main groups, how they use the web and how the careful designer can improve their user experience.

Visual Impairments

People in this group can have mild or moderate vision impairments in one or both eyes, colour blindness, low vision, blindness or deaf-blindness

In many cases there is a need to change the presentation of the web content to adapt it to their needs. They require the ability to resize text size and images, and to customize fonts, colours, and spacing to increase readability. It’s also a good idea to ensure that people who can’t see the mouse-pointer can navigate through the content using only their keyboards.

Many visually disabled people use screen readers that only work properly if the frontend is semantically coded, otherwise their special assistive softwares can’t identify the structure of the web page and users would hardly be able to make sense of the content.

We need to provide these pages with proper descriptions for hyperlinks, icons, images, and other media types with the help of explanatory alt and title HTML attributes. The rule of thumb here is to make an equivalent text alternative available for each non-textual element.

It’s also important not to stop users from configuring their own browser settings, so if it’s possible, specify everything in relative units (ems, rems, or percentages) instead of exact sizes.

In fact, the bots of Google and other search engines can also be thought of as visually disabled agents, and keep in mind that everything that is good for visually impaired humans also pleases the bots thereby improving the SEO ranking of a site.

Auditory Disabilities

Web users who suffer from hearing impairments of different grades can’t always understand speech, especially when there is a background noise. The most frequent use case here is video content, that needs to be made accessible by adding visual assistance to the audio part.

According to the Media Access Group of the WGBH Radio “an estimated 24 million Americans have enough of a hearing loss that they cannot fully understand the meaning of a television program”.

Using closed captioning in which background noises such as music or explosions are also captioned can help them a lot. Providing options for captions and transcripts can also significantly improve the experience of people who are not native speakers of the recorded language.

We also need to be careful when designing web and mobile apps. If users have to rely solely on interactions using voice, people with auditory disabilities or those without proper audio hardware or software will be excluded from the usage.

App designers also need to pay attention to always adding options to stop, pause, or adjust the volume. Apple TV is an excellent example of a device designed with the deaf and hard of hearing in mind, as it provides them with a nice user interface to customize subtitles and captions to their individual needs.

Auditory Disabilities

Cognitive and Neurological Disabilities

Disorders related to the brain or the peripheral nervous system impact how people move, see, hear and understand things. There are many people who need to process information slower than others, so we need to provide them with clearly structured content that facilitates orientation.

It can also help if we offer different ways of navigation: not only one huge dropdown menu, but also tag clouds, search option, breadcrumbs, and other smart and easy-to-understand solutions.

Enhancing the content with visual cues is crucial when we want to enable people with cognitive and neurological disabilities to understand the information we want to convey to them. Images, graphs, illustrations, and smart typography such as avoiding long paragraphs can do a lot for them.

Reducing the number of distractions like flashing or blinking ads and annoying popups can keep many of them on our sites, just think about those with ADHD (attention deficit hyperactivity disorder) or autism.

If you want to see an example of carefully designed, logically structured content with accessible navigation and descriptive visual cues, take a look at the U.S. government’s Social Security Administration site.

U.S. Government Social Security Administration

Physical Disabilities

Physically disabled people can have motor disorders, limitations of sensations or muscular control, joint problems, missing limbs, and can face many other physical impediments.

Probably the most important thing related to them is always providing full keyboard support, and giving enough time for them to complete tasks such as filling online forms, replying to questions or editing their previous content in comment sections.

Offering keyboard shortcuts, especially on touch-enabled devices can be godsend for this group.

Physically disabled people can face with difficulties when clicking small areas, so we always need to make sure that we design large enough, clickable areas like buttons.

It’s also important to keep in mind that many of them use assistive hardware or software. They can access the content with the help of an on-screen keyboard navigated through with a trackball, or they can use voice recognition or eye-tracking softwares.

Because of this, just like in the previous cases, it’s crucial to build logical, coherent navigation and a well-structured site without too many distractions.



Creating web experiences for disabled people is an excellent design practice. If we build a site that takes the needs of the sensory impaired into consideration, we design a product that is logical, well-structured and easy-to-use. This is not only good for the disabled, but for every single user, as they have the same need for an intuitive and customizable website that is easy to understand.

If we give users a choice about how they want to consume the online content, and carefully think about all the possibilities they might interact with our site, we increase the overall user experience of our design in a significant way.

Now Read:
10 Assistive Tech for People With Disabilities

The post Designing For People With Accessibility Needs appeared first on Hongkiat.

Fresh Resources for Web Designers and Developers (April 2021)

A great product these days relies on the ecosystem. Imagine iPhone without the apps or WordPress without the plugins. They won’t be as useful as they are now.

In this round of the series, let’s take a look at some of the resources that support popular tools or libraries. Here we have quite a handful of React.js libraries, a couple of WordPress plugins, some VSCode extensions, and a lot more. Let’s jump in for the full list.

Fresh Resources for Web Designers and Developers (March 2021)

Fresh Resources for Web Designers and Developers (March 2021)

JavaScript is a wonderful language. You can build nearly anything with JavaScript; from a simple website, desktop application… Read more

Mesh Gradient

A Figma plugin that allows you to generate a beautiful Mesh Gradient. It allows you to edit the gradient axis to achieve a perfect gradient. Having Mesh Gradient can easily make your product design stands out from the crowd.


A WordPress plugin to notify actions that happen on a WordPress site. This plugin provides quite extensive APIs where you can do customization like sending notifications to selected recipients, call services, subscribing to particular actions, and whitelabeling. It’s a great plugin to keep you updated with your site activity.


Spatie Ray

A plugin that connects your WordPress site to Ray.app, Spatie Ray is a desktop application that makes debugging and measuring code performance on your website more convenient. It is also available for some frameworks and CMS such Craft and Laravel.

Spatie Ray


Webhint is an initiative from OpenJS Foundation to help developers build a better web by advocating and creating tools such as this VSCode extension and the browser extension to enforce some best practices.

This tool scans your code or your website and reports if the HTML is lacking in proper attributes, or if the site has some accessibility and performance issues.



A desktop application for macOS that allows you to register a script to automate your tasks such as opening a browser and reading news, opening particular files or directories from a project, search for a book from particular sites, and much more.

It provides several pre-made scripts and will soon also provide collective scripts shared from its users. Script is written in Node.js or JavaScript, so if you’re familiar with the language you can create a custom script that suits your needs.


Laravel Octane

A Laravel library that greatly improves the performance of a Laravel application by leveraging high-performance PHP server environment Swoole or RoadRunner that enables concurrent requests. This allows Laravel to run blazing fast at 6000 req/s from the initial test.

Laravel Octane


PHPMon is a macOS utility application to monitor the PHP service that runs on your machine. It adds a menu on the menu bar where you can see the PHP version that’s running, the extensions, and where the location configuration is. Pretty handy!



A collection of a beautiful hand-crafted collection of more than 200 icons. They come in two variants, Solid and Outline, and are available in SVG and JSX format so you can easily reuse them in your website or digital products.



Focalboard is an open-source application to manage and organises tasks similar to apps like Trello and Notion. You can install FocalBoard on your own server or computers that give you more freedom and flexibility. A great alternative for those who prefer control over convenience.


Gutenberg Icons

A collection of icons used by Gutenberg, the new WordPress editor. This site shows all the icons where you can generate the snippet to reuse it in Gutenberg block or simply download the SVG.

Gutenberg Icons


A collection of tools to generate shapes, backgrounds, and patterns to use in your design. It features a number of tools including one to generate a Blob, a Wave, Layer Waves, gradients, and a few more to come.


Design Patterns

A collection of design patterns to structure your PHP codes. It covers various patterns and is recommended source if you intend to deep dive and improve your PHP development skills.


Accessibility Path

A collection of learning materials to know about web accessibility and inclusive design. You can find books, videos, articles from blogs, and tools. A great source to help you get started with the topics.


Code Tour

A VSCode extension to add a guided tour to help users walk through the codebase in a project. This is a great tool to help new developer to get familiar with the code quickly.


React Hook Form

An award-winning React.js library to create form. It is easy to use, lightweight, performant and renders proper markup with native HTML validation. On top of that, this library is also nicely integrated with tools like TypeScript for type validation, ReactNative for building form in a mobile app, and Validation library like yup for those who need go more advanced.



A framework to build desktop applications with web technicalogies. Tauri focuses on performance, smaller app output, and provides a whole experience for developers to create an app. It provides CLI, API, Testing and CI framework. An example of an app built with Tauri can be just 600KB.


React Admin

A React.js library to develop a web application to manage any kind of data. It’s built on top of modern stack which includes REST and GraphQL APIs, ES6, React, and Material Design. This library is a great starting point to build an admin interface using React.js.

React Admin


A JavaScript library to build an interactive text editor for modern browsers. It looks modern and clean than the usual WYSIWYG editor and is extensible with Plugins. It also generates a well-structured data that you can use anywhere on the website, mobile app, AMP, Instant Articles, and speech readers.



A good resource that show you code snippets and tips to interact with DOM with just native API from the browser. These days you no longer need to use jQuery or Zepto.


Awesome Compose

This is where you can find an awesome list of tools, apps, that can help to boost your productivity when working with Docker and Docker Composer.

Awesome Compose

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

Did you miss our previous article…

Insider Jokes Only Programmers Will Get

It isn’t easy being a programmer. They code all day, debug all night and go through thousands of code lines trying to clear up all possible messes before going live with their code. Sometimes, it takes a fellow programmer to understand the hardships of another programmer. The same can be said of their jokes.

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

30 Common Reactions Programmers Have When Things Go Wrong

30 Common Reactions Programmers Have When Things Go Wrong

Developing applications can be a very stressful job. Nobody is perfect, and running into buggy code is fairly… Read more

Some People Call It Magic
This Is Why You Should Hug Your Programmer
programmer insider jokes
So That’s What It Is!
programmer insider jokes
We Should Thank The Inventor Of “Hardware”
programmer insider jokes

Courtesy: csl

Well, Technically It’s True
programmer insider jokes

Courtesy: Claudio

Get It?
programmer insider jokes

Courtesy: Robert S.

Where Programmers Usually Hang Out.
programmer insider jokes
Programmers Are People Too
programmer insider jokes

Courtesy: gaylard

programmer insider jokes

Courtesy: CCH

The difference between nerd introvert and extrovert.
programmer insider jokes
Brace For Backlash
programmer insider jokes
That’s Why You See Most Programmers Bespectacular!
programmer insider jokes

Courtesy: Arjan Einbu

Seriously, Try It
programmer insider jokes
0, 1, 2, 3…
programmer insider jokes
Good Luck Getting An Explanation About This
programmer insider jokes
The Greatest Programmer Of All Time
programmer insider jokes
For Him Nothing Is Impossible.
programmer insider jokes
It’s An Addiction
programmer insider jokes
Hello World
programmer insider jokes

Courtesy: Don Neufeld

Java Programmers Should Know This
programmer insider jokes
Monkey See, Monkey Do
programmer insider jokes
Sometimes We Wonder Why Do We Bother
programmer insider jokes
Once Upon A Time…
programmer insider jokes
programmer insider jokes

Courtesy: GnevZmaja

programmer insider jokes

Courtesy: Adam Liss

SQL Clubbing
programmer insider jokes
Unix friends
programmer insider jokes

Courtesy: CodingBytes

The Programmer Has A Good Point
programmer insider jokes

Courtesy: Martin Cote

programmer insider jokes

Courtesy: Macke

Well, Does It?
programmer insider jokes

Courtesy: Adam Liss

Think Of The Possibilities!
programmer insider jokes
Reigning Champion
programmer insider jokes
Be awesome
programmer insider jokes
programmer insider jokes
Do You Think This Is A Game?
programmer insider jokes
programmer insider jokes
Never ever…
programmer insider jokes
No Class
programmer insider jokes
Which Are You?
programmer insider jokes
Conditional Love
programmer insider jokes
programmer insider jokes
programmer insider jokes

Courtesy: CommitStrip

programmer insider jokes
programmer insider jokes
programmer insider jokes

Now Read:
30 CSS Puns That Prove Designers Have A Great Sense Of Humor

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

Did you miss our previous article…

Brand Identity Lessons You Can Learn from Marvel Studios

(Guest writer: Manas Chowdhury)

From publishing an artist’s resignation letter on the internet, trademarking the word “zombies”, and now giving a whole new meaning to terms such as Captain, Iron, Thunderbolt, and many others — there is nothing this Studios would step back from. Yes, I am a Marvel fan, and it seems obvious.

However, its amazing graphics, storytelling, and an interesting sense of how regular superheroes can be, are not the only aspects that pull us into the Marvel Universe. In fact, it is more about how they combined it all together to connect with the audience like none of the others in the industry.

Why Proper Brand Design Is Important

Why Proper Brand Design Is Important

Some people think that traditional branding design is becoming irrelevant in the age of social networking, new media,… Read more

Branding Formulas to Live By

Marvel Studios have not only impressed the world with their independent movies but also showed how an ongoing narrative is done in the right manner. Through this ongoing narrative, a brand like never before has taken its place in the cinema industry.

Read more: How Marvel Went to Bankruptcy to Billions

“Just because something works, doesn’t mean it can’t be improved.” — Shuri, Black Panther

Up until the year 2019, Marvel Studios had enjoyed a commercial success worth $14 billion through 21 consecutive, top-ranking movies in the course of 11 years. Starting with ‘Batman and Robin,’ the entire Marvel universe has been disrupting the industry which was presumed extinct as per some of their competitors.

Speaking of competitors, I understand that many of the cinematography enthusiasts have a question: with DC’s characters being more recognizable as compared to the Marvel characters, why does MCU (Marvel Cinematic Universe) hold 1st place commercially and in overall success? The answer is its branding approaches.

Taking (Calculated) Risks

We have come across this phenomenon a lot of times in our lives, but to understand it a bit deeper — and inaction — let us see what Marvel Cinematic Universe has to portray. Here are some calculated risks which were taken by Marvel Studios:

  • Even with the ‘The Incredible Hulk’ leading MCU to the bench, the company did not change its course from highlighting Avengers.
  • Some viewers may not understand — and do not — understand the Marvel universe if they step in at a random movie without knowing the backstory of characters and plots. However, that did not stop MCU from creating storylines from the very beginning.
  • Attempting to bring change through a genre exploration and bringing action comedies, ‘Ant-Man’ and ‘Guardians,’ into the universe.

Having said that, Marvel Cinematic Universe made sure that these risks were not an impulse or a hunch, but a calculated path towards exploration. Take it from MCU, taking risks does not have to be a hasty decision.

Instead, a careful and well-researched risk can take the brand places you would not imagine.

Read in detail: What You Can Learn from the Marvel Cinematic Universe About Taking Risks

Being the First

Okay, be it the first one to ask a question in a class or the first one to build the Wright Flyer, it will always have its pros and cons. For instance, Apple did not act promptly on launching mp3 players, but the iPod was certainly worth the wait. On the contrary, Samsung amused us all by being the first one to launch flip phones but did not see success at its best.

Having said that, the Marvel Cinematic Universe has managed to do it all. Not only is Marvel Studios the first one to create interconnected movies, but it has managed to do it right in all manners.

Following the MCU, Warner Bros’ DC Comic Studios and Universal Pictures have also given their shot at creating a universe out of their movies and series. While DC did it effectively, Universal Pictures tried to force-feed the viewers with sequels at a lighting speed, giving them no time to get invested in a character or plot.

All in all, Marvel Studios is a brand you look up to when you want to combine promptness with effective storytelling and patience and create a brand up to similar standards.

Understanding the Importance of People

importance of people

With time, entrepreneurs, hiring managers, and brand managers understand that products, increasing sales, and customers are not all the ingredients when it comes to brand fruition. However, you can be a brand that understands the importance of people but undervalues them all the same.

If we zoom in on the Marvel Cinematic Universe, we will notice that their key is not to simply hire talented people, but also to keep them and enrich their talent for the greater good of everyone: the people as well as the brand.

The universe did not only lock in some on-screen actors but also does the same with the off-screen people involved in the entertainment industry. On the other hand, Warner Brothers face struggles in engaging the viewers with the same artist for more than 3-4 years.

I understand, to this approach, many hiring managers might come across a concern that this can lead to missing out on fresh talent and create a monotonous environment, especially in the entertainment industry. However, the Marvel Cinematic Universe has successfully proven that it is not true.

You can work with the same employees and achieve growth at the same or higher rate without having to go through the hiring trouble every 2 years. All you have to do is align your teams’ goals with your brand and ensure that it benefits every member of the company.

Working on Brand Consistency

Beating its competitors at Brand Linkage score, Marvel Cinematic Universe indicates more consistency than any other brand. For instance, even with a better character arc(s), DC’s inconsistent character connections led to a decrease in audience engagement.

The company takes brand consistency under its to-do lists and has not removed it for more than 10 years; including promotions, designs, characters, and trailers.

Related: Marvel Brand Identity Spotlight — Step by Step Design process

I would like to highlight that you need not be a well-established brand such as Marvel Studios to give attention to consistency. Even as a budding brand or startup — especially as a budding brand or startup — you need to make sure that your brand is memorable and recognizable, which cannot be achieved without being consistent with your marketing, product packaging, designs, and other aspects of branding.

Becoming a Brand Like Marvel

Firstly, no, it will not be easy; but no, it is neither impossible. The key is to understand that with the world having access to almost everything through the internet — what your brand does, what it stands for, who works for it, what others have to say about it — every tiny detail matters.

Read also: 5 Steps to Building a Strong Brand Identity When the Game is Constantly Changing

Even with Marvel Studios, if something as impactful as backstory needs attention, so do the silly jokes and callbacks of the same jokes. In fact, this is what helped MCU build a web of characters that is interesting and relatable, all while being a superhero. For instance, Captain America was an orphan, insecure kid who had an urge to prove himself.

Similarly, Black Panther turned out to become an orphan in adulthood, overcoming his demons to become a better man. Both these leaders are adored because the audience sees themselves in those capes.

Similarly, your brand needs to be relatable, inspiring, and consistent to reach its fullest potential. You may not have superheroes doing it for you, but being authentic, transparent, approachable, motivated, and innovative are some powers you and your brand will always have, and fly using the same to reach the peak.

(This guest post is written by Manas Chowdhury for Hongkiat.com. Manas is a Digital marketing enthusiast with a PG in Economics and a specialization in Finance. He is an entrepreneur who has a keen interest in stocks, bullions, gaming, and blockchain technology. While he runs his own startup, he also enjoys writing on a variety of topics and being a philanthropist; he is also involved in various activities contributing to the betterment of the environment and society. You can connect with Manas on LinkedIn.)

(Image Credit: Unsplash)

The post Brand Identity Lessons You Can Learn from Marvel Studios appeared first on Hongkiat.

Did you miss our previous article…

Beautiful Landing Pages (Tips and Examples)

(Guest writer: Laura Moisei)

Hundreds of witty articles have been written around the topic of landing pages. We all know the basic facts – that these are the pages a visitor reaches after clicking on a banner ad or a promotional link, and that they play a crucial marketing role by converting leads into customers for the business. When it comes to designing a landing page yourself, however, matters seem to be far more delicate than you would have expected after going through how-to documentation. This is why today, we have chosen to share a collection of actual landing page examples for inspiration.

According to a pretty scholarly classification you may find in Wikipedia, landing pages fall into two major categories: reference and transactional. If they are to be called a reference, pages have to display information that is both appealing and relevant to the visitor (text, multimedia). “Transactional” landing pages are the ones that aim at immediate sales or at least in capturing strong sales leads.

As you will probably agree with me, all landing pages meet both criteria: they inform the visitor upon the offer as well as incite actions from his side. Otherwise, we wouldn’t need calls-to-action on absolutely any landing page, would we?

What needs to be clear before launching any landing page in the www is the nature of the desired visitors’ action. Is increasing newsletter signups your goal? Then design a CTA with the message “Signup now to our newsletter”. Do you aim to have trial purchases from visitors? Say so. Generally speaking, the essential recipe is to make your landing page express this offer as clearly and as enticingly as possible.

Coming Soon Pages & How to Do Them Right

Coming Soon Pages & How to Do Them Right

For a coming soon page, all upcoming websites can ever do is to show an empty screen with… Read more

Tips for Designing a Landing Page

Some quick tips to start from when designing a landing page:

1. Use the AIDA principle

This is a chain of events that we desire to happen once a lead reaches the platform displaying the promoted product or service. Mainly, the steps are:

  1. Awareness – attract attention from the visitor
  2. Interest – which can be aroused by highlighting the benefits to the customer
  3. Desire – induce in customers the idea that they want the product or service
  4. Action – customers performing the purchase process
2. Not too many distractions; leave A way out

The idea is simple. If the landing page has virtually no navigation option except for the CTA button, visitors will force their exit. Don’t think that if you don’t provide any navigation, they won’t find a way to leave – they will, maybe even by shutting down the browser. And these visitors will not come back.

3. Make it pass the blink test

Typically, a landing page has to catch the visitor’s attention in the first 3 seconds of entry. If the guest blinks, and can’t see clearly what he should find on the page or isn’t interested with what he saw, he is most likely to bounce away empty-handed.

4. Don’t create false expectations

The landing page has to be consistent with the hints provided by the original ad, or vice versa. Visitors have to find on the landing page what they were first promised in the ad they clicked.

As we have promised, let’s tour some nicely designed and effective landing pages of B2B and B2C. We will explore their strengths and inevitable weaknesses. Watch out for the following in the gallery below: visual communication, branding and trust indicators, content effectiveness, calls-to-action.

Showcase: Beautiful Landing Pages

Click image to view full landing page.

Blue Apron
blue apron
Dropbox Paper
dropbox paper

(This guest post is written by Laura Moisei for Hongkiat.com. Laura has a bachelors degree in Communication Science and spends most of the time pursuing her passion for design and writing. She works for 123ContactForm (123contactform.com), an online form and survey builder that helps users create beautiful forms for any web page.)

The post Beautiful Landing Pages (Tips and Examples) appeared first on Hongkiat.

Did you miss our previous article…

How Does Logo Design Affect Your Online Brand Perception?

(Guest writer: Amtul Rafay)

Logos are one of the core parts of a company’s branding strategy. These company symbols are the first thing that a consumer is exposed to. If it does not portray your brand message effectively, it will fail to attract and drive leads to the company.

Although there are many other components to a business’s branding plan, the logo occupies a special place of importance. As a visual medium of communication, it’s the logo’s job to convey your brand values and message to a possible lead, attracting them into wanting to learn more.

Moreover, it helps people remember your brand more easily. Statistically, people find it easier to absorb information visually than through any other medium. And if the logo design itself is simple, it makes it even easier for a consumer to remember and associate that symbol with your brand.

According to RenderForest, logos are the most recognizable brand identifiers at 75% in 2021. Therefore, let’s look at how the design of your logo can affect consumers’ perceptions of your brand.

5 Things Your Brand Must Have Besides A Logo

5 Things Your Brand Must Have Besides A Logo

Lots of people, many designers included, think a “brand” is just a nice looking logo. Wrong. So, so… Read more

Simple Design Equals Highly Memorable

If you look at a few of the most famous symbols depicting a business or personal brand, you will notice that they all have one thing in common. They all sport a simple yet distinct design.

Suppose we take the example of the McDonald’s logo. The simple golden arches of the symbol have become so iconic that even a child as young as four years of age can recognize it by design alone. However, it is so distinct that it is hard to mistake the logo for anyone else’s.

Similarly, logos for brands like Twitter, Facebook, and Nike are simple in design yet sufficiently unique. Consumers do not find it hard to associate with the brand. All these examples point to one fact – the simpler the design, the easier it is for a consumer to remember it.

But it takes a fine line between making a logo unique and straightforward and turning it into a generic design. Moreover, your logo needs to be able to embody and portray your brand message effectively. Let’s look at a few symbols to understand how to keep your design simple yet effective.

Minimalist Logos That Effectively Portray Their Brand

In branding, we have many examples that successfully portray simplistic logo design effects on brand perception. From many fictional superhero logos to real-life company logos that have made their intended mark, minimalist designs have shown effectiveness.

Let’s take a look.

Batman Logo

Batman’s iconic logo has changed many times over the years. The underlying concept has always been the same. But over the years, changing notions of how specific comic characters should be perceived, his logo has taken on a darker color palette.

The initial design featured a simple silhouette of a bat with flared wings, thrown in shadow due to bright light behind it. The plan depicted the character’s predisposition to be a vigilante at night and be as stealthy as a bat. The design was predominantly created for print on paper. Therefore the choice of a brighter color combination was made.

Over the years, with TV and film eclipsing the popularity of print comics, the logo has taken on a darker color to portray the character and their personality better. Now sporting a deep black over dark grey, the new design suits Gotham’s vigilante aesthetic far better than any previous logo.

Captain America Logo
Captain America Logo

Next up, we have Captain America’s logo. Unlike Batman, Cap is a character that acts in the open. Moreover, he is meant to be a role model and a rallying symbol for the entire United States of America.

That is why the symbol and his popular color palette contain bright shades and a distinct design meant to stand out rather than blend in.

Sporting the colors of the US flag, Captain America’s logo features a big and bright white star in the middle of the shield. Encircling the star are four alternating colorful blue and red bands, signifying America’s trademark “stars and stripes.”

The entire theme of this simple logo effectively portrays the character as a bright, shining beacon of hope, strength, and trustworthiness. That makes it one of the best examples of how logo design can affect a brand’s perception.

Punisher Logo

Punisher is another character that uses its logo design to affect how viewers perceive the brand. In the comics, the antihero is usually working against established villains, making a reader assume that the character is a hero. Yet, the actions of the Punisher are often quite similar to those used by the villains themselves.

Now, this might have confused comic fans who were not aware of the character’s fictional history. However, the logo for the Punisher makes it assume that he is anything but a superhero.

Utilizing an elongated white skull over a black background, the logo can be easily considered a symbol representing one of the bad guys. Now you might be thinking, doesn’t that cause mixed signals in the minds of the readers?

Surprisingly, no. The entire premise of the character is that the Punisher doesn’t want normals or other good guys thinking that he is a hero. Yet, he doesn’t care what his foes feel about him. That is why the symbol is the perfect identification for the Punisher and gives the accurate perception that the character hopes to portray.

Twitter Logo
Twitter Logo

Now let’s come to a real-life brand that has used a simple logo design to affect consumer perception.

The name, logo, and operating concept of Twitter have always been unique. Taking inspiration from the short and shrill sound a bird makes, the social media platform developed a way to communicate via short messages.

The logo is straightforward, featuring a simplified outline of a small bird’s body, effectively portraying the name. And when taken as part of a larger branding strategy, it is pretty ingenious. The logo brings to mind the name of the brand, which makes us remember the platform USP.

The bright blue color palette also signifies freedom of expression that is the platform’s hallmark.

Logo Design and Social Media

An essential aspect of logo design for your brand is that it should look and be perceived the same, whether for a digital medium or a physical one.

That is where social media comes in. As one of the most popular and vital marketing tools nowadays, your brand logo must be perfectly legible and compelling.

Featuring on various social media platforms on different screen sizes, such as Instagram, which allows a maximum resolution of 180 x180 pixels, your logo needs to be distinct to instill the desired perception.

That is how a logo’s design can affect its brand’s perception in the eyes of its consumers.

(This guest post is written by Amtul Rafay for Hongkiat.com. Amtul is a content marketer at leading graphic design agency – Logo Poppin (logopoppin.com). She loves to explore futuristic trends in the tech industry while believing in the influential power of research-backed opinions. Being passionate about blogging, she writes on a variety of topics including digital marketing, graphic designing, branding, and social media. Besides that, she is also fond of traveling & an avid reader by heart.)

The post How Does Logo Design Affect Your Online Brand Perception? appeared first on Hongkiat.

Did you miss our previous article…

Fresh Resources for Web Designers and Developers (October 2021)

We’ve been running this series for several years now and feels like we are never running out of great new resources for designers and developers. In this round of the series, we have tools, articles and tutorials that both backend PHP developers and front-end developers.

We have got a resource to get dummy logo, a tool to generate image mockups, a GUI tool to scaffold your next cool application with Laravel, and a lot more.

Let’s jump in to get the full list.

Fresh Resources for Web Designers and Developers (September 2021)

Fresh Resources for Web Designers and Developers (September 2021)

There is lot happening this month in the tech industry; from Docker updating their business and plans, prominent… Read more


A web application to generate nicely prsent your code with image. You can customize the background color, the code editor frame, and the size. It supports many programming language such as PHP, JavaScript, as well as templating language like Twig. A handy tool to share code beatifully.


With PHP8, PHP got a boost of improvements including Fiber that’s coming to PHP8.1. This addition allows PHP manage concurrency operation natively, and developer to build framework on top of it such as to build “Event Loop”. Event Loop is a mecanism that will allow PHP to perform non-blocking I/O process. Not many reference for Event Loop on PHP, at the moment, but you can look into the same concept from the Node.js reference.


Laravel Storybook

This library integrates Storybook, a popular application to manage UI and design system, to Laravel. it allows that you can render unit of your Larvel components using the Blade templating and Storybook Server right within your Laravel app.

Laravel Storybook

VSCode WebView UI

A UI and design library for Visual Studio Code (VSCode) editor. It contains of common interface for the editor like the button, select, textarea and input. A great resource if you plan to build an extension for VSCode and maintain consistency of your extension with the editor.

VSCode WebView UI

Laravel Initializer

A web application to generate a scaffold with Laravel. The app supports on generating the bare Laravel framework, “Breeze” that already bundled with some utitlies (e.g. user authentication, UI framework), and “Jetstream” which is a more advanced upgraded version of Breeze. On top of that, you can also set the stack such as the database — whether you’d like to choose MySQL or PosgreSQL, Authentication method, Storage, Cache, and even the Payment system.

Laravel Initializer

PHP Flasher

A framework to manage a notification system with PHP. It allows you to show various type of notifications simultaneously, render notification from JSON, and even send notification to the OS system. If you’re a developer who is very comfortable with PHP, you will definitely will appreciate this framework.

PHP Flasher


A collection of free dummy logo you can display on your mockup, template, or dummy website and application. It has quite a handful of collection that’s designed to fit in any UI or graphic styles. You can customize the styles, color, and download each logo as SVG.



MJML is a markup that aims to make it easier when composing layout for email template. It’s abstracting the complexity of email template with its own HTML custom element. You can start adding the component. The doc is pretty comprehensive if you’ve just get started. And then you can compile the markup with the yarn build to get the real output you can send to emails.


Learn CSS

An initiaive from Google Developer to provide a comprehensive resource to learn CSS. It covers the very fundamental of CSS such as Box Model, Selectors, Cascade, and Inheritance and Specificity that gives a solid foundation of how CSS works. Whether you just got started or an advanced front-end developers will certainly level-up your CSS skills.

Learn CSS


ViteBook aims to provide a alternative to Storybook — a popular open-source tool to manage UI and design system. ViteBook key focus is performance with it being built on top of Vite.js. ViteBook is currently in early WIP. I’m looking forward to how it will evolve.



Encute is a PHP library to load and manage scripts and styles on WordPress with Object-oriented Programming (OOP) pattern. So we get a nicer syntax plus it adds some additional features. For example, you can enqueu script with “defer” or “async” load, and load it as a “module”


Bootstrap Icons

Bootstrap used to include FontAwesome icon in its bundle. It’s now created its own official set of icons. The set contains more than 1.300 icons. Each icon comes in two different styles, outline and filled style, and comes with two format font icon, and SVG. Like Bootstrap, these icons are free forever.

Bootstrap Icons


An initiative and collaborative effort from web developers and engineers to create standard user interface with an open specification that developer can adopt and implment regardless of the platform used on the website. It’s currently still in a work in progress. I’m looking forward how this will affect the web development in the future.



An algortihm to generate a “blur” representation of an image. This gives you a small beautiful image that you can use as a placeholder while the real image is loaded fully. No more ugly empty boxes.



Have you encountered CORS error on your website? Are you wondering how that happens and how to fix it properly? This article provides all the answer with detailed in-depth explanation.



Mo is a handy CLI utility that allows you to find unused Node.js modules from, your computer system. It will also examine memory usage and provide you an option if you want to remove it from your computer. It’s great way to free up some disk space in your computer.


Bundlers Tooling Report

“Bundlers Tooling Report” provides a detailed report of features of a bundler. There are several on the list such as Webpack, Browserify, Rollup, and Parcel. If you’re not sure which one is would be fit in your application, this report should help you.

Bundlers Tooling Report


A set of more than 120 components to build modern web and application with React. Aside of components, it also provides a list of custom React Hooks that can be handy in a lot of situation such as to accessing the DOM reference, perform “debounced” function, state management, etc.



An open-source Node.js based Headless CMS. It helps developer build appliation or site with custom datamodel faster. You simply need to describe the schema, It will automatically provide you the UI as well as GraphQL API to access the data on the front-end.



A handy tool to generate dummy image or mockup. Instead of generating random image, it allows you to choose the theme of the image. Such as the “movie” will generate the list image movie poster image, “album” to generate music album cover, and “game” to generate game cover image. You can select that would fit in the theme of your website.


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

Did you miss our previous article…

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…