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.

So in this post, you’ll find some cool and fun robotic gadgets for everyday use and different ages. From toys to household products, you’ll love these cutting edge robotic gadgets. So take a look at the list and see if you’d like to get one for yourself or a loved one.

Starter Robotic Kit ($149.99)

Starter Robotic Kit is an excellent choice for techies who want to learn robotics, electronics, and Arduino programming. The kit contains different mechanical parts and electronic modules that allow users to build either a robot tank or a three-wheel robot car.

Learning doesn’t necessarily have to be hard, it can be a fun and engaging experience.

Dash & Dot Wonder Pack

Dash & Dot are an amazing robotic toy duo which comes with a xylophone, and two apps loaded with helpful instructions and cool games. Dash is a robot that works out of the box, responds to your voice, sings, dance, and navigates objects.

Dot is a robotic “brain” whose job is to introduce kids and adults to coding and robotics in a playful way.

Mocoro ($11)

Here’s a cute and unique robotic fur ball vacuum cleaner for Christmas. It looks like a regular furry ball, but it hides a little robot cleaner under the cover. It rolls around the house cleaning up on its own, working best on wooden and vinyl floors. It contains an internal timer, and it’s easy to clean.

Ozobot ($99)

Ozobot is a miniature smart robot that is able to react to lines, patterns and colours on both physical and digital surfaces. Draw labyrinths with different colours on paper, print mazes and paths for Ozobot to explore, or download the free Ozobot mobile app and place it right onto the screen of your tablet, or play mobile games with it

Ozobot features a colour optical sensing module and two independent micro-motors.

Robot Mower

Gardening has never been easier than with this smart robot lawn mower. It fully automizes grass mowing with the help of its cutting edge microcomputer processor, and it’s packed with tons of incredible features such as collision sensors, intelligent moving functions, and theft protection systems.

When it begins to rain, it even goes back to its charging station completely on its own.

Remote Controlled Tarantula ($49.99)

This remote controlled tarantula will give the creeps to anyone who doesn’t treat its owner with enough respect. Thanks to its hairy design this scary creature looks quite real, and can move forwards, backwards, and rotate 360 degrees. Its legs can move independently and its eyes can light up in a frightening way.

Zoomer ($41.99)

If you want to surprise your loved one with a more friendly high-tech pet, Zoomer, the interactive robot dog can be an excellent choice. It’s playful, funny, can talk, bark, scoot around, wag its tail, and even understands three languages: English, Spanish and French.

It can be a great substitute for a real dog, and you never have to worry about missing feeding time, or cleaning after it.

Omnibot Hello! ($111)

OmniBot Hello! MiP comes on two wheels to your help whenever you quickly need something, let it be a chilled drink or your glasses. MiP’s trajectory can be controlled on a smartphone, and its direction can be changed with a simple gesture

It can also dance to music, and even box with another MiP to keep you entertained.

JD Humanoid ($549)

This smartly designed humanoid robot kit allows users to build a fully functional humanoid robot that can walk, dance, play the piano, and engage in many other activities.

The kit offers many features, such as heavy-duty servo motors for unique movements, a built-in camera for vision tracking, speech recognition for vocal commands, and built-in Wi-Fi connectivity for app control.

Litter-Robot ($499)

This self-cleaning robotic litter box must be the dream of every cat owner. It has smart sensors that detect when a cat has used the box and left it, then initiate a self-cleaning mechanism in 7 minutes.

The robotic litter box uses a carbon filter that helps prevent odors, and has a drawer that can be lined with regular kitchen garbage bags to make it easy to remove the waste.

Tosy

Tosy is a high-tech dancing robot supplied with an MP3 player and a stand containing two DiscoStage speakers. Its dancing steps are customizable via smartphones and tablets, and it can perform 56 different sophisticated movements.

Tosy is an awesome gift for anyone who loves music, parties, and dancing; teens will be surely fond of it.

Bionic Bird ($89.00)

Choose this cool Bionic Bird as a gift that will surprise your loved ones with a unique experience. The Avitron Bluetooth Bionic Bird flies up to the sky to show new horizons to its owners.

You can control your bird via bluetooth, follow it with the help of a tablet or a smartphone, and enjoy the amazing view it captures during the flight.

BB8 Droid

Any Star Wars fan will be more than happy to be surprised with this BB8 app-enabled Droid. BB8 is not just a regular robot, but it has an adaptive personality that changes as you play, showing a range of expressions based on your interactions, recognizing and reacting to your voice.

You can even record and view virtual holographic videos with it.

MOSS Zombonitron 1600 ($199.95)

