Posts tagged js

Changing Behaviour With Media Queries...

... and a little JS

Recently I found myself with a conundrum. I'm in the process of a major overhaul of our company site, turning the old (IE6 compatable) markup into swanky new responsive...

CSS Transition Height Fixed-Auto The Easy Way

The Problem

CSS transitioning height (or width) between a fixed value and the block's auto size currently doesn't work in most (all?) browsers. However CSS Transitions are faster, easier,...

Writing a generic event handler with data attributes and a simple JavaScript method

I'm currently working on a project to write 100s of unqiue, internal web apps to live inside a common framework. Each app has completely different features and functions, but all share...

Bring JSON data to your Pens or How to build Data Driven Web Components in CodePen

I love web development, and CodePen. CodePen is awesome because it lets you thrash out ideas REALLY quickly - its great for getting your ideas into code without fussing about environments.


Google Fonts

All you need to do is...

Create a list of your favourite Google Fonts in a pen

Save it

Grab the .js url

Paste the url into another pens External JS File input

Add class name of the font you want...

Fun with fullscreen

I had to do a little research into the HTML5 Fullscreen API for work this past week. I ended up creating a couple utility classes that I thought could be shared.

I needed to manage the visibility...

Tabbed Navigation with React

This is super basic, but I think the concepts here might help someone just starting out with React (as I am).

