Javascript - Front-end Developer

Google Maps Places API Nearby (Example)

By Coding, Javascript, Playground No Comments

Nearby App Example of Google Maps Places API to find different places like ATM, Restaurant, Airport etc nearby you. (with full source-code)

Preview on CodePen.io

Etsy API Search with jQuery (Example)

By Coding, Playground No Comments

Playing around t with Etsy API. Here’s a working example of how to make a simple search request to the Etsy API with jQuery.

Preview and Edit on Codepen.io

Learning HTML, CSS, and Javascript from the Ground Up

By Coding No Comments

Are you looking for a basic understanding of how UIs are created on the web or who wants to brush up outdated UI development knowledge? Or maybe you’d like to learn more about the medium you’re designing for and gain basic tools for prototyping designs? Do you want a better understanding of the web and how Google makes the pages that are its face to the world? If so, “HTML, CSS, and JavaScript from the Ground Up” is for you.

Click here to download the css, html and javascript lesson exercises and supporting files



HTML Presentation

HTML Exercise


CSS Presentation

CSS Walkthrough

CSS Exercise


JavaScript Presentation

JavaScript Exercise

HTML5 and CSS3 feature-detection with Modernizr library

By Coding, Graphics No Comments

Ten years ago, only the most cutting-edge web designers used CSS for layouts and styling. Browser support for CSS layouts was slim and buggy, so these people advocated for web standards adherence, while creating hacks that made CSS layouts work in all browsers. One hack that became widely used was browser sniffing: Detecting which browser and version the user had by looking at the navigator.userAgent property in JavaScript. Browser sniffing allowed for quick and easy code forking, allowing developers to target different browsers with different instructions.

Read more

Modernizr: start implementing CSS 3 and HTML5 features now

By Mobile No Comments

So, you’re a front-end developer, and you want to start taking advantage of new features in CSS 3 and HTML5. That’s great, but you know that most of your users aren’t running browsers that support these new standards. You could just wait for browsers to get with the times, or you could check out Modernizr.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate TRUE and if not, it will be FALSE.

Lastly, Modernizr also adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as , and without having to worry about them not working in Internet Explorer.

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities