Our aim is to demystify these error messages, explain their causes, and provide practical solutions for both web users and website administrators. Whether you’re looking to enhance your website’s user experience, improve its SEO, or simply satisfy your tech curiosity, this guide has got you covered. Let’s explore the fascinating world behind these error codes and learn how to effectively manage them for a smoother web experience.

Decoding Status Codes

Every error page online is associated with an HTTP status code from the server. These codes are three-digit numbers, with the first digit defining the code’s category:

• 1XX status codes are informational
• 2XX signals successful operations
• 3XX denotes redirections

These first three categories don’t lead to HTML error pages. In these cases, the client knows the next steps and proceeds without issue. The more noticeable codes are the 4XX and 5XX types:

• 4XX codes point to client-side errors
• 5XXs indicate server-side issues

HTML error pages appear in these scenarios because the client is unsure of how to proceed. Let’s delve into what occurs behind the scenes during these errors and how to handle them.

Client-Side Errors (4XX)

400 – Bad Request

When a server can’t understand a request from the client, a 400 Bad Request error appears. This often occurs when the browser’s data doesn’t follow the HTTP protocol rules, leading to a request with malformed syntax.

A 400 error typically suggests an issue on the client side, like a compromised operating system, unstable internet connection, browser errors, or cache issues. It’s wise to troubleshoot your device first—try opening the webpage in a different browser, clear the cache, or check for security updates. Consistent 400 errors across various sites might signal the need for a thorough security check of your PC or Mac.

401 – Authorization Required

A 401 Authorization Required code appears when accessing a password-protected webpage. Initially, you’ll see a popup for login credentials rather than a direct error message.

If you have the right credentials, you can access the site. If not, you’ll be redirected to the Authorization Required error page. For website owners, you can implement this protection through your cPanel account.

To add password protection, go to the “Password Protect Directories” option in the “Security” section of cPanel. This is an effective way to secure areas like the wp-admin folder in WordPress sites.

403 – Forbidden

The 403 Forbidden error occurs when the server refuses a client’s request without an explanation. It’s not due to malformed requests or authorization issues.

Common causes include restrictions set by website owners against browsing the site’s file directory or certain files not being permitted for web viewing.

Setting up a 403 error can enhance your website’s security by concealing its directory structure or sensitive files. Many web hosts offer this protection by default. To add it manually, access the Advanced section in cPanel and select Index Manager.

Here, you can control how visitors interact with specific directories on your site. Choosing No Indexing will result in a 403 error for anyone trying to access that directory.

404 – Not Found

The 404 error is the most recognizable HTTP status code. It’s displayed by the browser when the server can’t find the requested location. This can happen if a visitor mistypes the URL, or the site’s permalink structure has changed, leaving old links pointing to non-existent pages. Sometimes, 404s occur on top-level URLs, often due to a recent server move where the DNS still points to the old location. These issues generally resolve themselves quickly.

Despite some SEO experts suggesting otherwise, Google states that “404 errors don’t impact your site’s ranking in Google, and you can safely ignore them.” However, it’s still beneficial to minimize 404s as they can increase your site’s bounce rate. A common solution is to use 301 redirects for permanently removed pages and 302 redirects for temporarily unavailable ones.

Read also:

• Creative Error 404 Pages – Part I
• Creative Error 404 Pages – Part II

408 – Request Time-Out

A 408 Request Time-Out error occurs when a client’s request takes too long, leading the server to time out and close the connection. This happens if the server doesn’t receive a complete request within its waiting timeframe. Persistent 408 errors could be due to heavy loads on the server or the client’s system.

Occasionally, both the client and server are functioning correctly, but temporary internet surges can delay message delivery. Like with 404s, many websites customize their 408 error pages. Typically, a simple page refresh using the F5 button can resolve a 408 error.

410 – Gone

The 410 Gone error is similar to the 404 but with a key difference. While both indicate the server can’t find the requested file, the 410 error explicitly signifies a permanent condition. It tells the client that the resource was deliberately made unavailable and that any incoming links should be removed. Unlike the 404, which leaves room for uncertainty about the file’s permanence, a 410 error is a definitive statement.

For those managing servers, it’s important to know how Google crawlers differentiate between 404s and 410s. In this video, Matt Cutts from Google discusses this distinction. Properly differentiating between 404 and 410 errors can improve your site’s standing with Google.

Server Errors (5XX)

500 – Internal Server Error

The 500 Internal Server Error is a common server-side error that arises from an unexpected issue preventing the server from fulfilling a request. As a catch-all error, it’s used when other specific 5XX server-side errors don’t apply.

Even though the issue is server-related, you can try actions like reloading the page, clearing your browser’s cache, or deleting cookies and restarting the browser to resolve it. If the problem persists, inform the webmaster. If you encounter this error on your own site, check for a permission error, a corrupt .htaccess file, or a low memory limit. WordPress users should also consider a problematic third-party plugin and deactivate plugins one at a time to identify the issue.

502 – Bad Gateway

The 502 error occurs due to communication issues between two servers. It happens when the client connects to a server acting as a gateway or proxy, which then tries to access an upstream server for additional services. An example is an Apache server accessed by a proxy server, or a large ISP’s name server accessed by a local name server.

Encountering a Bad Gateway error means the server received an invalid response from an upstream server.

This error typically indicates a disagreement in data exchange protocols between servers rather than an outright failure of the upstream server. Contact your hosting provider if you see a 502 error on your site.

503 – Service Temporarily Unavailable

The 503 Service Temporarily Unavailable error appears during server overloads or maintenance periods, indicating the server is currently unavailable but the condition is temporary.

Website owners should be knowledgeable about the 503 status to manage scheduled maintenance properly, as improper handling can affect the site’s search engine ranking. For guidance, refer to tutorials on Yoast’s SEO blog or moz.com.

Learn how to handle this at Yoast and Moz.

504 – Gateway Time-Out

The 504 Gateway Time-Out error is another server-server communication issue, similar to the 502 error. It occurs when a lower-level server doesn’t receive a timely response from an upstream server it’s trying to access.

This time-out issue, akin to the 408 Request Time-Out error between client and server, usually signals slow communication between the two servers or the possibility that the upstream server is down.

As 504 errors involve network issues beyond typical user control, addressing them requires access to the network’s backend. In many cases, simply refreshing the page after a few minutes can resolve the issue, assuming the service providers are actively working on the problem.

Wrapping Up

In conclusion, understanding HTTP status codes is more than a technical necessity; it’s an essential part of creating a seamless online experience for both website owners and visitors. From the common 404 Not Found to the more complex 500 Internal Server Error, each code offers valuable insights into the health and functionality of a website. By effectively recognizing and addressing these errors, website administrators can significantly enhance site performance, improve user satisfaction, and maintain optimal SEO rankings.

Remember, each error code is an opportunity to troubleshoot, improve, and evolve your website. Armed with the knowledge from this guide, you’re now better equipped to handle these challenges and ensure that your site remains accessible, efficient, and user-friendly. Let’s embrace these codes not as hurdles, but as stepping stones towards a more robust and resilient web presence.

The post Understanding 404 and Other Common HTTP Errors appeared first on Hongkiat.

In this article, we’ll explore why automated testing is beneficial, how it functions, and introduce you to some of the top testing frameworks that you can use to get started.

Why Testing is Crucial for PHP Development

Many beginner PHP developers overlook the importance of writing tests for their code. Often, we start our careers by manually checking each new feature or function in the browser, only to be perplexed when something doesn’t work as expected.

Writing tests for our code can save us hours of debugging and headaches. When untested code is deployed, the feedback isn’t always positive. So, what’s the solution?

The answer lies in establishing a productive testing routine. This involves writing our own tests that check whether our application code functions correctly.

But here’s the catch: testing code should be written before the actual application code. This proactive approach ensures that our code functions correctly from the start. The testing scripts are usually stored in separate files. Should any errors arise in our PHP application, all we need to do is run our tests, which will help identify and resolve issues effectively.

Apart from saving time and ensuring our app is ready for production, testing offers several other benefits, such as:

• More maintainable code
• Easier code refactoring
• Fewer security risks
• A leaner codebase (since adapting the application code to match the test code helps avoid unnecessary components)
• Enhanced performance

Understanding Automated Testing

While we can conduct tests manually, it often becomes a repetitive and time-consuming process. Automated testing replaces this manual effort with specific software tools that handle the tedious aspects, allowing us more time to focus on the logic behind the testing code.

Fortunately, PHP’s popularity means there are plenty of automated testing frameworks available to choose from.

Test-Driven Development (TDD) vs. Behaviour-Driven Development (BDD)

Automated testing frameworks typically follow one of two main methodologies: Test-Driven Development (TDD) and Behaviour-Driven Development (BDD). Both approaches prioritize writing tests before the application code, driving the development process. The key difference lies in the syntax of the testing code: TDD utilizes standard PHP code in its tests, while BDD employs human-readable sentences to describe feature behaviors, making it accessible to non-technical stakeholders as well.

A typical TDD test appears like this in a code editor, using regular object-oriented PHP code:

Conversely, a BDD test might look like this, understandable even to those not versed in programming:

PHP Automated Testing Frameworks

Now that we have a basic understanding of automated testing, let’s dive into 10 of the most effective automated testing frameworks available for PHP.

PHPUnit

PHPUnit is a widely recognized testing framework for crafting Unit Tests in PHP applications. Unit tests evaluate individual units of code separately. Using PHPUnit facilitates test-driven development, allowing for thorough examination of each code segment.

PHPUnit operates via the command line and offers a versatile TestCase class for developers to extend as needed. It also enables the use of pre-written assertion methods to confirm specific behaviors in the application.

Codeception

Codeception is a comprehensive framework that supports Unit Tests, as well as Functional and Acceptance Tests. Unlike Unit Tests, Functional and Acceptance Tests examine the PHP application as an integrated system. Codeception allows for the customization of various modules to suit different development requirements.

Codeception is compatible with numerous PHP development frameworks, including Symfony2, Laravel4, Yii, Phalcon, and Zend Framework. This integration enables a highly efficient development process by combining a PHP testing and development framework.

Behat

Behat stands out in the realm of behaviour-driven PHP testing frameworks. Behat’s tests resemble narratives rather than conventional code. This framework employs the StoryBDD method of behaviour-driven development (as opposed to SpecBDD).

Inspired by the Cucumber project for Ruby, Behat offers a unique approach to testing in PHP.

PHPSpec

PHPSpec is another framework that adopts the behaviour-driven testing methodology, specifically the SpecBDD subtype. In PHPSpec, the process starts by writing specifications that define the expected behavior of application code. This framework is influenced by the RSpec Ruby testing framework.

Storyplayer

