Search
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...
15 Examples of SVG Animations for Web Designers
26.12.2019
SVG (Scalable Vector Graphics) has a number of advantages compared to other image formats used on the web. First and foremost, SVGs are scalable therefore can adapt to any...
The post 15 Examples of SVG Animations for Web Designers appeared first on Onextrapixel
css.gg
18.12.2019
I'm not sure what to call these icons from Astrit Malsija. The title is "500+ CSS Icons, Customizable, Retina Ready & API" and the URL is "css.gg" but they aren't really named anything.
Anyway, their shtick is:
The 🌎's first icon library designed by code.
The idea is that they don't...
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...
Dark Mode Favicons
4.12.2019
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports...
Masking GIFs with other GIFs
3.12.2019
The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:
See the Pen
Masking gifs with other gifs......
Motion Paths – Past, Present and Future
3.12.2019
The ability to animate along a motion path is a really useful thing to have in your SVG animation toolkit. Let's explore a few ways to achieve this, including the upcoming CSS motion path module and the newly released GSAP3.
Motion Paths – Past, Present and Future was written by Cassie Evans...
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...
The Amazingly Useful Tools from Yoksel
15.11.2019
I find myself web searching for some tool by Yoksel at least every month. I figured I'd list out some of my favorites here in case you aren't aware of them.
Need to duo-tone an image? SVG filters can do that. Lentie Ward wrote about it for us, and Yoksel has a tool to create the filters...
The New Features of GSAP 3
14.11.2019
Learn about all the exciting new features of GSAP 3 in this easy-to-follow overview.
The New Features of GSAP 3 was written by Christina Gorton and published on Codrops
When to Use SVG vs. When to Use Canvas
12.11.2019
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.
A little flat-color icon? That's...
Hello Fenix!
11.11.2019
Over seven years ago I made the massive career leap to Mozilla. Two years ago I realized a dream of joining the Firefox DevTools team — it’s been a rewarding adventure helping to improve the Firefox DevTools Debugger and other super helpful tools. I’m frightened, excited,...
JavaScript waitForTime
6.11.2019
I write a lot of tests for new features within Firefox DevTools. We have hundreds of “mochitests” which open the browser and perform synthetic actions like clicking, typing, and other user actions. I’ve previously written about waitForever which essentially halts following actions...
Making a Chart? Try Using Mobx State Tree to Power the Data
5.11.2019
Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options.
But we don’t necessary need a chart library to create charts. Take Mobx-state-tree (MST)...
Simple Scraping API with zenscrape (Sponsored)
5.11.2019
So many developers believe that scraping a URL’s content is easy — just a simple curl and you’re done, right? Nope. CAPTCHAs, rate limitations, origin-specific limitations — they make getting content off the web a nightmare. Luckily we now have services like zenscrape which...