Wednesday, April 27, 2016

Code School launches Facebook react course - front end developmentframework just announced its new course for Facebook front end development framework – react. React has received a lot of hype into 2015 and 2016. It's one of the most rising popular frameworks backed by Facebook. Demmings Facebook engineers are actively using this framework and supporting it. It is an open-source project so anyone can see and contribute.

Saturday, April 23, 2016

Tutorial Spotlight - Social Media - developing with Twitter Pinterest Facebook Snapchat

Twitter cards

Twitter Analytics

Tutorial Spotlight - SquareSpace - eCommerce platform SEO

Squarespace SEO

Tutorial Spotlight - JavaScript - D3, scrolling, front-end, interactivity, UX

Famous blog : JavaScript is sexy

Famous blog : dailyJS

Introduction to Full Stack JavaScript via Smashing Magazine

How to test if two objects are the same using JavaScript via stackoverflow

Python JavaScript D3 Hack

Evernote JavaScript SDK for Evernote Developers

A small micro check library in javascript


Charts diagrams graphs with JavaScript


Important Javascript Libraries and Frameworks

Functional programming with JavaScript using Underscore. Great for testing too

Tutorial Spotlight - CSS - front-end design animations

30 endangered species CSS design and animation
Species in pieces

Make Pinterest with CSS (CSS Tricks)

CSS animation cheatsheet !
css triggers cheatsheet
troubleshoot css
analyze performance css
css stats of a URL important dev tool
animate icons using css and svg (pretty not necessarily useful)
mac app visually create CSS codes without coding
css for mobile

CSS positioning W3School

CSS Library      flashy pretty scrolling effects also crazy scroll path

Tutorial Spotlight - Firebase API real time data storage with URL CRUD User Authentication

  • Firebase security
    • Because firebase is an URL based database, implementing security is important
  • Can enable email password authentication (login) using $firebaseAuth service
  • Can create angularjs service using firebase


Simple Login with Firebase

AngularFire security rule builder tool
high quality important dev tool

Firebase Security API overview
high quality video dev tool

Using firebase with ember


Angular and Firebase CRUD

Firebase angular demo
Firebase AngularJS starter pack

TodoMVC firebase angular example

Angular Fire

Google group!forum/firebase-talk!forum/firebase-angular

Firebase Security
Turn on authentication required

AngularJS Firebase via Thinkster

Firebase official documentation


Tutorial Spotlight - AngularJS - Google, Theme Development, Front End, Hackathon, Templating

Codecademy AngularJS tutorial for beginners

Building a wordpress theme using AngularJS

AngularJS fundamentals in 60 minutes

AngularJS route

Tutorial Spotlight - How to Startup - pitches, entrepreneurship, angel investors, vcs, accelerators, silicon valley lifestyle

Best Startup Pitch Decks
How to Pitch to Angel Investors and VCs via Slideshare

Marc Andreessen famous startup venture capitalist, entrepreneur on Product Market Fit

 Startup tools and resources

 Checklist for a perfect pitch

 ui stencils

 Startup stickers

Tutorial Spotlight - iOS Apps - App Store, Swift, Apple World, iPhone Apps

Beautify your data driven iOS App via Eric Gu on Medium

Tutorial Spotlight - WordPress Content Management Systems, Theme Development for WordPress

Make Money from Creating Your Own WordPress Theme

Create your own WordPress Theme from an HTML Template via Sitepoint

Eric Wolfe: Building a WordPress Theme Using AngularJS via

High quality important tutorial though a bit dated now in 2016. Dev tool
Yeoman scaffolding for Wordpress theme called Yeopress
The Lazy Smart Programmer way to set up a wordpress website

General WordPress Tutorials

WordPress shortcode for beginners
How to add a shortcake in WordPress

customize wordpress front page

SEO for WordPress tutorial by No.1 SEO plugin on WordPress - Yoast
The Definitive Guide to Higher Rankings for WordPress Site

How to include JavaScript and CSS in your WordPress Plugin by Tuts Plus

How to add Google Authorship tag on WordPress