Storyplayer is a comprehensive testing framework designed for full-stack, end-to-end testing of entire platforms. It offers capabilities for creating and destroying testing environments as needed, aligning with the TDD approach. Storyplayer enables writing functional tests that evaluate the application in its entirety.

Peridot

Peridot is a flexible, lightweight testing framework for PHP, known for its event-driven architecture. This design allows for extensive customization through plugins and reporters.

Peridot employs an easy-to-understand describe-it syntax, facilitating clear communication of how application code should operate.

Atoum

Atoum is a modern and user-friendly PHP testing framework, ideal for running unit tests. It’s designed to streamline the testing process, utilizing features introduced in PHP 5.3, making it incompatible with older PHP versions. Atoum emphasizes a secure testing environment by isolating each test method in its own PHP process.

8. Kahlan

Kahlan is a feature-rich BDD testing framework, supporting Unit Tests through the describe-it syntax. Adhering to the KISS principle, Kahlan is streamlined and efficient, requiring PHP 5.5 or newer. Despite its small code base, which is significantly smaller than PHPUnit, Kahlan offers a wealth of features for a flexible and customizable testing experience.

Selenium

Selenium is an advanced testing framework that specializes in automating web browsers, ideal for writing User Acceptance Tests. It simulates real user interactions by leveraging its WebDriver API to operate browsers natively, either locally or remotely. Selenium is particularly effective for testing more complex and established web applications.

Final Thoughts

Automated testing frameworks significantly enhance the quality of PHP code development. Given PHP’s widespread use, there’s a wide array of testing tools available, allowing developers to select the one that best fits their specific needs.

However, it’s crucial to remember one key aspect. While automated testing is a potent tool, it cannot replace beta testing – the invaluable process of real human users testing the application, offering insights that automated tests might miss.

The post 9 Best Automated Testing Frameworks For PHP appeared first on Hongkiat.

However, not everyone has access to ChatGPT or its premium version due to various reasons. In this article, we will explore and bring to your awareness several free alternatives to ChatGPT.

Understanding the Functionality of ChatGPT

Before diving into alternative options, let’s take a moment to understand what makes ChatGPT so popular. ChatGPT is based on OpenAI’s GPT model, which stands for “Generative Pre-trained Transformer.” This AI model is trained on massive amounts of data from the internet, allowing it to generate coherent and contextually appropriate responses to a wide range of prompts.

ChatGPT’s main strengths lie in its ability to understand and respond to natural language queries. It can engage in conversations, answer questions, provide suggestions, and offer creative responses. These features make it an attractive choice for developers and users seeking dynamic conversational experiences.

The underlying AI algorithms power ChatGPT’s ability to generate text that mimics human conversation. While it may not always deliver perfect responses, AI technology has come a long way in creating chatbots capable of holding meaningful conversations and assisting users in various tasks.

One of the reasons ChatGPT has gained such popularity is its versatility. It can be used in a wide range of applications, including customer support, virtual assistants, content generation, and more. For customer support, ChatGPT can handle common queries and provide relevant information to users, reducing the need for human intervention.

Moreover, ChatGPT’s ability to engage in conversations makes it an excellent tool for virtual assistants. Users can interact with ChatGPT as if they were talking to a human, asking questions, seeking advice, or requesting assistance. This creates a more interactive and personalized experience for users, enhancing overall satisfaction.

In content generation, ChatGPT can be utilized to create compelling and engaging articles, blog posts, or social media content. By providing a prompt, users can get creative suggestions and ideas from ChatGPT, helping them overcome writer’s block or generating fresh content concepts.

Free Tools Similar to ChatGPT

For individuals and organizations looking for free options similar to ChatGPT, there are a few notable alternatives available. Let’s take a look at some of these free alternatives and explore their unique features and capabilities.

Microsoft Bing

Bing, the search engine by Microsoft, has been enhanced with ChatGPT, making it capable of providing detailed and helpful answers to whatever you’re curious about. It boasts some neat tricks up its sleeve: it can respond in three different styles depending on what you need.

If you’re looking for something more imaginative, it offers a ‘Creative’ mode that’s excellent for storytelling. Need the facts straight up? Try the ‘Precision’ mode. Or, if you want a bit of both, ‘Balanced’ mode finds the middle ground, giving you a well-rounded response.

Bing is also quite adept at sifting through the internet based on the keywords you provide. It’s not just about finding information; it’s about finding the right information and showing you where it came from. However, it’s worth noting that Bing might take a bit more time to deliver those results compared to some of its speedier rivals.

Bottom line – Bing integrated with ChatGPT has some great strengths, like being capable of searching the web and offering different ways to get your answers. On the flip side, its responses can be a little slower.

Try Bing

You.com

You.com is home to YouChat, an AI chatbot that’s part of the You search engine. One of the cool things about YouChat is its ‘multimodal functionality.’ In simple terms, this means it can understand and communicate in more ways than just text.

For example, YouChat is quite intelligent with its advanced language learning model; it can manage text, apps, and links both as input and as output. This is a step up from the regular ChatGPT, which primarily focuses on text.

YouChat is completely free to use and comes with an advanced language learning model that makes it versatile in handling different types of information. However, it’s not exactly perfect. The chatbot has some limitations with app integration and, unlike some of its peers, it doesn’t create AI-generated images.

Try You.com

Bard

Bard may ring a bell as an AI service from the tech giant Google, and you might think it would be a top competitor in the AI space. However, it’s important to note that, as of the writing of this article, Bard is still in the testing stages. While it’s built on Google’s LaMDA model, which has the potential to rival something like ChatGPT, Bard hasn’t quite hit the mark, being close but not there yet.

Despite being in its experimental phase, Google Bard exhibits some impressive traits. It’s notably quick and has a flair for creativity. However, there’s a catch. It has been criticized for issues such as plagiarism and inaccuracies, which are pretty significant drawbacks. Additionally, unlike some other services, Bard doesn’t show where it gets its information from.

That said, it’s worth keeping an eye on Google Bard. With the massive resources and tech expertise of Google backing it, there’s a good chance it will evolve and improve over time. For now, though, while it has its strengths, it’s not quite ready to claim the crown as the best alternative to ChatGPT.

Try Google Bard

Copy.ai

Copy.ai is an AI content generator with a suite of tools for creating a wide range of content, from blogs and social media posts to emails and documentation. It stands out with its specialized features for sales outreach, robust security measures, and an open API that allows for easy integration with other platforms for streamlined workflows.

Its free account offers one seat, also known as one user, with 2,000 words in chatting.

While Copy.ai offers speed and versatility, it does have its drawbacks. Some users find the content it produces to be less original and creative than human-written copy, and inconsistencies in information can be an issue, necessitating careful review. Nonetheless, Copy.ai remains a valuable tool for teams looking to enhance their content creation processes with AI assistance.

Try Copy.ai

Chatsonic

Writesonic’s Chatsonic is built on the same technology as ChatGPT, so you can expect it to perform very similarly to ChatGPT.

One notable feature of Chatsonic is its ability to search the internet for you. It delivers detailed answers and even cites its sources to ensure the information is accurate and up-to-date, as far as the information on the internet is concerned. Like ChatGPT’s integration with Dall-E, it also has an image generator, which is handy when you need a picture quickly. The quality is quite good, although not quite at the level of some other tools like Midjourney.

If you don’t feel like typing, you can also use the voice recording feature. While Chatsonic isn’t exactly free, signing up for a free account gives you ample things to try out, for example, 10,000 free words to explore its AI chatting capability, doing image generation, access to more than 100 AI templates, integration with Zapier, and others.

Try Chatsonic

Character.ai

Character.ai, as its name suggests, is a fun and quirky alternative to ChatGPT, allowing you to dive into conversations with AI-created characters. Imagine chatting with anyone from Napoleon to Batman or even Super Mario. You can even have group chats with multiple AI characters.

However, it’s important to note that these conversations are strictly for fun. The platform clearly states that the information provided by the AI characters is fictional and may be inaccurate or potentially offensive. Therefore, it’s best to use Character.ai for entertainment rather than serious research or content creation.

The platform is free, but for those who really get into it, there’s a paid option. This premium plan offers faster responses and early access to upcoming features, which could enhance your experience if you find yourself frequently returning for more AI chat adventures.

Try Character.ai

HuggingChat

HuggingChat by HuggingFace, a leading provider of AI services, has evolved to offer a selection of language models, including Llama, Mistral 7B, and Falcon 180B. This assortment enables more tailored and diverse conversations while also allowing the management of multiple chats simultaneously.

Similar to ChatGPT, HuggingChat is quite versatile. It can craft blog posts, tell jokes, generate HTML code for websites, and provide recipes. A notable feature is its ability to access the web, enhancing its responses with current, online information.

However, it’s worth noting that the bot may encounter network issues occasionally, which could be a minor inconvenience.

So, should you find ChatGPT unavailable or wish to try something different, HuggingChat is a commendable alternative worth exploring.

Try HuggingChat

Twain.ai

Twain.ai is an AI-powered assistant designed to help you create emails that stand out and get responses. It works on both browsers and also comes with a Chrome extension. Its goal is to boost the effectiveness of your email communications, particularly in sales and outreach. Utilizing natural language processing, Twain.ai analyzes your messages to eliminate unnecessary filler words, create engaging introductions, and offer suggestions to enhance the overall structure and impact of your emails.

To use it, you simply paste your draft message into Twain’s editor, and it evaluates your content, providing insights and improvements to increase your chances of getting a positive response.

As of now, Twain.ai is free to use, making it an accessible tool for anyone looking to improve their email game.

Try Twain.ai

POE

Poe, which stands for ‘Platform for Open Exploration,’ is an AI tool created by Quora. Rather than being a standalone AI itself, Poe serves as a hub where users can converse with a variety of AI chatbots. Quora has designed Poe for users to ask questions, receive immediate answers, and engage in detailed conversations with several AI-powered bots.

On the Poe website, users can chat with an impressive lineup of AIs including Sage, ChatGPT, Dragonfly, as well as advanced models like GPT-4 and Claude+.

In total, the platform provides access to over 20 different language models. However, it’s important to note that the more advanced AIs require a subscription. Accessing Poe does require an account, but conveniently, you won’t need separate accounts for each service it offers.

For those who love exploring different AI tools but want them all in one place, Poe is worth exploring.

Try POE

The Future of AI Chat Tools

As AI technology improves by leaps and bounds, the outlook for chat tools like ChatGPT and similar ones is really promising. These conversational AIs are getting better quickly, and it looks like they’ll soon be even more accurate and able to respond faster.

We’re noticing a big shift in how chatbots are interacting with us. They’re becoming more fun and engaging to talk to. They’re improving at picking up on our feelings, the context of our conversations, and even our emotions. This means they’ll soon be able to chat with us in a way that’s more tailored to us and more immersive, making our talks with them feel more like chatting with a friend.