MOSS Zombonitron 1600 is a modular robotic kit for tech lovers that includes 16 MOSS blocks, 56 carbon steel spheres, a light sensor, a proximity sensor, two motors, and many other advanced features. With the help of the steel spheres you can combine hinges and joints to create simple motions.

Zombonitron lets users experiment, and build hundreds of different kind of amazing robots.

The post 10 Fun Robotic Gadgets to Splurge On This Holiday Season 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.

Due to the large number of tools and services we need to use, the number of passwords we need to remember are skyrocketing, with security requirements of passwords becoming more and more complicated with every passing year.

These days if you want a truly secure password, you have to include both upper and lowercase letters, numbers, special characters, and none of the common words that would allow dictionary attacks to work.

Frankly, who can follow all those rules?

Changing times

Luckily there are great password management apps out there that can help you securely manage tons of passwords. But what happens when you need to change all of your passwords after an online attack like Heartbleed?

I bet most of you would opt for an easier solution than creating hundreds of new passwords and confirming them via email.

The alternatives of passwords are mostly based on biometric technology sometimes called natural body identification.

Biometric technology such as fingerprint scanning, facial recognition, and iris scanning are already on the rise, and there are many more new technologies that are coming to light.

Let’s look at the signs of how biometric identification will be conquering the world in the next few decades.

1. They are fashion accessories for the connected

PayPal, the online money service provider is one of the pioneers that are actively developing new biometric technologies.

In an interview with the Wall Street Journal, Jonathan LeBlanc, PayPal’s global Head of Developer Advocacy claimed that the identification of external body parts like fingerprints was an obsolete technology.

He recommended the “true integration with the human body”approach instead. Wearable computer tattoes – one of PayPal’s latest ideas – do just that

The picture below was presented in the company’s “Kill All Passwords” presentation. It is a sketch of a rudimentary version, but the potential in this wearable computer tattoo idea is clear.

The tattoos will show various biometric information like ECG, EEG, body temperature, and they will also include the necessary stuff for wireless connection.

There are other companies out there that have already released their wearable identity solutions. Nymi, a Toronto-based startup developed a device called Nymi Band that uses the wearer’s unique electric cardiac signature as a biometric.

The band seamlessly unlock devices, remembers passwords with the help of heartbeat sensors. And the band doubles as a fashion accessory, available in three colours and two sizes.

2. The younger generation are early adopters

Social acceptation of natural body identification will be easier when the Z Generation come of age. A recent study conducted by Visa Europe in the UK found that 75% of the youngest banking customers prefer biometric security devices to PINs and passwords for authentication.

No less than three-quarters of them would feel comfortable with the new technology, and half of them foresee the death of passwords by 2020.

According to Jonathan Vaux, the Executive Director at Visa Europe “we have more logins and passwords than ever to help keep us secure online and on the high street, but for Gen Z it just feels like an unnecessary burden“.

No word yet if it the authentication technique will be facial recognition, fingerprint scanning, or something else, but since Mastercard and Barclays have announced plans for biometric identification, we can be sure that the competition for the latest generation of banking clients has already begun.

3. It caters to instant gratification

All those defamatory articles about the Y-Generation’s insatiable need for instant gratification will be even worse in the next generation after them.

New web standards like the Fast Online Identity (FIDO) brings the future reader even closer to instant gratitification.

FIDO is an open standard for an easy-to-use and secure universal authentication interface, and it’s backed by industry leaders such as Google, PayPal and Mastercard. UAF standards, one of FIDO’s two protocols – already support thumbprints, vocal phrase and iris scan biometric identification.

As spending money online probably could not get any easier with this implementation, the haven of ecommerce sites, and the hellish nature of parenting teenagers, will surely arrive soon.

4. It is big business

Nobody can deny that passwordless authentication is a big business. Why else would tech giants like Microsoft and Apple have spent tons of money on the development?

But it’s not just about the inner development of star companies. There are articles all over the web on how companies offering foolproof biometric identification raised serious fundings from high profile investors like Ignition Partners, Salesforce Ventures and Mastercard.

5. It is hard to steal

According to a recent analysis by the Kapersky Lab international software security group the “most common mistake even rather advanced users make is to re-use passwords for a multitude of resources”.

In its surveys on security breaches, Kapersky Lab found that “59% of people fail to store their passwords securely, 63% use “easy-to-guess” passwords and up to 39% use the same combination for all their accounts”

If passwords are replaced with natural body identification, bad password hygiene will be a thing of the past. It’s hard to even theoretically imagine how a hacker can mimic the rhythm of your heartbeat or fake the voice patterns of your speech.

5. It cannot be shared

The biometric features of the human body are unique. Even identical twins possess different biometric characteristics such as fingerprints.

The new identification technique therefore will eliminate failures that happen when people stick notes with their passwords onto their monitors or when their friends simply know the answer to their password-reset security questions.

6. It can be synced everywhere securely

As people have more and more devices and mobile payments are also on the rise, it’s increasingly important to find ways to protect all of the endpoints. Cloud-based biometrics offers a handy solution for this challenge.

Cloud-based voice biometrics and cloud-based iris recognition are already available on the market. The cloud-based platform makes it possible to keep your data secure all the time.

As the database is stored in the cloud, so if you lose your device your biometric information is still protected.

Similar to all cloud-based services, this kind of biometric identification is also highly scalable, and it’s easy to integrate it into existing apps.

8. For the wary, there may be an edible version

If you aren’t loving the idea of having your biometrics kept in any system, there may be another option. Have you ever thought about eating your passwords? That is another new biometric technology PayPal’s masterminds have been lately pondering about.

The ingestible pills would be powered by stomach acid, and would detect glucose levels and other internal features of the human body. The encrypted data would then be sent to an external receiver.

Don’t worry, this technology is still a long way away, not just because of the implementation but cultural norms also need to catch up – swallowing pills may sound a bit too harsh to be widely accepted. Maybe the average user prefers something tastier, like cookies.

9. It’s cost-effective

IBM and the Ponemon Institute recently released its 2015 Cost of Data Breach Study: Global Analysis report.

According to the research, the cost of data breaches is rising globally: the average total cost of a data breach grew by no less than 23% over the course of the past two years.

The elimination of insecure passwords and data protection needs to be solved before the costs sprout to an unmanageable level. Biometric identification has an inherent cost-reducing effect, as with its help the overall number of government and enterprise data breaches will drop.

10. It brings social change

Biometric technology can also bring significant social change. The Right Patient biometric patient identification platform increases patient safety in health care, deters medical identity theft, integrates with mHealth (mobile healthcare) apps, and therefore enhances the average patient’s experience and safety in the healthcare systems.

Natural body identification can also help eliminate corruption, bribery and fraud at general elections.

An example of this is found in practice in Nigeria, which has been using a biometric voter registration system since 2007 including permanent voter cards storing biometric information such as fingerprints and facial image, fingerprint scanners and biometric software.

The post 10 Reasons We Won’t Need Passwords In the Future appeared first on Hongkiat.

React offers an alternative for MVC frameworks, such as Angular or Backbone, with a more straightforward structure and a focus on performance optimization. As React will be surely defining the web development landscape in the coming years, in this article, we would like to provide you with a developer toolkit to help you set foot in the realm of React development.

Official React.js Docs

Facebook provides developers with a detailed documentation on the main concepts of React. Besides the docs, you can also find here a great tutorial on how to build an interactive tic-tac-toe game with React, and a discussion forum for React developers. As the docs are open-source, you can even edit them if you want.

React.js Github Repo

In the React Github Repo, you can check out React’s source code whenever you need it. If you want to stay informed with the current state of development, you can also have a look at the issues, the milestones, and the latest pull requests. If you got stuck, it can also be a good idea to study the Trouble Shooting Guide a bit.

Hello World Starter Code

If you want to give a quick try to React, you can start with this “Hello World” interactive demo on Codepen. It includes all the necessary assets and the starter code as well. As Babel is also on, you can use both ECMAScript 6 and the JSX syntax. Just fork this pen, and you can go ahead without having the set up the whole environment on your own.

React JSFiddle Playground (with and without JSX)

This is a great online playground if you want a place where you can start practicing React. It’s hosted on JSFiddle, and has two versions: one with JSX and one without JSX, choose whichever one you’re more comfortable with.

Create React App

The Create React App is an boilerplate to build an application with React.js. It’s equipped with a handful web development tools such as Webpack, Babel, and Browsersync. These tools work out-of-the-box, so you can start working immediately instead of being befuddled with the tool configuration. It provides you with the same frontend stack Facebook uses and allows you to jump into full-stack React development without too much hassle.

ReactCSS

ReactCSS makes it possible to add inline CSS styles in JavaScript. ReactCSS comes with support for React, Redux, React Native (a framework for building native mobile apps using React), autoprefixing, hover, pseudo-elements, and media queries. You can quickly install it with npm.

React Styleguidist

React Styleguidist allows you can quickly generate a style guide for your React.js application. Simply write README.md of the component in MDX, and the generator will take care of the rest. It also works out-of-the-box with Create React App.

Belle React Components

