Freelancing

CSS-Tricks

Blue Beanie Day 2019

2 days 2 hours ago

November 30th, the official "Blue Beanie Day," has come and gone. I'm not sure I ever grokked the exact spirit of it, but I've written about what it means to me. Last year:

Web standards, as an overall idea, has entirely taken hold and won the day. That's worth celebrating, as the web would be kind of a joke without them. So now, our job is to uphold them. We need to cry foul when we see a

Read article

The post Blue Beanie Day 2019 appeared first on CSS-Tricks.

Chris Coyier

Adam Argyle’s 2020 CSS Predictions

2 days 2 hours ago

I think Adam's first prediction is his boldest, even beyond his Hail Mary prediction. CSS grid is awesome and gap is perhaps one of its best qualities, but gap superseding spacing things out in other ways (e.g. margin) is a bold prediction indeed, especially with Firefox being the only browser supporting it in flexbox.

Direct Link to ArticlePermalinkRead article

The post Adam Argyle’s 2020 CSS Predictions appeared first on CSS-Tricks.

Chris Coyier

Yap

2 days 7 hours ago

Interesting idea for a "chat room" from Postlight:

  1. Create a Yap chat room.
  2. Invite others to join and talk.
  3. Share a URL of just about anything.
  4. Everyone gathering can comment on what you’ve shared.
  5. If you think your conversation deserves an audience, share the URL of your chat publicly.
  6. Only six people can join. Lots of people can observe if you invite them. But just six chatters.

Yap.

Direct Link to ArticlePermalinkRead article

The post Yap appeared first on CSS-Tricks.

Chris Coyier

Detecting Inactive Users

2 days 8 hours ago

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they got up to get a drink of water, or more likely, changed tabs to do something else for a bit. There are situations, though, when tracking the user activity and detecting inactive-ness might be handy.

Let’s think about few examples when you just might need that functionality:

  • tracking article reading time
  • auto saving form or

Read article

The post Detecting Inactive Users appeared first on CSS-Tricks.

Mateusz Rybczonek

lite-youtube-embed

2 days 8 hours ago

A standard copy-and-paste YouTube embed lands on your page as an <iframe> which loads a big ol' pile of other stuff to play that video. But the UX of it is still essentially an image and a play button. Click the play button and the video plays. You can build essentially the same thing with an anchor link wrapping an image!

Not long ago, we covered a very clever "lazy load" technique doing exactly this from Arthur Corenzan that was … Read article

The post lite-youtube-embed appeared first on CSS-Tricks.

Chris Coyier

Weekly Platform News: Strict Tracking Protection, Dark Web Pages, Periodic Background Sync

3 days 1 hour ago

In this week's news: Firefox gets strict, Opera goes to the dark side, and Chrome plans to let web apps run in the background.

Let's get into the news.

Firefox for Android will block tracking content

Mozilla has announced that the upcoming revamped Firefox for Android (currently available in a test version under the name "Firefox Preview") will include strict tracking protection by default.

On the phone or tablet, most users care much more about performance and blocking of annoyances

Read article

The post Weekly Platform News: Strict Tracking Protection, Dark Web Pages, Periodic Background Sync appeared first on CSS-Tricks.

Šime Vidas

Dip Your Toes Into Hardware With WebMIDI

3 days 8 hours ago

Did you know there is a well-supported browser API that allows you to interface with interesting and even custom-built hardware using a mature protocol that predates the web? Let me introduce you to MIDI and the WebMIDI API and show you how it presents a unique opportunity for front-end developers to break outside the browser and dabble in the world of hardware programming without leaving the relative comfort of JavaScript and the DOM.

What are MIDI and WebMIDI exactly?

MIDIRead article

The post Dip Your Toes Into Hardware With WebMIDI appeared first on CSS-Tricks.

George Mandis

How I’ve Improved as a Web Developer (and a Person) in 2019

4 days 1 hour ago