The post 9 Free Tools Similar to ChatGPT – Best Of appeared first on Hongkiat.

In this post, we delve into the world of VS Code extensions, specifically focusing on front-end development. After exploring numerous extensions, I’ve curated a list of those that stand out for their intuitiveness, ease of use, and convenience. While this list is informative, the marketplace is constantly evolving with new and improved extensions, so I encourage you to explore it further and discover the tools that best suit your development needs.

How to Install VS Code Extensions?

Installing an extension is pretty straightforward in Visual Studio Code, as you can do it within the code editor. In the VS Code Marketplace every extension has its own page, and you can find the command you can install the given extension with on top of this page.

The command always begins with the ext install term. To install an extension, just press CTRL+P inside VS Code to start the Quick Open panel, copy-paste this command into it, and finally restart the code editor to make the new extension work.

Useful VS Code Extensions for Developers

HTML Snippets

If you want to frequently write HTML in Visual Studio Code, the HTML Snippets extension can come as a handy tool, as it adds elaborate support for HTML. Although VS Code has basic support for HTML, such as syntax colouring, the HTML Snippets extension knows much more.

Probably the most useful feature of this extension is that when you begin to type the name of an HTML tag (without the starting angle bracket), HTML Snippets quickly displays a list of the available options with a short information about each.

When you click on the element you need, HTML Snippets adds the full HTML5 tag with its most common properties. For instance, if you want to add a link (anchor tag) to your document, just type an a into VS Code, choose the right option in the popup box, and HTML Snippets will insert the necessary <a href=""></a> snippet into your editor without any hassle.

The author of this extension also pays attention to remove deprecated elements, so if you want to use an HTML tag that you can’t find in the popup list, it’s worth to check out whether it’s still valid or not.

turbo-console-log

Ever found logging messages a bit tedious? The turbo-console-log extension is here to help. It makes creating log messages a breeze. Just choose the variable you want to check and hit Control + Alt + L.

Voila! A detailed log message appears right after. It’s not just about adding messages; you can quickly comment, uncomment, or delete all logs in your document, making your coding smoother and more productive.

Prettier

Meet Prettier, the code formatter that cares about consistency. It’s like having a strict editor for your code, ensuring everything looks uniform. As you save, Prettier takes over, parsing and reformatting your code to follow set rules.

It considers line length, wraps code neatly, and lets you choose which languages to format. Say goodbye to style inconsistencies in your code!

HTML CSS Class Completion

HTML CSS Class Completion can be a helpful extension if you need to use many CSS classes in your project. It frequently happens to us developers, that we are not completely sure in the exact name of a class, but it just sits at the back of our mind as passive knowledge.

This smart extension gives a solution for this problem, as it fetches the names of all CSS classes in the current workspace, and displays a list about them.

Let’s say, you want to create a site using Zurb Foundation, and you want to use the small grid. You don’t remember how the classes are exactly named, but you know they have semantic names.

With HTML CSS Class Completion you only need to start to type the word small, and the available options appear on your screen at once, so you can easily select the one you need.

Import Cost

Concerned about your code’s performance? The Import Cost extension is like a vigilant assistant, keeping an eye on performance as you code. It might not analyze your entire bundle, but it alerts you to heavy imports before they bog down your users.

As you bring in a third-party library, Import Cost shows its size right next to your code, helping you maintain a lean, efficient project.

VSCode Edge DevTool

The Microsoft Edge Developer Tools for Visual Studio Code seamlessly integrates the robust capabilities of the browser’s DevTools into the VSCode environment, particularly for Microsoft Edge users. This extension eliminates the need to switch between your code editor and the browser while working on a project.

With features like viewing and interacting with runtime HTML structure and modifying styling and layout, it offers an efficient way to handle diagnostics and debugging within VSCode.

GitLens

GitLens offers invaluable insights into your codebase. It helps you understand who made changes to the code, why, and when. The extension is great at visualizing code authorship, showing you the contributions of different team members at a glance.

GitLens makes navigating and exploring Git repositories effortless, with features like comparison commands that provide a detailed view of changes and their impacts on your project.

View in Browser

View in Browser is a simple but powerful extension for Visual Studio Code. It can facilitate front-end development by allowing you to have a quick look at the result of your work in the browser while coding. You can open your HTML file in your default browser directly from VS Code by pressing the CTRL + F1 keyboard shortcut.

Note that View in Browser only supports HTML, so if you want to see your site you need to have the HTML file open. You can’t directly access the browser from a CSS or JavaScript file.

VS Code Chrome debugger

The VS Code Chrome Debugger is a game-changer for developers who frequently debug client-side JavaScript. It allows you to directly debug JavaScript running in Chrome from your Visual Studio Code environment.

By using the Chrome Debugger Protocol, this extension seamlessly connects Chrome to VS Code, enabling features like setting breakpoints, watching variables, and viewing the call stack without ever leaving your editor.

File Utils

File Utils is a powerful tool that makes handling files in your editor a breeze. It lets you create, duplicate, move, rename, and delete files and folders with simple commands.

This extension is all about saving you time and effort in managing your project’s file structure. Plus, it features brace extension, which helps in quickly setting up complex document structures by automatically generating strings.

Debugger for Chrome

Debugger for Chrome was built by Microsoft itself, and it’s currently the 4th most frequently downloaded Visual Studio Code extension.

Debugger for Chrome makes it possible to debug JavaScript in Google Chrome without leaving the code editor. This means that you don’t need to work with the transpiled JavaScript the browser sees, but you can perform the debugging right from the original source files. See this demo to see how it works.

The extension has every feature a decent debugger needs, such as breakpoint setting, variable watching, stepping, a handy debug console, and many others (see the feature list of the first release).

To use this extension you need to start Chrome with remote debugging enabled, and set up a proper launch.json file. This latter may take for a while, but you can find detailed instructions on GitHub on how to properly do it.

File Ops

File Ops enhances your project organization by allowing you to add tags and aliases to files. This feature simplifies finding and switching between important files in your project.

The extension shines in keeping track of numerous files, offering a convenient way to list all tags. Additionally, it makes it easy to view and switch between related files in the same directory, like .css and .js files. An informative video is also available to help you understand all its functionalities.

Gremlins tracker

Gremlins Tracker is your go-to tool for spotting hidden or tricky characters in your code. It highlights characters like zero-width spaces and unusual quotation marks, which might cause unexpected errors.

This tool uses a color-coded system to indicate the level of harm these characters pose. It also marks lines with a Gremlins icon and provides detailed hints about these characters when you hover over them, helping you maintain clean and error-free code.

JSHint

Visual Studio Code’s JSHint extension integrates the popular JSHint JavaScript linter right into the code editor, so you can be informed about your errors as soon as you commit them. By default, the JSHint extension uses the default options of the linter that you can customize with the help of a configuration file.

The usage of this extension is quite straightforward, as JSHint marks the errors with red, and the notifications with a green underline. If you want more information on the issues, just hover over the underlined parts, and JSHint will float a label with the description of the problem at once.

Polacode

Polacode transforms the way you share your code visually. It’s like a Polaroid camera for your code, simplifying the process of capturing aesthetically pleasing screenshots within Visual Studio Code (VS Code).

You can easily edit these screenshots right in the editor, adjust the size of the code container, and control the image’s appearance with handy commands. Polacode is ideal for presenting your code in the most visually appealing manner.

jQuery Code Snippets

jQuery Code Snippets can greatly speed up front-end development in Visual Studio Code, as it lets you quickly write jQuery without basic syntax errors. jQuery Code Snippets currently has around 130 available snippets you can invoke by typing the right trigger.

All jQuery snippets but one start with the jq prefix. The one exception is the func trigger that inserts an anonymous function into the editor.

This handy extension is a convenient help when you are not completely sure about the proper syntax, and want to spare the time to check the documentation. It also makes it easy to quickly scroll through the available options.

Bower

The Bower VS Code extension can make your web development workflow more intuitive by integrating the Bower package manager into Visual Studio Code.

If you put this extension into use you don’t have to switch back and forth between the terminal and the editor, but you can easily perform your package management tasks right inside Visual Studio Code.

The Bower extension leads you through the creation of your project’s bower.json file, and you can also install, uninstall, search, update packages, manage cache, and perform many other tasks with it (see full feature list).

You can access Bower-related commands by starting the Command Palette by pressing F1, typing “Bower” into the input bar, clicking on the “Bower” option in the dropdown list that appears, and picking the appropriate Bower command.

Better Comments

Better Comments breathes new life into your code annotations, making them more user-friendly and visually distinguishable. This tool allows for easy categorization of comments into types like alerts, queries, todos, and highlights, helping you quickly identify the nature and importance of each comment.

Whether it’s an alert about a deprecated method or a reminder about an incomplete task, this extension ensures clarity. It also offers styling options for commented-out code, aiding in maintaining clean and efficient code.

Git History

Git History makes it possible to follow the changes of a Git project inside Visual Studio Code. This extension is especially useful when you want to contribute to a bigger Github project, and need a way to quickly check out the modifications other developers made.

With the Git History extension installed you can view the history of an entire file, or a particular line inside of it. You can also compare previous versions of the same file.

You can access the commands related to Git History if you type the word “Git” into the Command Palette (F1), choose “Git” inside the dropdown list, and finally select the command you need. Note that you need to open the file of which you want to see the history before you can perform any actions on it.

The post 20 Powerful VS Code Extensions for Front-End Developers appeared first on Hongkiat.

Whether it’s for play, practicality, or just the pure awe of cutting-edge technology, our selection promises to offer something special for every age and interest. Explore our top picks for robotic toys that spark imagination, and household gadgets that bring a slice of the future into your home. Get ready to surprise your loved ones (or treat yourself!) with a robotic gadget that’s sure to be the highlight of this holiday season.

Zoomer

$46.99

For a friendlier high-tech pet, consider Zoomer, the interactive robot dog. It’s playful, amusing, and can talk, bark, scoot, and wag its tail. It understands English, Spanish, and French. It’s a hassle-free alternative to a real dog, requiring no feeding or cleanup.

Get from Amazon

Delta35 Fast Charger

$29.95

Experience advanced charging with the Delta35 Fast Charger, where cutting-edge GaN technology meets a customizable mecha robot design. Charge multiple devices rapidly with its 35W power and dual USB-C ports, all while ensuring safety and compatibility with a range of devices, from smartphones to MacBooks.

Read Also:  Best Portable Batteries for Your Macbook

Get from GravaStar

Runaway Alarm Clock

$40.00

Waking up is now an adventure with the Runaway Alarm Clock, designed to roll away beeping until you catch it! This New York-made clock offers a unique solution to oversleeping, with adjustable snooze options and effective performance on various floor types.

Get from UncommonGoods

Roomba s9

$804.98

