× {{alert.msg}} Never ask again

JavaScript Framework Series
March - May, 2015

20+ Free Online Office Hours with Experts in AngularJS, React, Backbone, Ember, Meteor, and More

AngularJS
AngularJS
React
React
Javascript
Javascript
Ember.js
Ember.js
Register Now - FREE

Sign up to RSVP for Office Hours - Free

Sign up to RSVP for JavaScript Free Office Hours Series and get notified for new tutorials!

Everything You'd Ever Want to Learn About JavaScript & Front-end Technologies

Codementor is proud to present JavaScript Framework Office Hours Series - an online event where we invite experts in AngularJS, React, Backbone.js, Ember.js, Meteor and more to host live office hours & free online courses to answer all of your questions.

Office Hours
Free Online Sessions
Tutorials
Free Resources
March
Geoff Goodman
Angular & Plunker

Geoff Goodman is the creator of Plunker, which is an entirely Angular-built way to support...you guessed it, Angular projects! The real-time previews and strong sense of feedback has made Plunker a very popular online community for creating, collaborating on and sharing web development ideas. ...

Mon, Mar
9
11:00 AM (PST)
Jack Franklin
Introduction to ES6 with Jack Franklin

Continuing with our March-theme of "Javascript Framework Month", we'll be taking a look at ES6. ES6, often referred to as “Harmony”, is the sixth major release of the ECMAScript language specification. ECMAScript is the “proper” name for the language commonly referred to as JavaScript. In ...

Wed, Mar
11
11:00 AM (PST)
Gleb Bahmutov
Using Angular to Improve Page Responsiveness with Dr. Gleb Bahmutov, PhD

Browser freezes while the digest cycle runs. What if we could keep our angular application the same but offload the digest cycle to separate thread in a web worker? Well, we can! Gleb published the step by step micro angular example that makes it possible in the blog post http://bahmutov.calepin...

Fri, Mar
13
11:00 AM (PST)
Urigo
Office Hours with "angular-meteor" creator Uri Goldshtein

Meteor 1.0 has just been released and the great power it gives to programmers is incredible. As a hard core AngularJS developer I wasn't so happy with Meteor’s choice to invent a new templating engine called Blaze. Researching into Meteor’s code I've learned more about the philosophies behind th...

with Urigo
Fri, Mar
20
11:00 AM (PST)
Zach Nation
Scalable Data Visualization in React.js

This talk will go in-depth about the use of React.js for visualization. We will discuss various techniques for rendering, and the pros and cons of each, including: render targets (canvas vs. SVG), client-server application architecture optimized for large data, and integration with other visuali...

Mon, Mar
23
11:00 AM (PST)
Rebecca Murphey
Apps that Talk Back - Monitoring the Performance and Behavior of Large Client-Side Javascript Applications

Rebecca Murphey is a staff software engineer at Bazaarvoice, where she leads a team that shepherds third-party JavaScript application development for products with a reach of hundreds of millions of visitors across billions of pageviews. She'll be discussing Client-Side JS Apps and having the...

Wed, Mar
25
11:00 AM (PST)
Marco Otte-Witte
An Overview of Ember Simple Auth by its Author, Marco Otte-Witte

In this session we'll be meeting with Marco Otte-Witte who authored Ember Simple Auth. He'll be giving us an overview of how the tool works, give us an example of using the app in action, and answer your questions! Marco is the founder and owner of simplabs, an Engineering and Consulting Agen...

Fri, Mar
27
12:00 PM (PST)
April
Martin Gontovnikas
Reactive all the things

Angular is performant enough for most apps, most of the time; But what happens when you're trying to push every drop of performance out of your browser app? Making your Webapp performant and at the same time have nice, loosely coupled code based on resauble blocks is extremely hard. How would...

Wed, Apr
1
11:00 AM (PST)
Nick Van Weerdenburg (Office Hours)
Building An Angular Hack Stack with Nick Van Weerdenburg

Learn how to work with bad or no APIs, temporary servers, and totally-test-driven approaches - in short, how to build a hack stack for quickly getting your AngularJS project off the ground without being handcuffed by your backend. Nick Van Weerdenburg is the Founder of rangle.io, a full-stack...

Wed, Apr
8
11:00 AM (PST)
Alexandre COLLIN
Leveraging Search to Build an Engaging User Experience, with Alexandre Collin of Algolia

Google and Amazon changed the rules of the search game, making it the default style of interaction on the Web. Yet implementing a fast and reliable site search has been challenging for decades. Nobody could build a search like Google and Amazon. Many developers convinced themselves that it was n...

