Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial
HTML5 has brought some exciting new advantages to the HTML coding world. Canvas allows you to render graphics powered by Javascript. So throw away that flash code and dive into Canvas. Here you will find the best tutorials and resources to learn Canvas and other HTML5 aspects.

  • 7 Tips for Making Your Website ADA Accessible
    Making Your Website ADA Accessible


    If CDC stats are anything to go by, 26% of American adults live with a disability of some kind. This translates to 61 million people. It gets even more shocking; for every four people in the United States, one is disabled. On the global scale, 15% of the population or one billion people on the planet have some kind of disability according to World Bank.

    Do these numbers have to do with anything? A lot, actually. If you have a website, it means you have to find ways of making it accessible to all. The Americans with Disability Act (ADA) is dead serious about making sure that people with disabilities can access websites with ease.  If you want to pass the website accessibility audit, you have no option than to make your site ADA compliant. Here are 7 tips for success.


      Add Descriptions For Images

    Adding alt text on all images on your website is a lot of work but it is necessary. It makes the site much more understandable for the visually impaired. A screen reader can easily decipher the information you are trying to convey with the message.

    If you are using an informative image like an infographic, this tip is particularly very important.  The alt text should describe what the image is all about briefly. When a purblind individual visits your site, they should be able to read and understand the image from the alternative text. Make it clear, short, and sweet.


      Easy Navigation Is A Must

    An easy-to-navigate website does not only appeal to people with abilities but everyone else as well. When users visit your site, they should enjoy navigating through all the pages without too much hassle. You should not subject users to clicking tens of times to reach the inner depths of the site. Everything should be labelled and positioned well so that every part of the site can be located with ease. Consider using breadcrumbs on your page to make navigation easy.


      Keyboard Navigation

    Another great tip for making your website ADA compliant is making sure that keyboard navigation is possible. In the absence of a mouse, the PC can be operated with the keyboard only. This holds for the World Wide Web as well.

    Users who cannot use the mouse or those that cannot see the screen can utilize the keyboard to access the site. Ensure that the entire site can be navigated using the keyboard’s spacebar, escape key, enter key, tab key, and arrow keys.


      Use Contrast To Your Advantage

    If you are using images and text in one place, one way to make it readable is to use a contrasting background. A user with visual impairment will have a hard time reading text that appears in front of an image if it is not clear.

    A dark background to the text makes sure that the text is visible enough. For instance, if you have an image with a lot of greys and whites, you can use white text only if the background is a darker colour like black, red, or green.


      The Content Management System Matters

    When building a website, you will have countless options when it comes to choosing the content management system (CMS). WordPress and Drupal are the most popular but there are many others.  The right CMS is one that supports accessibility. It should have accessible themes, widgets, plugins, and more. Things like posting comments, editing a blog post, editing toolbars, accessing tables, and closed captioning should be accessible as well.


      Organize Your Content

    Visually challenged individuals rely on screen readers to help them surf the web. These readers vocalize the content following the order of the site’s HTML sequence. If your content doesn’t follow a logical order that begins with the H1 title down to H4 or further, it will sound confusing to your disabled customers.


      Make All Forms Accessible

    Forms can present a huge challenge to screen readers. To know if your forms are accessible or not, check to see if all labels are identifiable and if fields use visual cues to prompt a user to add information. The screen readers should also know if the details entered are valid or invalid. People living with disabilities deserve to enjoy the beauty of technology and the internet. What better way than to ensure that your site is ADA compliant? In the end, you will benefit as more potential customers will visit your site.

  • Simple Tricks to Help You Learn JavaScript Faster
    JavaScript is one language that is really easy to learn. It can be easily embedded in an HTML script and that makes coding easier. JavaScript also has simple codes to do complex jobs that is why it is preferred by many programmers to date to be the most convenient programming language. From simple web pages to the development of an entire website, this language can be performed easily.



    Moreover, if you are busy learning JavaScript, you can ask for programming homework help for your assignments. It’s student-friendly and much budgeted.



    java script



    So, now that you are already learning JavaScript, here are some tips to make your learning process quick.



    Get your basics right





    It is critical to grasp the basics of a programming language to get to the next level. So, spend time on getting the basics right and study them thoroughly. Even if you feel like you know them, practice them over and over.



    Because these basics will help you to get through the advanced level. The basics come to the rescue when the coding is big, and you have to find errors and correct them. If you get your basics right, you can learn JavaScript very easily and quickly.



    Write simple algorithms





    There is always a simple way to do complex things. Even if you have to write a long algorithm, try writing it in a simple way. The complex algorithms can be used when you are really through the entire course. Practice writing simple algorithms and then combining them to perform functions.



    This writing algorithm helps a lot when you are writing real codes for websites and applications. The more practice you give into writing algorithms the easier JavaScript programming will be. You can also write algorithms in plain text, in the beginning for practice purposes.



    Study theory





    It is a common misconception that learning language and coding has to be performed on the computer and you have to only learn the syntaxes and modules etc. But that is incorrect. You have to give attention to theory too.



    Read through the language evolvement and also the theory about the codes and the syntaxes. This in-depth knowledge will provide you with better insights into the course. Thus when you know the background of a particular thing, it is easier to put the thing in use.



    So, whenever there is time, do read about the JavaScript and its components.



    Practice a lot





    JavaScript requires understanding and practice. So if you have free time, utilize it in practicing and writing codes in the language. Experiment in your own ways and see the result. This small exercise will let you determine for yourself how much you know.



    Make this practice fun by assigning tasks to yourself and try achieving the goal. Coding is fun if you know how to be innovative. Replace functions to see if you get the same or different output. This will not only help you score good marks but will really help you when you step out into the coding world professionally.



    To conclude,





    Never refrain from asking for help when you are stuck somewhere. Plus, there is so much help available online that is absolutely free. Your group of friends can come together making the learning process easy and fun.



    JavaScript may be a slightly complicated language but once you know HTML and get the basics right, there is no stopping you. You will code like a pro and all your practice will pay off.



    JavaScript also has many tools and in-built functions to help you experiment with the language. Just study them all and you will become a proficient coder.

  • Canvas Shape and Color Effects
    This HTML5 canvas effect (originally featured on CodePen) features different effects that experiment with animations, shapes, and colors using canvas.

  • HTML5 Canvas Colorful Wave Effect
    This HTML5 Canvas tutorial shows you how to use canvas to create a cool, colorful wave-like effect. Originally posted on CodePen.

  • HTML5 Canvas Lighting, Color, and Texture Effects
    This canvas tutorial demonstrates how you can use canvas to play with color, texture, and lighting scenarios. Originally published on CodePen.

  • HTML5 Canvas Blooming Flowers Effect
    This tutorial from CodePen shows you how to use HTML5 to create a cool, 70s inspired effect with animated blooming flowers.

  • HTML5 Canvas Interactive Text Particles
    This HTML5 canvas tutorial demonstrates how to use particles to create the shape of text, and furthermore, how to make these particles interact, so that when your cursor moves over them, they explode and drift eventually out of the canvas frame. The particles are colorful and the interactive effect is very fun. This code snippet was originally posted on CodePen.

  • HTML5 Canvas Animated Tree Effect
    This HTML5 canvas tutorial originally published on CodePen demonstrates how to use canvas to create an animation of a growing tree, complete with branches and leaves. The code snippet features animated growing trees of all different shapes and sizes.

  • HTML5 Canvas Cloud Effect
    This canvas tutorial, originally posted on CodePen demonstrates how to use canvas to create a cloud effect. The code snippet shows you how to make big, fluffy static clouds against a bright blue sky.

  • HTML5 Canvas Breakout Game
    This tutorial shows you how to use HTML5 canvas to create a classic breakout or brickbreaker game (you know, the one where you use the ball to destroy the bricks at the top of the screen). This snippet originally appeared on CodePen.