In this example, I'm going to create a very basic (nigh unusable, but a good basis...



  (function(ua,message){ //引数に検索したい文字列を入力し、UAに含まれていればtrueを返す function J(a){return ua.indexOf(a)>0;} if(...

Rainyday customized !

Err... Well.. Let's talk about slippin Jimmy ;)

I wanted a hand door for my house with the date and time on it, hehe it's done !

testing moving css div with php time and icons


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

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

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

Зважені та щасливі

Знаменита вага з передачі "Зважені та щасливі"

Зважені та щасливі

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


JS output

To display data using JavaScript...







  <script> alert('Hello World'); </script>...

JS variables

Variable names




dollar sign ($)

cannot start with a digit


Assignment operator (=)


  var name = prompt('What is your name?');...

JS data types

In JS, data types can change


With or without decimals


A collection of characters

Put strings in quotes


Value that is true or false


E.g., A node in the DOM



JS operators and expressions


+ (concatenates to string if string + number)




% (e.g., 13 % 5 = 3)





!= (not equal to)





=== (equality with type)


&& (AND)

|| (OR)


JS functions


Functions are reusable. Use them like that.

  function functionName(parameters) { code you want to run; } 


  var x = 'Hello'; welcomeMsg(x); x = 'Goodbye';...

JS placement and organization



Need to use <script> tag

Still need to call the function in the body


Need to user the <script> tag

external file

Need to link to the external...

6 Atom Packages every front end dev should have

Atom from Github is rapidly becoming the text editor of choice with front end developers nowadays possibly because it's been developed with technologies we are familiar with such as HTML, CSS...

Generative Backgrounds with SVG Paths

It seems that any solo game designer will eventually realize that they can't do everything well. An army of one is still just one, and one usually can't produce a game that matches a team...

this in JS

this is a keyword that allows an element to reference itself. Every object in the DOM has an automatically generated this.

  <img src="https://image.jpg" alt="Example image"...

Homework - Photo gallery

HTML & CSS from Codepen pen

  background-image: url("imgName.jpg"); // this background-color: #cec; 

Element text document.write() innerHTML

Avoid using quotes on the RHS

Notes - Code...

JS arrays


An array is a collection of values

Arrays contain elements referenced by an index (starting at 0)

Elements in an array do not have to all have the same type

Have attributes and methods


JS loops


Accessing all the data in an array with iteration

for loop

  for (j = 0; j < array.length; j++) { //These steps are repeated 

Example for loop

  var sum = 0; for (index = 0; index <...

JS flow of control (if-else statements)

Flow of control


true, execute code

false , skip it

  if (boolean-expression) { // Steps to perform; } 

Boolean expression must evaluate to true or false


  if (boolean) { statement1; } else...

Debugging JS

Browsers typically hide JS errors

Two classes of errors:



Syntactic errors

Spelling mistakes

Forgot to close a bracket

Using an undefined variable

Can usually see JS errors in...

JS in forms

<form> <label <input>

  <form> <label for="name">Name</label> <input type="text" id="name" name="name"><br/>...

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

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

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

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

The Bare Necessities of User Experience

User Experience has been a topic in the forefront of our industry for the past few years. We've all heard the term "UX" or "User Experience" or "Keep your users in...

How to choose the right framework for the job

Welp, no one has ever talked about this, right? Just kidding...

A quick Google search on 'choosing web framework'

That being said, I want to talk about the "how to choose" rather...

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


Простые задачи по JS(jQuery)

есть кнопка и скрытый текст рядом. При клике на кнопку текст рядом плавно появляется. Анимацию появления сделай тоже через jquery.

при скролле страницы(через пару скроллов) показывать справа-внизу...

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

Find an Object by a Value in a Javascript Array

  var optionList = [ { 'label': 'HTML', 'value': 'html' }, { 'label': 'Plain Text', 'value': 'plaintext' } ];...

Icon React Component

For use with this setup.

  import React from 'react'; const Icon = React.createClass({ render () { const shape = this.props.shape; const sprite = '/public/img/sprites.svg'; return...

Conditional Blocks in JSX

  return ( <div className="wrapper" {(this.state.corbin) ? <h1>I am a meat popsicle.</h1> : null} </div> ); 

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

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

Learning JS 101

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

A quick a/an renderer mixin in Pug

Need a quick way to detect and render a/an usage in Pug? This does the trick.

  mixin aan(word) =('AaEeIiOoUu'.includes(word[0]) ? 'an ' : 'a ') + word 

Simply call it like...

New framework

Currently writing a new JS framework... will post more later

Programmatic scrolling

For a project I was working on, I had to add horizontal scrolling to an element that would otherwise wrap on narrow screens.

Forcing horizontal content to scroll is pretty easy when you have...





使用 Canvas 的 getImageData()


See the Pen Get Average Color By Canvas by anjia (@anjia) on CodePen.



Uncaught SecurityError: Failed to...

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

O que aprendi: Handlebars

Essa seja uma série de posts, onde mostro onde apliquei o que aprendi. Espero que goste.


Reescrevendo uma aplicação, cheguei a um dilema, html no js. Bom, quem nunca fez isso, que atire...



  ([param] [, param]) => { statements } param => expression 

参数 param

param 的格式,根据参数个数不同,分这三种情况:

(x,y) => {...} 多个参数,必须()

x => {...} 一个参数,可省()

() => {...} 零个参数,直接()




Валидация формы JS

$(document).ready(function() {


function(value, element, regexp){var re = new RegExp(regexp); return this.optional(element) || re.test(value);},


30 days js - update css variables with js

Update css variables with js

Challenge three from 30 days of js how to update scss variables with js. Being able to edit scss variables from js is very useful for changing styles in multiple...

30 days of js day 4 - array cardio

Array Cardio

Being able to edit and arange data in js is super useful espically when dealing with external sources or internal. This challenge goes through the following methods.


canvas learning 001 What's canvas?

canvas チュートリアル Canvas チュートリアル HTML5 Canvas Tutorials

What's canvas?

HTML5 で導入された HTML 要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、...

JS key detection sequence (KONAMI CODE)

JS Key Detection Sequence

Check what the user types compared to a secret code that is logged in js.


You can store the keys that are pressed by using a key up function.

  const pressed = [];...

Manipulating JSON data using js. Part 1.

This is what I learned building ToloThere!, a SaaS rating and reviewing site. Most of the data on ToloThere is in JSON file. And I have worked on this file to collect the important information on...

Manual Js


Коллбэк (от англ. callback) – это функция, которую мы передаём куда-либо и ожидаем, что она будет вызвана при наступлении события.


Вызов func.call(context, a, b...) – то же, что...

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

2 days into learning JS: my discoveries

Together with Colt Steele I dived into the JS section.

This is a completely new territory for me. I've never ever in my life knew a bit about JS, neither have I touched console, or anything...

Task Managers

We all know its hard to find

Task Managers,

And I had always wanted to code one, but I had no knowledge. So I give you My taskmanagers, for those who need and use them, and in adition to that, you...

JS 包装对象


  var s="ddd"; s.length; 


  var s="ddd" String(s).length 

其中有类似Number(),Boolean(),String() 转化为的就是临时对象,临时对象使用完就会消失,...


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



Js Functions

A function in Js is a Section of code that can be called on more than one time this is a function:

function FunctionNameHere(variables(not needed)) { //Your code here }

Js Math.

MATH. is a preloaded library in js that can be used for things like MATH.PI or MATH.sqrt(). MATH. is a very versatile library and can be used for many things.

Js Canvas

Canvas's are just what it says it is a canvas for Js. Here is a link where I learned about canvas's:


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

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

Day009: Gatsby

Project Repository on GitHub

Today I started the Gatsby Tutorial and Projects Course on Udemy.

To start I made sure to install Gatsby globally with npm install -g gatsby-cli in the terminal. I then...

Js monitoring mobile device horizontal and vertical screen

1.js monitoring mobile device horizontal and vertical screen

This applies to pages that want to switch between horizontal and vertical screens, such as video playback, game entertainment and other...


sorry that almost ALL my pens are forked, i just need to get into js and css a bit more.