× {{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


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
Free Resources
Codementor User
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
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
11:00 AM (PST)
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
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
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
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
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
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
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
11:00 AM (PST)

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

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


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


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 Validation · Async · JavaScript {{showDate(1481098758)}}

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 Typescript · Component · Angular2 {{showDate(1480670317)}}

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 Inheritance · JavaScript · Composition {{showDate(1481718554)}}

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


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 Interview · JavaScript · Angular2 {{showDate(1480427353)}}

DOM Testing React Applications with Jest

Jest is a test runner for testing Javascript code. A test runner is a piece of software that looks for tests on your codebase and runs them. It also takes care of displaying the result on the CLI interface. And when it comes to Jest, it boasts of having very fast test execution as it runs tests in parallel. Key Features Easy configuration: For trivial cases, jest can be run without any configuration. And if needed, Jest also provides a variety of ways to customize your tests by...

pkodmad Testing · JavaScript · Jest {{showDate(1479465330)}}

React vs Angular 2: Comparison Guide for Beginners

At the time of writing, it becomes more and more difficult for beginners to choose a JavaScript framework to use for their project, or even to start learning. Every day, we hear new systems, approaches, and tools to make things easier. Some tools bundle, minify, abstract, hide, log, debug, and interact more directly to the DOM. Each one has their uses, but they also contribute to the JavaScript fatigue — the (too) many tools in the JavaScript world only make learning and using it feel more...

Codementor Team AngularJS · React · Angular2 {{showDate(1480071552)}}

Building React Native Apps: Retrofitting an iOS app to Android

I. Introduction to React native React Native is a framework for building mobile apps using React and JavaScript. It has support for building mobile apps for the iOS and Android platforms. The framework is open-sourced by Facebook on March 2015 and is built on the premise: Learn once, Write anywhere. Using React for the UI, we can build both web and mobile apps—with React Native used for the latter because it has a set of React components for iOS and Android platforms. The React components...

Vijay Thirugnanam Android · React native · iOS {{showDate(1478315711)}}

Build Custom Directives in Angular 2

Directives are the most fundamental unit of Angular applications. As a matter of fact, the most used unit, which is a component, is actually a directive. Components are high-order directives with templates and serve as building blocks of Angular applications. How to write components in Angular 2 is everywhere on the web so we are not talking about that today. What we will be exploring today is Angular 2’s directives; types, when to use them, and how to build one for our custom needs. Types...


Building a Pokedex with React

What if Pokémon were real? As a kid growing up in the 90s, we’ve all wondered about this; catching Pokémon, battling in gyms, and using that cool Pokédex to give us the information we need. Obviously, there are no Pokémon in real life (Pokémon Go is the closest thing we can get to “real”) but that doesn’t mean we can’t have a cool Pokédex, right? So let’s build our own Pokédex using React! (Read related article: What if Programming Languages were Pokémon?) React.js Library Facebook has...

Bhargav React · JavaScript · Pokedex {{showDate(1478177203)}}

Using Firebase with Redux for Building a React App

I. Firebase Firebase Realtime Database is a cloud-hosted database from Google which is positioned as Backend-as-a-Service (BaaS). It is a NoSQL database and data is stored as key-value pairs. Getting started with Firebase is easy and the console is available at https://console.firebase.google.com. The Firebase console shown above is a snapshot of a database. Creating a new database is simple; just click on the “Create new project” button and give the project a name. Each database is given...

Vijay Thirugnanam Firebase · Redux {{showDate(1476620798)}}

Building a Facebook-like Comment Box: A React Tutorial in Elm

##I. Introduction Elm is a new programming language that compiles to JavaScript. It is a functional programming language that features static typing, ensuring type-safety in your web apps and catching common errors. React is a library for creating user interfaces in JavaScript. What makes it cool is how fast and performant it is when rendering, thanks to its use of the concept of the Virtual DOM (Document Object Model). The virtual DOM lets changes be made in batches before they are applied...

Rudolf Olah Facebook · React {{showDate(1476569271)}}

Building an iOS Geolocation Travel App with React Native

I. Introduction From travelers planning their trips to regular commuters who want to keep track of all the places they go to, keeping track of where people have been to, where they are, and where they want to go are features users look for in a light-weight, user-friendly travel app. An app that manages and keeps track of favorite places and routes is something you can build using React Native! II. Background A. React Native React Native is a framework for building mobile apps using...

Vijay Thirugnanam Geolocation · React · React native {{showDate(1475896628)}}

Create a Trello Clone using Angular, Node.js, Mongo, and Express

Table of contents I. Introduction II. Background A. Node.js B. Express C. Mongo D. Angular E. They are all JavaScript III. Let’s build a Trello clone Step 0: Getting started Step 1: Managing tickets on a board A. Create the “board” page B. Common mistakes so far Problem 1: I did not define a default route Problem 2: I forgot to include a .js file C. Painting the tickets D. Adding color and layout Step 2: Adding list and ticket functionality Step 3: Testing time A. Lists are not...

Guy Mograbi AngularJS {{showDate(1474981151)}}

Handling AJAX in your React Application with Agility

The React ecosystem has become huge since Facebook made the API public. More so, great libraries have been built in the declarative style adopted by React. However, real life applications require making AJAX requests to servers. And this can pose a great challenge while using React. You need to know what library to use for your AJAX processes. It’s good to know that there are different ways to handle AJAX with React. This is one of the beauties of React as a VIEW library — flexibility. How...

Rowland Ekemezie React · JavaScript · Redux {{showDate(1474539730)}}

Unit Testing React Components: Jest or Enzyme?

##Background Testing React components can be a difficult task to do especially when you’re just starting with it. Even the basic task of knowing what tools to test it with can already be confusing. Two popular options for testing React components are Jest and Enzyme. Developers working with React are confronted with the question: What should I use, Jest or Enzyme? Here are just a few threads that have made mention of this comparison, or has offered one as an alternative for the other: ...

Vijay Thirugnanam Jest · Enzyme {{showDate(1473062358)}}

Migrating from Angular 1.x to Angular 2: Upgrade Strategies

Angular 2.0 has just been officially released! As of this writing, Angular 2 is in its final release version and sooner or later, all applications built in Angular 1.x will be required to be migrated to version 2 in order to be in sync with the latest Angular technology. The new Angular framework is a complete re-write of the existing Angular 1.x framework and will not be backward-compatible with the applications built in previous versions. What could be the reason behind re-writing an...

Codementor Team AngularJS {{showDate(1474335350)}}

How to Bundle Angular 2 with Rollup

Tools like Browserify and Webpack have been fairly popular among UI engineers to bundle their source code. Rollup is fairly new—and honestly a breath of fresh air after moving my Angular 2 source code from Alpha to RC. Along the way I tried every option to make a stable development and production environment from using Gulp, SystemJS, JSPM, Angular CLI and then Webpack, and now Rollup. In this article, I will share my findings and walk you through the start code project I built. Hopefully,...

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
Codementor Office Hours
Find More Office Hours
Help Spread the Word