Keep your home impeccably clean with the Roomba s9+ robotic cleaner. This advanced cleaning duo excels in larger homes, featuring a robot vacuum with powerful suction and a mop with Precision Jet Spray, all integrated with iRobot OS for ultimate convenience.

Get from iRobot

Energize Eilik Bot

$139.99

Meet Eilik, the Energize Lab’s Little Companion Bot, a polycarbonate, blue-colored robot that brings emotional intelligence to life. With the ability to recognize and interact with other robots, Eilik offers a new dimension of social engagement and playful companionship.

Get from RobotShop

Loona Smart Robot

$382.00

Loona Smart Robot combines fun and utility, offering interactive play and remote assistance. This self-charging companion connects users through the Loona App, featuring games and a community platform, powered by a high-performance processor and 3D ToF LiDAR sensor navigation.

Get from Keyi Robot

Gita Mini Carrier Bot

$2,475.00

Experience next-level convenience with the Gita Mini Carrier Robot, a sleek, all-black robotic carrier. Its stylish monochrome design with matching wheels enhances its aesthetic appeal. Equipped with a machine vision system, it effortlessly follows its owner, perfect for hands-free carrying of items.

Get from Piaggio Fast Forward

Sony aibo

$2,899.99

Sony’s aibo Companion Robot is your digital pet with a heart, evolving through interactions to form a unique bond. This lifelike robotic pet comes complete with accessories and AI cloud service, becoming a permanent, cherished family member.

Get from Sony Electronics

Dolphin Pool Vacuum

$599.99

The Dolphin Nautilus CC robotic pool vacuum revolutionizes pool cleaning with its wall-climbing capability and active scrubbing brush. Enjoy crystal-clear water and more leisure time, thanks to Dolphin’s 35-year expertise in convenient, efficient, and cost-effective pool maintenance technology.

Get from Amazon

Robotics Starter Kit

$89.00

The Starter Robotic Kit is a superb option for those keen on delving into robotics, electronics, and Arduino programming. It includes various mechanical components and electronic modules, enabling the construction of either a robot tank or a three-wheel robot car. Learning can be both enjoyable and engaging with this kit.

Get from RobotShop

Dash & Dot Pack

$159.49

Dash & Dot are a fantastic pair of robotic toys that come equipped with a xylophone and two apps filled with useful instructions and fun games. Dash is a ready-to-use robot that responds to voice commands, sings, dances, and avoids obstacles. Dot, the ‘robotic brain’, introduces children and adults alike to coding and robotics in an entertaining manner.

Get from Amazon

Ozobot

Start from $175.00

Ozobot is a tiny, intelligent robot that responds to lines, patterns, and colors on both physical and digital surfaces. Create labyrinths on paper, print mazes, or use the free Ozobot mobile app to explore new ways of interaction. It features advanced color optical sensing and dual independent micro-motors.

Get from Ozobot

RC Spider

$24.99

This remote-controlled tarantula is sure to spook anyone not showing proper respect. With a realistic hairy design, it can move in all directions and rotate 360 degrees. Its legs move independently, and its eyes glow menacingly.

Get from This Is Why I’m Broke

Omnibot

$69.34

OmniBot Hello! MiP is your two-wheeled assistant for quick tasks, like fetching a drink or your glasses. Control its path via smartphone, change its direction with simple gestures, enjoy its dance moves, or watch it box with another MiP for your entertainment.

Get from eBay

Automower 415x

$1,999.99

Revolutionize lawn care with the Husqvarna Automower 415X, a sophisticated robotic mower for small to medium-sized lawns up to 0.4 acres. Featuring Automower Intelligent Mapping for precise zone control and systematic mowing, it ensures a flawlessly maintained lawn. With GPS navigation, automatic passage handling, and remote control via its app, this mower combines convenience with advanced technology for effortless lawn perfection.

Get from Husqvarna

JD Humanoid

Start from $269.00

This innovative humanoid robot kit lets you build a robot capable of walking, dancing, playing piano, and more. It features robust servo motors for unique movements, a built-in camera for vision tracking, voice recognition, and Wi-Fi connectivity for app control.

Get from EZ-Robot

Litter-Robot

$549.00

The self-cleaning robotic litter box is a cat owner’s dream. With smart sensors, it detects use and initiates cleaning after 7 minutes. It includes a carbon filter to minimize odors and a drawer compatible with regular kitchen garbage bags for easy waste disposal.

Get from Litter-Robot

Tosy Robot

$26.97

Tosy, a high-tech dancing robot, comes with an MP3 player and two DiscoStage speakers. Customize its dance steps via smartphones or tablets. It can perform 56 different movements and is an excellent gift for music and dance enthusiasts, especially teenagers.

Get from Amazon

Bionic Bird

Start from $119.00

The Bionic Bird offers a unique flying experience as a gift. Controlled via Bluetooth, it ascends to the skies, operable via tablet or smartphone. Enjoy breathtaking views captured during its flight.

Get from Bionic Bird

BB8 Droid

$195.00

Star Wars enthusiasts will be thrilled with the BB8 app-enabled Droid. More than a mere robot, BB8’s personality adapts to your interactions, displaying a range of reactions and recognizing your voice. It also allows recording and viewing of virtual holographic videos.

Get from Amazon

The post 20 Fun Robotic Gadgets to Buy This Holiday Season appeared first on Hongkiat.

A common method to create a numeronym is to use the first and last letters of a word and count the letters in between. For instance, the numeronym for “internationalization” is “i18n”. Curious about how it works? You can even create your own.

The Start of Numeronyms

Based on online sources, the story of numeronyms started with an employee named Jan Scherpenhuizen at DEC (Digital Equipment Corporation, which later merged with Hewlett-Packard). His name was too long for an account name, so the system admin gave him the username “s12n”.

This naming style became popular at DEC, leading to the creation of numeronyms like “i18n” for “internationalization” as early as the mid-1980s. Over time, many such shortcuts appeared, both in tech and other fields.

Now, let’s explore the top 10 numeronyms in the tech world:

1. "i18n" Means Internationalization

i18n is about preparing software or apps for potential translations in the future. It doesn’t mean the software is translated, but it sets the stage for possible translations later on. During this preparation, developers add features that might not be used until actual translation happens. The main aim of i18n is to make software usable worldwide.

2. "l10n" Refers to Localization

The counterpart of i18n is l10n, standing for “localization”. This is when software or apps are tailored to fit a specific culture.

Products that have undergone the i18n process can be easily localized. But localization doesn’t just mean translation. It includes adapting to local details like specific currency, time zones, symbols, legal requirements, and other local features.

To understand the difference between i18n and l10n, check the W3C guide. W3C itself uses a shortcut for its name: “World Wide Web Consortium”. Here’s an example showcasing how a universal symbol for pedestrian crossing was localized for Portuguese audiences.

3. "m17n" Stands for Multilingualization

m17n is about adapting software or apps for several languages and cultures simultaneously. Software that is multilingualized supports multiple languages and respects local specifics like time zones, date, time, and currency formats.

Discussing m17n also brings up the importance of supporting writing systems beyond just ASCII (American Standard Code for Information Interchange) characters.

For instance, WordPress offers a user-friendly multilingual interface. It lets users select their preferred language during installation and within the user interface afterwards.

4. "a11y" Refers to Accessibility

a11y is a term widely used in web design, especially after the W3C introduced its web accessibility standards. a11y aims to assist people with various disabilities or sensory challenges, including the elderly and those in remote areas with limited internet connectivity.

Accessibility encompasses a broad spectrum. For instance, those with visual impairments may need high color contrast ratios. Some users, unable to operate a mouse, should have full keyboard functionality. For individuals with hearing challenges, transcripts are essential. Product designers must account for these and many other a11y use cases.

5. "c14n" Stands for Canonicalization

c14n refers to the process where multiple data representations are converted into a standardized format. This term is often seen in SEO guidelines, such as this guide from Google, which educates about canonical URLs.

In the realm of search engine optimization, c14n is crucial when a single web page can be accessed through multiple URLs, as this can result in penalties from search engines. For example, using Google Webmaster Tools, one can determine their preferred domain format. For further insights on SEO and c14n, check out resources like Yoast.

Developers might also encounter c14n in XML contexts, ensuring the XML document adheres to a specific format.

6. "i14y" Denotes Interoperability

i14y is about the compatibility and portability of system or product components. With an increasing number of entities becoming networked, i14y has emerged as a frequently used term in IT product descriptions.

Web designers have also embraced the term i14y, especially when discussing interoperable CSS, which stands for a uniform standard of loadable and linkable CSS. The realm of cloud computing leverages the i14y concept due to the pressing need to construct systems from reusable components that can efficiently operate in diverse scenarios.

7. "P13n" Represents Personalization

p13n revolves around tailoring products to meet the distinct needs of individuals. In the digital realm, real-time website personalization has become a significant online marketing strategy and a challenge web developers must address.

With a plethora of analytic tools available for online targeting, the logical progression is to adapt content for varied segments of the online audience. The p13n concept contradicts the generic one-size-fits-all method. This is supported by research revealing that a significant 74% of online users become disenchanted when confronted with irrelevant content, such as unrelated ads or promotions.

8. "v12n" Refers to Virtualization

v12n encompasses the process developers use to create virtual versions of various entities, like an operating system, server, or other network resources. Simple manifestations of v12n can involve tasks such as partitioning a hard drive.

Employing desktop v12n can enhance the web development process, allowing developers the opportunity to evaluate their websites or web apps in multiple environments. Prominent software tools aiding desktop v12n include VMWare Workstation and Oracle VirtualBox. Hongkiat.com offers several insightful v12n tutorials, including installing Windows on a Mac and utilizing Vagrant for local WordPress development.

9. "c10k" Refers to the 10,000 Clients Challenge

Distinct from the other numeronyms discussed, c10k has a unique etymology. It denotes the challenge where a web server must simultaneously cater to “10 thousand clients”. Recognized as a potential bottleneck in web server administration, the c10k problem emerges when a server is tasked with serving 10,000 concurrent clients.

The urgency to address this challenge has amplified due to the exponential growth in website traffic. This surge is attributed to the escalating number of internet users, their evolving requirements, and the expanding range of their online devices.

For individuals keen on web server scalability, delve into this comprehensive overview of the c10k problem.

10. "Y2K38" Highlights the Year 2038 Time-Storage Dilemma

The Y2K38 problem, signifying the Year 2038 challenge, foreshadows a looming time-related data storage crisis slated for 2038. This glitch originates from 32-bit processors, which document time values as signed 32-bit integers.

This numeric range is confined and will hit its peak positive value on January 19, 2038. The resultant effect could be catastrophic as computers might misinterpret the year 2038 as 1970, potentially triggering widespread malfunctions and system crashes.

While a universal remedy remains elusive, transitioning to 64-bit systems can mitigate this issue. By 2038, the majority of devices are anticipated to adopt 64-bit systems. However, concerns persist as certain web servers and backend hardware might still rely on 32-bit date systems.

For those inclined to monitor the countdown to this projected calamity, an interactive timer can be accessed here.

The post 10 Numeronyms Every Web Developers Should Know appeared first on Hongkiat.

HTTP, or Hypertext Transfer Protocol, is the backbone of data communication on the World Wide Web. The HTTP status codes are the server’s communication method, informing you about the outcome of a page view request. These codes fall into few categories, ranging from 2xx (successful responses) to 5xx (server error responses). Each category provides specific information about the request’s status.

In this post, we’ll dissect the most common HTTP status codes, explaining what they actually mean.

2xx Success

200 OK

This is the standard response for successful HTTP requests. The actual response will depend on the request method used. For example, a GET request might retrieve data, while a POST request might update it.

202 Accepted

The request has been accepted for processing, but the processing has not been completed. The request might or might not eventually be acted upon, as it might be disallowed when processing actually takes place.

206 Partial Content

The server is delivering only part of the resource (byte serving) due to a range header sent by the client.

3xx Redirection

300 Multiple Choices

Indicates multiple options for the resource that the client may follow.

301 Moved Permanently

This means that the URL of the requested resource has been changed permanently. The new URL is given in the response.

304 Not Modified

Indicates that the resource has not been modified since the version specified by the request headers If-Modified-Since or If-None-Match.

307 Temporary Redirect

In this case, the request should be repeated with another URI; however, future requests should still use the original URI.

4xx Client Errors

400 Bad Request

This status code indicates that the server could not understand the request due to invalid syntax.

401 Unauthorized

This means the client must authenticate itself to get the requested response.

403 Forbidden

The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource.

404 Not Found

The server can not find the requested resource. This status code can be used when the server does not wish to disclose whether it has the requested information.

408 Request Timeout

The server timed out waiting for the request. According to HTTP specifications: “The client did not produce a request within the time that the server was prepared to wait. The client MAY repeat the request without modifications at any later time.”

429 Too Many Requests

The user has sent too many requests in a given amount of time (“rate limiting”).

5xx Server Errors

500 Internal Server Error

The server encountered an unexpected condition that prevented it from fulfilling the request.

502 Bad Gateway

The server was acting as a gateway or proxy and received an invalid response from the upstream server.

503 Service Unavailable

The server is not ready to handle the request. This can occur if the server is down for maintenance or overloaded.

504 Gateway Timeout

The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.

507 Insufficient Storage (WebDAV; RFC 4918)

The server is unable to store the representation needed to complete the request.

Conclusion

We’ve come a long way in our journey to understand HTTP status codes. From the informational 1xx codes to the dreaded 5xx server errors, we’ve covered the basics of what you need to know about these essential elements of web communication.

Remember, while encountering certain status codes like 404 Not Found or 500 Internal Server Error can be frustrating, they are there to help you understand what’s going wrong. As a website owner or developer, these codes can provide valuable insight into areas of your site that need attention.

The post The ABCs of HTTP Status Codes appeared first on Hongkiat.

If you’re looking to get your hands on a book like that, take a look at this list of best and latest personal development books. These books focus on different themes and take varied approaches, so pick the one that relates to your situation and may prove helpful to your cause.

“Girl, Wash Your Face”

Author: Rachel Hollis

An amazing book that talks about several lies and misconceptions that keep us from living a happy and fulfilling life, Girl, Wash Your Face is written by Rachel Hollis – the co-founder of the lifestyle website TheChicSite.com and CEO of her own media company – in which she opens up about the problems of her own life and how she coped with them.

Packed with honesty, motivation, encouragement, and humor, this book inspires women to deal with life issues with determination and find their own true happiness.

“Unfu*k Yourself”

Author: Gary John Bishop

Unfu*k Yourself is a handbook of simple and straightforward motivational statements by Gary John Bishop. Focused on people who always find themselves in the worst circumstances, the book endeavors to strengthen your confidence and self-esteem by discouraging self-pity and negative attitude in order to achieve your goals in life.

“Get Over Your Damn Self”

Author: Romi Neustadt

If you’re a victim of negative attitude that over-complicates even the simplest tasks in your life, then this book is the one you should read. Written by personal development coach Romi Neustadt, the book will guide you in making direct sales and network marketing that’ll ultimately lead you to greater financial freedom and more time for yourself.

“I Am That Girl”

Author: Alexis Jones

Being a woman with layers of responsibilities towards family and household, we often tend to forget our true ambition or things that we’re passionate about. In this book, Alexis Jones encourages girls and women to rediscover their passion and unlock their potential to live a life of their dreams.

The writer tells girls to stop allowing other people’s negative energy to flow into their own lives and don’t be bothered about how they look, where they work and if their relationship is perfect or not. I Am That Girl has been reviewed and endorsed by many famous Hollywood actresses and successful women in business as a great, funny, and helpful guide for girls about their lives.

“100 Days to Brave”

Author: Anne F. Downs

The writer Anne F. Downs was faced by many difficult challenges in life that kept her from living life to the full. 100 Days to Brave tells about her journey of overcoming fears and inspires readers to take similar steps of courage and confidence in the face of most troublesome times.

Through humor and honesty, the book will help you experience a fearless, productive and joyful life in thickest of the times.

“The Virgin Way”

Author: Richard Branson

Richard Branson, founder of the British Virgin Group containing more than 400 companies such as Virgin Media and the Virgin Atlantic Airways is probably one of the most successful entrepreneurs of our times.

He lives a vivid social media life, and he has also published some great books in which he shares his unique and unconventional views on management, entrepreneurship, and business.

The Virgin Way: If It’s Not Fun, It’s Not Worth Doing is his latest book on management and entrepreneurship in which he gives an inside look at his insanely successful style of leadership that is primarily driven by the art of listening and keeping people engaged.

Branson has such an out-of-the-box personality that he even dares assert that "you’ll never have to think outside the box if you refuse to let anyone build one around you."

“The Essential Drucker”

Author: Peter Drucker

Peter Drucker was a legendary professor and management consultant, or a “social ecologist” as he described himself, who founded the theory and practice of modern management. Although he died in 2005, his books have stood the test of time, and you can gain a great amount of knowledge on economics, business and leadership by reading them.

The Essential Drucker is an insightful collection of the best essays by the prominent business philosopher, published over a span of more than 60 years. In this book, you can learn about the basic principles and concerns of management, its best practices, main challenges, core problems, and most promising opportunities. For samples of his writing, follow this link.

“Work Rules!”

Author: Laszlo Bock

Laszlo Bock, the author of this amazing book currently works as the head of Google’s People Operations team that is basically responsible for the Human Resources of the company. Work Rules! published in 2015 is his first book that quickly became a bestseller of The New York Times.

Work Rules! gives many thought-provoking insights into the human resource and talent management of Google, including topics such as giving more power to employees over managers, avoiding a dehumanizing company culture, transparency, the best usage of data, how to calculate more motivating, performance-based salaries, and many more. It’s a must-read to everyone who manages humans and wants to take leadership seriously.

“The Alliance”

Author: Reid Hoffman

The Alliance is authored by Reid Hoffman, co-founder of Linkedin, Ben Casnocha and Chris Yeh, all of whom are successful entrepreneurs and mentors. The Alliance analyzes the problem of the employee-employer relationship that has become broken in our fast-changing and insecure modern world.

If you run your own company, or you work as a manager, this book can give you excellent tips on how to recruit, manage, and retain amazing people at your company in a connected world where companies can’t afford to offer lifetime employment anymore.

The book has many interesting ideas, such as how employees should be treated as an alliance between independent players rather than a transactional relationship, and many others. To learn more about this awesome book, download the first chapter for free, and check it out for yourself.

“Thinking in Systems”

Author: Donella Meadows

Donella Meadows was an influential environmental scientist who became famous with her first book, Limits to Growth which was about the consequences of an uncontrolled growth on a finite planet. She researched the feasibility of sustainable systems at all levels of society, from local to global.

Thinking in Systems, a later work of hers describes how to develop system-thinking skills critical for dealing with the complexity of the 21st century life. Donella Meadows thinks that the biggest problems in the world such as poverty, hunger, and war are system failures that cannot be solved in isoation from others.

This book is not only theoretical though, as it provides you with useful methodology to help you improve your problem-solving skills, which is one of the most important areas of personal and professional development.

“Nonsense”

Author: Jamie Holmes

Nonsense: The Power of Not Knowing is a fascinating book that claims it’s not IQ, willpower, or self-confidence that matters the most in today’s increasingly unpredictable world, but how you deal with new things you don’t necessarily understand.

The author, Jamie Holmes approaches the subject of uncertainty from the aspect of social psychology and cognitive science and introduces you into the upsides of ambiguity such as creativity, empathy, personal development, and inspiration for learning.

Not only that, but he also teaches you new skills to use uncertainty to your own advantage. He uses awesome real-life stories throughout the book to make you engaged and entertained.

Performing Under Pressure

Author: Dr. Hendrie Weisinger, and Dr. JP Pawliw-Fry

Have you ever had to deal with high-pressure situations such as job interviews, hard exams, sales presentations, price negotiations with clients, and the like? According to Dr. Hendrie Weisinger and Dr. JP Pawliw-Fry, the authors of Performing Under Pressure, people don’t perform better at all under pressure, as it’s frequently claimed by many.

This brilliant book introduces you into the intriguing concept of pressure management and offers both short and long-term practical solutions tested on over 12,000 people to help you overcome the paralyzing effects of pressure and stress.

“Disrupt Yourself”

Author: Jay Samit

Disruptive innovation is a quite successful strategy in the contemporary business arena, just think about companies like Uber, AirBnB, or TaskRabbit. Disrupt Yourself, written by Jay Samit serial entrepreneur describes the unique method he has used to invent new products and launch, grow, and sell businesses in industries such as e-commerce, social media, digital video creation, mobile communications and software development.

If you have a big idea but are not sure how to apply it, or just got stuck in your life and seek personal transformation, you must read this engaging and perspective-shifting book.

“Losing the Signal”

Author: Jacquie McNish, and Sean Silcoff

If you like rise and fall stories told in an engaging, juicy way, you need to check out this fascinating book about Blackberry’s rise and fall, written by the two prominent business writers of the Canadian The Globe and Mail, Jacquie McNish and Sean Silcoff.

Not so long ago Blackberry was the favourite gadget of high-profile professionals, CEOs, and presidents. In 2009 the company controlled about the half of the smartphone market. By 2015 this number fell to less than 1 percent.

Losing the Signal investigates the story, and presents the reasons of the rise and the fall in the form of a modern tale. If you want to understand how to avoid failure in a superfast, information-ridden, innovation-hungry business world, and want to acquire this knowledge in a really entertaining way, this book was written just for you.