Belle is a React component library that equips you with a set of React components you may want to use in your project, such as “Button”, “Card”, “Spinner”, “Toggle”, “Rating”, different form components, and others. The components work both on mobile and desktop, and they are customizable as well.

Belle is not the only React component library out there, you can find other great ones on Github, such as React widgets or Elemental.

Storybook

If you don’t want to use someone else’s component library but want to build your own, it’s worth giving a try to React StoryBook which is a UI development environment for React components. Storybook allows you to develop components interactively. It has an elaborate documentation, and you can get started with the development in the Storybook Hub.

React-Bootstrap

React-Bootstrap integrates React with the popular Bootstrap 3 frontend framework. Its developers basically rebuilt Bootstrap components with React.js. This results in a cleaner code base with less repetition, and a higher performance.

Note that as the repo is under active development, the APIs will change in the future. For the current state of development, check out the roadmap of the project.

React DevTools

React DevTools for Chrome is an extension to Chrome Developer Tools and allows you to inspect component hierarchy. It was created by Facebook with the endeavour to assist the developer community in building new React apps. You can simply add it as a Chrome extension to your browser. You can browse the belonging source code on Github as well.

The DevTools add-on is also available for the Firefox browser and it can be installed from the Firefox Add-on page.

React.js Extension for Atom

You can add React support to your Atom code editor with this Atom React package. It comes with syntax highlighting, autocomplete, code snippets, HTML to JSX conversion, and some other useful features that can greatly facilitate React development.

Beginner’s Guide to React

There are many excellent courses where you can learn React.js development, and Egghead’s one of which provides free quality materials on the topic. This course covers the very basic concept of React.js, you will learn how to create a basic React.js component, JSX, Props and PropTypes, and States. It’s a great source if you just get started with React.js.

Getting Started with Redux

Another great free video course from Egghead.io. Brought by Dan Abramov, one of the key maintainers of React.js, this video course will teach you how to use Redux to manage your application state or data across the React.js components in your application. This course complements your React.js skill.

Design Systems in Storybook

Storybook allows you to create style guides of your React.js components providing a central reference and documentation to use the components. While we’ve mentioned Storybook on this list, this video course will help you further in detail to use Storybook. Egghead.io also provides this video course for free.

The post 15 React.js Tools & Resources for Developers appeared first on Hongkiat.

Experts now say the best way is to think about the people who will use your design. This idea is called user-focused design. It means you should mainly think about the people who will use your design, not just the person asking you to make it.

If the users are happy, the person who asked you to make the design will also be happy. This means they will be ready to pay and give good feedback. To do this, you need to know the users well.

Making designs for users can be tough. You need technical skills, creative thinking, kindness, and a good understanding of how people think. To help with this, designers make user profiles, also known as personas.

Why Personas Are Important

When you make a product, many people will use it. So, the big question is: how do you make something for everyone? Instead of seeing your users as a large group, it’s better to think of a smaller number of users. This helps you understand and design for them better.

A Persona is like a made-up version of a regular user. Remember, you don’t need to have just one persona. But, having too many can be confusing.

Personas are not just imaginary users. They should be based on real user studies. It’s a good idea to make personas early in the design process. This way, you can involve your client too. They might know more about their users than you do.

Personas also help avoid wrong ideas or judgements. When you think of personas as real people, you design for them. This is better than designing for a vague group of unknown people.

A Simple Example: Persona Cafe Story

Personas help us think about specific users instead of a general group. Let’s look at a real example to see how personas can be used in designing a user experience.

Imagine you have a client who asks you to create a website for a well-known coffee shop on a university campus named “Persona Cafe”.

Persona Cafe offers hot and cold drinks, sandwiches, and sweets. It’s where students and teachers hang out during breaks or after class. The cafe owners want a website that their visitors will love. What’s the first step you’d take?

Getting Started

Personas are often shown as one-page visuals that you can print and keep nearby when designing. You can find and download helpful persona templates online or use tools like this User Persona Maker.

Remember, personas are different from user groups, market categories, typical ideas, or roles.

If you’re thinking of a usual university student or a typical professor when considering the users of Persona Cafe, change that thought quickly.

The main thing to understand is how they connect with your product, the aim they have, or the issue they’re trying to fix using your product. For instance, a security officer at the campus might have the same reasons to visit the Persona Cafe as a hardworking student – they both might share the same interests and aims.

About Andrew, Virginia, Jeanne

First, let’s discuss some basic details about our personas like age, job, and so on. Remember, these details aren’t the main focus for the design. They help us see them as real people. What’s truly important are the stories we’ll attach to our personas later.

Names, Ages, and Places

