Ad

Wednesday, April 27, 2016

Code School launches Facebook react course - front end developmentframework

www.codeschool.com 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. https://facebook.github.io/react/


Saturday, April 23, 2016

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

Twitter cards
https://dev.twitter.com/cards/overview

Twitter Analytics
https://analytics.twitter.com

Tutorial Spotlight - SquareSpace - eCommerce platform SEO

Squarespace SEO http://help.squarespace.com/guides/how-do-i-increase-my-site-visibility-to-search-engines

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

Famous blog : JavaScript is sexy http://javascriptissexy.com/

Famous blog : dailyJS

Introduction to Full Stack JavaScript via Smashing Magazine
http://coding.smashingmagazine.com/2013/11/21/introduction-to-full-stack-javascript/

How to test if two objects are the same using JavaScript via stackoverflow
http://stackoverflow.com/questions/6689250/how-to-test-if-two-objects-are-the-same-with-javascript

Python JavaScript D3 Hack

Evernote JavaScript SDK for Evernote Developers

A small micro check library in javascript
http://arasatasaygin.github.io/is.js/


--------

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
http://www.species-in-pieces.com/?ref=producthunt

Make Pinterest with CSS (CSS Tricks)
https://css-tricks.com/search-results/?q=pinterest


CSS animation cheatsheet http://www.justinaguilar.com/animations/index.html !
css triggers cheatsheet http://csstriggers.com/?ref=producthunt
troubleshoot css http://philipjalexander.com/troubleshootingcss
analyze performance css http://cssdig.com/?ref=producthunt
css stats of a URL http://cssstats.com/?ref=producthunt important dev tool
animate icons using css and svg (pretty not necessarily useful) http://www.transformicons.com/?ref=producthunt
mac app visually create CSS codes without coding https://itunes.apple.com/gb/app/css-toolkit/id934487422?mt=12&ref=producthunt
css for mobile http://marvelapp.github.io/devices.css/

CSS positioning W3School http://www.w3schools.com/css/css_positioning.asp


CSS Library      flashy pretty scrolling effects http://lab.hakim.se/scroll-effects/ also crazy scroll path http://joelb.me/scrollpath/


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

General
  • 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
http://firebase.github.io/firebase-simple-login/
https://www.firebase.com/docs/security/simple-login-overview.html
https://www.firebase.com/docs/security/guide/user-security.html

AngularFire security rule builder tool https://github.com/firebase/blaze_compiler
high quality important dev tool

Firebase Security API overview
high quality video dev tool
https://www.youtube.com/watch?v=IGlzbmnAlRQ

Using firebase with ember
https://www.firebase.com/blog/2014-03-21-new-firebase-ember-bindings.html


----------

Angular and Firebase CRUD

Firebase angular demo http://www.youtube.com/watch?v=C7ZI7z7qnHU
Firebase AngularJS starter pack https://github.com/firebase/firebase-angular-starter-pack

TodoMVC firebase angular example http://todomvc.com/labs/architecture-examples/firebase-angular/#/

Angular Fire https://www.firebase.com/docs/web/libraries/angular/examples.html
----------

Google group https://groups.google.com/forum/#!forum/firebase-talk
https://groups.google.com/forum/#!forum/firebase-angular

Firebase Security
https://www.firebase.com/docs/security-quickstart.html
Turn on authentication required https://www.firebase.com/docs/security-quickstart.html

AngularJS Firebase via Thinkster
https://thinkster.io/angularfire-slack-tutorial


Firebase official documentation


----------

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

Codecademy AngularJS tutorial for beginners
https://www.codecademy.com/learn/learn-angularjs

Building a wordpress theme using AngularJS
http://wordpress.tv/2014/06/16/eric-w-building-a-wordpress-theme-using-angularjs/

AngularJS fundamentals in 60 minutes https://www.youtube.com/watch?v=i9MHigUZKEM

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

 http://www.slideshare.net/Sky7777/the-best-startup-pitch-deck-how-to-present-to-angels-v-cs

Marc Andreessen famous startup venture capitalist, entrepreneur on Product Market Fit https://www.linkedin.com/pulse/marc-andreessen-product-market-fit-startups-marc-andreessen

 Startup tools and resources
 https://www.fundable.com/learn/resources/guides/startup-guide/startup-tools-resources

 Checklist for a perfect pitch
 http://www.startupcfo.ca/2011/10/checklist-for-a-perfect-vc-pitch/

 ui stencils http://www.uistencils.com/

 Startup stickers
 https://www.stickermule.com/products/sticker-sheets

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

Beautify your data driven iOS App via Eric Gu on Medium
https://medium.com/@ericgu/beautify-your-data-driven-ios-app-a70f7b22f963#.ob6axqvxq

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

http://www.sitepoint.com/create-your-own-wordpress-theme-from-an-html-template/