“The Organized Mind”

Author: Daniel J. Levitin

In his new book, The Organized Mind, Daniel J. Levitin, bestselling author, neuroscientist, and professor at McGill University shows you how to handle the constant flow of information your brain encounters in today’s insane deluge of data.

You can learn new practical methods about how to organize your personal and professional life in an environment more complex than ever before, through entertaining real-life examples, such as how not to lose your car keys, how to manage your kitchen junk drawer, how to establish a productive office workflow and many others.

The recommended methods are backed up with the latest research on the cognitive neuroscience of attention and memory.

The post 15 Personal Development Books to Read For Self-Improvement appeared first on Hongkiat.

There’s no secret that the average salary for a web developer is pretty decent. Sure it may not seem like a lot to some, but sadly, there are many people in the world who never see this much money in two years, let alone one.

So, if you’re looking start a new career, change careers, make extra money on the side, or just want to learn a new skill, here are some promising beginner courses to help you get started in web development for the new year.

Best of all, they’re all free and can be completed from the comfort of your own home.

1. Coursera

With Coursera, you have the option of purchasing a course or auditing it for free. With auditing, you do not get access to graded material, but it provides a stress-free experience since you don’t have to worry about grades.

You also get to work at your own pace.

Introduction to Web Development

If you want to learn about the structure and functionality of the World Wide Web, creating web pages and forms, and even dabbling with basic web applications, this course is for you.

You’ll learn how to create dynamic web pages using HTML, CSS, and JavaScript. The course will also get you up and running with your very own website by helping you choose the perfect domain name and hosting company along with showing you how to manage everything through your host.

Even though this course only scratches the surface of interactive web pages and web applications, there is another course for beginners who want to learn even more (frameworks, managing data, middleware, user interface). If interested, be sure to check out Web Application Development: Basic Concepts.

Learn to Design and Create Websites

This is actually a Coursera Specialization (much like a career diploma) which combines five courses and costs you $49/month. Luckily, you can also complete each course individually for free.

When you click on “Enroll Now,” Coursera really tries to sell you on the Specialization but you can rest assure that each course can still be audited for free by clicking on “audit” at the bottom.

Introduction to HTML5

This course gives you a brief intro of the Internet and then some history of HTML 1-4. You’ll then move on to HTML tags and attributes. Finally, you’ll create and publish a simple web page with links and images (here’s an example).

Introduction to CSS3

What’s an HTML web page without some CSS styling? No one likes a boring, colorless website. This next course focuses on syntax, accessibility design, advanced styling, pseudo-classes, pseudo-elements, transitions, and positioning.

Interactivity with JavaScript

JavaScript helps to take your website to the next level and with this course, you’ll do just that by learning basic concepts and debugging. It starts with an introduction and moves on to things like mouse events, touch events, arrays, looping, and form data validation.

Advanced Styling with Responsive Design

With so many different ways to view websites, learning responsive design is a must. You don’t want your website to look good on a desktop computer and laptop but horrible on a smartphone or tablet. Likewise, you don’t want to make a website that’s only functional on mobile devices.

As explained on the site, “this course expands upon the basic knowledge of CSS3 to include topics such as wireframes, fluid design, media queries, and the use of existing styling paradigms such as Bootstrap.”

If you want to go even more in-depth into responsive design, you should also check out Coursera’s Responsive Website Development and Design Specialization.

Web Design for Everybody Capstone

This final project is only open to students who have completed the above four courses in the paid Specialization; as an auditor, you won’t have access to it.

2. Alison

Alison is committed to free learning, so all of their courses are free. However, they do give you the option to purchase a Diploma certificate for each course. Alison has a large variety ranging from Business and Enterprise Skills to Personal Development and Soft Skills to Financial and Economic Literacy and much more.

How to Create Your First Website

If you’ve always wanted to build a website but doubted that you actually could, this course will give you the skills, knowledge, and confidence you need to build your very first site. You’ll learn how websites work and will get very familiar with a web editor called KompoZer.

After creating a hosting account and choosing a domain name for your new site, you’ll also learn to create links, add images, and publish it to the World Wide Web.

Diploma in Web Business Development and Marketing

This course is perfect for those who want to create a business site. It builds on the “How to Create Your First Website” course and adds a lot more to the mix such as styling with CSS, using Adobe Dreamweaver to create websites, setting up your website with Google Webmaster, email marketing, affiliate marketing, and Facebook marketing.

Web Development

If you are looking to focus exclusively on HTML and CSS, this is a great course to complete after the “How to Create Your First Website” course. It goes over the basics of creating and styling websites and introduces you to Adobe Dreamweaver.

It’s perfect for those who aren’t very tech-savvy since it’s delivered in a non-technical and step-by-step manner. Similarly, there’s also a Web Page Design Using HTML5 and CSS3 course that just focuses on the powerful duo.

Diploma in HTML5, CSS3 and JavaScript

Going above and beyond the “Web Page Development” course listed above, this Diploma adds JavaScript and jQuery to the mix. It starts with the basics and quickly advances to topics like CSS3 selectors, inline HTML5 elements, embedding videos and adding controls, HTML5 canvases, JavaScript variables, jQuery syntax and plugins, and responsive design.

If you are eager to learn and love a challenge, this is for you.

3. edX

edX is my personal favorite place for free courses from top institutions. They offer a large variety of self-paced courses with an easy-to-use, user-friendly interface. Similar to Coursera and Alison, edX courses are free but often have an option to add a Verified Certificate for a small fee (price varies per course).

HTML5 Introduction

If you are a fan of The World Wide Web Consortium (W3C), you’ll be happy to know that this course was developed by them in partnership with Intel. It teaches you the basics of HTML5 and CSS in order to create and publish professional looking websites.

You’ll also learn the basic building blocks of web design and style.

CSS Introduction

Microsoft partnered with W3C to create this course which focuses on the basics of CSS (fundamental elements, properties, selectors) to help give some style and an organized layout to your websites.

Although it’s recommended that you, at least, be a little familiar with HTML before taking this course, it’s not mandatory; they do provide you with the HTML codes when needed.

Misc

Here are a few other options that you may prefer or want to try out in addition to some of the courses above.

The Odin Project

The Odin Project presents a very organized and helpful approach to learning web development. They’ve done all the work for you by scouring the web and putting together a list of the best free resources for learning Ruby, Ruby on Rails, HTML5, CSS3, JavaScript, and jQuery. They’ve also included projects for you to build while learning so that you can put your new skills to the test.

Intro to HTML and CSS

Udacity is pretty similar to Coursera and even has their own Specializations called “Nanodegrees.” You may even be interested in their Full Stack Web Developer Nanodegree program if you want to learn how to build complex web applications. However, if you just want an introduction to HTML and CSS, this course for you.

Dubbed as “not your typical intro,” it follows a different approach. Instead of a focus on language syntax, it teaches you how to think like a front-end developer. You’ll learn to convert digital design mockups into static web pages as well as how to break down a design mockup into page elements. It also touches on responsive design.

Bento Core

Bento is another well-organized resource that has a similar setup to The Odin Project. Their goal is to teach you how to become a self-taught expert programmer. By going through their “Bento Core” program, a full stack web development curriculum developed by top engineers, you’ll learn the basics and even some advanced topics. There are five sections to complete: Web Fundamentals, Front End, Front End Continued, Back End, and Databases.

Coding Dojo

Coding Dojo prides themselves on supplying the “most rigorous, comprehensive full-stack software development training programs to meet the career goals of both aspiring developers and industry veterans.”

While they do offer extensive courses at offline campuses for a fee, you can also benefit from their free Algorithm Platform. This collection of online lessons and challenges allows you to learn and practice coding fundamentals from home.If you still haven’t decided if this is the best career path for you, this immersive course will help you make a final decision.

Don’t Delay

Now that you have some of the best free web development courses for beginners at your fingertips, it’s best to get started right away. If you’re like me, continuously putting a task or goal off usually leads to forgetting about it altogether and ultimately, failing to complete it.

Good luck on your journey to a better you!

The post Free Web Development Courses for Beginners appeared first on Hongkiat.

In this post we will take a peek at 20 awesome Christmas experiments on CodePen, that you can use for inspiration to create your own designs.

Merry Christmas Tree!

This “Merry Christmas Tree!” is built with SVG and JavaScript animation engine library, Greensock, with some of the plugins. The library draws the tree around with some sparkling, making the animation more alive

If you’re looking to add the Christmas vibe on your website, check out the code. No Christmas without a Christmas tree!

Pure CSS Christmas Lights

After creating a Christmas tree, check out how you can create Christmas light. It’s made of only an unoredered list while the styles is written with SCSS. I think it’s perfect for a website decoration.

It’s amazing how we can create a compelling animation today just using CSS.

A christmas loop in svg

This is a good example that demonstrate the power of SVG. Not only that you can create simple animation, but you can also create such a complex animation like this; creating a loop of transformation 3 different objects smoothly.

This animation is built with just a single div, a little CSS, and JavaScript library named Lottie.

See the Pen A christmas loop in svg by kittons (@airnan) on CodePen.

Christmas Wishes

This “Pen” composes some SVG to create the scenery, the fox, and the bird. It’s using library called ParticelJS to create the snowfall. What makes it cool is that as you move the cursor around the snowfall, the snow will move away from the cursor as you’re moving it.

A winter wonderland scene

This christmas tree, the snow, and the snowfall are created with just HTML and CSS. The animation is made of CSS and it pretty straightforward. I think it’s a great example for those who’ve just learning CSS animation and see what it’s capable of.

CSS animated Xmas Tree (single element)

Do you believe that this Christmas tree and the animation with just a single div element and CSS?

HTML and CSS3 is really that powerful when you know the trick such as this “Pen” that gives you an example on how to create a Christmas tree and animate it. The trick here is to compose layer of shadows, animation, and transtions. It’s a great example to level up your CSS skill.

Family Christmas Songbook

This lovely Family Christmas Songbook app can play your favourite Christmas songs hosted on SoundCloud. The style rules are written in the LESS stylesheet language, and the music player functionality is provided by a custom jQuery plugin.

The snowflake and Christmas tree icons in the background give a solemn atmosphere to the design, and if you hover over the pen you can also find some subtle CSS effects.

Digital Christmas Tree

Designing for Christmas is always a thankful job, as its typical visual elements can be built in many creative ways. This pen is a good example for this. At first you can only see colourful triangles, seemingly unrelated to the holidays, but when you click on the Reveal button, they are set together into a Christmas tree. It’s not only a unique solution, but also reminiscent of a simpler game.

Christmas Animation with Snowfall

You don’t necessarily need to use JavaScript, if you want to create a cool animation for Christmas. In this pen, both the snowfall animation and the background images are created purely in CSS. It’s worth to examine the code a bit, as it shows the incredible capabilities of CSS3. The background image can be even mistaken for a real SVG graphic.