To avoid biases or stereotypes, we’ll use a fake name tool and a free photo website to create our personas.

I set the tool to make American names since our fictional campus is in the U.S. I chose ages between 19 to 46 and an even split for gender. This reflects a usual mix for a university cafe (students and staff).

The tool gave us these three names:

• 26-year-old Andrew from Oakland, CA
• 22-year-old Virginia from Stanley, NY
• 45-year-old Jeanne from Chester, SC

Based on their ages, we think Andrew is a graduate student, Virginia is an undergraduate, and Jeanne is a professor.

Pictures

I used the Pixabay photo site for our personas’ pictures. For Andrew and Virginia, I searched for “university student”. I chose the first male picture for Andrew and the first female picture for Virginia. For Jeanne, I looked up “teacher” and selected the first middle-aged woman picture.

So, we have random names, ages, places, and photos for our personas. This way, we’re sure we’re not using any of our own preconceived ideas.

The Stories

With the basic details of our example users ready, let’s set them aside for a bit.

Let’s think about how a usual user of a university cafe feels about the place. What do they need? What bothers them? What are their aims or problems? The best way to know is to ask real users. You can talk to your client or even ask friends or family what they think when they visit a coffee shop.

Using Real Feedback

The internet also offers insights since many people share their experiences online. For this example, I checked the Yelp review site. I selected Stanford, California as the location, representing a usual U.S. university setting. Then, I looked at Coffee & Tea Shop reviews to get a sense of what regular users of a university cafe feel.

You can see the reviews I found on this link. Or, you can search other locations if you prefer. Here are some quotes from the reviews to give an idea of what the future customers of our Persona Cafe might think.

Reasons They Visit

“I prefer this place over the one on university since it’s more affordable.”

“The Venezuelan lattes here give a strong boost of caffeine, great for studying at the green library.”

“It’s great having this spot right between the Education buildings and two libraries…”

“My boyfriend and I had our first date here. It holds a special memory for me.”

“I love its location and the food portions they serve.”

Things That Bother Them

“During lunch, they misplaced my order. I waited 45 minutes for a takeout.”

“I think I had the worst iced double espresso here.”

“The dusty atmosphere and the noise seemed to have affected the care in making the lattes…”

“My friend is allergic to certain nuts. The crepe didn’t mention any nuts in its ingredients.”

Their Aims

“I visit this outdoor cafe often because it’s close to most of my classes.”

“I like their strong coffee. It’s the right size for a quick energy boost.”

“They offer online orders, which is convenient. Plus, their prices are fair.”

“Being vegan, I order the same items always. Love their hummus plate, vegetarian panini, and hummus veggie wrap. Their drinks are great too.”

Linking Personas to Their Stories

After understanding the common needs, aims, and problems of general customers, let’s get back to our personas. Remember, they don’t show a certain group but rather a specific way they feel about the product.

Andrew, 26 – Graduate Student

About Andrew:

Andrew is a dedicated PhD student seeking a quiet spot for focused study and reading. Given his extensive time on campus and love for coffee, Persona Cafe is a great fit for him. He values quick, efficient service, the ability to order from his phone, and prefers minimal interruptions from staff.

What He Wants:

• Top-quality, robust coffee
• A calm setting for study
• A convenient spot near the campus

What Bothers Him:

• Long waits for his coffee order
• Frequent disruptions from staff when he’s engrossed in his work
• Concerns about the coffee’s strength affecting his focus

His Aims:

• He wants to know about the kind of coffee served at Persona Cafe to judge its quality
• Quick access to the menu and any daily specials
• The ability to order using his smartphone

Virginia, 22 – Undergraduate Student

About Virginia:

Virginia is budget-conscious and doesn’t often eat out. However, she loves spending time with friends and looks for places where they can meet up. Their gatherings aren’t really about studying; it’s more about relaxation and enjoyment. While she can’t spend much on food, she enjoys a diverse menu and gets bored with repetitive meals.

What She Wants:

• Affordable prices and generous portions so she can order just once
• A wide variety of food and drink options, including some unique choices
• A regular spot to hang out with friends

What Bothers Her:

• Spending her money on bland, unappetizing food
• Unfriendly staff that might dampen their fun
• Prices that could be too high for her and her friends

Her Aims:

• Quick access to the menu prices
• Loyalty rewards like discounts or coupons
• Detailed descriptions of food and drinks to help her choose the best options

Jeanne, 45 – Professor

About Jeanne:

Jeanne’s cafe visits are less frequent than Andrew’s or Virginia’s. She is health-conscious, preferring to stick to her diet and limit eating out. Rather than spending breaks at a cafe, she prefers to take walks. When she does visit a cafe, it’s usually due to an invitation from colleagues. A neat environment is crucial for her. She doesn’t drink coffee and is particular about having only healthy meals.

