Search
Git Branch Autocompletion
4.2.2020
Naming git branches is something most of us have down to a science. My branch naming pattern is usually {issue number}-short-feature-description, though many developers prefer to lead with the description and end with the issue. Regardless of the pattern you use, having a feature like autocomplete...
Use and Reuse Everything in SVG… Even Animations!
28.1.2020
If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with <use> element, CSS Variables and...
Flexible Captioned Slanted Images
25.1.2020
The end result of Eric Meyer's tutorial on creating this row of slanted images is pretty classy. But it's more about the journey than the destination (there isn't even really an isolated demo for it). Eric does an amazing job at talking it through like a thought process.
We did that recently, only...
Min and Max Width/Height in CSS
24.1.2020
Here's a nice deep dive into min-width / min-height / max-width / max-height from Ahmad Shadeed. I like how Ahmad applies the properties to real-world design situations in addition to explaining how it works. In the very first demo, for example, he shows a button where min-width is used as a method...
IP Geolocation and Threat Intelligence API: ipdata (Sponsored)
20.1.2020
An IP address is a simple, numeric piece of information that gets passed to a server, but that IP address can provide a wealth of information with ipdata. With ipdata you can learn user location, language, currency, and much more! Quick Hits ipdata is an IP Geolocation and Threat Intelligence API....
Animate Text on Scroll
13.1.2020
We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.
That demo is here:
See the Pen
Selfie Crawl by Chris Coyier (@chriscoyier)
...
Fantastic Flight API with aviationstack (Sponsored)
9.1.2020
I didn’t fly until I was 25 years of age — I was hopeless in knowing I had to be there early, the process of security, and the whole gate structure. Now that I’ve flown dozens of times for Mozilla, I feel much more comfortable with the process of flying, but feel less comfortable...
Awesome Demos Roundup #12
8.1.2020
A hand-picked collection of fantastic web experiments for your inspiration.
Awesome Demos Roundup #12 was written by Mary Lou and published on Codrops
IBM and Fair Trade Initiative Demo Blockchain-Based Coffee Tracking App
6.1.2020
IBM and Farmer Connect debuted a blockchain app that allows consumers to monitor the coffee supply chain
Duplicated Argument Names
6.1.2020
Oftentimes we override or monkey patch functions and, in many cases, there are arguments we don’t care too much about. A common practice for those arguments is using _ for argument names — it’s a generally accepted and known practice for “this isn’t important”....
Validate CSP from Command Line
2.1.2020
The content security policy spec has been an amazing front-end security tool to help prevent XSS and other types of attacks. I’d go as far to say that every site should implement as specific CSP as possible. If you aren’t familiar with CSPs, here’s a quick example:...
A CSS Tribute to SVG
31.12.2019
This demo from Jérémie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working.
The big idea is that the entire demo is one <rect> element. That's it. It is duplicated with <use> elements when needed,...
Goals For 2020
30.12.2019
Every new year brings about a sense of optimism that the next 365 can bring about big, positive changes in different phases of life. That’s no exception for me and this blog. I did pretty well with last year’s goals, so I thought I’d push myself again with a new set of goals. Be...
JavaScript ~~
9.12.2019
JavaScript is loaded with tiny syntax tricks to accomplish useful effects. For example, explore any codebase to see !! being used to convert a value to a boolean value. Have you seen ~~ before? Let’s have a look at what it does! We can employ ~~ to trigger a Math.floor operation with those...
2019 Year in Review
5.12.2019
The beginning of every year starts out with all of us setting ambitious goals — goals being personal and professional. Many of us rarely complete half of those goals, most abandoning them by the end of the year. In January of this year I published my list of goals for the year. Let’s...
Awesome Demos Roundup #11
4.12.2019
A hand-picked collection of fantastic web experiments from the past weeks.
Awesome Demos Roundup #11 was written by Mary Lou and published on Codrops
Mirror Android Device to Computer
26.11.2019
As I continue my adventure into Android development, pair programming has been a huge help in learning this new platform. When it’s time to build and run the app, relying on the emulator is a fools’ game — the emulator is slow and it’s hard to reliably simulate gestures....
Image Lazy Loading
25.11.2019
Lazy loading images is a practice that’s been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in every JavaScript...
Getting Started with GraphQL
20.11.2019
GraphQL was developed by Facebook in 2012 to power up its mobile apps. Since open-sourcing GraphQL specification in 2015, it gained a lot of popularity and is now used by many development teams, including giants like GitHub, Twitter or Airbnb. Why so? And what exactly is a GraphQL? Let's take...
Real-Time Google Search Results API with serpstack (Sponsored)
19.11.2019
In my early web days, I was interested in scraping and collecting data based on the results of Google searches. Scraping Google was easier in those days but now Google search results are so dynamic that you can’t rely on getting the same HTML or data structure back. Add in CAPTCHAs, rate...