Tag: Show

Recent Episodes of ShopTalk Show

There is a super cool new Podcast block for WordPress Gutenberg you use Jetpack (released in 8.5). I wanted to try it out, so below you’ll see recent episodes from ShopTalk Show. I’d tell you all about the recent episodes, except then this blog post wouldn’t age very well, because the point of this blog is showing recent episodes, not specific episodes, so it will change as we publish new shows.

Here they are:

And if I wanted to show off recent episodes of JS Party, with different colors, I could do that too:

What I’m gonna share here is really mediocre JS Party: JavaScript & Web Dev

Node 14, Vue’s Vite, and is-promise are in the news. We’ve got some working from home tips and unpopular opinions to share. And… shout outs! 👏

  1. What I’m gonna share here is really mediocre
  2. These buttons look like buttons
  3. We got confs on lockdown
  4. JS "Danger" Party
  5. What's new and what's Next.js

I love that I get useful little features like for literally doing nothing. Big fan of Jetpack for that reason.

The post Recent Episodes of ShopTalk Show appeared first on CSS-Tricks.


, , ,

Show Search Button when Search Field is Non-Empty

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="...">) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on the actual value, but it can’t.

This makes :placeholder-shown one of the few CSS properties that we have that can react to user-initiated state joining the likes of :hover-and-friends, :checked (checkbox hack!), and the also-awesome :focus-within.

One way we can use it is to check whether the user entered any text into a search field. If yes, then reveal the search button visually (never hide it for assistive tech). If no, then leave it hidden. It’s just a fun little “space-saving” technique not terrible unlike float labels.

So, perhaps we start with a semantic search form:

<form action="#" method="GET" class="search-form">   <!-- Placeholders aren't labels! So let's have a real label -->   <label for="search" class="screen-reader-text">Search</label>   <input id="search" type="search" class="search-input" placeholder="Enter search terms...">   <button class="search-button">Search</button> </form>

We hide the search label visually with one of those special screen-reader-only classes because it will always be hidden visually. But we’ll hide the button by pushing it outside the form with hidden overflow.

.search-form {   /* we'll re-use this number, so DRYing up */   --searchButtonWidth: 75px;    overflow: hidden;   position: relative; }  .search-input {   /* take full width of form */   width: 100%; }  .search-button {   position: absolute;    /* push outside the form, hiding it */   left: 100%;   width: var(--searchButtonWidth); }

Then the trick is to pull the search button back in when the placeholder goes away (user has entered a value):

/* ... */  .search-input:not(:placeholder-shown) ~ .search-button {   /* pull back the negative value of the width */   transform: translateX(calc(-1 * var(--searchButtonWidth))); } .search-button {   position: absolute;    left: 100%;   width: var(--searchButtonWidth);   /* animate it */   transition: 0.2s; }

Which ends up like this:

See the Pen
:placeholder-shown revealing button
by Chris Coyier (@chriscoyier)
on CodePen.

I saw this idea in a Pen by Liam Johnston. Cool idea, Liam!

I know that using the placeholder attribute at all is questionable, so your mileage may vary. I’ll admit that I’m mostly intrigued by the state-handling aspects of it directly in CSS and how it can be used — like the infamous checkbox hack.

Support is good. One of those where when Edge is firmly Chromium, it’s in the clear.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.


Chrome Opera Firefox IE Edge Safari
47 34 51 11* 76 9

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.0-9.2 No No 76 78 68

The post Show Search Button when Search Field is Non-Empty appeared first on CSS-Tricks.


, , , ,