We’re sliding into the roaring twenties of the twenty-first century (cue Jazz music &#x1f3b7;). It’s important that you and I, as responsible people, follow the tradition of looking back on the past year and reflect on the things that went right and wrong in the hopes of becoming the best version of ourselves in the year ahead.

I never do New Year’s resolutions, except for when I was ten years old and wanted to open a local self-run detective agency … Read article

The post How I’ve Improved as a Web Developer (and a Person) in 2019 appeared first on CSS-Tricks.

Preethi

Freak Flags

4 days 8 hours ago

I don't see image sprites used that much anymore, but it's still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the graphics into one and then shifting around the size and background-position to reveal one at a time.

Say you're site needs dozens or hundreds of country flags — that's a perfect opportunity for a sprite. Michael P. Cohen has built a generator site to help … Read article

The post Freak Flags appeared first on CSS-Tricks.

Chris Coyier

Just Sharing My Gulpfile

4 days 8 hours ago

Seemingly out of the blue, the Gulp processing I had set up for this site started to have a race condition. I'd run my watch command, change some CSS, and the processing would sometimes leave behind some extra files that were meant to be cleaned up during the processing. Like the cleanup tasks happened before the files landed in the file system (or something... I never really got to the bottom of it).

Nevermind about the specifics of that bug. … Read article

The post Just Sharing My Gulpfile appeared first on CSS-Tricks.

Chris Coyier

Making a Better Custom Select Element

4 days 22 hours ago

We just covered The Current State of Styling Selects in 2019, but we didn't get nearly as far and fancy as Julie Grundy gets here. There is a decent chunk of JavaScript that powers it, so I'm still very much eyeballing browsers' recent interest in giving us more powerful selects in (presumably) just HTML and CSS.

I tossed a fork on CodePen in case you just wanna see the final result.

See the Pen
Custom Select Input
by … Read article

The post Making a Better Custom Select Element appeared first on CSS-Tricks.

Chris Coyier

WordPress.com: One CMS, Infinite Possibilities

4 days 22 hours ago

(This is a sponsored post.)

Have you ever looked at a site and knew exactly what CMS powers it? You might see a distinctive design aesthetic that gives it away. Or maybe it's something even less obvious and even harder to articulate, but you know it when you see it.

That seems true with just about any platform, especially those that rely on a set of templates. If you were to jump from one site ot another on the … Read article

The post WordPress.com: One CMS, Infinite Possibilities appeared first on CSS-Tricks.

Geoff Graham

Quoting in HTML: Quotations, Citations, and Blockquotes

5 days 8 hours ago

It’s all too common to see the incorrect HTML used for quotes in markup. In this article, let’s dig into all this, looking at different situations and different HTML tags to handle those situations.

There are three major HTML elements involved in quotations:

  • <blockquote>
  • <q>
  • <cite>

Let’s take a look.

Blockquotes

Blockquote tags are used for distinguishing quoted text from the rest of the content. My tenth grade English teacher drilled it into my head that any quote of four … Read article

The post Quoting in HTML: Quotations, Citations, and Blockquotes appeared first on CSS-Tricks.

John Rhea

How Facebook Avoids Ad Blockers

6 days 1 hour ago

Dylan Paulus:

Facebook actually hides 'dummy' DOM nodes between the 'Sponsored' text. These values are entirely random characters, with a random number of DOM nodes between them. Invisible characters. At this point our CSS ad blocker is completely broken. There is no way for us to possibly code every possible value in CSS.

We've covered this before when Mike Pan noted it. Looks like it's evolved a bit since then, getting even a little tricker.

I just opened my … Read article

The post How Facebook Avoids Ad Blockers appeared first on CSS-Tricks.

Chris Coyier

Music and Web Design

6 days 4 hours ago

Brad has a long history in music outside of being a web designer, and draws some interesting parallels. One is that he had reached for more complex music in an effort to become a better musician — and developers can do the same thing. The other is that the composition of music can be seen from very large parts down to very tiny parts, just like atomic design.

I have two go-to connections between music and web design … Read article

The post Music and Web Design appeared first on CSS-Tricks.

Chris Coyier

A Handy Sass-Powered Tool for Making Balanced Color Palettes

6 days 7 hours ago

For those who may not come from a design background, selecting a color palette is often based on personal preferences. Choosing colors might be done with an online color tool, sampling from an image, "borrowing" from favorite brands, or just sort of randomly picking from a color wheel until a palette "just feels right."

Our goal is to better understand what makes a palette "feel right" by exploring key color attributes with Sass color functions. By the end, you will … Read article

The post A Handy Sass-Powered Tool for Making Balanced Color Palettes appeared first on CSS-Tricks.

Stephanie Eckles

Learn Programming

PHP: The latest news in the PHP world