WebDev

  • HTML5 Canvas: Drawing Made Simpler with Fabric.js

    Drawing with the HTML element Canvas doesn’t leave much to be desired. Complex shapes and animations are possible, the feature set is quite impressive. Yet we need to combine several methods when it comes to e.g. create a shape, rotate it and fill it with a color. The JavaScript library Fabric.js simplifies the possibilities Canvas has to offer and adds functionality to het work done faster. Animations and interactions are created and applied in next to no time.



    Read more 
  • HTML5: Native Dialogue Windows With the New Dialog Element

    New HTML5 elements and new JavaScript APIs allow us to create complex applications for the browser. Part of any modern application are one or more dialogue windows. These require users to confirm the execution of certain actions or simply issue a message. With the new „<dialog>“ element we can now markup these windows using pure HTML5.



    Read more 
  • HTML5 Brings Tables Back: Contemporary Grid Layouts with CSS Grids

    Back in the days where CSS was a rumour and content and design were not divided, building a website using tables was perfectly common. With the rise of the semantic web tables were redefined to be used only for their original purpose, structuring data, that was meant to be shown in the form of tables. Furthermore, CSS didn’t bring forward an easy way to structure layouts in rows and columns. Now, with the new CSS Grids rasterized layouts return and they resemble the way of table-based designs quite closely.



    Read more 
  • HTML5 Imports: Import HTML Files Into HTML Files

    The „link“ element is a blessing. It allows for easy embedding of stylesheets and JavaScripts needed in multiple documents. It didn’t allow the embedding of HTML files, though. To achieve that we were limited to the „iframes“ element or the JavaScript method „XMLHttpRequest()“. Thanks to the new HTML5 Imports, we can now use the „<link>“ element to load one HTML file into another.



    Read more 
  • HTML5 Clinic: Make Your Browser Talk via The Speech Synthesis API

    Navigation devices do it since forever. Now browsers are learning to do it, too. I’m talking about speech synthesis. HTML5′s new Speech Synthesis API allows your website to speak or more precise, to read out loud what is written there using a human voice. There are different voices for different languages, even several voices per language. Now all it takes is pressing a button and the browser will read your website contents to any visitor who demands it. A nice service for anyone and inevitable even for the visually impaired.



    Read more 
  • Is your Responsive Design Mobile Website Delivering Acceptable Load Times?

    Google wants your mobile pages to load under a second! Yes, that’s how fast the load time of your website must be, irrespective of the fact whether it is a dedicated mobile site, responsively designed website or it isn’t optimized for mobile at all. So one thing is certain – it’s not enough to have a website with responsive website design that renders effectively on desktops, as well as, the smartphones and tablets of your target users. You must make sure that the site is fast and loads on their mobile web browsers in the blink of an eye. Google considers page load speed as an ideal marker for judging the user experience of a site. If your site has an acceptable load time, it is delivering the ideal user experience, which is taken into consideration when Google ranks your site.



    Read more 
  • Coming to a Screen Near You: CSS3 Animations and The New JavaScript Method Animate()

    With CSS3 animations in HTML documents have become fairly easy to achieve. Using the "@keyframes" rule various properties such as position and size of an HTML element get defined. Then the property "animation" cares for getting the keyframes up and running according to their definitions. Without the need for JavaScript and plug-ins we are able to create even complex animations, that run most flawlessly in all modern browsers. Problems occur as soon as you need to get JavaScript to enter the game of creating CSS3 animations. We all know, JavaScript is more often than not unavoidable as we need to calculate individual values or an animation process as a whole.



    Read more 
  • WebComponents.org: All About The Future of The Web

    Web Components were the craze for a while. As with all standardization projects, as time passes, the effect wears off. In 2012 standardization of the web components specs felt near. Today it’s still a work in progress. There are a growing number of promising approaches and technical solutions, though. Instead of forcing you to roam the depths and widths of the web to collect vital information on web components, the community itself, supported by staff from Google and Mozilla, decided to create a central platform, covering all aspects of the future technology. Now that effort is online. It answers to the name WebComponents.org.



    Read more 
  • Adobe’s Snap.svg: Animations With HTML 5, Without Flash

    Flash has long been the standard for vector-based web animations. Some say for too long. The rise of mobile clients led to an acceleration of web standards such as HTML5. Thanks to the SVG formats, which is widely supported by modern browsers, we are able to embed vector-based graphics into our web projects without the need for a plug-in. Adobe’s JavaScript library Snap.svg even allows for the creation of vector-based animations with SVG.



    Read more 
  • Responsive Images: Still Waiting for a Standard? Try Rwd.Images.Js Instead!

    Responsive Images is a topic far from resolved. Will it be the picture element as proposed by the W3C or will it be the srcset attribute as proposed by WHATWG in the end? No matter what time will bring, responsive images are a problem that needs to be solved today and not sometime in the future. No wonder that JavaScript is the remedy of choice. There are quite a few scripts targeting responsive imaging, quality varies though. A brand-new script by Matt Stow from Australia shows the potential to become the best available client-side interim solution…



    Read more 
search form
 
image description image description