What She Wants:

• A welcoming setting that’s good for professional discussions
• Diet-friendly food and drink options
• An opportunity to interact with her students at the cafe

What Bothers Her:

• Concerns about an untidy setting, which can be a distraction
• Unhealthy food and drink options disrupting her diet
• Long waiting times during busy hours

Her Aims:

• She wants a cafe near her university, making it easier for both professional discussions and student meetings
• Detailed ingredient lists for menu items, so she can make informed choices
• An avenue to provide feedback on service and quality after her visit, since it’s a rare treat for her

Wrapping Up

And there we have it! We’ve now completed profiles for our three personas, who showcase the desires, aims, feelings, and challenges of Persona Cafe’s potential visitors. If you’re a fan of visual aids, you can search for or craft a stylish persona template and populate it with the details. Here are three excellent examples for you to consider.

It’s crucial to understand that personas are rooted in interaction design. Before diving into the visuals, adept designers should first grasp how future users will engage with their creation.

The post Interaction Design: How to Create Simple User Profiles appeared first on Hongkiat.

If you improve your front-end workflow with paying attention to semantics, you can create a higher quality content that attracts more visitors. Semantics is the study of meaning, in a broader context it’s a branch of logic and linguistics.

In the world of web development we talk about semantic content when computers understand the structure of a document, and the roles of the elements inside of it. If we want to create proper semantics, we need to deeply understand the structure of our content and the capabilities of front-end technologies.

So what are the tangible benefits? Proper semantics means a more searchable content that leads to a better search engine ranking. We also increase accessibility, as assistive technologies such as screen readers can better interpret the meaning of our content.

There are many different front-end development techniques that enable developers to achieve a semantic page structure. This post will provide you with a brief intro into semantic HTML tags and the concept of the document outline.

Semantic and Non-Semantic HTML Tags

The concept of semantics is not as new as it seems, it existed well before the era of HTML5. The term semantic web was coined as early as in 2001 by Sir Tim Berners-Lee. Under “semantic web” he meant a web of data that can be processed by machines.

This primarily means that separate HTML elements need to have their distinguishable structural roles. According to the definition of W3C “a semantic element clearly describes its meaning to both the browser and the developer”.

Semantic Elements Before HTML5

Semantic elements existed before HTML5 too, just in most cases developers weren’t aware that some of the tags they used were actually semantic. Just think about the <form></form> or the <img> tags.

Their roles are clear for both us and the user agent: <form> simply contains a form, just like <img> contains an image. Nobody will ever place a table or a headline inside and <img> tag (or at least let’s hope so).

The <table></table> element, and its related tags such as table rows, table cells, etc. are also semantic tags that existed before HTML5, however due to the table-based layout that was heavily used for many years, most developers didn’t utilized them in the semantic way. This led to a web that sacrificed logical structure for layout.

Ordered and unordered lists, paragraphs, h1-h6 heading tags are all semantic elements that preceded HTML5.

Non-Semantic Elements

Non-semantic elements don’t have any special meaning, the hierchical relationships between them are merely illusory. The most widely used examples of non-semantic HTML tags are the <div></div> and the <span></span> tags.

If your site ever caught the horrible disease of divitis, you know what I’m talking about. Yep. Divs are not necessarily wrong, but divitis needs to be fought if we want to write maintainable, modular, and meaningful HTML code.

Smashing Magazine beautifully explains what the real problem is with the excessive and unreasonable use of the <div> tag. The gist is that if we include a div inside a div, it appears as though the outer div would be the parent element of the inner one, while in reality this is not the case.

There’s no relationship between the two, just like in case of the <span> tag that works the same way, just on the inline level.

Don’t panic if you still feel attached to <div>-s and <span>-s though, as you don’t have to completely ditch them. They are still the best choice for grouping content solely for styling purposes and in other last resort cases.

Text Semantics in HTML5

HTML5 introduced many new semantic elements that make easy content organization possible. They don’t only help you organize content on the level of the whole document (see in details in the next section), but also inside text blocks, as inline tags.

Probably the most popular text-level semantic tags are <strong></strong> and <em></em>, but they also existed before HTML5. Among the new inline semantic elements we can find for example the <time></time>, tag for human-readable date-times, and <mark></mark> for highlighted text.

See this list for all text-level semantic elements that are currently in use.

Document Outline in HTML5

The document outline is the structure of an HTML document. It shows how elements are related to each other. The document outline has been generated solely by mapping elements, such as headings, table titles, form titles, and others in the earlier versions of HTML such as HTML4.01 and XHTML.