Read more: 30 Cool CSS Animations You Have To See

Santa On The Run!

Santa On The Run! is a fun JavaScript game for the holidays making use of the phaser.js HTML5 game framework. There are not too many rules in this game: Santa runs infinitely, or at least until he falls down. This pen gives you an excellent opportunity to understand how to write a simpler game in JavaScript.

Secret Santa Name Picker

Picking a name out of a hat has been a popular way in schools and offices to pick Secret Santas – this pen is merely a digital version of this tradition. As it uses only vanilla JavaScript, you can easily embed it into your own site. Just change the names inside the give variable.

Christmas Balls in Pure CSS

These cheerful Christmas balls are written in pure CSS taking leverage of the border-radius rules. The different parts of the balls are set together by utilizing precisely calculated relative positions.

If you want to quickly add a holiday atmosphere to a web page, just insert some of these balls to the appropriate places in a colour that matches the overall design of the site.

Movable Snowflakes

You can make these snowflakes move by hovering over them on a desktop, or by tilting your smartphone. The functionality is provided by object-oriented JavaScript that is smartly used by the developer to create a custom Snowflake class.

The snowflakes themselves are built in CSS3, and the background uses gradients – there are no images in this pen at all.

Holiday Accordion Experiment

This holiday accordion is simply beautiful. If you hover over a tab it comes to focus by expanding a bit, and if you click on it it suddenly pops up and covers the whole page. It’s interesting to note that this pen uses Scalable Vector Graphics (SVG) that are styled with CSS.

SVGs are more powerful than they seem to be at first sight, they can be smartly positioned and designed with the same style rules we use with regular HTML elements.

Flat Pure CSS Snowman

Who said flat design needs to be boring? This lovely snowman can easily add Christmas spirit to any design. There’s no images used for the snowman, it’s completely written in CSS. It’s worth to take a look at the CSS code a bit, and see how the developer uses the :before and :after pseudo selectors to achieve the intended result.

CSS3 Snowflake

You can facilitate the creation of CSS3-only images by using advanced front-end development tools; this well-designed CSS3 snowflake is an excellent example for this. The developer made use of the Jade templating language that compiles into HTML, and the Sass CSS preprocessor to implement this stunning snowflake design.

Christmas Button

Smart designs frequently opt for subtle solutions, just like the snowy Christmas Button in this pen. The dark red background is a perfect choice for a Christmas design; not everything needs to be green after all.

The colours, the gradients, the typeface, and the hover effect make this button very elegant and solemn. You need only a few of them to quickly decorate a site for Christmastime.

Parallax Happy Holiday

If you like parallax scrolling, why wouldn’t you use it for your holiday designs? The developer of this pen smartly experimented with the effect, and used the Parallax.js jQuery plugin in a less common way, the scrolling effect is not vertical as usual, but horizontal. The Christmas atmosphere is intensified by an impressive snowfall

If I had to pick on any flaw of this pen, it would be the colour choice: white letters on a partially white background significantly weakens the accessibility of the design.

CSS Christmas Wrapping Paper

You can create a completely unique Christmas wrapping paper with the help of CSS3. The developer of this pen shows not only one, but six variants for this. The beautiful patterns are achieved by the smart utilization of CSS gradients and the background-blend-mode property.

You can find even more cool examples and a detailed explanation on the developer’s own website.

Box Within a Box

This imaginative design was inspired by traditional Russian dolls (a doll inside of a doll). If you open the outer box by clicking on it, it reveals an inner box that is also the outer box of another inner box. The functionality is written in jQuery, and the exact places of the boxes are set with the help of absolute and relative position rules in the CSS file.

Gift Box with Paper Peel Effect

If you manage to remove the ribbon from this gift by dragging it away, you can take a look at the supercool paper peel effect that reveals the inner contents of the gift. You can read the full tutorial on the developer’s website, it’s a trick that it’s definitely worth to learn. If you just want to use the code you can clone it from GitHub as well.

Holiday Spirit Animated Canvas

Christmas can be a great time for experimenting with new things, just like the developer did it in this pen by using HTML5 canvas as an animated background. The canvas comes before the content (Happy Holidays!) in the HTML file, and it’s set as a background with the help of smart CSS positioning.

The pen also uses a background animation script included as a separate JavaScript file.

Gift Card UI

This eye-catching gift card is not only for Christmas, but can be used at any time when you want to surprise your users with a gift on your website. It doesn’t rely on JavaScript as it’s entirely written in the Sass stylesheet language.

The design makes use of the clip-path CSS3 property that allows developers to display only a specific region of an element, instead of showing its whole area.

Pure CSS Merry Christmas Card

This infinitely laughing Santa – using only HTML and CSS3 – can give you the opportunity to understand how the keyframe animation syntax can be used in practice. In CSS3 you can use the @keyframes rule to specify the rules of an animation, and then you can bind this specified animation to a certain element by using the animation CSS3 property.

You need to add the name of the keyframe as the first value of the animation property, just like the developer did this with the custom keyframes called bodyLaugh, beardLaugh, headLaugh, and mouthLaugh specifically created for this pen.

Xmas Cracker

If you hover over this impressive Xmas Cracker, it reveals a unique Christmas message that’s an amazing way to wish a Merry Christmas to your visitors. The HTML is written in HAML, the HTML Abstraction Markup Language, while the style rules take leverage of the power of the Sass Syntactically Awesome Styesheets language.

The result is smart and awesome indeed. By adding a little more JavaScript it can be even used to deliver custom quotes or messages to the users.

The post 25 Awesome Christmas Projects Hidden in CodePen appeared first on Hongkiat.

One of the most frequent reasons for early abandonment is the poorly selected colour schemes that decrease the readability of the content.

According to the statistics of WHO, there are about 285 million visually impaired people around the world, many of whom are partially or fully colour blind.

Visual disabled people see colours differently, so avoiding low colour contrast in our designs is inevitable if we want to provide our customers with an accessible and user-friendly website.

Web Standards For Colour Contrast

Colour contrast ratio measures the difference in contrast between two colours. The higher the value is, the easier it is to distinguish the object (text, image, graphic) in the foreground from the background.

Colours can contrast in many different ways, such as in hue, value and saturation. Colour contrast ratio is calculated by a formula provided by W3C, the main international standards organization for the World Wide Web.

It can take a value between 1:1 (no contrast at all, the foreground and the background have the same colour) and 21:1 (the maximum contrast that only exists between black and white).

W3C’s lastest Web Content Accessibility Guidelines (WCAG) 2.0 provides web developers and content creators with benchmarks for the minimum (Level AA) and the enhanced (Level AAA) value of acceptable colour contrast ratio.

Level AA requires at least 4.5:1 ratio for regular text, and 3:1 for large text. It’s much easier to read large text like subtitles, that’s why it needs a lower colour contrast.

If you want to reach Level AAA which is the enhanced level, you need to design your colour scheme with a greater care, as it requires at least 7:1 contrast ratio for normal text, and 4.5:1 for large. If a text is part of a logo or a brand name, there’s no minimum colour contrast requirement at either WCAG level.

We can only call a website visually accessible if the colour contrast ratio between every foreground object and its background reaches at least Level AA.

Benefits of High Colour Contrast Ratio

By ensuring better readability you don’t only engage visually impaired users, but also people who read your content on small screens such as on a smartphone or a smartwatch, among bad lighting conditions, and on lower quality monitors.

People also read faster when there’s higher contrast between the text and the background, so it will most likely take more time for them to get bored with the content of the site.

If you worry that applying higher contrast ratio will have a negative impact on the aesthetics of your design, you need to check out the Contrast Rebellion web project which proves, with real-life examples, that sticking to the high contrast ratio rules can still result in attractive and cool designs.

Apps For Checking Colour Contrast

There are many great free tools all over the web that can help designers check the colour contrast ratio of their website.

The easiest way of testing your design for colour contrast is to pick the main colours with either Photoshop or a suitable browser extension like this one for Firefox, and copy the values into one of the apps below.

The most important thing to remember is that you always need to compare the foreground colour such as text colour to its surrounding area (background colour).

1. WebAim Colour Contrast Checker

WebAim (Web Accessibility In Mind) is an organization promoting web accessibility that offers developers a simple but reliable colour contrast checker among many other great accessibility tools such as Wave, a general accessibility evaluation app that can help you quickly assess your site’s accessibility issues.

WebAim’s Colour Contrast Checker tells you if your colours pass the WCAG AA and AAA tests, both for normal and large texts.

2. Snook Colour Contrast Check

Jonathan Snook, currently working as lead front-end developer at Shopify, has been hosting his handy colour contrast check tool for over a decade. Snook’s app allows you to change the HSL and RGB values of the foreground and background colour one by one by using convenient range sliders until you reach a result that is compliant with the WCAG 2.0 benchmarks.

CheckMyColours

CheckMyColours created by Giovanni Scala allows you to check the colour contrast ratio of all foreground-background colour combinations on a live website.

It calculates luminosity contrast ratio, brightness difference, and colour difference, and provides you with a full report about the results. CheckMyColours’ report can significantly facilitate your understanding of how you can improve the visual accessibility of your site.

Color Scheme Designer

Color Scheme Designer is not particularly a colour contrast checker, but a tool for designing complete colour schemes.

We include it in this collection, because it has a feature that allows you to see how your colour scheme is perceived by people with different types of visual disabilities.

You can test your colours for full colour blindness, protanopy, deuteranopy, and many other visual impairments. The app has a newer version called Paletton that makes even a more sophisticated vision simulation possible (you can also test for things like lousy LED display or weak CRT display).

W3C also provides you with a huge Web Accessibility Evaluation Tools List where you can find many other colour contrast tools such as this helpful Accessibility Color Wheel.

Tips For Creating Visually Accessible Websites

If you want to create a visually accessible website, it’s always a good idea to avoid using colour alone to convey functionality or meaning. Icons that change their colour based on their current state are typical examples for this.

If it’s possible, always design additional visual cues that assist people who see colours differently in understanding functionality.

Never forget to pay extra attention to the colour contrast of buttons, links and menus, as they are the means of navigation on your site. If users can’t navigate easily on your site, you’ll quickly lose them. Accessible colours for call-to-action buttons are also crucial for good conversion rates.

It’s a good workflow practice to test colour contrast ratio as early as possible in the design process as it will be hard to persuade your client to change the colour scheme of the site later on down the design process.

Now Read: Practical Approach To Choosing Website Color Scheme

The post Using High Colour Contrast For More Accessible Design appeared first on Hongkiat.

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.

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.

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?

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.

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.

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.

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.

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.

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.

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.

Conclusion

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.

Theme frameworks function as a scaffolding for a new theme; they provide developers with a set of features and functionalities they can use to create their own themes.