How to set up Pinterest rich pins on WordPress

How to build a wordpress site

Wordpress shortcodes by Tuts

WordPress Official Documentation from the Codex

Official WordPress lessons

Useful Libraries and Tools

Dev tool - WordPress - create responsive WordPress themes without coding

WordPress custom CSS JavaScript plugin

Social Media Optimization with WordPress SEO by Yoast

Ultimate library and market of WordPress themes for sale - Theme Forest

Pinterest-like WordPress themes

Media Temple WordPress hosting for WordPress apps

Popular top notch theme framework Genesis

Create your own product hunt website with WordPress

upvote downvote for wordpress

ProductHunt Reddit Look-alike Themes for WordPress

Tutorial Spotlight - Front End Coding Tutorials Responsive Design Interactivity UX UI Design


  • Responsive Design is an UI Trend 2015 "responsive design for The Internet of Things (IoT)"
  • Appears in job description of Front-End Developer job posts, lead UI designer job posts
Devices to be considered
  • Desktop
  • Large Tablet
  • Small Tablet
  • Smart Phone

Responsive design (CSS Tricks by Treehouse)
Responsive Columns Grid

Dev tool - responsive column responsive grid calculator

A godzilla list of responsive design resources

Use Twitter Bootstrap for responsive grids
<div class="row">
<div class="col-md-4">
Must enclose the column div in a row class div

Using Media Queries in JavaScript

Pure - a small light-weight responsive css library

Useful libraries

Pizza Pie Charts is a responsive pie chart based on the Snap SVG framework from Adobe. It displays responsive pie charts (data diagrams) on websites.

Dev tool - WordPress - create responsive WordPress themes without coding

Friday, April 22, 2016

WHITE SQUARD - Brilliant Fictitious Startup Example That Solves a Problem

There's no need to found a real startup to make a social impact or test out the market for product-market-fit. MTV made a fake website called White Squad to raise social awareness for white privilege (and the mirror side of minority suffering in the society, social inequality). White Squad offers fictitious protection service,  business representation & negotiation, civil rights protection service for immigrants and minority citizens of the United States who may be otherwise treated unfairly or disadvantaged by their skin color and ethnic background (the fictitious website's target users). When a visitor clicks on the call-to-action, the "hoax" will be revealed and there will be statement saying this website is for raising awareness.

The website is well-made, well-designed, has all the key elements of a strong "splash page" or a sales landing page. It's a good cause and a really good example for testing out a product .

When the website first came out a while back, it was also a good example of marketing, raising awareness using humor and "April Fool's Day joke / fictitious features" (popularized by Google)

Tutorial Spotlight - Stripe online payment for developers

Key concepts

  • Stripe turns customer information into tokens and mask the data so that it's secure
  • Stripe manages versioning by supplying different versions of code via stripe.js
    • Stripe.js is in charge of taking credit data, submitting to Stripe's server and returning a token which can be charge
    • Stripe.js can secure credit info entry without server
  • Stripe Connect Stripe Checkout - eCommerce capabilities for website with Stripe
  • Competitors: square, paypal, venmo, Dwolla (free under $10 dollars)

Official Stripe payment examples and sample code
Stripe API Documentation
Stripe Documentation for iOS
Stripe Documentation for Android
Stripe loves JSONP standard

Stripe Documentation - how to create a subscription payment (useful for most Saas companies)
Create a plan
Subscribe users to a plan

One Month Edu's (YC company) Stripe class
Mini Review: a bit dated but beginner friendly

Full step by step Stripe set up walkthrough (blog)

Stripe freenode #stripe

Using stripe without learning programming
programming is not required

the ecommerce platform you use may already have stripe
stripe plugin is also available for wordpress

Stripe data store stacks (Quora)
MySQL MongoDB PostgresSQL Impala (Apache HBase)

Other Stripe resources:

Stripe Connect 
Stripe Connect
Stripe Data API 
Access to Stripe Data:
Stripe international global
Stripe US feature
Sites that currently let you management and accept stripe payments
Who uses stripe?

 Stripe transfer (OFAC compliant), use Stripe::Transfer  ruby function