In HTML5 the outlining algorithm has been enhanced by new sectioning elements, namely:

• <section></section> for sections grouped around a specific theme
• <article></article> for complete or self-contained compositions such as a blog post or a widget
• <nav></nav> for navigation blocks
• <aside></aside> for complementary content such as sidebars.

There’s a fifth sectioning element in HTML5, but it’s not new, it’s the <body></body> tag. The <header></header> and <footer></footer> tags are also new, but they don’t generate new sections in a document, they divide up the content inside sections. This means that every sectioning element (body, article, section, nav and aside) can have its own header and footer.

Tips For Semantically Structured Content

If we want to create a well-structured document outline we need to pay attention to the following rules:

1. The outermost sectioning element is always the <body></body> tag.

2. Sections in HTML5 can be nested.

3. Each section has its own heading hierarchy. Each of them (even the innermost nested section) can have an h1 tag.

4. While the document outline is primarily defined by the 5 sectioning elements, it also needs proper headings for each section.

5. It’s always the first heading element (let it be h1 or a lower rank heading tag) that defines the heading of the given section. The following heading tags inside the same section need to be relative to this. (If the first heading is an h4 inside a sectioning element, don’t put an h4 after that.)

6. The sections defined by the <nav></nav>, and the <aside></aside> tags don’t belong to the main outline of the HTML document, they are usually not rendered initially by assistive technologies.

7. Each section (body, section, article, aside, nav) can have their own <header></header> and <footer></footer> tags, that defines the header (such as logo, author’s name, dates, meta info, etc.) and the footer (copyright, notes, links, etc.) of that section.

Example: A Semantic Outline

Let’s see an example for a semantic document outline to see clearer how it works. Our example code will result in the following document structure:

And here is the code with proper semantic sectioning:

<body>

	<header>
		<h1>Welcome On Our Website!</h1>
		<p>Here is our logo and slogan.</p>
	</header>
	
	<nav>
		<header>
			<h2>Choose Your Interest</h2>
		</header>
		<ul>
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
		</ul>
	</nav>
	
	<article>
		<header>
			<h1>Title of Article</h1>
			<h2>Subtitle of Article</h2>
		</header>
		
		<section>
			<h4>First Logical Part (e.g. "Theory")</h4>
			<p>Paragraph 1 in first section</p>
			
			<h5>Some Other Subheading in First Section</h5>
			<p>Paragraph 2 in first section</p>
		</section>
		
		<section>
			<h4>Second Logical Part (e.g. "Practice")</h4>
			<p>Paragraph 1 in second section</p>
			<p>Paragraph 2 in second section</p>
		</section>
	
		<footer>
			<h5>Author Bio</h5>
			<p>Paragraph in Article's Footer</p>
		</footer>
	
	</article>
	
	<aside>
		
		<h2>Get To Know Us Better</h2>
		
		<section>
			<h4>Popular Posts</h4>
			<ul>...</ul>
		</section>
		
		<section>
			<h4>Partners</h4>
			<ul>...</ul>
		</section>
		
		<section>
			<h4>Testimonials</h4>
			<ul>...</ul>
		</section>
	
	</aside>
	
	<footer>
		<ul>
			<li>Copyright</li>
			<li>Social Media Links</li>
		</ul>
	</footer>

</body>

If you take a look at the code snippet above, you’ll see that headers and footers are optional, we can freely choose if we want to use them or not, but it’s strongly recommended to always include a heading for each section, otherwise the section will be “Untitled” in the document outline.

Luckily there are many great tools all over the internet that allow us to check the document outline, this time we will use the Outliner tool of html5.org.

If we insert our code snippet into the form provided by the outliner, and click the “Outline this!” button, we will see the following result:

This is the document outline of our sample code, this is how search engines see it, and screen readers read it to their visually impaired users. It’s semantic, well-structured, and there’s no nasty “Untitled” sections in it.

If you want to look how an Untitled section looks like in the Outliner just delete some of the heading tags in the example code.

Other Aspects of Web Semantics

Semantic HTML tags and document outlines are only a small part of web semantics. The content of a web page can be made even more meaningful with the help of the WAI-ARIA accessibility protocol, and structured data that can be used together with the RDFa protocol, microdata, or the JSON-LD markup.

The post A Look Into Proper HTML5 Semantics appeared first on Hongkiat.

In our interconnected, globalized world, there’s a more significant need than ever for the kind of human connection and understanding that storytelling can convey.

New technologies such as the big data revolution, data visualization, and data analytics tools allow us to raise the quality of our stories by backing them up with relevant data.