Opinions about WordPress theme frameworks are divided in the developer community. Fans argue that they are real timesavers, shorten and facilitate the development workflow, take the burden of intensive coding off our shoulders, and make it possible to focus more on design. Opponents say theme frameworks can have high learning curves, and they are too restrictive as well, as, by their predefined rules, they prescribe what we can do and what not.

A good counter-argument against higher learning curves can be that we have to understand the logic of a framework only once, then we can reuse the same knowledge several times and don’t have to worry about following all the new updates of the WordPress Core. Predefined rules, the other criticism coming from opponents, are called best practices by the fans.

Whatever stance you take, WordPress theme frameworks have become wildly popular these days, so it’s worth checking out what they have to offer. In the rest of this post, we will take a look at five premium and five free WordPress theme frameworks so that you can decide if they’re worth their salt.

1. Genesis

Genesis is a highly customizable, secure, and mobile-friendly WordPress theme framework offering custom page templates, featured content widgets, elaborate Theme Options, and many other cool features. The framework itself needs to be installed as a parent theme, then you can customize it according to your needs by using a child theme.

The parent theme (Genesis framework) itself is currently the most popular WP theme on the market. There are also many professional Genesis child themes available on the web (premium and free), but you can create your own child theme if you want as well. Check out Genesis’s showcase if you want to see how other designers made use of it.

2. Underscores

Underscores, the popular and flexible starter theme framework created by Automattic, is the starting point for many professional theme developers. It’s recommended only to advanced developers, as Underscores comes with neither a visual builder nor a Theme Options panel.

In return, it has high coding standards, well-commented HTML5 templates, a well-organized starter style.css file, a toggled dropdown menu for small screens, a handy 404 template, 2 sample CSS layouts, and many other developer-friendly features that takes theme development to the next level.

3. Thesis

Thesis is a flexible theme framework that focuses on search engine optimization and easy customizability. It has a drag-and-drop visual template editor that makes it possible to add different functionalities, such as newsletter signup forms and social buttons, to your designs.

It also comes with editable Skins that allow developers to quickly implement beautiful designs. It’s not just for novice developers though, as experienced coders can also take leverage of its flexibility with the help of the development tools of the Thesis API.

4. Headway

Headway is an elegant drag-and-drop theme builder that can be a great choice for designers who don’t want to get their hands dirty with code. Building themes with Headway is a two-step process: first, you are supposed to create the layout with the help of the Visual Editor; secondly, you can add custom stylings, such as typography, colors, and other visuals using the Design Editor.

If you want to tailor the CSS code, there’s a Live CSS Editor for that purpose as well. Headway also makes it possible to export your themes to other Headway-powered WordPress sites easily.

5. Storefront

Storefront is a theme developed by the team from WooCommerce. It comes with minimal styling with deep integration with WooCommerce.

It makes Storefront a perfect base to create a custom WooCommerce theme. You can easily modify the layout, the typography, and other design elements through the Customizer or through the child theme.

6. GeneratePress

GeneratePress is probably one of few WordPress theme frameworks that I think is very well built. Each feature is modular, which allows you to enable or disable a particular one as needed, and enable it to be performant right of the box.

It also integrates with the new editor in Gutenberg seamlessly through its sister plugin, GenerateBlocks. The theme framework and the plugin provide a great experience for the developer to build a site and the end-users to author content.

7. Gantry

Gantry is a fast and lightweight theme framework for creating WordPress and Joomla themes. It is developed by RocketTheme, a popular premium theme webshop that decided to give their framework away to the general public for free.

Gantry has a visual menu editor, an Ajax admin that makes the backend incredibly fast, a drag-and-drop layout manager, a content block builder called Particle System, and many sophisticated visual design features, such as an image picker, an icon picker, a font picker, and many others. Gantry pleases advanced developers as well, as it supports CSS preprocessors (SCSS and LESS), the YAML syntax, and Twig-based templating.

8. Sage

Sage is an advanced WordPress framework for developers to build a custom WordPress theme from Roots. It comes some modern development tools like Webpack, Blade templating, Sass, Yarn, and Composer pre-configured and fine-tuned for WordPress development. So you can start building your next awesome theme without wasting time on setting up configurations.

By combining it with the compona tools, Bedrock and Trellis, you can get a complete end-to-end tool for both the theme development and deployment to the production site.

9. Tonik

Tonik is a framework that aims to modernize WordPress theme developments through better file organization, structures, and development patterns in PHP, JavaScript, and CSS. The framework includes the starter theme with centralized configurations, the custom functions like templating, hooks, pre-configured Webpack to compile JavaScript, and the CSS files.

What’s unique about this framework is that it also provides its own “tonik” CLI as an additional tool that allows to generate theme scaffold or refactor the theme.

10. UnderStrap

UnderStrap extends the Underscores start theme with Bootstrap 4, which allows you to easily reuse components like the Grid Layouts, Buttons, and Forms on the theme.

It also integrates with some Jetpack functionalities, WooCommerce, and provides Panel options to customize the theme from the WordPress dashboard. It’s a theme framework with apt tools and built-in features to build your next awesome WordPress theme.

The post 10 Best WordPress Theme Frameworks [Reviewed] appeared first on Hongkiat.

ARIA is one of the numerous accessibility standards and guidelines published by the Web Accessibility Intitiative (WAI). It provides an additional markup that can be easily inserted into HTML documents. WAI-ARIA is a cross-platform an cross-device solution that targets the Open Web Platform, so don’t only think about websites, but also about games, digital entertainment, healthcare, mobile, and other kinds of apps.

In this post we will take a look at how you can add accessibility to your HTML documents with the help of WAI-ARIA standards.

The ARIA Framework

The syntax of HTML doesn’t always allow developers to describe elements properly, to identify their roles, and specify the relationships between them.

While that’s rarely a problem for visitors who are in full possession of their senses, it can impede assistive technology users from understanding what’s happening on the screen and exploring their options.

This is the point where ARIA comes to our help, as it makes possible to define the purpose of different elements with the help of landmark roles, and describe their nature with aria-prefixed attributes.

Aria-prefixed attributes have two types: properties that describe features that are less likely to change throughout the page life-cycle, and states that provide information about things that may frequently change due to user interaction.

Landmark Roles

Landmark roles are the most well-known forms of ARIA’s Roles Model (others are the Abstract Roles, the Widget Roles, and the Document Structure Roles). Landmark roles enable developers to identify large perceivable regions on the web page that assistive technology users may want to quickly access.

There are 8 types of ARIA landmark roles, and they need to be added as attributes to the related HTML tags.

role=”banner”

The banner role is intended to be used mainly for content that is related to the entire site, not just to individual pages. It’s usually added as an attribute to the main header of the site for the logo and other important site-wide information.

It’s important that you can use the banner role only once within any HTML documents or apps.

role=”main”

The main landmark role is related to the main content of the document. It can’t be used more than once on any HTML page. It usually follows the <div role="main"> syntax, or in HTML5 the more semantic <main role="main">. The latter was added to the W3C specs with the purpose of mapping the main ARIA landmark role to a semantic HTML element.

role=”navigation”

The navigation role is meant to be used for indicating an area that contains navigational elements such as links and lists on a site.

role=”complementary”

The complementary landmark role describes additional content that is related to the main content of the site. It needs to be placed to the similar level in the DOM hierarchy as role="main". Related posts, popular articles, latest comments are typical examples of autonomous complementary content.

role=”contentinfo”

The contentinfo role informs user agents about the presence of a region where different kinds of metadata, such as copyright info, legal and privacy statements can be found. It’s typically used for the footer of a site.

role=”form”

The form landmark role indicates a form waiting for user input. For search forms you should use role="search" instead.

role=”search”

The search role is pretty self-explanatory, it’s intended to help assistive technologies identify the search functionality of a website.

role=”application”

You can use the application landmark role for a region that you want to declare as a web app, rather than a web document. It’s not recommended to include it in traditional websites, as it hints to assistive technologies to switch from normal browsing mode to application browsing mode. You should only use this landmark role with great care.

States and Properties

While roles enable you to define the meaning of HTML tags, states and properties provide the user with extra information on how to interact with them. Both states and properties are marked with aria-prefixed attributes with the syntax aria-*.

The most well-known ARIA attributes are probably the aria-required property and the aria-checked state. Aria-required is a property because it’s a permanent feature of an input element (i.e. the user must fill it in), while aria-checked is a state because a checkbox may frequently change its value due to user interaction.

The Syntax of Aria-prefixed Attributes

States and properties sometimes take token values (a limited set of predefined values), for instance the aria-live property can have 3 different values: off, polite, assertive. The syntax in this example looks like this: <div id="some-id" class="some-class" aria-live="assertive"><div>.

In other cases the values of aria-prefixed attributes are represented by strings, numbers, integers, ID references or true/false values.

How to Make Use of ARIA States and Properties

1. Build Relationships Between Elements With Relationship Attributes

Use relationship attributes to indicate relationships between different elements on your site, that can’t be otherwise determined from the document structure. For example the aria-labelledby property identifies the element that labels the current element.

aria-labelledby – among many other things – can bind headings to ARIA landmark regions in the following way:

<div role="main" aria-labelledby="some-id">

	<h1 id="some-id">This Is A Heading</h1>

	Main content...

</div>

2. Synchronize States and Properties With The Element’s Lifecycle

After you set an ARIA landmark role for a perceivable area on your HTML page, it can help assistive technologies a lot if you change the ARIA-prefixed states and properties of child elements in accordance with events happening on the screen.

This can be crucial where users have to interact with the site, for example filling in a form or running a search query.

3. Match The Visual and The Accessible Interfaces

The general rule of thumb of accessibility design is that the current state of the user interface always needs to be perceivable by assistive technologies. For instance if the user chooses an option in a form, it needs to appear selected for assistive technologies too.

This can be easily achieved by utilizing the aria-selected state with the following syntax: <option aria-selected="true"></option>.

W3C’s WAI-ARIA Authoring Practices guideline can give you many other great ideas about how to properly harmonize the visual and the accessible interfaces of your site.

Don’t Overuse ARIA

Using ARIA roles and attributes sometimes can be redundant. When you use semantic tags of HTML5 such as <button></button> or <form></form>, modern web browsers add the appropriate ARIA semantics by default. In this case it has no sense to separately set the ARIA landmark roles.

For example it’s unnecessary to use the form landmark role to define the <form> element. Instead of the <form role="form"></form> syntax it’s perfectly enough to use just <form></form>. It’s also superfluous to use HTML’s native attributes along with the appropriate ARIA attribute.

So if you’ve already added the hidden HTML attribute to a form input, it’s unnecessary to add the aria-hidden state, as the browser includes it by default.

The post A Look Into: ARIA Web Standards & HTML Apps Accessibility appeared first on Hongkiat.