Mon, Apr
13
11:00 AM (PST)
Kent C. Dodds
Learning Angular-Formly with Kent C. Dodds

Angular-Formly, a library created by Kent C. Dodds utilizes Angular to create dynamic forms. We'll be learning how to implement them ourselves with Kent on 4/15, RSVP soon! Kent C. Dodds is big into AngularJS and NodeJS especially, and loves GitHub. He has more AngularJS experience than most ...

Wed, Apr
15
11:00 AM (PST)
Matthew Beale
Intro to Ember.js - Building a Basic App

In this session we'll be getting an introduction to Ember.js and learn how to use it to build a basic web application. Matthew is a member of the Ember.js Core Team, author of an early book on Ember, and writes at madhatted.com. Through a consulting partnership named 201 Created, he's worked ...

Wed, Apr
22
11:00 AM (PST)
Brenda Jin (Office Hours)
Jasmine Testing for Backbone.js Models and Views with Brenda Jin

Behavior-driven development with Jasmine testing enables developers to create thoughtful software design. Testing helps us match code to expectation, and communicates our intentions to other developers. When coupled with Backbone.js, Jasmine can become a powerful tool in ensuring the scalability...

Fri, Apr
24
11:00 AM (PST)
Ilya Zayats
Creating SVG with React, with Ilya Zayats of Redbooth

React gives you a way to generate HTML and diff it very effectively on the client and on the server, but can we expand that functionality on SVG? Yes, we can do that and I will show you how to generate crispy graphs and scalable graphics with React in isomorphic manner. Ilya Zayats is a senio...

Mon, Apr
27
11:00 AM (PST)
May
Michael Klein
Using ember-cli-deploy to deploy Ember Apps, with one of its maintainers, Michael Klein

ember-cli-deploy aims to be the go-to-solution for deploying all Ember-CLI apps. In this session, Michael Klein, who is one of its maintainers, will join us to discuss using it to deploy any type of Ember App. This session will be a great continuation of our Javascript Framework Series, RSVP ...

Fri, May
1
11:00 AM (PST)
Yuri Takhteyev
Test-driven development in AngularJS with Yuri Takhteyev of Rangle.io

In this session we'll be learning a series of Unit Tests to implement TDD in AngularJS. We'll discuss modular code, AngularJS services, and other modules not entangled with DOM. From Yuri's bio: I started writing code sometime in the mid 1980s using MK-61 and rarely stopped since. I went o...

Tue, May
19
11:00 AM (PST)
Sam Selikoff
Testing in Ember with Sam Selikoff

In this session we'll be meeting with the creator of ember-cli-mirage, Sam Selikoff. Sam will be walking us through testing in ember, what solutions are available, and why he made Mirage + what problems it solves. Sam is a front-end developer at TEDTalks. ...

Wed, May
20
11:00 AM (PST)
Andrew Connell (Office Hours)
Building SPAs with Angular for Office 365, SharePoint Online & SharePoint 2013 On-Premises

SharePoint enables developers to create two different kinds of apps: cloud apps and SharePoint-Hosted Apps. The latter type, SharePoint-Hosted Apps, mean that the majority, if not all, of the application runs within the client. In this talk you’ll learn how to build a SharePoint-Hosted Applicati...

Wed, May
27
11:00 AM (PST)
React

React vs AngularJS – How the two Compare

The purpose of this article is to go over building some simple functionality using Angular and React to give you an understanding as to what it would take to get an application off the ground. Angular is the big dog in this fight, as it’s been around for a while longer than React has, but React brings increased rendering performance to the table. This post is not meant as an in-depth tutorial on either of the frameworks. As such, I’m not going to go into great detail for a lot of this...

Chris Harrington AngularJS · React · JavaScript {{showDate(1419830440)}}
JavaScript

Build a Multi-user App using Socket.io (Part 2): Creating a Matchmaking Game Server

Welcome to part two! Be sure to review and read through part one here, else face the wrath of ambiguous confusion! (You have been forewarned). Today we intend to wrap up the engine and achieve the following objectives: Force only one (1) game per user Allow a user to join a game (be matched to another user’s game and be included) Allow a user to leave a game they have joined, both through exiting the page and through a button. Bonus: Bugs also happen during development. Since...

React

Build a React Image Gallery with Cloudinary

If you are displaying multiple images on your website, you probably use image galleries. Galleries are very useful, but can be challenging to integrate into a responsive design. In this article, we’ll show you how Cloudinary’s responsive transformation features enable you to quickly and easily create a responsive image gallery. The examples will be built with React. Cloudinary Just announced a React SDK that enables you to easily build a responsive image gallery. You can simply drop an image...

