cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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

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():

  <a...

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.

oLipB

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

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

Event

EventSource

EventTarget

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

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

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

[[[pen...

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' theme-id='8082'...

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

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

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

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.

It...

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

你或许不知道的javascript,css细节

本文为整理某前端群的一次讨论所得,希望能对你有所帮助。

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

结果可参照以下示例:

等权选择器的抉择顺序

2. 全局变量

话不多说,先看代码:

  function foo(){ var a = b = 0;}foo();...

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

IIFE

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

Survival Guide To Numbers

Abstract

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

A Skewed Perspective

Transformations

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

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

Objectives

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

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

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

tl;dr

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.

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!

Percentage

A...

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

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 example.domain.com:80...

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

DeCoffeeScript

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

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

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

Example

  //...

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

Primitive Type and Operators in Javacript

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

Primitive Type

Operators

Operator Precedence and Associativity

1. Primitive Types

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

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

Hypothesis

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

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

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

避免与null比较

来看看这段代码:

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

process()函数中,期望对items参数的类型是数组类型,然而却将它与null...

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

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

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 = function(){...

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

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

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.

The...

setInterval

A Simple Example of using setInterval as a timer

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

jWyrdq

Note that if you want...

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

prettySocial

<!doctype html>

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

React Native Improving Habit Chains

React Native Improvements' class="post-image

Intro

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

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

JavaScript Code Style

Motivation

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

#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

Features

Markup

Basic Setup

Min, Max, & Initial

Value Vs. Data-initial

Formatting

Linking Datepickers

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

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

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

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

閉包

Closure

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

=_=


來到閉包之前,我在地上爬著看過一遍基本的東西,例如:

定義一個 function 的話先這樣

  function custome_name(){ ...}

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

自己看:...

那一包

今天的白癡之旅繼續是這一包,Closure

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

Go forth,...

MkComponent

Table Of Contents

What is MkComponent?

Features

How to Use

Utils

Template System

Format System

Transition Support

Aria

Extending Existing Components

The Aria API

What is MkComponent

MkComponent is an...

Mk Autocomplete

Codepen Example

Mk Autocomplete

Table of Contents

Features

Markup

Basic Setup

Remote URLs

Supplying Data

Multi/Single Selections

Tags

Time & Min-Width

Flash Class...

Mk Loader

Codepen Example

Mk Loader

Table of Contents

Features

About

Markup

JavaScript

Public API

Event Hooks

Features

Screen reader compatible. We support screen...

Reacting

I've always heard how useful and amazing CodePen is. So, I figured it was time to get involved. One to receive great ideas and be part of an awesome community. The other reason is that CodePen...

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

http://codepen.io/hesan911/pen/QEgyKk

[[[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:

Regular...

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

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

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

boat

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

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

Intro

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

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)

javascript

Preface

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

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

D3.js

Preface

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

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

ES6 sampler #2: Fat Arrows

javascript

Preface

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

Instafetch.js

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

Instafetch.js Example

Why Instafetch.js?

No...

ES6 Sampler #3 Classes

javascript

Preface

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

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.

Introduction

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

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 forwriting, documenting, and testing a...

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

window.confirm()

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

javascript

Preface

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

ES6 Sampler #5 Promises (were made)

javascript

Preface

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

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

Getting started with Firebase Part 1. Setting up.

Firebase

Preface

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

<!--Box-->

AKTUELL

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

Firebase

Pssst... Previous posts on this series:

Getting started with Firebase Part 1. Setting up.

Preface

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

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.

IsomerJs

Preface

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

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

javascript

Preface

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

ObeliskJs

Preface

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 )

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

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

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.

HTML

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

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

It support...

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

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.

javascript

Preface

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

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

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

javascript

Welcome

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

Tutorial: Edit in Place

Table of Contents

Objective

Structure

Styles

Code

Objective

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

Getting to know Typescript Part 2.

javascript

Preface

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

AJAX BASICS

AJAX

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

for文の設問【回答】

0〜50までの数値を1つずつ足した合計値は?

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

合計値は「1275

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

増減値に「--」を使って10から1の範囲で繰り返した合計値は?

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

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 principle

...

Learn Vue.js - a quick and friendly tutorial

Vue.js

Vue.js

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

<!-- HTML -->

Select your favorite two countries below:

USA
Canada
Japan
China
France
<!-- Vanilla JS -->

Getting to know Typescript Part 3.

typescript

Preface

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

Exporting pens made easy

Exporting pens made easy

The problem

So you've been on Codepen for a while and you've created quite a lot of pens. Being very proud of said pens, you've surely been thinking

Gosh, I would...

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();

What do you...

Liskov substitution principle

Liskov substitution principle

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

Single responsibility...

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.

JavaScript

It has nothing to do with Java.

Similar names for marketing reasons.

Developed by Netscape in...

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

Functions

Create a function like...

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

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

TL;DR

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

Classy.js


Source it!

https://rawgit.com/TecIce/Classy.js/master/source/Classy.min.JS

View on GitHub


Classy constructor:

Classy(classye, Callback);

Classye
Type: "String"
rule: Can not contain hyphens
Sets...

"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 JavaScript to...

Processing color from stylesheets (continuation)

Intro

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

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.

HTML

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

JS Notes

Get things

Get elements, properties or values from objects then assign them or change them.

Target DOM

Get an element

document.querySelector('.class');

Get all elements with this (returns...

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.

Single responsibility...

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

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

Introduction

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

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.

Requirements

Node Js

Small Linux Server

Throw Away Gmail...

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

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.

Previoulsy...

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