Tag: HTML5

Recent & Worthwhile in Web Development

kyriakos

PHP

  • Remember Me – Safely Secure Long Term Authentication Strategies
    A detailed explanation on how to implement the Sign in ‘Remember Me’ functionality securely in PHP (the concepts are the same for every language). I must admit I never considered timing attacks for the authentication token until I read this.
  • Laravel 5.0 was released
    The 5th installment of one of the most popular PHP MVC and all-around frameworks was released. Wrote a summary of the changes in another post.
  • HHVM 3.5.0 Released
    The Facebook supported alternative PHP VM has a new version.
  • Cockpit
    A plug-n-play CMS for PHP sites. Targeted to developers, who built web apps and don’t want to re-invent the wheel every time for the content parts of their app. Uses SQLlite or MongoDB as data store.
  • Return Types Declarations approved for PHP7
    In PHP7 we’ll be able to declare the return type for functions and will be enforced causing a fatal error if a different type is returned.  Here’s an example of how it will look taken straight from the RFC:
    [pastacode lang=”php” message=”” highlight=”” provider=”manual”]

    function foo(): array {
  return [];
}

    [/pastacode]

JS /HTML / CSS

  • ReactJS for Stupid People
    A good introduction on what Facebook’s ReactJS is about and why you should use it.
  • Animated Bezier Curves
    Demonstration of how parametric Bezier curves are constructed. Uses D3, and the code is straight forward, just View Source.
  • Konva JS
    Object-oriented 2D HTML5 Canvas Framework. Event driven, layer support, drag and drop, shape nesting, animation and all the usual bells and whistles.
  • mProgress.js
    Material Design style animated progress bar. Uses CSS3, has no other library dependencies and has beyond the ordinary features such as indeterminate progress (7.7kb minified JS).
  • RubaXa Sortable
    Minimal & customizable Sortable with touch support and no dependencies.
  • fieldVal
    Programmatic Javascript Field Validation library (runs both on browser and server). Includes an optional UI library for presenting validation errors in forms.
  • TauCharts
    Javascript charting library which aims to be flexible rather than offering pre-packaged chart setups.

Google Web Designer – my take

kyriakos

Google Web Designer

Yesterday Google released a new design tool going by the name ‘Google Web Designer’. I installed it and played around a bit. It seems like they got carried away with the title cause it certainly isn’t a web design tool in the sense of Dreamweaver, its more of an animated banner creation tool. Its output is an ‘HTML5’ document (sorry for the cliche) and uses both Canvas 2D and 3D elements to create banners in a user interface that reminds me of Adobe’s Flash (still have nightmares of that) and Adobe’s new animation tool Edge Animate. If you ignore this app’s bad title, its a pretty decent tool for making banners for AdSense or other purposes. The code produced by the tool is not the leanest but works on modern browsers, and even on mobile. To see the extend of how much overhead is included check out this gist on github; the author created a new document, drew a rectangle with a sold color and saved and that was the result. This means that if you are making a very simple banner, the CSS and Javascript overhead can be substantial (consider that each banner on a page will be running on its own IFrame); on the bright site it can do things without coding that you’d normally need flash for without losing mobile compatibility. Moreover it allows you to create responsive ads; a feature that Google’s own AdSense product now supports (after many years of publisher requests).

Even if it’s destined for ads, it doesn’t mean you can’t use it to put together a single page website, but lets hope that Google Web Designer won’t be the beginning of another ‘Flash’-like era where Canvas is used instead of the Flash container plugin leading to bloated, hard to maintain, and non-indexable websites all over again.

You can have a look of how it works here:

and download it for free here:

LaserVex – Very Challenging HTML5 Puzzle Game

kyriakos

LaserVex is a very challenging optics based game. Each level has one or more laser sources, a series of mirrors, a number of targets all on the same plane. The aim of the game is to hit all targets just by moving the mirrors around without moving the laser sources. It sounds and looks simple at first but after going through the first 4-5 levels you will start facing some real challenges. Its one of the hardest puzzle games I’ve played in a while.

It has a lot of potential and should be made available as a mobile app. The graphics are lacking a bit (its all lines basically on a canvas) and the controls need some work (moving a mirror requires yo to move both vertices) but the gameplay makes up for it.

If you don’t have time to waste please don’t try this game. You’ve been warned.

Check it out here.