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 javascript

Micro javascript template.

My first blog post :).

A simple micro templating with Javascript.

First step: The pattern.

 var micro = (function(){ return { // Render template render:function(element,args){}, // Define...

React + Value Transforms

After a short time with Facebook's React I found the need to intercept the properties coming into my components so I could transform them appropriately. Eventually I settled on a pattern...

Javascript Function Expressions

Prefixing a javascript function declaration with an operator like ! or + makes it an expression. Specifically an immediately-invoked function expression.

  !function () {}(); 

Instead of a function...

Javascript’s void Operator

What is the purpose of obj === void 0 or void(alert(…))?

I’ve seen code like this floating around the internet, always thinking the expression was a function all to void():


Quality Without a Name

If your like me, you’ve longed for a book about software development that speaks of the essense of our craft. A book reminding you of why you began the tortuous journey and why you keep subjecting...

Image Preview beim File Upload mit jQuery

Hier kommt ein einfaches Tutorial, wie man ein ausgewähltes Bild über <input type="file"> anzeigen lassen kann, ohne ein Plugin zu verwenden. Alles was wir dafür brauchen ist ein...

Controlling the Canvas with JavaScript Objects

Drawing a circle on the canvas is pretty easy.


And using a for loop, drawing 200 circles on the canvas is still...

Top 10 Reasons To Learn Web Development

Today I want to get into some very good reasons why I chose to teach myself front end web development. If you're looking for a way out of that job you don't like, or are looking for the perfect...

Rana Waseem

I am Web Developer with 5 years experience.

HTML , CSS , Javascript, PHP , NodeJs are my strong tools

Currying Functions in Javascript

Currying is the process of taking a function that accepts some number of arguments, then creating a new version of that function that can accept an "incomplete" argument list. When given...

ES6 Arrow Functions & this

Working with an incredible team amidst the thunder, rain and humidity of a Tennessee summer, I have the distinct pleasure of writing a javascript application using ES6 Harmony — the next version of...

Form with Geolocation

OBS: You can read this post in Portuguese here: http://tribodoci.net/artigos/formulario-com-geolocalizacao/

Every day we fill out forms on the web, and we know it sucks. For example, why we always...

javascript event




React Mixin — Scroll Lock

Do What I Meant, Not What I Said

The sci-fi of my childhood promised computers that would do what I meant, not exactly what I said. You know that feeling — when you know what you want your computer...

Github Pages and MailChimp

photolandia screeny' class="post-image

I've sent out about four emails as my "marketing campaign" for DVD Pila!, and had my first mailing list signups. I then realized that in the...

Javascript - Declaring a property of an object with undefined parent properties

A quite simple js recursive function that turns what would be an invalid declaration of a variable object with non defined properties to a valid one.

My need was to declare a property of a nested...

eBook Download Page

ebook download' class="post-image

Worked on the 5-tools PDF download page for the DVD Pila! mailing list. The process so far has been pretty simple, I just copied up the index.html from the actual...

An introduction

Hi and welcome! First an explanation of what this is. A blog yes, sort of, not really. It's a codepen blog. which means it is geared specifically towards code and code snippets often of the web...

Look ma', such a smooth scroll

A couple 10 to 100 thousand seconds earlier I was about to rage quit work. I was working on two projects where you can navigate the page via normal and anchor links. Not a big deal, happens all the...

Default Function Arguments in Javascript

I would personally argue that inconsistent and cumbersome defaults are the bane of a programmer's existence. Well chosen defaults make an experience smoothly degrade in the simpler cases...

Predicates in Javascript

A predicate is a function that takes one item as input and returns either true or false based on whether the item satisfies some condition. They're quite useful for interrogating objects to...

Expressing Conditions with Predicates and Functions

This post builds on Predicates in Javascript, I recommend reading that first

It is frequently the case that we want to perform some operation on an object only if a condition about that object...

Dynamic Languages are Weird

If you've never seen this particular talk on Javascript and Ruby and you'd like a laugh, do check it out. Explanations for these oddities can be found in this Stack Overflow question

Dead-simple Parallax

The best parallax is subtle, minimal, and doesn't trash your page's performance. Throwing a slight scroll lag on your background images is a perfect example, and it only takes 11 lines of...

The Storage is The Way

Finally finished the most massive form of the century. Turned out to be 2089 lines of HTML. I tend to add more lines then strictly necessary though. I like to add an empty line between <tr>...

Way.js and Angular.js

Ran into another problem with my Way.js supported form. When I integrated it with the rest of the Angular.js web app the saving to localStorage bit didn't work. The problem I think has to do...

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...

code explanations

Some Sample Pens but not what they were intended to be. Will fix when I get the chance otherwise there just 3 randoms for the most part enjoy?

3D Rotating Objects, Stones Flag via .SCSS


Mean JS

MeanJS é uma solução audaciosa, pois junta algumas das tecnologias de ponta em uma só ferramenta que funciona como uma engrenagem completa de desenvolvimento utilizando javascript, gerando código...

responsive html5 video using video-js

responsive html5 video using video-js

This is a simple example of how to implement Video in your static project by leveraging the fantastic open source video-js. I have a few versions floating...

Signing Forms

Back to work on adjusting the worlds largest HTML form. I've been editing the text and fields to make them friendly to being on the Internets and not filled out by hand. Surprising how many...

South American Ghosts

South America Earthquakes Spring 2014

South American Ghosts

Where our lives changed forever, like we never made it home...

[[[pen slug-hash='sqCac' height='300'...

window.onload() vs $(document).ready()

$(document).ready(): will run your code when the HTML is all ready, but before images and other resources have finished. This is the earliest possible time that you can change the DOM with...

Scaling iFrames with CSS transforms

(German version of this article)

In the last week I dealt with an interesting problem during my work: I wanted to implement an <iframe>-element into a responsive website that holds a...

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...

"Class"-inheritance in Javascript

Class inheritance?

So I've been noticing that a lot of people I know never use class inheritance in Javascript. Coming from a C++, PureBasic, Lua and Assembly world I was extremely happy when...

Object oriented canvas rendering in JavaScript

Draw me some renderables!

This blog is a follow-up on my previous blog about "Class"-inheritance in JavaScript. I wanted to utilize the features in HTML5 Canvas and keep the work as...

JavaScript function memoization

Caching data, but only when accessed

This blog post will be about memoization and is inspired by this blog post by Darren Torpey about _.once. It reminded me that in Lua, I have often used...

JavaScript Memoization Timeout

Caching data every now and then!

This blog post will be a continuation on my previous post about function memoization, in which I demonstrated simple function memoization. In this post I will...

Daemon - A maintainable timer

Demons, oh no!

Don't you worry, we're talking about Daemons here, not Demons. This blog post will be about an object oriented method of creating a timer, communicating with that timer and...

Function Metadata and Arity Checking

Metadata is data about data. Classic examples include file names, sizes, and histories. In Javascript, all functions inherit from the Function object, so attaching metadata to functions and...

A New Beginning

I have never wrote a blog post before so this will be the first! I recently read a post by Rachel Smith called “Last Year I Joined CodePen. What Happened Next Will Blow You Away.” (great name by...

Code input breakdown

I went to Starbucks the other day. On the receipt was a code to enter on their website, so I went there on my computer. As a front-end developer, I was impressed with the behavior of the form.


Checksum algorithms in JavaScript - Checksum.js engine

Checksum algorithms

You can verify the integrity of data in many ways, however one of the most used methods of doing this is via checksums. The Adler32 algorithm in zlib, CRC32 in RAR, bsd(16) on...



1. 在等权重的css选择器上,样式是css文件里定义的顺序还是在html元素上使用的顺序生效?



2. 全局变量


  function foo(){ var a = b =...

Javascript Call vs. Apply

I want to remember simple explanations of things. Call() and Apply() are functions that I don't find many reasons to use, perhaps I should?

Both Call and Apply are functions that execute in the...


Notes on Immediately Invocable Function Expressions from Javascript the Good Parts Presentation by Douglas Crawford

allows us modularity in javascript, we can use function scope to keep things out...

When NOT to use ParseInt()

You probably don't want to use parseInt() to test if your variable is a NUMBER. If it's a string that starts with a number, it will simply trim off everything after the number. You should...

Let's do canvas.

Let's learn some Canvas

So I found myself messaged today in regards to tagging one of my pens canvas-club with a link to this blog entry by Abhijit Hota . An excellent idea I thought. Learning...

Canvas 101

Canvas Chapter 1 Section 1

So you want to make JS art

So for our first venture into this series we will be working on some basic things. This will probably be a longer section than the others but...

Rainbows and Pixels

Welcome back

Starting off today we are going to take a brief look at gradients. After that we are going to be looking at altering individual pixels. If you are not sure what a gradient is check...

Survival Guide To Numbers


I struggled for too long; I need to write this down and hopefully this can help other fellow developers. This is mostly meant as a reference for myself but if you think that something...

A Skewed Perspective


Our next topic will be transformations. Similar to other canvas methods ,and like I have said before, you should keep in mind canvas is one solid object. When ever a transformation...

Managing Data Flow With Flux and React

How best to manage data flow with Flux?

The easiest and first step seems to be in how you divide or deconstruct your components. Keep seperate folders for "dumb" and...

Finally wrapping my head around Javascript and RegExp

The Background

Regular Expressions in Javascript (or any language for that matter) has always been a thorn in my side. Doesn't seem to matter how many times I sat down to learn it, I just could...

Chapter 1 Exercise

Chapter 1 Post Exercises


Sorry for the delay, I know I missed last Friday. I will however be putting out this post and the pre-section prep today. So with out further ado today, I will...

Dr.Pot V1.0 beta

Hey guys we hope you like Dr.Pot we have some problems but it is still beta and we will come out with some more updates my partner is Austin Lancaster we are working together to make a game that...

Javascript for Geospatial and Advanced Maps

A look at the latest web tools for geospatial analysis and advanced maps by @stevepepple

In the past year, a wealth of new web tools have emerged to help with web-based GIS and spatial analysis.


From Developer To Front-End-Engineer (week 30)

People's Guide to Custom d3 Charts

Hello again folks! This week we talk about something which I’ve had the privilege of troubleshooting this past month: d3. It’s no new news that d3 is a...

PS Prep Animation

Animation Basics

Alright so let's start animating. Before we do I would like to take a little time to go over some things that will help you understand the animation process a little better....

Javascript closure tutorial with example

A closure in JavaScript is like keeping a copy of all the local variables, just as they were when a function exited. Simply accessing variables outside of your immediate scope creates a closure.


My First Animation

Basic Animation

Well it is time to start adding life into our canvas. It's alive ALIVE!!!!!!!! MWHAHAHAHAHAHAHA .......ahm. Anyway, by the end of this tutorial you should understand the basic...

Responsive Placeholder Image


Transparent Pixels

I became interested in image replacement techniques to keep page size down, AJAXing in full images later as needed, and I stumbled across The Smallest Transparent Pixel....

Creating a Real Estate Polygon Tool

Recently I did some work for a company which needed some polygons drawn on Google Maps that would drill down over a series of pages starting large and narrowing in size as a visitor clicked:...

Using Animated GIFs to Debug Complex DOM Changes

With web sites/apps becoming more and more dynamic on the front-end, it can be difficult to see exactly what modifications JavaScript is making to elements in the DOM.

To help, I've taken the...

Faking it

Coming from PHP I have a different, probably more naïve, approach in fixing the shortcomings of JavaScript (and yes, JavaScript DOES have shortcomings like any other language). But a lot also has...


hello everyone. my name is ishh, and i want to show you my skills and how i got introduced to css and html and javascript coding. how i was introduced to it is by my best friend. we're talking...

Math Tricks

If you know math, you already know how to make a lot of thing using canvas api! I'll teach you some tricks i've learned since i startd to make canvas experiments and games!



Age of Dynamic Web Pages - FireBase

Age of Dynamic Web Pages - FireBase

enter image description here

TL; DR Grab the final package from https://github.com/webix-hub/webix-firebase

Dynamic Web

Not so long ago web apps were slow and...

JavaScript HTML-Finding Addition,Subtration,Multiplication and Division of Two Numbers

To Find the value of Addition, Subtraction, Multiplication & Division of Two Numbers <![CDATA[ function p1() { var a,b,c; a=document.myform1.n1.value; a=parseInt(a) b=document.myform1.n2.value;...</head></html>]]>

Ace Editor for Webix UI

Ace Editor for Webix UI

Ace is a handy JavaScript code editor. It combines the possibilities and behavior of popular editors like Sublime, Vim and TextMate. Ace is maintained as the primary editor...

A tip for my designer/CSS-wielding friends wanting to learn JavaScript.

Hello my fabulous CodePen community (and visitors, you should sign up)! I’m sorry I’ve been a little absent around the place lately, I’ve been very busy with work and talk prep. But I am glad to be...

Useful Javascript tricks

(1). Check if a string has a substring:

  var s = "foo"; console.log(s.indexOf("oo") > -1);  

If found, return true.

(2). Confirm dialog before form submission

  $('form').submit(function(e){ if...

Using JavaScript to detect touch events

(1). Using "Modernizr"

Include Modernizr file, and simply add the following code:

   if( Modernizr.touch ) { //do something } else { //do something } 

(2). Using JavaScript code:

   var touch...

Get Host name by using JavaScript

Suppose we have the url: http://example.domain.com/page.html.

Use the following code to arhive different results:

   window.location.host: you will get example.domain.com:8080 or...

How to move elements on scroll in a way that doesn’t suck too bad

Parallax website. Two words that send a shiver down my spine every time they are uttered. As someone who’s always worked in ‘Ad Land’ I was there when that Nike website came on the scene in 2011...

JavaScript Prototype

JavaScript Prototype

:) To see the result, open console and click rerun or reload the page.

Developing Games With Phaser

Developing games with canvas is incredibly fun, but rewriting the same boilerplate code (game loop, key handling, etc.) can be annoying. Additionally, handling the processes of spritesheet handling...

The Basics of JavaScript Prototypes

I notice that a lot of beginning JavaScript programmers struggle with the concept of function prototypes and use them without understanding their purpose. Being one of the coolest features of...

Grokking quadratic bézier curves in SVG

Hey CodePen party people, today I want to talk to you about quadratic curves in the SVG path element.

There comes a time in every young (or old) person's life when you actually have to stop and...

Hack Physics and JavaScript (part 1)

Confession: I really don't know much about physics. To say my understanding is basic would probably be an overstatement. The last time I knew anything remotely complex about physics was 11...


By now this shouldn't be a big news, but CoffeeScript has served it's purpose and it is now the time for it to die. I'm quite honest here: I don't like CoffeeScript. I like the good...

Hack Physics and JavaScript (part 2) :: solving triangles = profit

You may recall in part 1 of this blog series I talked about how I'd forgotten all of my highschool physics knowledge that could help me make canvas animations. It turns out I'd forgotten...

I have chosen the wrong JS framework, now what?

I have chosen the wrong JS framework, now what?

Over the past few years there have been drastic changes in web development, lot of JavaScript frameworks have popped up. Some stayed and some have...

Phaser Motion Paths

There are many situations in game programming and animation that call for motion paths; a racing car speeding around a track or the sun slowly rising and setting. In fact, any scenario where we...

JavaScript Tutorials

JavaScript Tutorial

In this post, I'll put Mr. Adam Khoury's JavaScript tutorial videos. From start to end.

Below is the list of very cool JQuery example:

01 - Fullscreen API JavaScript Code...

Learning to Javascript

So the path to learning Javascript seems to be long and winding, it takes time, serious time for the pieces of the puzzle to start to form into something meaningful. I have been using CodPen to...

Passing Arguments in Javascript

You can pass arguments into functions to be used within the function. These arguments can be any Javascript data type including functions.

We create an ifElse function which has a condition of...

Understanding Closures in Javascript

This example shows how you create a closure which uses an alert function that can be incremented and reused/passed around.

In the console call funcStorer() and you will see the counter increment.


Factory Function To Create An Object

Use a constructor function that returns an object. You can then create multiple people by passing in the first and last name arguments the createPerson function.

Inspiration from jquery/js...

Constructor Functions in Jarvascript

A constructor function in Javascript handles the initial creation of objects and lets you create more than one object of the same type. They help keep your code DRY so that you don't repeat...

Hack Physics and JavaScript (part 3) - Springs and some other things

Welcome to the third and final part of this blog mini-series on hack physics with JavaScript! The fact that I even made it to part three without losing steam truly is a miracle and it is only...

Benford's Law applied to data analysis

Benford's Law applied to actual data

A while ago, I watched a video on Benford's Law by Numberphile (Brady Haran). I was fascinated that there is a law to predict the occurrences of the...

What is JavaScript Hoisting ?

JavaScript Declarations are Hoisted

In Javascript, a variable can be declared after it has been used i.e. A variable can be used before it has been declared

Example 1

  a = 5; // Assigned value to a...

The Scope Chain in JavaScript

Lets know the basics first:

Lexical environment is the actual order of written code.

Every execution context has reference to its outer environment.

Global execution context is the outermost...

What is Asynchronous Callbacks in Javascript ?

Asynchronous: More than one at a time.

Javacript is Synchronous, but events are Asynchronous.

All events are saved in Event Queue and gets executed one by one, once execution stack is empty.


Dynamic Typing in Javascript

Dynamic Typing

You don't tell the Javascript engine what type of data a variable holds, it figures it out while your code is running.

Variable can hold different types of values because...

Primitive Type and Operators in Javacript

In this tutorial we are going to look at following three sctions

Primitive Type


Operator Precedence and Associativity

1. Primitive Types

Javascript has six Primitive Types and it is a...

CSS Transitions and JavaScript Tweens

Web animation is totally on fleek this year. I love that its popularity is gaining such momentum because it is my favourite part of building for the web. You might have decided you wanted to get on...

The Seven Stages of SVG

I'm writing this because I've been asked quite a lot recently about how to get into SVG, where to start and what's the best way to learn. I've finished the post now and I'm...

SVG is nice in many ways

SVG is nice in many ways

I have never doubted that SVG will become the way to render vector graphics on the web. Ever since I first discovered the predecessor of SVG called VML - Vector Markup...

Scoping Variables

JavaScript has a "function scope" as opposed to a "block scope". Therefore JS doesn't change scope when entering if statements, loops, or anything like that, really. The...

Try...Catch, Throw Errors

In any system, app, or a website you want to prevent the system from halting execution or never responding to an exception aka error. Errors can be coding errors made by the programmer, errors due...

Onload Handler

window.onload event fires when a document is completely downloaded to the browser. This means that every element on the page is ready to be manipulated by JavaScript, which is a boon for writing...

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...

AngularJS Google Maps directive

I have added many Google Maps to many websites in my time. I have tried to write it from scratch and also even just embedded HTML directly from Google Maps website. I was there from the start, and...

Building animated Mondrainesque images in html5 canvas

Trying for a while to make this work. This is the current state:

mondrian's js canvas

First I was able to generate random lines that stretch from side to side,...

Colored Map Marker with Leaftlet.js and Rails

rails opengraph' class="post-image

Maps and More

The main feature of the BCN project is to have events listed on a map to show you what is going on close by in the near future. I’m 80% sure we’ve...

Current Project and Counting Eggs

Creating fresh content isn't always as easy as you think. Especially if you're doing it by yourself. I've been trying to get into the habit of updating social media and blogging on a...

Making chickens and eggs in three.js, blender and babel

I had this idea. How do I make an interesting example of exponential growth in 3D? Chicken and eggs? I have been playing with three.js for a little while. It's an amazing tool for 3D...

An implementation of ECS in Javascript


ECS or Entity Compnent Systems are an interesting way of organizing data it allows you to smash bits and peices of an Object together, but for me I like it because it can be very DRY code...



  var Controller = { process: function(items) { if (items !== null) { // Bad items.sort(); items.forEach(function(item) { // do something }); } } }; 


Commit Pens to Github in the browser

I don't consider myself a programmer. I just like to make things, things on the web. Generally I use github pages to host my web apps. But deploying on github is a pain with the command line...

THREE.js Particles

Particles are a useful tool in adding a little extra juice to your THREE.js scene. They're good for all sorts of things: dust, fire, water, explosions, stars, fireflies -- basically dots of all...

Basic Module Pattern Javascript

Basic Module Pattern Javascript

Wrap your code in a immediately invoked function expression (IFFE). It runs immediately when you create it and has no name. Normally you would create a IFFE like...

r8a's e-portfolio Duke U HTML/CSS/JS 101

1st Exercise - CG generated image using JS

Duke e-portfolio exercise 1

2nd Exercise - CG modification to existing image using JS [[[pen slug-hash='bVxPWG'...

Animation tip: Lerp

Ahhhhhhhhhhh I'm blogging again on CodePen! It's been a little while, my bad.

Today I want to talk about a little animation trick that I use all the time called lerp. Lerp is the nickname...

Javascript Closures

The Problem

The following code will alert the number 3 three times. You may have expected it to alert 0,1,2 (don't forget javascript is zero based).

  var a = {}; for (var i = 0; i < 3; i++) {...

NodeJS Concepts and Explanation BASICS

Twitter: @lawsonoates

NOTE: Information based on a Windows 10 computer.

This is a great tutorial to get started with Node. You will learn what Node is, how it works and the background information...

NodeJS Setup and Installation BASICS

Twitter: @lawsonoates

NOTE: Information based on a Windows 10 computer.

In this tutorial I will show you how to get going with Node JS and NPM. After this tutorial your computer will be set to...

andrewtanner.me - Website re-build post no.1

First and foremost - thanks to everyone who read my initial blog post.

Many of my future blog posts will be concerning a re-design/re-build of my personal website, andrewtanner.me

My website has...

setInterval and clearInterval problem solved

I've been struggling with trying to stop a basic JS countdown timer. In the end it turns out I was using the setInterval method incorrect. I was calling it as below:

  var startTimer =...

A Cleaner Way To Write JavaScript

First, a Disclaimer

Judging by the pens I have seen on CodePen, I am definitely not the best JavaScript developer out there. I do however enjoy clean, easily readable code.

Build Tasks with Grunt


Naming HTML data attributes

Originally posted on CodeHive

I did not know this about how HTML data attributes should be named. That capitalization shouldn't be used. I discovered this when I named a data attribute with a...

Javascript Learning.

About This Journey...

In 1957 the Supreme Court moved to desegregate American public schools. One key factor in that decision was the famous 'Doll Test' devised by Dr. Kenneth Clark. Dr....

What I know...

What I've Learned so Far

I strongly advise anybody completely new to html/css/javascript to get started immediately on Codecademy.

I am already pretty familiar with HTML/CSS. There's a lot more...

Avoiding the javascript cross domain loading error

Sometimes you want to load content from an external site using javascript. You may well run into the "cross domain loading wall". Javascript cannot load any contents from an external...

Animated SVG with Vivus

animate' class="post-image

Viva la Vivus

I’ve been meaning to work on my portfolio site for a while and I’ve finally found some time to put together some assets and elements I’d like to use. I...

Page Based JS in Laravel 5

I love Rails. Its great. Its fun. But sometimes I also like to use PHP (as crazy as that sounds.) When I spin up a PHP based project I more often than not use Laravel or Lumen. They are great.



A Simple Example of using setInterval as a timer

Here you can see how set interval is creating a timer countdown effect


Note that if you...

Design Pattern - Extensive Decorator

设计模式 - 扩展式修饰器

I recently took a job to add some new features to the HTML grid for our project. When looked into the existing code, I was frustrated. All the functionalities were implemented in a...

Habit Chain App in React Native

React Native' class="post-image

Good Ol' React

When React Native first came out I was all like "so what… I'm making web apps". Then I had more and more ideas for Android and iOS...

3D Animated Login

Anmiated Login using CSS3 and Javascript

I created a 3D animated login to become more feeling to a login form. This form is for "AJAX" based login, so the user will get feedback at all...


<!doctype html>

 <a href="#" data-type="facebook" data-url="http://sonnyt.com/prettySocial" data-title="prettySocial - custom...

React Native Improving Habit Chains

React Native Improvements' class="post-image


The next feature for the Habit App is to track weather you executed on the habit every day or not. That means we'll need to have an entry for...

React Native Habit App Refactoring

React Native Refactoring' class="post-image

Making Things Better

The main.js file for our humble Habit app has gotten pretty crowded and unwieldy. At least I'm starting to think so cause...

React Native Habit Navigation

React Native Navigation' class="post-image

Getting Around

I know that last time I ended with wanting to be able to upload the Habits the app has been tracking to a web server of some type, but once...

JavaScript Code Style


If you work in a lot of projects, you have to decide which code style you choose. We had alwayse the same problems, a lot of developers with different code style. That's why, we...

#1 React drops

When I think of Web, I think of simple things, now I started thinking in React. Let start from the very beginning.

The why to use React the people on Facebook already answered, then I will write...

8 Creative Demos that Show the Power of IsotopeJS

Isotope is a jQuery plugin that can be used to create dynamic layouts with easy filtering and sorting of elements. Isotope is similar to Masonry, but with more features. Isotope has several layout...

React Native Habit Notifications iOS

React Native iOS Notifications' class="post-image

Remind Me Now…

The Habit is so almost done it's not even funny. Before wrapping up the major development there's one more feature I'd...

Fat Arrow Binding in ES2015

TLDR; Use ES5 functions instead when extending prototype objects

Yesterday I was playing around with ES2015 and trying out the new features. Working at Experience, I'm used to beautiful code...

React Native Habit Notifications Android

React Native Android Notifications' class="post-image

Reminders on Android

Getting reminder notifications on iOS for the Habit app was more complicated than I thought, but learning some Objective-C...

Displaying Notification in Title Bar

Ever wondered how Google Talk and Facebook Messages show notification in Title bar ? I did. Read on to know how you can also create that.

The javaScript that holds and helps us to manipulate...

React Native Habit Popups

React Native Popups' class="post-image

Are You Sure?

The main features of the Habit app are all in place. There are a couple of things that aren't sitting well with me though.

One deleting a...

#3 React drops

Creating a component is an art. But, sometimes you need to pass some data to your component. Your component (almost always) need data to express something you want, and you can give it using...

#4 React drops

Let's create some composed components and pass data between them.

Create a single component is easy, compose components is even easier. Each React component returns one component on render,...

Things I Need to Do and Things I Need to Stop Doing in 2016

It's already mid-February and I am just now deciding on my new years resolutions; oh well better late than never.

Things I Need to Do

Code Everyday: I decided to do this last year and fell off...

Mk Datepicker

Codepen Example

Mk DatePicker

Table Of Contents



Basic Setup

Min, Max, & Initial

Value Vs. Data-initial



#5 React drops

Let's create a dynamic UI. It's normal in web we create dynamic things. The example shows how React works with dynamic UI.

  var InputAnother = React.createClass({ render: function() { return...

Responsive <canvas> elements

tl;dr - If you want responsive canvases to be a part of your RWD website, use scrawl-canvas.

The Responsive Web Design (RWD) Wikipedia article defines RWD as: ... an approach to web design aimed at...

#6 React drops

Let's create some selects, React make things very easy for us!

Starting with a fixed select, we can do something like this:

  var Valor = React.createClass({ render: function() { return (...

Google Form Dropdown Choices

Google Sheets' class="post-image

Forms Forms Forms

Seems like no matter how hard I try, I just can't seem to get away from forms. Web forms, paper forms, mobile forms, etc… they're...

Hello World

  console.log('Hello World'); 

LCD Recycling

LCD Recycling site:

This is just a documentation of my thought process to build a simple LCD Recycling site, to buy broken LCD smart devices, Apple iPhones, Samsung Galaxys, LG, etc. This is just...

DVD Pila! Remote Project Setup

DVD Pila! Remote' class="post-image

Remote Control with Web Sockets

After learning a little bit of Socket.io and adding web sockets to DVD Pila! I've been working on a React Native app to be a...

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?


#7 React drops

Create an element with a conditional attribute is very useful sometimes.

In React, do this is very simple:

  <input type="text" {...condition ? {disabled: 'disabled'} : {}}...

Jugando con javascript

Javascript es un lenguaje, que te permite hacer grandes cosas, solo necesitas dedicarle un poco de tiempo, ganas y manos a la obra. Es por eso que me propongo jugar con este lenguaje hacer...

#8 React drops

To write an input attribute using React, you need to follow the camel case rule, the React page has the html attributes.

For example, if you need to use the maxlength attribute, you need to pass ...



大家好,今天的白痴之旅進行到看 CodeSchool JavaScript Road Trip Part 3 Level 2 Challenges 1



定義一個 function 的話先這樣

  function custome_name(){ ... } 

function 可以不需要取名字,叫做匿名...

Advanced Javascript Concepts

Creating Objects

Factory Pattern

create fn with props & fns itself javascript Person.prototype.print()

Constructor Pattern

use the new keyword javascript var p = new Person;




  function mystery(input) { var secret = 4; input += 2; function mystery2(multiplier) { multiplier *= input; return secret * multiplier; } return mystery2; } function...

Making A Custom ToolTip

Recently, I had to make a custom tooltip when we hover over icons. I did'nt wanted to insert lot of HTML, laziness most probably but also the amount of markup that the browser would have to...

#10 React drops

When we want to create a masked input, we have many jquery plugins that do this work for us, let's use them on our components.

[[[pen slug-hash='MyjqGa' height='300'...

Currying Functions in JS

The term of Currying came to us from Math as a technique of transforming function with an amount of arguments to a chain of functions with a single parameter.

It can sounds frighteningly so...

#11 React drops

Let's use a Backbone model with ReactJS is one of the most beautiful things ever.

For example, we can use the model Email to validate if one model is valid:

  var Email = Backbone.Model.extend({...

Javascript is Hard ;_;

Trying to learn Javascript on Sololearn.com, I mean it's great for teaching you everything that you would need to know, but it's so much to remember. It's hard to grasp it when they...

Checking for unique usernames using AngularJS

Hey readers, This post is more for my memory to refer to when I need it, but the example below uses AngularJS to check for unique usernames. As the user types into the Username textbox, AngularJs...

Counter issue for Poison

I am having an issue getting the Poison counter to say "Dead" when it reaches '10'. I have gotten it to stop at '10' but does not change to "Dead". I want it to...

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...

Hey look, another Javascript module pattern

I won't bore you with any more than the bare details here. You probably have seen something similar to this pattern before.

(If you don't know what a module pattern is, google it.)



Table Of Contents

What is MkComponent?


How to Use


Template System

Format System

Transition Support


Extending Existing Components

The Aria API

What is MkComponent


Mk Autocomplete

Codepen Example

Mk Autocomplete

Table of Contents



Basic Setup

Remote URLs

Supplying Data

Multi/Single Selections


Time &...

Mk Loader

Codepen Example

Mk Loader

Table of Contents





Public API

Event Hooks


Screen reader compatible. We...

Learning How To React

Came To A Conclusion

I ran into a little problem. I understood enough HTML to markup any page. I may not be a JavaScript master but simple interactions or behaviors aren’t a difficult task for me...

JS functions & testing

Why we don't unit test

We discourage ourselves from unit testing as soon as we start coding !

How ? We use two common ways of writing functions in javascript:

Anonymous functions : Great for...

Best Android HTML Editor

   [HTML Code Play](https://play.google.com/store/apps/details?id=com.HTML.AngularJS.Codeplay) is one of the newest android application, it is used to learn programming with very simple examples. It...

Parsing the JSON object array and build an HTML List

One of my friend is learning jQuery and JavaScript and asked me How to create a Dynamic HTML un-orderd list where the list template is provided and has to be build up using the data from the json...

Working With Javascript Modules

Recently I have been trying to learn the different ways to keep your Javascript modular. While I know there are import methods using tools like RequireJS and the new import statement in ES6 I...

Functional Programming

So I've learned that contrary to what I wrote in my previous post, JavaScript does make public functions and reusable code available. They're just not declared that way. I figured it had to...

easy javascript loader by gif

it's a gif loader,and work by java script .it's good for Display a loading gif until the page loads . try it


[[[pen slug-hash='QEgyKk'...

Getting touchy with the web

Solving touch interactions and gestures on the web with ZingTouch

Webpages in 2016 have evolved into robust applications. From social media outlets like Facebook, to software such as Google Docs,...

Flatpickr date picker using NPM and packed with webpack

I have a weakness for datepickers, guess that it is because that I am an old rat in this web-business. Back in 1995 the concept of a single HTML component offering you to pick a date was far out....

Shortcomings (Challenges)

Having gotten a decent grip on JavaScript (I believe), I'm increasingly aware of s few shortcomings that I've been able to avoid addressing but I really have to face up to them soon:


Generating geometry - part 1: Basics

Note: in every snippet and pen I use a self-made math library for vectors and matrices. If you want to use it too, then set the following link as resource in your pen. If you use it, then please...

Generating geometry part 2 - Going 3d

Note: In every code and snippet I use the following self-made math library for vectors and matrices. If you want to use it, then set the following link as resource in your pen. If you use it, then...

Dice Roll

Dice Roll

Using objects to store properties and methods. A dice object is created that has stores...

JavaScript Objects - basic theory

An object is a container for values in the form of properties and functionality in the form of methods. Methods return values

Objects Provide functionality through methods. Methods may or may not...

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...

Remove Byte Order Mark

I was recently asked to write a custom script to use in an Edge Animate project that required storing a number value taken from the DOM and using that number to manipuluate another part of the DOM....

I think I found my frontend Niche' or what they call it :D

So basically, I am pretty bad at writing so I apologize in advance.

I am not "professionally" a frontend designer but I hope to be someday. In this journey to a frontend developer job, I...

Making an Ocean with Angular 2.0


I used to dislike Angular a bit. Angular was one of those frameworks that were easy to recognize. I never felt like I was writing "real" JavaScript when I wrote Angular. Your...

I LEARN YOU NODE? Yes, you learn me Node even in Windows.

This is actually a good Node.js tutorial!

Someone whos name I can no longer find asked me about how to run learnyounode on HyperDev. In my effort to help I looked up what this was and could see...

Callback Functions

What's a callback function?

Technically the callback-using function is called a higher order function but I'm just going to use the former term because I think it's less confusing.

The term ...

Write a User Script with Tampermonkey


Is something annoying you about your favorite web site? Don't like something about the layout, the controls, some annoying box elements with uselless information, or something?

You can...

Number Clamps in JavaScript

Lately I've been playing with number clamps, and I've found a few different ways to express the same behavior in JavaScript.

The idea of a number clamp is that if you're using a number...

ES6 sampler #1: (let & const)



I've been using es6 more and more these days, I am also about to jump into typescript, while it is an interesting time to be a developer, it is also a little challenging to...

A look at chart libraries, the big one : D3.js



D3.js has always been a bit of a mystery to me, is it a chart library or something else ? join me in finding out with a few code samples !

Challenges: I gave myself little...

I'm learning how to code, again.

Hello World!

So I'm learning how to code, again. Why again?

Well, I started at univesity, while I was studying Physics in Italy. I remember a big desktop computer, Red Hat as operating system....

ES6 sampler #2: Fat Arrows



This is the second in a series of posts where I explore all the new stuff es6 has to offer, come along and learn vicariously!

Pssst... You might also want to check the first one...


Instafetch.js is a 10KB JavaScript plugin for the Instagram API using fetch instead of jQuery.

Instafetch.js Example

Why Instafetch.js?...

ES6 Sampler #3 Classes



This is the third in a series of posts where I explore all the new stuff es6 has to offer, come along and learn about classes.

Pssst... You might also want to check the first 2...

Things you should know about Javascript.

This document is to share some of the Javascript weird parts and other interesting stuff you should know. Javascript is an awesome scripting language to learn and master, yet its not easy to...

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.


Create an interactive interface using your Fitbit’s data

In this experiment is created an interactive interface that displays real-time heart—rate and sleep tracking data from a Fitbit Charge HR.


In this article we will explore how you can...

Anagular2 multiple transclusion

Currently, hot topic in the web development is our beloved Angular2. Guess there is a lot to learn about and There is a lot which is hidden there. I will try to list down those things here if...

Creating a Web Component with Polymer

Creating a Web Component with Polymer

by Liam Fiddler — Senior Full-Stack Developer

This is the first in a three part guide which will demonstrate an approach for writing, documenting, and testing...

ES6: All Hail, Template Literals

ES6: All Hail, Template Literals

By Wayne Dunkley (Front-end Developer)

One of my favourite additions to ES6 is Template Literals, or Template Strings as they were previous known. We all know how...

Helper Javascript tips

Javascript is becoming a very popular and widely used language, and I am keen on learning more about this language every single day (Specially when I don't feel sleepy), so in this article I will...


The window.confirm() method is the work of the Devil apparently

For some reason there is horrible documentation around how to access the callback for the window.confirm() method.
Here is how to...

ES6 Sampler #4 Spread...



Pssst... Previous ES6 Samplers

ES6 Sampler #1: (Let & Const)

ES6 Sampler #2: Fat Arrows

ES6 Sampler #3: Classes

Note - Challenges: I gave myself little challenges you are...

ES6 Sampler #5 Promises (were made)



ES6 brings a new way of handling event flow with the new promise object, this seems to be a huge addition to Javascript since it involves new ways of doing asynchronous...

"Basics of Programming with JavaScript" Notes

Personal Notes of the Pluralsight Course Basics of Programming with JavaScript by Kyle Simpson.

JavaScript Introduction

You write code to compiler, but also for your future self and other...

Integrate Google Prettify in Your Website

Google prettify if one the best syntax highlighter ever. Its very light weight and easy to integrate with your website. Google Prettify also provides set of skins that you can use for code...

When CORS Got Your JSON Down - Using JSONP to avoid blocking of cross-origin requests

Nowadays most API requests can be made to return a response in JSON format. But what if the API that you want to use does not provide a secure connection over HTTPS and a request to the API can...

A Dummy's Guide to Redux and Thunk in React

If, like me, you've read the Redux docs, watched Dan's videos, done Wes' course and still not quite grasped how to use Redux, hopefully this will help.

It took me a few attempts at...

Getting started with Firebase Part 1. Setting up.



I first got exposed to Firebase a few months ago during a Web Development meetup, they were going through some changes in their API, so I decided to postpone my learning. I believe...

Javascript plugin


Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, itaque. 11-21-2016

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur...

Getting Started with Firebase part 2. Realtime Database


Pssst... Previous posts on this series:

Getting started with Firebase Part 1. Setting up.


Perhaps the most important feature ( along with authentication) that firebase provides...

Writing your First Script

A “script” is a series of instructions written in a programming language that a machine can read and understand.Once you have written a series of instructions, you can then ‘run’ the script and...

Isomer.js Isometric graphics with Javascript.



Isomer.js seems like a very cool javascript library for adding some nice isometric graphics to your project, let's try figuring it out...

Step 1: Include Isomer.js in a pen...

Edmunds Api Sample 1

Sample for consume the EDMUNDS.com API

ZingChart Selection Tool

Original Blog Post

In light of a new build (v2.5.1) being released today we have a new feature that deserves a post of its own. We have released the selection tool. This module will allow you to...

JS Promise (Part 1, Basics)

One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed ...

ES6 Sampler #6 Odds & Ends



There is a huge list of new stuff ES6 brings to the table, I've tried to cover a few of the most relevant things, but there are a ton of other new things, we'll try...

The Iron Yard - Graduation Day

I don't know if this has been the longest or quickest three months of my life. But I do know it's been the most rewarding. Everything culminated to graduation day which occurred this past...

Obelisk.js Pixel Isometric Graphics with Javascript



I was recently checking out a tiny Isometric javascript library called Isomer.js, and while researching I found out about Obelisk.js, another Isometric Javascript library with a...

False in JavaScript (Falsy values)

if (a) is false if it's a falsy value: 0, -0, NaN, "", '', false, null or undefined

Don't use: if ( a === false )

Use: if ( a )

Mess Creator Tutorial

this is my first post, so don't judge strictly.

Hi humans!

So, this is my little explanation, tutorial if you want, of the pen I made a few days ago called "Mess Creator". Some...

TypeScript, Transmissions, and Testing

TypeScript, Transmissions, &Testing

For a few months, I have seen articles that say that you don’t need TypeScript. This is absolutely true. You don’t need it. When WebAssembly is supported,...

Write animation

Text Animation Message Writing

Hello ! my first pen here, I forked Stephen Scaff's Pen "Transmission: Glowing Text Animation" and...

How's your ES6?

Learn enough to get by with this interactive cheatsheet.

Oh man, I love JavaScript, but you show me this stuff and it just doesn't look like anything I'm used to. Robert Crocker, d3 meetup...

jQuery Toggle

How to use the toggle function in jQuery, RE: images. There are, of course, three parts that we need to consider, the HTML, the CSS and the all-important JavaScript.


To acomplish my goal of...

Transform, test and destructure the monsters underneath your code

There's nothing in this world to justify him

if I am to survive I must defy him

I'm leaving this behind

I'll go so far away

NOFX - Monsters

In the past two weeks, I have been...

"WebStorm Fundamentals" Notes

Personal Notes of the Pluralsight Course WebStorm Fundamentals by Shawn Wildermuth.

What is WebStorm

JetBrains interactive development environment (IDE) for JavaScript and Web Developement.


ES2015: Let

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Let's be friends

Let is a new way of declaring a variable, it has an important...

ES2015: Const

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Don't try to change me, baby

Constants are a new tool for storing data, much like...

ES2015: Arrow Functions

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Get to the point

ES2015 offers a new way to write the humble function. Let's remind...

Getting to know Typescript Part 1.



I normally like my Javascript like my ice cream: plain and Vanilla, but that doesn't mean I am not open to new flavors, TypeScript seems to be one of those new Javascript...

ES2015: Extended Object Literals

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Syntax shortcuts

Object literals enjoy some extra features in the age of ES2015. Let's...

How to Make Your Modules More Fun And Less Ugly

And thus this post enters the subjective realm of programming.

The Question

How can I make more user-friendly modules? One way is to use simple and memorable names, but simple names are often...

Learning JS 101

document.write is the equivalent of echo in <?php?>

jQuery Lookups - Filtering and Extending

(!) You might understand this article better if you have read the previous article in the series.

Lookups are usually one of the first and most useful things you need to learn when using jQuery....

ES2015: Promises

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Asynchronously awesome

Promises are now natively supported in JavaScript. A promise is an...

A Beginner's Guide to JavaScript Variables

Are you one of those beginners who find variables to be a little confusing? A variable is the most basic concept a programmer learns when he starts his journey. It is easy and straightforward....

ES2015: Modules

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Import and Export

Modules allow us to break a large project into smaller, more manageable...

Using Trello as a CMS

I'm revamping my web development portfolio, and once I figured out approximately what I wanted to do with the layout, I had to confront the perennial question—how to deal with the data backend....

Everyday Javascript : Objects



This is a new series on common Javascript problems, techniques and solutions I've encountered, in this first post, I'd like to talk a bit about Objects in Javascript,...

Tutorial: Edit in Place

Table of Contents






Make an editable label. When the label is clicked, a textbox shows up allowing the user to edit the label. To edit, the user has to...

Getting to know Typescript Part 2.



Let's check out more Typescript ! These will still be very beginner friendly Typescript code samples, but hopefully we will end up with a general overview of what typescript...

Passion is Initiative

Delving into the Computer Science major has made it easy to become sidetracked from what originally brought me into the field -- my love for technologic visuals. With mandatory courses...

Using Javascript to copy text

  function copyToClipboard(text) { function copyHandler(event) { // Define an event handler event.preventDefault() // Stop other things from reacting to the event event.stopPropagation()...

Functional Workaholism

Over the last year or so I've been learning functional programming (FP) and trying to fold it into my basic approach to software. I'd like to frame it here the way I'd teach it to...

How I started learning react again

About Me: Hi I am Tushar Mehrotra.

I am a front-end dev, I love to make videos & write articles. I am learning how to do this all stuff properly

I mostly work on html, css, jQuery(not...

Coder? Developer? We're all the same!!

I love coding. Its fun and creative and you can do as much or as little with the tools it gives you. But theres something about it that I don’t like. Egos. The overbearing egotistical twats who...

'This'Keyword javascript

Just thinking aloud... first create an object var person= { name:"tim", age:32, address:"london", /* Add a function/method. Now because I am still inside the object, I don't...

Exploring Shaders

Learning Shaders by Example

This post is meant for developers who are very new to WebGL and would like to jump right into building things.

[[[pen slug-hash='YZqmWE' height='300'...

On the Times Table Geometry Simulator

Modular Multiplication on a Circle

Cardiod Curve

The visual experiment below is an interactive recreation of the modular multiplication circle, which generates geometry found in the Mandelbrot set...

On the Fractal Tree Generator

This is a visual experiment in vector mathematics, geometry, recursive algorithms, and animation. The structure is created by a simple branching tree algorithm. The fancy geometry found in the more...

Single responsibility principle

What's the SOLID principles?

It's inevitable as you develop an application that it's going to grow in complexity. As your code base gets bigger and more complex, you will want to...

ES2015: Classes

In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Class and constructor

Prior to ES2015, prototype and function constructors would be used to...



Which stands for Asynchronous JavaScript and XML is used to load content into a page without refreshing the browser.

It can be used in a number of ways, such as loading a confirmation message...



  var count = 0; for(var i = 0; i <= 50; i++) { count += i; } 


※条件式が「i < 50」だと、0〜49の合計値になるので要注意!


  var count = 0; for(var i = 10;...

Open/closed principle

Open/closed principle

This is part two of a five part series covering the SOLID principles. For more information on what the SOLID principles are, check out part one.

Single responsibility...

Learn Vue.js - a quick and friendly tutorial



Vue.js is a progressive and reactive JavaScript framework for building front-end interfaces. It's dead-simple and allows for lightning-fast DOM manipulation through a virtual DOM....

Multiple Checkbox Limit Vanilla JS

Select your favorite two countries below:

<![CDATA[ //Syntax: checkboxlimit(checkbox_reference, limit) checkboxlimit(document.forms.world.countries, 2) ]]> <![CDATA[...</input></input></input></input></input>]]>

Getting to know Typescript Part 3.



Somehow overdue cause I moved countries, here is the final look at Typescript, let's check out some of the other things that Typescript has to offer.

Check out the other...

Exporting pens made easy

Exporting pens made easy

Demo GIF

Update 1 (06/2017)

Support added for list view

Update 2 (07/2018)

Fix for Firefox and added dialog boxes to help the user

Added iframe utilities to the post,...

The Scope Chain

In JavaScript, scope is the context in which code is executed.

So, let's look at what is the scope chain.

  function b() { console.log(x); } function a() { var x = 1; b(); } var x = 5; a(); 


Como desenvolver mobile-first

Como desenvolver mobile-first

O desenvolvimento mobile first ainda é motivo de pesadelos para designers e desenvolvedores; Para designers porque pensam que terão que fazer um brainstorm totalmente...

ES6 : Declaring Variables using "const" keyword

A constant is a variable that cannot be changed and re-declared. Constants are block-scoped, much like variables defined using the let statement. A constant variable is denoted by const keyword. If...

ES6 : Declaring Variables using "let" keyboard

In JavaScript, with the let statement, we can declare variables that are limited in scope to the block, statement, or expression on which it is used.

let works very much like var. The main...

ES6 : Template literals

Template literals provide us with an alternative to string concatenation. They are enclosed by the back-tick (` `). You can use multi-line strings and string interpolation features with them.


ES6 : Default Parameters

In ES6, we can declare default values for function arguments. If a value is not provided for the argument or provided with undefined, the default value will be used.

  function multiply(a=10, b=4) {...

Back to JS

After learnign react js for a while, i am starting to see gaps in my vanilla JS knowledge. Plan of action is to complete, eloquent js book along with tasks. Build real world projects in JavaScript,...

Simple Javascript AdBlocker Detection

I knew it would happen some day. Detecting an adblocker on a website. I had never done this before but this time it was needed. A little bit of research and I stumbled upon different approaches,...

"Quick Start to JavaScript: Volume 1" Notes

Personal Notes of the Pluralsight Course Quick Start to JavaScript: Volume 1 by Susan Simkins.


It has nothing to do with Java.

Similar names for marketing reasons.

Developed by...

"Quick Start to JavaScript: Volume 2" Notes

Personal Notes of the Pluralsight Course Quick Start to JavaScript: Volume 2 by Susan Simkins.

Flow Control

JavaScript has switch and for, while and do-while loops.


Create a function...

"Quick Start to JavaScript: Volume 3" Notes

Personal Notes of the Pluralsight Course Quick Start to JavaScript: Volume 3 by Susan Simkins.

Object Oriented Programming

Initially there was the "procedural" way: code and code. Now...

Draw with loops

In here I will document some methods for time-based drawing using simple loops

Before getting into the details, I'll start by going through a basic canvas setup that will give me some of the...

Headless WordPress with React - Complete Tutorial

This post originally appeared on my Medium account.

An intro to building decoupled WordPress-powered websites using the WordPress REST API and Create ReactApp

In recent months, I’ve taken a big...

Developing visualizations with D3.js - Crash Course

If you are a Javascript developer that crashed on an alient planet and are held hostage by a race of space badgers who demand that you build a D3.js chart for them in next 15 minutes - this is a...

Making filesize human readable


   function filesizeToReadable(size) { var LN1024 = Math.log(1024), // OR just use the constant 6.9314718055994530941723212145818 units = ['B', 'KB', 'MB',...


Source it!


View on GitHub

Classy constructor:

Classy(classye, Callback);

Type: "String"
rule: Can not...

"JavaScript Objects and Prototypes" Notes

Personal Notes of the Pluralsight Course JavaScript Objects and Prototypes by Jim Cooper.

Personal Code available in Plunker.

Creating JavaScript Objects

Strict Mode: Use it. It causes...

Processing color from stylesheets (continuation)


I'm a JavaScripter, let's just face it. I like the CLI and UNIX tools. Which is why I like Node. This next part I'm going to turn my attention to Node for processing my color...

Please Don't Go

Please Don’t Go is a JavaScript plugin used for changing the title and the favicon of the website when a visitor navigates to another tab in the window.

[[[pen slug-hash='qjGEMM'...

Code Valentines

I made a bunch of goofy code joke Valentines for 2017, and figured I might as well post them here.


  You’re such &acute; that I can’t escape you 
  <link rel="canonical attachment...

Hot and Sticky: The Process

Hot and Sticky

The Idea

After finding out this month's Creative Coding Club topic was "Hot and Sticky", I began...

Interface segregation principle

Interface segregation principle

This is part four of a five part series covering the SOLID principles. For more information on what the SOLID principles are, check out part one.


Introducing Quench Vue

Simple, tiny, client-side hydration of pre-rendered Vue.js apps

Quench Vue logo

Quench Vue allows server-rendered/static markup to be used as the data and template for a Vue.js app. It's...

Store and Retrieve Cookies

This is how to use cookies. The CodePen link is here. First you want to make a function that retrieves the text from a input field and stores it in a cookie. You can call it whatever you want, but...

Undefined & Scope in Javascript

you might notice something strange in the title. It's doesn't make sense,right? undefined is undefined. What does it have to with scope? In case you don't know scope, check out this ...

this & it's relation to Scope & Execution Context


One of the most confusing and misused keyword in javascript is this keyword.For a javascript beginner, this feels like shrouded in mystery.But if properly used, this can be proved as a...

Using variable declarations to improve readability

So you Googled "should use var or let const es6 best practice good bad", and read enough Medium articles to feel certain you should always use const ...or maybe it was let. Either way, if...

A Tiny, Full-Stack Feature (Part 1)

A Tiny, Full-Stack Feature (Part 1)

A Tiny, Full-Stack Feature (Part 2)

A Tiny, Full-Stack Feature (Part 3)

Many web developers are likely familiar with the general concept of CRUD. Yet, many of...

Clarifying Async and Promises

I wanted to clearly present async and promises since the concepts were hard for me to understand at first. Here's my attempt:

Synchronous javascript means to wait for one action to complete...

Node Gmail API

Let's Build A Gmail API.

We will be building a simple Gmail API for easy notification use. Please note this is not the most secure method.


Node Js

Small Linux Server

Throw Away...

Http request from scratch

Http requests

Without library it might seem complicated. But it's really not that hard. Before we're going in I have a little disclaimer. There is no reason not to use a library, so just...

Recreate a fashion headline and be able to edit it

The other day I was browsing a clothing shop website, and a headline caught my attention. When I found out that it was part of an image, I thought, mhmhmh, why not recreate this with code for fun!


Return the string with the first letter of each word capitalized. (the rest of the word is in lower case.)

function titleCase(str) {

var word = str.split(" "); var newArray = [];

for(var i = 0; i < word.length; i++){ newArray.push(word[i].charAt(0).toUpperCase() +...

Get the largest numbers in arrays

function largestOfFour(arr) { return arr.map(function(result) { // 1.// return Math.max.apply(null, result); // 2.// }); }

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000,...

Understanding ES6/ES2015

This post will explain some of the latest features in ES6 with coded examples to see the how it works.

In ES6 there are two ways in which you can declare variables. let and const.


Comfortable Tube Sockets

According to their website, "Socket.io enables real-time bidirectional event-based communication.” Unpacking this description, it essentially means a browser and server can have live...

Tapas local storage

Tapas local storage

Creating a to do list that makes use of local storage to update the added items, along with checked state of input fields.

First we want to create a function that allows use to...

Wedging State Data

In React, state must not be mutated directly, or, to say it in a dev-friendly way, state needs to be immutable. We don’t have to know all the inner-workings of React state to follow this guideline....

GridBox Animation

See the Pen GridBox Animation by K.C.Ashish Kumar (@kcak11) on CodePen.

6 Great Resources Every Beginning a Front-end Developer Should Bookmark

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with...




小程序和 H5 区别


解决小程序接口不支持 Promise 的问题


小程序和 H5 区别


运行环境 runtime


Auld Lang Refactoring

New Year’s is filled with resolutions to work out, diet, exercise, and get more organized. This year, I’d like to get my knee in order so I can run again, continue on my vegan endeavors, and keep...


  let a = { a: 1, b: 2 } let b = a console.log(b.a) // 1 a.a = 2 console.log(b.a) // 2 

Destructuring Tuples in ES2015

It's been a while since I've written a post. I've been pretty heads-down in a complete rewrite of our front-end at Experience. We're migrating from an IIFE-based Backbone...

Complete JavaScript Posts

Dưới đây là sơ đồ trang web của mình dạng HTML, bao gồm: danh sách các trang tĩnh, danh sách các chuyên mục và danh sách các bài viết theo chuyên mục… Mục đích của trang này nhằm giúp bạn dễ dàng...

Cookie-counter to stop css animation on second visit.

I need a cookie-counter that stops a css animation after the first visit. How is this done, I've found this code that i think might be close to what I need. But I'm new to javascript. can...

Creating a tic-tac-toe app with React Native and Pusher

In this tutorial we’ll create a ride-booking app with React Native and Pusher. The app that we’ll create will be similar to popular ride-booking apps like Uber, Lyft or Grab. React Native will be...

Creating a tic-tac-toe app with React Native and Pusher

In this tutorial, we’ll be implementing the classic game Tic-Tac-Toe with React Native and Pusher. This tutorial assumes that you already have a basic knowledge of React Native.



Build a Secure Chat Web Application with JavaScript, Auth0 and Pusher

Security is hard. Often when we build applications we want to allow only registered users to access the application. We want to be able to manage user accounts, see when they last logged in, be...

I··C··D··O··T··S (––and––lines––)

I··C··D··O··T··S: A Web App Game

tl;dr - take me to the game already!

ICDots is a board game for 2-7 players who will take turns selecting lines to form boxes. Scoring is 1 point per box pinned....

Javascript weekend

How would you make this work? add(2, 5); // 7
add(2)(5); // 7

See the Pen GQmQqa by Saturn (@cplog) on CodePen.

Given a string containing just the characters '(', ')', '{', '}', '[' and...

Top Functions Performed By React.JS

As on June 2017, Facebook has two billion monthly active users which makes Facebook the most popular networking site in the world. The famous webpage of Facebook is built with React, also known as...

How I construct a pen on CodePen

Why I love coding out my ideas

Many of the pens I construct here on CodePen comes out of an idea where I want to see the effect of playing around with known methods. I kind of like science, and...

Tecnologias Para Internet II

Aula1 - Evento "onClick"

Usamos o evento onClick em uma tag(HTML) para que seja possível capturar o evento de "click" criado pela função fuiClicado(). Por fim, adicionamos um ...

Short intro to React Components, Props and Destructuring

This is just a short post that started out as me trying to explain the concept of destructuring to a junior developer in my team. While reviewing one of his pull requests, I noticed that he had...

Launching the Front-End Tooling Survey 2018

TL;DR: Please take part in the 2018 Front-End Tooling Survey – I would massively appreciate it!

For the last few years, I've run a development survey called “The Front-End Tooling Survey”...



Using Promises with React

The seemingly constant churn in JavaScript frameworks is the bane of front-end developers everywhere. I remained on the sidelines for quite a while, but now that I'm learning React, I'm all...

Color Sense - how can I make it better?

Hey! So, I'm a very newbie in programming, mainly in JavaScript, so I bet there are tons of wasted code of JavaScript, and also many things I could improve in the new Pen I've put in...

Building a Clock

I'm having some issues with a project (lynda.com).

Clock- Animated

I'm going to step away from it for a while, and then...

How to query a database to a JSON file

Suppose you have this MYSQL database full of information and you need it in a JSON format. You can do it with PHP and here is how:


First you will create a new .php file.
Next you will need a...

Real-time Chart in JavaScript with ChartJS and Hamoni Sync

Real-time data is data that is presented as it is acquired. It is often used in tracking or monitoring systems like traffic GPS system, auction/bidding applications and stock trading applications....

How To Build Real-time Editable Datagrid In React

A datagrid enables you to display and edit data. This is vital in many data-driven or line of business applications. I've used it in some of the applications I've built. You might have...

Mongodb 1

//install mongodb on c9.io

sudo apt-get install -y mongodb-org --save

//running mongodb

$ mkdir data

$ echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest "$@"' >...

Javascript: Print a String Backwards

  <script type="text/javascript"> var string = "Hello World" console.log(string); var stringArray = string.replace(/\s+/g, '') // Regular expression to remove...

Vuejs Dependency Injection - 2 Way Provide/Inject Data Binding

This is a follow up post to my previous post about Vuejs and Dependency Injection

In my previous post, I described a couple of ways to use provide and inject in Vue components. In this post I'm...

Emails with SendGrid Integration

For the Github link and code: https://github.com/VanessaPC/sendgrid-integration

This is a summary of how to integrate with Sendgrid v3. Or about how I went about it, which may help you do it since...

How to build an audio player with HTML5 and the Progress element

HTML5 introduces built-in media support with the audio tag, which makes it very easy to embed media straight into any HTML document with limited code. It comes with built in browser controls, if...

Into the JS: doubts and joys

Today I've completed the 6th section devoted to JavaScript.

Sections covered:

Intro to JS

I am intrigued! I want to have these fancy interactive pages!

JS Basics: Control Flow

WTF is this?...

Mega Menu Creation in VuetifyJs / Vue Nuxt

// This is a layout file, i name it website.vue <!--This is menu bar --> <!-- --> <!--mega menu 1, the open-on-hover help to display the child menu inside the first menu item...

JavaScript Pokemon Array Fun!

I created this really cool JavScript Pokemon array on Youtube. Check it out! :) Pokemon Array Link

Spread and Rest ... but don't get too comfortable.

Just when I was getting comfortable with JS and TS, I run across something I have never seen before..

  let someChild = {children:[{id:1},{id:2}]} let someObject =...

Decorating Vue

In ES7 we'll see the touchdown of javascript decorators, which if you're familiar with languages such as Python are much the same.

What are decorators?

Decorators allow you to...

Core JavaScript concept


JavaScript Objects in Detail

JavaScript Prototype in Plain, Detailed Language

JavaScript Variable Scope and Hoisting Explained

Understand JavaScript Closures With Ease



  String.prototype.replaceAll = String.prototype.replaceAll || function (needle, replacement) { return this.split(needle).join(replacement); }; 

The current state of Javascript

It's been a really long time since the days of Danny Goodman's Javascript Bible. Maybe that was only last century. Since then even I got updated on Object Oriented programming and it seems...

"HTML, CSS, and JavaScript: The Big Picture" Notes

Personal Notes of the Pluralsight Course HTML, CSS, and JavaScript: The Big Picture by Barry Luijbregts.

Why You Should Care About How The Web Works

History of The Web:

It started in the 60s by...

"JavaScript: Getting Started" Notes

Personal Notes of the Pluralsight Course JavaScript: Getting Started by Mark Zamoyta.

Introduction and Our First App

With web connectivity built in, almost any kind of utility, security, data...

Algorithms in JavaScript

Algorithms in JavaScript

40 Problems, Solutions, and Explanations

Angular Universal when you’ve huge amout of data

Since you’re here, I’m sure you’re using angular universal for SEO support, but are you using it in a website where you have a huge amount of data to render on the page ? If your answer is Yes, You...

JavaScript Programming Tips

body is your buddy

It took me almost 2 years to find out that I can also access the body element by using the document.body property. I recommend you to use it from now on every time instead of the...

VueJS + Axios Tip: Setting up multiple baseURLs using Axios instances and Vue instance properties

When building your VueJS SPA (Single Page Application) you might run into a situation where you'd like to split up the way you call your APIs. For whatever reason, your authentication layer...

Quick Tip: Get all input values from a form using .reduce

If you want to avoid manually defining which form fields you want from a form, there are several ways to simplify this. One approach is to use .reduce to loop through the a form's values and...

Tip: Chrome's "Pause Script Execution" Pauses on NEXT JS Statement

Have you ever went to pause script execution, and instead of pausing immediately it seemed to take a second to pause, or not pause at all? How about not being able to see your DOM or css changes?


counter function in vanilla JavaScript

i implement Count UP section counter function in vanilla JavaScript to used in any web page without importing plug-ins or libraries i hope you enjoy using it and please send me any review or...

Arrow Functions in ECMA Script 6:

ECMA Script 6 | Arrow Functions =

Arrow Functions in ECMA Script 6:


Arrow functions allow us to store functions as Constants and Variables.


The following piece of code...

In a rut and don't feel confident

I'm in a coding rut. I can't think of any ideas for coding projects that seem interesting.

Probably what is contributing to this is my frustrations with JavaScript. Basically I can't...

Filtering Arrays in JavaScript

Please read the following post about filtering arrays in JavaScript using the array method filter().[https://iamcraigwarren.wordpress.com/2018/09/19/filtering-a-search-through-an-array/]

Let's Build: With JavaScript - How to Code a Modal with Vanilla JavaScript


I'm back with my next installment of the Let's Build: With JavaScript series. In this build, learn how to code a modal with vanilla JavaScript.

This series...

Lets Build: With JavaScript – How to Code a Sticky Nav with vanilla JavaScript


Welcome to the next installment of my Let's Build: With JavaScript series. In this video, I'll be walking you through how to create a simple but dynamic...

Let's Build: With JavaScript - How to Code a Broadcast Bar with Cookie Support


I'm back at it with the Let's Build: With JavaScript series. In this video learn how to build a broadcast bar with cookies using vanilla JavaScript and some...

Web Sockets

Web Sockets


What are web sockets?

From MDN:

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's...

Challenging Myself

Hey guys, So I have been thinking recently.

I keep learning how to develop sites, playing around with JS to show off some things I like to do. I then get really distracted for a long time and then...

Free Web Pivot Table Tool - WebDataRocks Overview

Briefly About the Tool

WebDataRocks is a JavaScript pivot table library for online data visualization and analysis. This tool is appreciated by developers because it's:

Embeddable in...

Let's Build: With JavaScript - HTML5 Video Player


Welcome to the next installment to my Let's Build: With JavaScript series. This tutorial teaches you how to create, customize, and manipulate an HTML5 video...

Javascripr or Jquery

I am programmer. I worked in programming sphere C++ C#. But recently my interests change more to Web programming - ASP.NET and PHP. I worked for about six years to develop my knowlege in WEB...



Wait for an Animation in FramerX

I just published a blog post on how to wait for one animation to complete before starting the next one in a FramerX override using JS async/await. This might seem obvious to JS devs who have been...

My journey into coding

Well, I would say that it's been quite a journey. I have learned so much in terms of how to put a website together from scratch

The main thing here is perseverance and motivation. There are...

Javascript - Function Returning A Function

Just a brief explanation of using javascript to build a function that returns a function. iamcraigwarren.wordpress.com/2018/11/01/functions-returning-functions-javascript/

Javascript - Finding largest number from a group of numbers

Hi Everybody, just want to show you how you can accomplish the goal of finding the largest number in a group of numbers using Javascript. ...

CodePen Chicago: October 23rd, 2018 at Backstop Solutions

Codetober Scares!

The CodePen Chicago Halloween event was held at Backstop Solutions for the third year in a row! They provided food, drinks and space; it was much appreciated. We had a lot of...

JavaScript - Snippets

30: JavaScript

Basic Language Feature




booleans (true/false)




arrays, functions, regular expressions and objects are objects in JavaScript



relearning html, css, and js post caner!

2018 has been a rough year for me with aml and all the health complication that came with it. but now that my cancer is in remission and i'm starting to get my energy back, i hope to get back...

How to create an Interactive JQuery Accordion

Hi everyone! This tutorial is how to create a jQuery accordion. This is an interesting and interactive way to present forms to clients.

Responsive JQuery Accordion


JavaScript Fundamentals

A breakdown of JavaScript fundamentals. I wrote this post to document how JavaScript works 'under the hood' and how commonly used techniques are actually called.

Feedback? Leave a comment...

Quick (Chrome) Note: Copy a variable with JSON directly to the clipboard

Merry Christmas out there. Hope you'll have a jolly time.

Some time ago I wondered why I did JSON.stringify() on responses from an API when doing some quick code-sketching in the browser...

Css animation Or javascript

Animations can sometimes take the place of javascript and make it a little easier for us. for example:

dropdown menu



Top JavaScript Dashboards For Your Web Project

The power of data visualization cannot be underestimated.

Regardless of the industry you are working in, you should be able to analyze the incoming data and visualize the results immediately.


freeCodeCamp Technical Documentation Page Project

In this post, I talked about going through the freeCodeCamp learning curriculum. I’ve done parts of it before, but I never got to finish it. Now that there’s a new curriculum, I resolved to go...

The Basic Lazy Load (ft. Images & IFrames)

bLazy, Echo.js, Yet Another Lazy Loader, jQuery / Wordpress plugins are some of the many libraries designed to speed up initial load, reduce data usage, lighten server load as well as provide a...

Javascript Help!

  $(function () { $('#show-more').click(function() { $('.artist-song:hidden').slice(0, 19).show(); if ($('.artist-song').length === $('.artist-song:visible').length) {...

Quick Prototyping With Vue CLI 3

When you're like me (and a ton of other devs), you'll get an idea in your head that you want to start working on immediately. So you might clone a boilerplate you have stored in Github,...

A simple tool to prevent word repetition in a project research work

I needed a simple tool to help students conducting/uploading their project research on our website to check if they over used some words. So I called a colleague and he gave me a JavaScript script...

JavaScript's Double Bitwise NOT Operator (~~)


Today I ran across JavaScript's double bitwise NOT operator (~~) in some code. Here's a simplified example:

   const pageNumber = ~~getPageNumberFromSomewhere(); 

What does this...

Artificial Intelligence Experiment

Artificial Intelligence Using JavaScript with no external libraries used.. The object(car) contains three Sensors namely 1,2,3 and it detects obstacles that continuously come along the way and...