css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged performance

How to optimize script loading in a crap enviroment

You probably been there. You have to use a CMS or customize a webapp that doesn't let you control how, where and when your scripts are loaded and you have no way to change it. Obviously you...

Cut out the jQuery middle man

Let me start by saying that this is not a "break-up with jQuery post" - in fact, I like jQuery and know that we all owe it a great debt. jQuery does great things for normalising...

Bacon.js Bus and the bumpy road

Last autumn at work we had a need to kickstart responsive version of our site. Due to not having enough developers in our team to do that on our own, being busy with another essential requirement...

Webkit performs slightly different in Safari and Chrome

While composing a navigation menu with dropdown submenu, a weird issue came to my screen.

Here's the result: http://codepen.io/POPOEVER/full/pJzNoz/

While you hover the mouse pointer onto menu...

Performance matters

Sluggishness and slow loading times contribute to a horrible user experience.

Web animations are infamous for being unperformant and janky, especially on mobile. Usually this is because they are...

Libraries: Performance vs. Native JS


As we abstract code into re-callable blocks, it should hinder the code's performance. Instead of using a native element. A library is forcing the browser to look up a reference to a...

{re-style} Twitter heart animation in full CSS

original codepen Twitter's Heart Full CSS by Nicolas Escoffier

Twitter's Heart Full CSS

three layer:


調整為 transform: scale()
以簡化 CSS rules,並可獲得較高效率的繪製


#4. Flexbox playground on CodePen, Bulma (CSS Framework based on Flexbox) and PageSpeed Insights from Google

Hej Bloggis !! (Katarina's suggestions on how to start blog posts). First of all sorry for the delay on updating the blog, but too many things on my plate atm so I've been postponing this...

The e2d Declarative Canvas View Layer

In this post, we will dive right in and compare using e2d vs direct canvas.

Getting started with e2d

Install e2d or use e2d.js at requirebin to try it!

npm install --save e2d

How do we compare?


A Simple Lazy Load Hack

I was searching an easy way to do lazy load in a site that loads a lot of images in image tags. I found a lot of plugins but nothing that solve my problem with simplicity. So i decide to write...

Introduction to MonitorJS

What is MonitorJS ?

It's a lightweight javascript plugin (2.33 KB) to help you in several tasks, including :

find inefficient code

improve existing javascript codebase

compare efficiency of...

Creating Cool CSS Animations to Improve Frontend Performance

There are quite a lot of frontend developers in our audience at Snipcart, and many of them dig performance-enhancing activities. So to live up to our promise of offering a fast & custom...

Performance Means Progressive Enhancement

Let's assume JavaScript execution is instant. For a single-page application, here's the process to do something useful:

Fetch the bootstrapping document

Fetch the JS renderer

Fetch the...

A Quick jQuery Tip.

Actually, its not a -jquery-only-tip as this is something could hel you in many other things. But as long as we are going to use jQuery in our examples so couldn't find a better title though.


Getting two-dimensional coordinates from a one-dimensional array

If you're working in the 2D canvas context, and you'd like to fill your canvas with objects on both x and y axes, you might not need to reach for nested for loops! It's possible to get...

Notes on npm running inside a Docker container

In the past two weeks we spent some time on improving our development performance. We use Webpack for building a client bundle while the server was booted using Nodemon and babel-node. We are not...

How up-gradation of Front-end can enhance the Performance, Accessibility, Optimization, SEO and User Experience #DograsWeblog

Document designed on the Front-end up-gradation Since Google, Yahoo, Bing etc and other world best Search Engine's have done future development focusing Smart phone users. Web browsers gone...

SVG Logo Minification Trick: Use <text> for trademarks

I don’t mean the actual logo, just the part where you indicate they’re a trademark. These things:

There's a solid argument to be had that a machine-readable, semantic indicator of...