Sunday, April 11, 2021
  • Setup menu at Appearance » Menus and assign menu to Top Bar Navigation
Advertisement
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News
No Result
View All Result
NikolaNews
No Result
View All Result
Home Learn to Code

Chris Coyier’s Favorite CodePen Demos IV

February 25, 2019
in Learn to Code
How to Change the WordPress Admin Login Logo
586
SHARES
3.3k
VIEWS
Share on FacebookShare on Twitter
Credit: DavidWalsh

Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again and again to heart it just that little bit more. That’s useful for a couple of reasons. It gets calculated into the algorithms-that-be for popularity, and also, you can see items you’ve loved at the different levels.

In perusing mine recently, along with the fact that our Top Hearted to 2018 recently dropped, had me thinking I should do another post about my personal favorites! Here they are!

You might also like

Detect CSS Overflow Elements

How to Mine Ethereum

VS Code node:console Fix

See the Pen Bob Ross Doing the Floss, Like a Boss (Pure CSS) by Steve Gardner (@ste-vg) on CodePen.

I remember my painting professor in college wore a t-shirt that said “Art is dead.” with the born/died dates of Bob Ross on it. Dude was a legend of PBS. Steve Gardner nails the happy positivity of Bob making him to the do the cheezy dance that defines the 2010’s. I also recently learned that ol’ Bob was probably also popular at least in part to him being so good for ASMR, a rather strange tingly calming phenomenon that has gotten extra big on YouTube lately.

See the Pen <img intrinsicsize&rt; fights jank by Eric Portis (@eeeps) on CodePen.

As much as I love all the artistic exploration on CodePen (and I lovvve it), the performance-focused, layout-loving, front-end developer nerd in me really likes technology exploration Pens like this one by Eric Portis. <img intrinsicsize> is a brand new HTML attribute that is starting to ship experimentally that has the power and potential to solve image loading jankiness, which is a big damn deal if you ask me.

See the Pen Flexbox One Column Switch by Heydon (@heydon) on CodePen.

And speaking of layout loving exploration, Heydon Pickering recently published a damn interesting technique with flexbox where a row of items can instantly flip from a horizontal row to a vertical row at the pixel width of the parent element you want (rather than rely on a document level media query). So like a very basic element query, which everyone wants. It works by either having the widths of the elements effectively 0, and allowing them to grow to fill the horizontal row, or a super large number forcing each element onto a new line, making a vertical row. If you want to peak at how the sizing is calculated, I’d encourage you to peak in the Firefox DevTools to see.

See the Pen Pure CSS 4 Designers by Julia Muzafarova (@miocene) on CodePen.

Julia Muzafarova does absolutely outstanding animated scenes with an amazing amount of care and detail. This one is great because it’s so many different scenes in one! But it’s so hard to pick a favorite so definitely go browse her profile for others.

See the Pen css doodle art by yuanchuan (@yuanchuan) on CodePen.

Yuan Chuan is always so impressive to me, first because they are so prolific (so many demos!), and second because they basically invented a way to fuel that prolific nature: the <css-doodle /> web component!  It’s essentially a meta language combining styling information and custom functions that help out with that styling. The results, with so little code, are always striking.

See the Pen Multiple Backgrounds, Multiple Blend Modes by Dan Wilson (@danwilson) on CodePen.

In a conversation with Dan Wilson a little bit ago, we were talking about how cool filter is, but it’s weird how you can’t use the powers of filter for background images. Say you want to grayscale a background, but not grayscale the whole element (which might do things like turn your blue links gray). You can kinda pull it off with using a pseudo element like a background. There is another perhaps even cleaner way, and that’s using background-blend-mode and multiple background images. If grayscale is what you are after, you could use a color blend mode on an image sitting over a flat black color.

Dan Wilson got even more explorative in this Pen, with layering images, gradients, and colors and allowing someone playing around with this to change the colors and blending applied.

See the Pen SVG Marching Ants by Maxim Leyzerovich (@round) on CodePen.

I think this classic UI pattern is a fascinating thing to try to pull off on the web. Typically “marching ants” is something you’d see in like Photoshop when selecting a part of an image. Less so a UI pattern on the web. But here Maxim Leyzerovich pulls it off using some very simple but deceptively clever styles. There is little things in here like needing to double the width of the outside stroke to deal with the fact that strokes straddle the lines they create and so when you use coordinates like 0,0, you’re going to face half that stoke being cut off.


What are some of your favorites?

Credit: DavidWalsh By: chriscoyier

Previous Post

Commonwealth Ombudsman singles out Home Affairs over stored communications and metadata handling

Next Post

Monitoring Customer Data With Machine Learning

Related Posts

How to Change the WordPress Admin Login Logo
Learn to Code

Detect CSS Overflow Elements

April 8, 2021
How to Mine Ethereum
Learn to Code

How to Mine Ethereum

March 26, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

VS Code node:console Fix

March 24, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Now is the Time to Get Your Business Protected from Cyberthreats

March 23, 2021
How to Change the WordPress Admin Login Logo
Learn to Code

Use Logpoints!

March 22, 2021
Next Post
Monitoring Customer Data With Machine Learning

Monitoring Customer Data With Machine Learning

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

Plasticity in Deep Learning: Dynamic Adaptations for AI Self-Driving Cars

January 6, 2019
Microsoft, Google Use Artificial Intelligence to Fight Hackers

Microsoft, Google Use Artificial Intelligence to Fight Hackers

January 6, 2019

Categories

  • Artificial Intelligence
  • Big Data
  • Blockchain
  • Crypto News
  • Data Science
  • Digital Marketing
  • Internet Privacy
  • Internet Security
  • Learn to Code
  • Machine Learning
  • Marketing Technology
  • Neural Networks
  • Technology Companies

Don't miss it

Can a Machine Learning Model Predict T2D?
Machine Learning

Can a Machine Learning Model Predict T2D?

April 11, 2021
Leveraging SAP’s Enterprise Data Management tools to enable ML/AI success
Data Science

Leveraging SAP’s Enterprise Data Management tools to enable ML/AI success

April 11, 2021
Machine Learning in Finance Market is exclusively demanding in forecast 2029 | Ignite Ltd, Yodlee, Trill A.I., MindTitan, Accenture, ZestFinance – KSU
Machine Learning

Machine Learning in Finance Market is exclusively demanding in forecast 2029 | Ignite Ltd, Yodlee, Trill A.I., MindTitan, Accenture, ZestFinance – KSU

April 10, 2021
Vue.js vs AngularJS Development in 2021: Side-by-Side Comparison
Data Science

Vue.js vs AngularJS Development in 2021: Side-by-Side Comparison

April 10, 2021
IBM releases Qiskit modules that use quantum computers to improve machine learning
Machine Learning

IBM releases Qiskit modules that use quantum computers to improve machine learning

April 10, 2021
Hackers Tampered With APKPure Store to Distribute Malware Apps
Internet Privacy

Hackers Tampered With APKPure Store to Distribute Malware Apps

April 10, 2021
NikolaNews

NikolaNews.com is an online News Portal which aims to share news about blockchain, AI, Big Data, and Data Privacy and more!

What’s New Here?

  • Can a Machine Learning Model Predict T2D? April 11, 2021
  • Leveraging SAP’s Enterprise Data Management tools to enable ML/AI success April 11, 2021
  • Machine Learning in Finance Market is exclusively demanding in forecast 2029 | Ignite Ltd, Yodlee, Trill A.I., MindTitan, Accenture, ZestFinance – KSU April 10, 2021
  • Vue.js vs AngularJS Development in 2021: Side-by-Side Comparison April 10, 2021

Subscribe to get more!

© 2019 NikolaNews.com - Global Tech Updates

No Result
View All Result
  • AI Development
    • Artificial Intelligence
    • Machine Learning
    • Neural Networks
    • Learn to Code
  • Data
    • Blockchain
    • Big Data
    • Data Science
  • IT Security
    • Internet Privacy
    • Internet Security
  • Marketing
    • Digital Marketing
    • Marketing Technology
  • Technology Companies
  • Crypto News

© 2019 NikolaNews.com - Global Tech Updates