Sample Job posting by stripe for Technical support

Thousands of businesses across the internet rely on Stripe to launch their products and get paid. We are mission-critical to them, and each individual and business uses Stripe in a different way.
We work with our users to answer questions and solve problems, then work with the rest of the team to ensure that those problems don't arise again. We like to do whatever it takes to make sure our users are taken care of.
Interacting through email, real-time chat, and phone, we guide developers and entrepreneurs along the process of creating paid products. We inform the direction of the Stripe product by understanding and improving how Stripe is used.
Stripe's support team manages itself independently and develops the processes we use to help our users. This means integrating and developing tools, attending and hosting events, and visiting Stripe users.
You As part of this role, you'll work with the outside world to help more businesses use Stripe. You'll work with developers, business owners, product managers, and finance and accounting staff. Payments problems can be complex with many stakeholders, and it will be your job to make sure everyone understands why Stripe makes sense.
You'll get a chance to share Stripe's culture in the wider community. We host events, attend conferences, sit down for coffee, and hang out in IRC. We try to write software worth talking about, and then talk about it.
You may like this job if:
  • You love to teach and meet new people.
  • You write quickly and clearly and enjoy writing.
  • You can solve open-ended problems, even when you're a little out of your depth.
  • You have a keen sense for seeing through the question being asked to the actual problem a user is having.
To apply, please email [masked email] with:

  • Your background and accomplishments.
  • Some information on why you want to work in this role.
  • Two improvements you'd make to Stripe.
  • A short piece on any topic you're passionate about.
  • The list of languages you'd be comfortable working in, if more than English.

Tutorial Spotlight - Ajax in the HTML DOM with JavaScript

JavaScript and the Dom series (Tuts Plus)

Host your personal website or blog for free and learn to code on Github

Want to host your personal website or blog for free? Have you considered Github Pages? Professional developers use Github everyday, it's really worth it to learn to use Git and Github. Github Pages allow you to use Github flavored Markdown (a handy programming language, actually used by professional productive writers), write or blog, and host that static website in minutes for free. 

Check out the documentations

Tutorial Spotlight - language Markdown - amazing world of coding tutorials

Writing your resume in markdown by Phil Hollenback (blog)

78 Tools for Writing and Previewing Markdown (

Write in Markdown and host your website or blog for free on Github as Github Pages
Write Github flavored markdown

Monday, April 18, 2016

Learn iOS Programming Swift Basics with Swifty - learn to code resources in your iPhone

Swiftfy is an iOS app that teaches you Swift language basics right in your iPhone. When waiting in subway or for a bus, you can get some muscle memory going - practicing Swift "grammar", syntax on the go. It's sort of like for your pocket.

Source: TechCrunch article
Download the app on iTune!/id886315617?mt=8

Startup Front End UI Essentials : Using Modal with Forms with Twitter Bootstrap framework

Modal or a modern popup window is now an omnipresent startup front-end UI element. It's useful when prompting the user to login, subscribe to a newsletter, and take an exit offer.

Here's the basic hierarchy if using the Bootstrap framework:
modal hierarchy

Not exactly concise. Because though small, the element has all the essential backbone of a full web page: header, body, footer, exit, and it usually handles a form with input and submit button. It's not a trivial element.

Put the mini form, such as a login form, and its submit button in the modal-body.

Bootstrap also comes with useful javascript snippets for modal events. $('#my_modal_id').modal('show');

It's best not to reinvent the wheel and use the readily available code in Twitter Bootstrap framework, now just known as Bootstrap. Official documentation here:

Monday, April 11, 2016

How to practice JavaScript beyond

You finished the JavaScript curriculum, congratulations! You might have learned a lot but still don't know how to program like a real developer. You need to install the industry standard web developer tool - Chrome and start using its Web Developer Tools aka Chrome Inspector. Real developers and designers use this tool to see, design, twig and debug their websites. Check out the basic steps to set up the JavaScript console in Chrome. You can type any JavaScript commands here and start to interact with a webpage such as

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid