Page 5

Grainy Gradients | CSS-Tricks

Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid...

Love this grainy gradient effect. I never have figured out how to do it in Photoshop but maybe CSS and SVGs are more my speed.

React Inner Image Zoom Version 3.0.0

React Inner Image Zoom version 3.0.0 went out earlier this week with a handful of bug fixes, test and build improvements, and one major change.

What’s the big thing to look out for? By popular demand, the imgAttributes prop was added to pass down (almost) any valid React img attributes in a single object instead of as individual props. That means scrSet, sizes, alt, and title are gone but in exchange you get all the data attributes and event handlers you could want. I haven’t submitted updated type definitions to DefinitelyTyped yet but I’ll try to get that done in the next few days.

This release also included a handy new Changelog so I would be remiss not include the official record here:

Changed

  • Replaced srcSet, sizes, alt, and title props with imgAttributes to set the original image’s attributes.
  • Show close button when moveType is set to “drag” on all breakpoints.
  • Switched from setTimeout to onTransitionEnd to check that zoomed image has finished fading out.

Added

  • This handy CHANGELOG.

Fixed

  • Added stopPropagation on touchmove to prevent events below fullscreen modal.

If you run into any bugs, please let me know in the GitHub issues.

A little late but I am going to recommend a font every month this year. 

I like the intentional, handdrawn imperfections in Markisa by Jetsmax Studio. It’s messy but in a good way. The font is free for personal use only but that free version comes with an extra outline variation and all possible characters.

Download at dafont or buy at Creative Fabrica.

All the Fonts I’ve Liked This Year

It’s the end of the year so here’s a roundup of all the fonts I’ve recommended in 2021. I know I’m missing a couple months so here’s hoping for the full twelve in 2022.

January - Jagiq by twinletter

Jagiq by twinletter poster

Download at Font Space or buy on Creative Fabrica.

March - Together of Love by goodigital

Together of Love by goodigital poster

Download at 1001 Fonts or buy on Creative Fabrica.

June - Hot Dog by Toko Laris Djaja

Hot Dog by Toko Laris Djaja poster

Download at dafont or buy on Creative Fabrica.

July - Ducky Manly by Allmo Studio

Ducky Manly by Allmo Studio poster

Download at dafont or buy on Creative Fabrica.

August - Cherish Today by Sarid Ezra

Cherish Today by Sarid Ezra poster

Download at dafont or buy on Creative Fabrica.

September - Black Ground by Letterhend Studio

Black Ground by Letterhend Studio poster

Download at FontSpace or buy on Creative Fabrica.

October - Organic Peach by Prioritype

Organic Peach by Prioritype poster

Download at FontSpace or buy on Creative Fabrica.

November - Javatages by Good Java Studio

Javatages by Good Java Studio poster

Download at dafont or buy on Creative Fabrica.

December - Fontanio by ArdyanaTypes

Fontanio by ArdyanaTypes poster

Download at FontSpace or buy at Creative Market.

Advertisement
Advertisement

I was feeling under the weather on Friday so I missed my regularly scheduled font recommendation day. Here’s a late one.

Fontanio by ArdyanaTypes has a cool, sixties, psychedelic feel that I’m really into. It’s free for personal use only. 

Download at FontSpace or buy at Creative Market.

Vue Inner Image Zoom v2

As promised, now that migrating is easier I’ve updated my Vue Inner Image Zoom component to support Vue 3. If you’re still on Vue 2 and want to use the component, just make sure to install it as vue-inner-image-zoom@1.1.1.

I also updated the demos site to remove the lazy loading example since vue-lazyload isn’t compatible with Vue 3 (I’m open to any suggestions for replacements) and switched from vue-slick-carousel to Swiper both for compatibility and because it’s my preferred carousel library.

If I broke anything and you run into any new bugs, please report them on the GitHub issues page.

Vue 3.1 - Official Migration Build from Vue 2 to 3 - This Dot Labs

Introduction A few weeks ago, the Vue core team released the first minor version of Vue 3 (release notes here). This latest release of Vue brought a number of…...

When Vue 3 was initially released, I tried to muddle through upgrading from Vue 2 but couldn’t really tell if I was doing it right and eventually put it aside. But the new migration build released with v3.1 changed all that and this overview from This Dot Labs is great.

The only things I would add to their comprehensive guide are: 1) if you’re using ESLint you may need to update your eslint-plugin-vue version and config and 2) if you’re using Jest for tests this Stack Overflow answer might be helpful.

Keep an eye out for Vue 3 support for the Vue Inner Image Zoom component!

The Facebook Files, a Podcast Series

The Facebook Files, an investigative podcast series, dives into an extensive array of internal Facebook documents that provide an unparalleled look inside the social media giant....

The Wall Street Journal is pretty bad most of the time and their op-ed page is embarrassing for everyone involved but the Facebook Files podcast is fantastic. Whatever you may have suspected Facebook of getting up to, the reality is almost always so much worse.