Practical examples of HTML, CSS and JavaScript
Dealing with some famous libraries and utilities for small apps.
Tumblr’s images viewer, fetching data with vanilla JS, Simon Game, mouse dragging selections, adding samples with chart.js, maps with OpenLayers and Google Maps, presentations with impress.js and reveal.js, SPA navigation, introduction to Web SQL, swipe events with hammer.js, React basic example and much more.
Asynchronous fetch with first class functions and closures
Get and post with/without authorization needed.
View on JSFiddle here.
Simon Game
Have you ever played to Simon? That game where you have to memorize an incremental sequence of colors. Today I’m bring to you this famous game in ES6 using CSS transformations and animations. Open it in a new browser window or tab and stretch or shrink the area to see how the game is always visible, there are not scroll bar at all, pure responsiveness.
View on JSFiddle here.
Code once, run everywhere: Simon Game in Google Play
Select elements by dragging a box
You can select elements easily drawing a box with your mouse without using jQuery UI or third party plugins. Just handle 2 mouse events and check if at least one point of each element is within your box area.
Notice, that we are using a third event (as guidance) simply to draw the area.
View on JSFiddle here.
Get all days in a month that start in a certain day of the week
View on JSFiddle here.
Tumblr’s images viewer
It shows up one image every 5 seconds (one per post). You can go forward and backward using cursor arrows (click inside first to be in context).
View on JSFiddle here.
Add extra info to samples’ tooltip in Chart.js
Starting from our JSON with an array of samples, we are going to set the names of each sample in its tooltip, respectively.
View on JSFiddle here.
Create new samples between samples in Chart.js
We are going to use Chartjs to plot our samples (values over time) in a Line Chart but before we are going to double our samples. To create each new sample we take the date (x) of the next element and the value (y) of the previous one.
View on JSFiddle here.
Google Maps clusterization
We are going to fetch flights data to create our makers. Do not set the map in each marker, the clusterization will set it up instead.
View on JSFiddle here.
Navigation between pages/views
Using an array to keep track of where we came from. Try it, click the right top buttons to navigate and check the backward arrow, any time you go to the Main page the tracking will be reseted.
View on JSFiddle here.
Presentation with reveal.js
A framework for easily creating beautiful presentations using HTML.
View on JSFiddle here.
Presentation with impress.js
It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com
I personally prefer impress.js, it’s more powerful, updated and at least as easy as reveal.js
View on JSFiddle here.
Basic React example
Text in an HTML heading tag while typing in an input tag.
View on JSFiddle here.
Create a React apps with no build configuration.
Infinite tab bar with swipe/pan interactions
Create a tab bar with swipe/pan interactions like the one of Google search options that you can see when you are using your smart phone. You just need pan events and a little of CSS. I have used MDL for the basic mockup and Hammer for pan gesture. Try to drag the tabs.
View on JSFiddle here.
Basics of browser database with Web SQL
In the next example we are going to create a database (to save people parameters), insert and replace element, delete a table, and show data from database itself.
You can add new people data using the inputs and pressing “Save in database”, if the inputs have a red border it means you need to fill in before saving.
View on JSFiddle here.
Area and saturation of a circle using horizontal and vertical pan events
We are going to define the area using Hammer.js which helps us to add support for touch and muti-touch gestures. In this case you can pinch in and pinch out with your fingers to define the area (you can use an horizontal pan as well) and you can do a vertical pan movement with your finger to change the saturation of the circle.
If you are in a multi-touch device you can pinch and pan with your fingers, if not use horizontal and vertical pan with your mouse. The events will be catched inside and outside of the black box.
View on JSFiddle here.
Open Street Map full of symbols with Open Layers
In this example we are using OpenLayers (OL) instead of Google Maps API, and OpenStreetMap (OSM) as our map source instead of Google Maps, Bing Maps or any other. OL allows you to use any map source you want to.
It’s is quite easy to set up a functional map with OL. Most of the code here is just to set up different kinds of vector symbols (up to 10000). You can play and change the number of symbols, add/delete symbols and so on, to see the high-performance of OL.
View on JSFiddle here.
Draggable marker in Google Maps
There is a really good documentation about how to use Google Maps API, many of the Google examples are with an API Key but you don’t need it. Use the API Key if you want to monitor your apps or if you want to buy additional usage quota (less than 2.5000 loads per day it’s free).
So, for this basic example, we use Google Maps API without Key to add a draggable Marker in a map that is always centered on our marker position.
View on JSFiddle here.
Keep in touch
Did you find these approches helpful? What are yours? Leave a comment to let us know!
And if you want to know next time I publish something, you can also follow me on Medium.
T-Shirts
★ Now you can have some of my coolest T-Shirts for programmers, check it out!