Eric Wolfe: Building a WordPress Theme Using AngularJS via WordPress.tv

High quality important tutorial though a bit dated now in 2016. Dev tool
http://wordpress.tv/2014/06/16/eric-w-building-a-wordpress-theme-using-angularjs/
Yeoman scaffolding for Wordpress theme called Yeopress
https://github.com/wesleytodd/YeoPress
The Lazy Smart Programmer way to set up a wordpress website
http://www.amyhaywood.com/the-lazy-smart-programmers-way-to-set-up-a-wordpress-site/

General WordPress Tutorials


WordPress shortcode for beginners
How to add a shortcake in WordPress
http://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/

customize wordpress front page
https://wordpress.org/support/topic/a-different-css-for-front-page

SEO for WordPress tutorial by No.1 SEO plugin on WordPress - Yoast
The Definitive Guide to Higher Rankings for WordPress Site
https://yoast.com/wordpress-seo/

How to include JavaScript and CSS in your WordPress Plugin by Tuts Plus
http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321

How to add Google Authorship tag on WordPress
http://www.copyblogger.com/wordpress-google-authorship/

How to set up Pinterest rich pins on WordPress
http://www.mcngmarketing.com/how-to-add-rich-pins-for-articles-to-my-wordpress-blog/#.VxsvrKMrKB5

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
CloudPress
http://cloud-press.net/

WordPress custom CSS JavaScript plugin
https://wordpress.org/plugins/css-javascript-toolbox/screenshots/

Social Media Optimization with WordPress SEO by Yoast
https://yoast.com/social-media-optimization-with-wordpress-seo-by-yoast/

Ultimate library and market of WordPress themes for sale - Theme Forest
http://themeforest.net/

Pinterest-like WordPress themes
http://demo.visualkicks.com/?theme=Clipboard
http://themeforest.net/item/clipboard-pinterest-inspired-wordpress-theme/5082705
http://us-themes.com/demo/?theme=ImprezaWP

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

Summary
Background

  • 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
Breakpoints 
  • Desktop
  • Large Tablet
  • Small Tablet
  • Smart Phone


Responsive design (CSS Tricks by Treehouse)
Responsive Columns Grid
https://css-tricks.com/guide-responsive-friendly-css-columns/

Dev tool - responsive column responsive grid calculator
http://www.responsivegridsystem.com/calculator/

A godzilla list of responsive design resources
https://bradfrost.github.io/this-is-responsive/resources.html

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

Using Media Queries in JavaScript
http://modernweb.com/2014/03/24/using-media-queries-in-javascript/

Pure - a small light-weight responsive css library
http://purecss.io/start/

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.
http://zurb.com/playground/pizza-pie-charts

Dev tool - WordPress - create responsive WordPress themes without coding
CloudPress
http://cloud-press.net/


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 https://support.stripe.com/questions/using-stripe-without-programming

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 https://stripe.com/connect 
Stripe Connect https://stripe.com/docs/connect
Stripe Data API https://stripe.com/docs/api 
Access to Stripe Data:
https://stripe.com/docs/connect#data
Stripe international global https://stripe.com/global
Stripe US feature https://stripe.com/us/features
Sites that currently let you management and accept stripe payments https://stripe.com/docs/integrations
Who uses stripe? https://stripe.com/gallery

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

     https://stripe.com/docs/tutorials/sending-transfers



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
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.
Applying
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)
http://code.tutsplus.com/tutorials/javascript-and-the-dom-series-lesson-1--net-3134


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

https://pages.github.com/
https://developer.github.com/v3/markdown/
https://help.github.com/categories/writing-on-github/

Tutorial Spotlight - language Markdown - amazing world of coding tutorials

Writing your resume in markdown by Phil Hollenback (blog)
http://sysadvent.blogspot.com/2011/12/day-14-write-your-resume-in-markdown.html

78 Tools for Writing and Previewing Markdown (Mashable.com)
http://mashable.com/2013/06/24/markdown-tools/#L.XuJjd3iqq9

Write in Markdown and host your website or blog for free on Github as Github Pages
Write Github flavored markdown
https://pages.github.com/
https://developer.github.com/v3/markdown/
https://help.github.com/categories/writing-on-github/



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 Codecademy.com for your pocket.

Source: TechCrunch article http://techcrunch.com/2015/03/19/swifty-teaches-apples-new-programming-language-on-your-iphone/?ncid=rss
Download the app on iTune https://itunes.apple.com/us/app/swifty-learn-how-to-code!/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
modal
modal-dialog
modal-content
modal-header
modal-title
modal-body
modal-footer
data-dismiss="modal"


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');
$('#my_modal_id').modal('hide');

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:
http://getbootstrap.com/javascript/#modals

Monday, April 11, 2016

How to practice JavaScript beyond Codecademy.com

You finished the Codecademy.com 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 Google.com


React UI, UI UX, Reactstrap React Bootstrap

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