Probably the most popular form of data storytelling is infographics, but more and more websites use data stories and visual data to convey its message more effectively and engage their audiences on a deeper level.

In this post, we will take a look at how data storytelling works in practice and how it can help you to make your writing more persuasive and authentic.

How Data Storytelling can level-up your writing

Data need stories, and stories need data. Data without stories are dull, bare, and it’s hard to make sense of them. Stories without data are less trustworthy and might be seen as if they were just arbitrary made up.

If we use data to back up our stories, we can prevent presumptions of being inaccurate or that we manipulate our data. Well-chosen data can serve as proof.

Data storytelling or data journalism is a new form of written communication in which the author analyzes a large data set and filters out the relevant part.

In other words, data storytellers transform big data into small data to find the accurate and digestible data set that they can use to illustrate their story the best.

In fact, data storytelling is such a big thing nowadays that this summer Google launched a new product under the name of Google News Lab to support it.

Google News Lab explains quite accurately how data-driven storytelling can level up the quality of your writing:

“New platforms and technologies have opened up the playing field for reporting, and journalists and entrepreneurs are developing more dynamic, engaging, and powerful ways to tell stories than ever before”.

Of course, data storytelling is not only restricted to journalists, but everyone who needs to convey a message, such as copywriters, designers, marketers, and bloggers.

How to find relevant data

We are lucky as these days there are many resources out there that weren’t available previously for the public.

Just think about open data, open access publishing, or MOOCs (Massive Open Online Course) that ship high-quality and accessible knowledge to all parts of the world. As the world is full of information, finding the relevant data is more and more a “needle in a haystack” kind of problem.

The first task of data storytelling is to find the needle you need (the small dataset) in a vast haystack of data. You need a needle that matches the thread (the narrative) of the story so you can use them together to sew a valid and robust piece (the data story) that you or your client can happily wear.

First of all, the data you find need to be trustworthy. The internet is full of misinformation, so you have to be cautious. Sometimes you can find the right information and useful hints in blog posts and forums, but these sources are better double-checked and backed up with other alternate sources.

The more prominent and more reputable a data source is, the better. University web sites, open access journals, national statistics offices such as the British Office for National Statistics, big reputable organizations such as the American Federal Reserve, or international organizations such as the UN usually serve information and a knowledge base that is reliable and trusted by the vast majority of people.

Google News Lab has several instructional videos about how to use Google’s different tools to find the relevant data you need to be a reliable and exciting data storyteller.

Here we mention three courses that we think are the most useful, but you can find information about many other Google Tools and Courses of Google News Lab.

1. Advanced Search

Google’s Advanced Search feature enables you to research with precision. If you click on the little gear icon on Google’s home page, you can select the “Advanced Search” option that takes you to the Advanced Search screen where you can fine-tune your search query.

You can search for the exact phrase, omit certain words, narrow your search based on language, region, domain, last update and file type, and there are many other options that can lead you to the most accurate dataset.

2. Public Data Explorer

Google’s Public Data Explorer is a handy data research and data visualization tool. It aggregates datasets from trusted sources such as the World Bank or the Eurostat, and lets you monitor change over time, and compare metrics based on region, industry, country, gender, and many other variables.

You can choose from many data visualization options such as line charts, bar charts, map charts, and bubble charts. You can even save the datasets you created in your Google Profile, so that you can return to them later. You can reach Public Data Explorer here.

3. Google Trends

Google Trends lets you explore different topics, and under its "Trending Stories" section, you can see which queries are the most searched on Google at that time. You can use this handy tool to see how the interest for a specific term has changed over time, and you can compare the popularity of different names, too.

You can also find the geographical regions where the given search term was the most popular, and Google Trends even offers the option to take a look at related searches. Google Trends has many cool use cases, for example, The Washington Post used it to produce a Daily Misery Index by analyzing depression-related search terms throughout the year.

How to find the right tools

After you have found the appropriate data, you need to visualize them. Public Data Explorer and Google Trends visualize data on the go, so if you use them, you don’t have to worry about how to present them to your visitors.

Google Maps also enables you to visualize geolocation-based data quickly. We have a great tutorial here on hongkiat.com about how to customize Google Maps to create interactive and information-rich maps that you can embed into your website.

Google has another cool geo-based data visualization tool called Google Earth Pro that was made free by Google. Google Earth Pro is not an online tool; you have to download it to your computer. The software provides you with a 3D interactive globe with sophisticated data visualization, analysis, and drawing tools.

The post How to Improve Writing Quality with Data Storytelling appeared first on Hongkiat.