AngularJS

Consume OData Restful Services in Angular 2

Today I want to speak about a feature which I think can be of a high importance in the near future, which is OData. And to create discussion, I will consume OData services with the oh so popular technology nowadays (and which I personally adore) Angular 2. ###Introduction As stated at the official OData website: “OData (Open Data Protocol) is an OASIS standard that defines a set of best practices for building and consuming RESTful APIs. OData helps you focus on your business logic while...

JavaScript

How to Avoid Common Pitfalls in JavaScript

JavaScript is a powerful language, but there are certain syntactical and behavioral pitfalls in the language that a newcomer may fall for. These pitfalls generally arise due to properties such as type coercion and evaluation methodology of == & === operator. The == and === operators evaluate an expression using the abstract equality comparison algorithms and the strict equality comparison algorithm (more about it in this tutorial: == vs === JavaScript: Double Equals and Coercion ....

Ashish JavaScript · Coercion · Arrays · Objects · Types {{showDate(1482869851)}}
JavaScript

jQuery Tutorial: Understanding .append(), prepend(), .after() and .before()

I have been a software developer for quite awhile now and every time I need to do something related to .append() and prepend(), I always find myself Googling about it. It’s not that I don’t know these things, but it’s easy to get them mixed up. That is why I think I should share what I have learned over the years about .append() and prepend()`. Let’s getting started .append() & .prepend() .append() puts data inside an element at the last index; while .prepend() puts the prepending...

JavaScript

Build Nodejs RESTful APIs in 10 Minutes

###What is REST? REST is an acronym for Representational State Transfer. It is web standards architecture and HTTP Protocol. The REST architectural style describes six constraints that were originally communicated by Roy Fielding in his doctoral dissertation and defines the basis of RESTful-style as: Uniform Interface Stateless Cacheable Client-Server Layered System Code on Demand (optional) RESTful applications use HTTP requests to perform four operations termed as CRUD (C:...

AngularJS

How To Write an Async Validator In AngularJS

Today let’s learn about async validators in AngularJS and how you can use it in your projects. Brief background We want to check if a username exists or not every time a guest enters the username in the input field. In this tutorial, I will show an error if the server already has that username. Let’s begin: First, let’s create a simple form with username and password input fields. <form name="myForm" ng-submit="vm.submit()"> <label> Username: <input...

Quoc Vo Minh Async · Validators · JavaScript {{showDate(1481098758)}}

4 Easy Ways to Start Contributing to Open Source Projects

###Introduction If you’ve ever wanted to contribute to open source projects but don’t know where to begin, here are some tips to get you started. ###Table of Contents Good understanding of one programming language of your choice Version Control System Learn to read the source code Submit Patches Select an organization or project and contribute Ask Smart Questions Good understanding of one programming language of your choice Understanding of a...

JavaScript

Synchronizing Banner Ads using JavaScript

“Local Connection” is a JavaScript code that enables iframe elements to connect with each other. The Purpose of this tutorial? To help other JavaScript developers who work in the world of advertising. Banners take highest usage ratio in digital advertisements. And as you may also know, almost all published banners live in the iframe element. It’s the most secure way to keep external content in hosting environment. But it also brings some difficulties for banner designers as well as banner...

JavaScript

Build a Multi-user App using Socket.io (Part 1): Lightweight Chat App

##Introduction I’ve been hankering to build something for a long time that seemed out of my depth but I feel I could build it given enough motivation. To start my journey, I’d like to build a matchmaking system to connect users together using WebSockets. In some respect, you could make a Tinder clone using the mechanisms outlined today. For my specific circumstances, I’m planning to make a system which will be integrated into a game later. If you’re familiar with any multiplayer first...

JavaScript

Create an Alexa Skill Part 1: Building a Voice Interface and Interaction Model

##What is an Alexa Skill? Created in 2014, the Amazon Echo is a hands-free speaker you control with your voice. Alexa is the voice service that powers the Echo and allows customers to interact with the device. As third-party developers, we can create apps or in this case, “skills” that users can download and interact with. One Alexa skill might help you find a good book—another might give you information about your favorite TV Show. The possibilities are endless! In this tutorial, we are...

AngularJS

Creating an Inline Edit Component for Form-Inputs in Angular 2

The need In two words User Experience, but one word in German Benutzererfahrung 😏. Most web pages with Create, View, and Edit pages seem to encounter the redundancy of having isolated View and Edit pages. It’s super awesome to have just a Create and a View page, with the Edit system encapsulated in the View page. Before I begin, I’d like to thank the Business Analyst of my team, Jorge Patrão, for giving me the idea. Before we begin You’ll need to be familiar with Angular 2’s...

Godson Ukpere Angular2 · Component · Typescript {{showDate(1480670317)}}
JavaScript

Understanding Function Scopes and Block Scopes in JavaScript

This is originally posted by the author on his blog. This post has been edited for clarity and some parts may appear different from the original post. Is the following line a valid line of JavaScript code? {{{}}} Yes, it is. These are nested block scopes. ###Block scopes Block scopes are different from function scopes in JavaScript. A function scope is created for every function (and we can nest them, too): function iHaveScope() { // local function scope function...

Samer Buna Functions · Blocks · Beginner {{showDate(1480637085)}}
JavaScript

Beginners Guide to Node.js: Installing Node on MacOS Sierra

This is originally posted by the author on a different website. This post has been edited for clarity and some parts may appear different from the original post. If you are new to Node.js and still exploring, you might be very confused with the tons of ways to install it. While some guides only cover Linux or Windows, if you want to get started playing with Node.js and you are using a Mac with the latest updates installed, then this guide is for you! Well then, let’s get...

Clark Alesna Node.js · Mac os x · Installation · Beginner {{showDate(1480354003)}}
Node.js

Building a Simple CRUD Application with Express and MongoDB (Part 2)

This article is the second part of creating a CRUD application with Express and MongoDB. We’re going to venture deep into the last two operations that were not covered in the first part – UPDATE and DELETE. Note: This is originally posted by the author on his blog. This post has been edited for clarity and some parts may appear different from the original post. Without further ado, let’s start the second part. ##CRUD — UPDATE The UPDATE operation is used when you want to change...

Codementor Team JavaScript · MongoDB · Express · Crud {{showDate(1482205990)}}
JavaScript

Sending Automated Emails using Google Apps Script

One of the major means of communication these days is email. Organizations and individuals send out a huge number of emails every day. Sometimes, we find ourselves in situations where we want to send emails to several people listed on a Google spreadsheet. Can you imagine having to send out an email to hundreds of people by copying and pasting one at a time? (This once happened to me!) What if there is a way to automate the process so that it can be completed in under a minute? If this ever...

React

Enhancing React Components: Inheritance & Composition

Building React components is fun, but it can get tedious too! One look at material-ui would tell us how beautiful components can be built with React. Building components is very easy in React, because well, components is the USP of React, and Facebook has done everything in its power to make building components easy. However, well, there are still challenges. Most web pages need various styles of a single component. For example, a button in one component is red in color, and in another,...

Bhargav JavaScript · Composition · Inheritance {{showDate(1481718554)}}

Build an Instagram Clone in Elm: InstaElm Part 2

Introduction This is the second part of the InstaElm tutorial where we create an Instagram clone in the Elm programming language to demonstrate how a real world project is implemented in Elm. We’re focusing on inter-operation with other JavaScript code and being able to interact with an API server written in Node.js and using the Hapi.js library. In the previous tutorial we covered the basics of the Elm Architecture and how to create nested components. What You Will Learn You will...

Rudolf Olah jQuery Ajax · JavaScript · Hapi {{showDate(1480906324)}}
AngularJS

Basic Component Animation with Angular 2

Animation in Angular 2 is not as straightforward or intuitive as you might have assumed. Nonetheless, it is very simple to achieve. To illustrate how behavioral component animations work in Angular 2, we are going to implement the jQuery slideToggle feature in an Angular application without bringing jQuery to the field. The Host Component Before adding animations, it is ideal to create a component that is going to host your animations: // ./app/toggle/toggle.component.ts import { ...

AngularJS

Angular 2 and Beyond: 7 Framework Highlights You Need to Know

Fresh from the much-anticipated release of Angular 2 last September, we were joined by Jules, Stephen, and Rob from Google’s Angular team to answer questions from our community about the release of Angular 2. We talked about everything from migrating Angular 1.x apps, next steps for ng 2, Angular Material, Angular CLI to the team’s favorite Angular 2 features. As of writing this post, there are already reports about a possible March 2017 release for Angular 3. But for now, here are important...

Codementor Team JavaScript · Interview · Angular2 {{showDate(1480427353)}}
About Codementor

Codementor is the open marketplace for both instant 1:1 help and long-term mentorship. Whether you’re trying to master new programming languages, learn web design, or working to become a better developer, you can get live 1:1 help from expert developers on Codementor.

Watch Video SIGN UP NOW - FREE
RSVP Now and Get Notified for New Tutorials
Help Spread the Word