Are you a visual learner? CodePen.io is a great resource for frontend developers to build & show-off code. I use it regularly when writing posts, creating demos and prototyping apps. It’s a great resource for any frontender no matter your experience level. From building responsive iframes to styling file inputs, here’s a collection of my posts dedicated to the hands-on — my CodePen demos!
Know of other CodePen demos or use a different online code editor? I love learning from other creative frontend developers, collaborating and sharing ideas. Or maybe you’re a fellow blogger with a creative idea for a post using a demo from CodePen? Shoot me a line, I’d love to hear from you!
Sketch may be the new go-to for web design, but there’s still a lot of dino-designers out there using Photoshop. This post is for those devs who need to convert letter tracking values to Photoshop letter spacing in CSS.
Using Photoshop for your web designs? You’re probably familiar with the term Letter Tracking. Letter Tracking in Photoshop is the term used for adjusting the space between letters in text. On the web, this is called letter-spacing. The problem is Photoshop’s letter tracking doesn’t convert 1:1 to letter spacing in CSS. In this post we’ll go over how to convert Photoshop letter spacing to CSS.
Google ‘styling file inputs’ and you’ll find dozens of techniques on how to theme file inputs. The better, most optimized, semantic and accessible way to style <input type=”file”> is just with a little CSS and <label>.
I’ve spent countless hours styling file inputs using a number of different techniques out there. End result is always the same — frustration. A common (IMO worst) technique to style file inputs is faking buttons with extra, non-semantic HTML, CSS and JS. Dirty, dirty, dirty, not to mention the drawbacks for usability and touch. Don’t fret! There is a better way.
Styling clean, semantic and accessible upload buttons requires two things: CSS & <label>. I’ll go over the technique and show how a little extra JS (optional) can enhance the UX. The input file CSS possibilities are limitless once you understand how this technique works!
The HTML5 Geolocation API is a powerful tool that allows developers to retrieve a user’s location information with a high degree of accuracy. Get and keep track of your users — with their consent of course.
“HTML5 Geolocation API Guide — it’s easy!” was originally published on the 23rd of January 2014, last updated August 29, 2018 to reflect emerging trends.
Everyone of us occupies a position on Earth — duh! This position is specified by a geographic coordinate system of latitude, longitude and altitude. The HTML5 Geolocation API provides a way to gain access to your user’s information — with their consent of course! In this post, I’ll go over how to use this API so you can build some truly powerful and creative apps. Continue reading “HTML5 Geolocation API Guide — it’s easy!”