JS – find currentClosetTo()

By | Tutourial & Tips

Scenario: For every minute that passes, we want to find the closest(current minute for example 2) to the closest step_num (e.g. steps of 3). So for this, if its 2 then its closer to 3. If its 4 then its still closer to 3. If its 5 then its not…

Read More

Geo IP Detection APIs

By | Resources

A list of Geo IP APIs that you can use for your project and applications. Bare in mind that some APIs doesn’t support HTTPS atm and so it causes it not to work if your domain is HTTPS. Have a look at this feed for a list of all the…

Read More

Developer Windows System Environment Setup

By | How to, Tutourial & Tips

When setting up your environment for development it is important to have all your tools and dependencies set up correctly. As a web¬†developer, I have the following packages installed on my computer environment. Node.js (download) NPM Git (download) Python (download) Gulp Below are the Program Files that I use for…

Read More

You don’t need jQuery for Selctors

By | How to, Tutourial & Tips

If you want to use the jQuery style to select elements you can add the below code to your project without loading the full jQuery Library. window.$ = function(selector) { var selectorType = ‘querySelectorAll’; if (selector.indexOf(‘#’) === 0) { selectorType = ‘getElementById’; selector = selector.substr(1, selector.length); } return document[selectorType](selector); };…

Read More

Cinemagraph: Motion in Stills

By | Journal

Cinemagraphs are still images in which a subtle and repeated movement of elements occurs, forming a video clip. They are then exported as an animated GIF or in other video formats, and can give the illusion that the viewer is watching an animation. Source: Cinemagraphs Steaming Tea and Biscuit Source:…

Read More

Semantic – UI

By | Resources

Design Beautiful Websites Quicker Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits…

Read More

Materialize CSS

By | Resources

A modern responsive front-end framework based on Material Design   Materialize simplifies life for developers and the users they serve. Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide…

Read More

YouTube – Responsive video aspect ratio and embedding options

By | Tutourial & Tips

Maintain iFrame video aspect ratio for responsiveness HTML <div class=”aspect-ratio”> <iframe src=”https://www.youtube.com/embed/NV3bPEjNeKU” frameborder=”0″ width=”550″ height=”275″ frameborder=”0″ allowfullscreen></iframe> </div> CSS /* This element defines the size the iframe will take. In this example we want to have a ratio of 25:14 */ .aspect-ratio { position: relative; width: 100%; height: 0; padding-bottom:…

Read More