Tagged “codepen”

Ana demonstrates how to achieve a range slider effect accessibly, using web standards and without needing to reach for libraries.

As Ana’s tweet explains, this offers a number of features and benefits:

• can drag thumb with JS disabled
• receives focus
• keyboard navigation
• clicking track moves thumb there and changes slider value
• seen as slider in Accessibility panel
• no library needed, so less code in total

Here’s a lovely intrinsically responsive (no media queries) photo gallery solution from Stephanie Eckles. It can accommodate differently sized images and achieves its layout by a combination of flexbox features (flex-wrap, flex-basis) and by applying object-fit: cover to photos to make them fully cover their parent list items.

Here’s my crack at it on Codepen.

I’m finding Codepen to be more and more valuable not only for testing out new code and ideas, but also – when working on large applications – as a time-saving rapid prototyping environment which sidesteps the overhead of back-end set-up. Here are some tips which I’ve found useful, for future reference.

Control the Editor View layout

Append /left/, /right/, or /top/ to the URL to set the editor layout.

Append ?editors=1111 (change numbers as appropriate) to the URL to set which panels are maximised (in order of HTML, CSS, JavaScript, and console).

For example:

https://codepen.io/fuzzylogicx/pen/BEEYQL/left/?editors=1100

References

• https://blog.codepen.io/documentation/url-extensions/
• Adding external resources to a pen
• ES Modules on codepen
• https://www.hongkiat.com/blog/codepen-tips-beginners/

Last Sunday I spent a free afternoon messing around with levelling up my skills with SVG.

I’d been meaning to finish reading Chris Coyier’s book Practical SVG for a while and although it goes pretty deep, I finally achieved it. Much of it focuses on using SVG within an icon system.

I have a number of thoughts I’ll share soon regarding my preferences on when to use inline SVG and when to use SVG as a background image.

In the meantime, here’s some fun I had implementing one of the many design tricks from the book – nesting a photo within an <svg> element then applying i) a greyscale filter; and ii) a black-to-white gradient mask to transition the photo from colour to black and white.

Since the photo’s subject is a lovely piece of fish, I’m calling my remix Grey Scales.

Check out Grey Scales on CodePen.

PS the original photo is courtesy of my talented wife. Clair – sorry for ruining your lovely photo and for yet another in a long line of fish puns.

Testing Codepen’s new feature for progressively enhancing code hosted on your own site from a basic pre element into an interactive, editable pen. To demo this I’m using a great code snippet from Chris Ferdinandi for CSS-only smooth-scrolling.

<p id="top">
	<a href="#bazinga">Go to the middle</a><br>
	<a href="#1@#%^-bottom">Go to the bottom</a>
</p>

<p>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="bazinga"><a href="#1@#%^-bottom">Go to the bottom</a></p>

<p>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
	.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="1@#%^-bottom"><a href="#">Go back to the top</a></p>

html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}