#BFTW: Foundation

One day training program for aspiring web developers.

Learn the core technologies of the web, from an awesome team of experienced web developers.

Who should attend?
This training is designed for people with very little or no experience in web development. We will introduce you to the foundational technologies of web development: HTML and CSS. There is no age requirement but a basic knowledge of using a computer, creating, editing, deleting files and browsing the web is required.

The lectures will be offered in Spanish and materials will be in English. A lot of the terminology tends to be in English so we expect attendees to have at least some basic English skills.

Tell me more
Below you’ll find a few of the topics we are going to cover on the training. As you can see it’s going to be quite an intense ride so rest well and come ready.

  • Introduction to HTML
  • Working with Links, Images and Paragraphs
  • HTML Structure: Using Lists
  • HTML Structure: Tables, Divs and Spans
  • Building your first page
  • Styling HTML Elements
  • Introduction to CSS
  • CSS Classes and IDs
  • CSS Selectors
  • CSS Element Positioning
  • Styling your first page
  • A little about responsive web design
  • Brief intro to Bootstrap

Building Ember.js Applications for Production

Brunch with Emeber.js

UPDATE: You should use ember-cli the official build tool for Ember.js.

Developing Ember.js apps for production is nothing like what you see on the tutorials or guides around the interwebs. Most guides just throw some code on an HTML file and maybe two or three extra JavaScript files. That’s not how it works in a real world scenario.

If you are working with any of these client side JavaScript frameworks you need to deal with modules, pre-compiling templates, source maps, css pre-processors, linting and minification of files. It’s a lot of stuff.

Lucky for us in the Ember.js camp there’s a lot of stuff going on.

I’ve tried all of them and they are cool. But after a year of using Brunch on Backbone.js and more recently Ember.js projects they all feel either, incomplete or slow. I’ve also tried using Grunt but the Gruntfile became huge and over complicated really fast. It felt like I had more Grunt code than Ember code and worst of all: GRUNT IS SLOW! Really slow if you want to watch your files and re-build on changes. SUPER SLOW.

Brunch is blazing fast, mature (older than Grunt) and it has all the features you might ever need.

Builder, linter, concatenator, minifier
Brunch can compile your JS, CoffeeScript, Stylus, Sass (+ Compass), LESS, Handlebar, (and much more) files, concatenate output to and minify it. It just doesn’t care about languages or frameworks you use.

File watcher
Brunch recompiles and concats all your stuff automatically on any change, headlessly. No more need in compacted Makefiles and watchers.

Auto-reload
Brunch reloads your browser window every time you change stuff (with auto reload plugin).

Auto-support for modules
All script and template files may be wrapped in modules (CommonJS or AMD) to prohibit global public access and encapsulate code. Brunch may also do the job of r.js optimizer automatically.

Blazing fast
Speed is important for app watchers. Usual brunch compilation takes less time than you need to alt-tab to browser window. Unlike Grunt, Brunch recompiles only changed parts of your app and extensively uses caching for others.

Incredibly simple
All you need to do with Brunch is run one command and everything will be managed for you, without need to write sophisticated 300LOC build configs.

Headless Bower integration
Brunch supports headless integration with Bower package manager. Unlike with Grunt, you don’t need to specify all used files in details — brunch will auto-detect them in most cases and automatically concat in correct order.

Headless source maps generation
Brunch automatically generates source maps for all your files so debugging becomes very simple even when all files are concatenated and minified.

ES6 Module Syntax
Just today I created a 26 line plugin that adds ES6 module syntax to brunch It was incredibly easy to write, and share using npm. Other plugins.

Skeletons
Brunch can generate your project from predefined template. There’s a lot of great skeleton projects you can use already, including a bunch made just for Ember.js.

So there you have it. Brunch is a great option for building Ember.js or any other kind of apps. I recommend you take it for a spin before making a decision about what tools to use. Let me know how it goes.

Photo credit: http://bit.ly/I8is4J

Want to Learn Ember.js? Start Here

learnember

Ember is awesome but it requires some effort to get started with. This is my attempt to make thing easier for everyone trying to learn. Here’s my collection of getting started resources for Ember.js.

 

Intro
Building Web Applications with Ember.js –  Yehuda Katz shows us how Ember can be used to build fast and responsive apps, and shares some nifty aspects of Ember you might not know about.

 

Basics
Ember Guides – Read this! This is the official documentation. If you tried reading it before you should really give it another chance. It’s a lot better than before, that’s why I recommend it as my #1 resource.

Building an Ember.js Application – This screencast will walk you through the process of building a blog reader application using Ember.js 1.0.

An Ember.js beginners tutorial –  Pretty long tutorial covering all the basics of building an Ember app.

 

And then…
Ember without Ember Data – As the title suggests, this is great post on how to use Ember without the Ember Data persistence layer.

Ember 101 – Learn Ember One Video At a Time.

Embercasts – Ember focused screencasts.

 

Getting Help
StackOverflow [ember.js] – Start by searching StackOverflow for questions tagged with ember.js

#emberjs on Freenode – My experience here has been amazing. Just make sure you are polite and if you need to share some code use something like jsbin.

 

Source code to learn from
Discourse
TravisCI
Todo MVC

 

Staying up to date
Ember Hot Seat Podcast – The Ember Hot Seat is be a web series dedicated in bringing you the latest and greatest news from the Ember.js community.

EmberWatch – A great aggregator of Ember-related content.

EmberWeekly – The latest Ember.js news, tips & code delivered directly to your inbox.

 

Meetups

emberjspr
Finally if you want to super charge your learning process you should really go to a local Ember meetup or start your own like I did with Ember.js Puerto Rico.

 

Did I miss something? Share your resources on the comments below.

From DHTML to Node.js

dhtml-to-node

I’ve been using JavaScript since we used to call it DHTML or something like that. Things have changed dramatically for the language we all used to love hating. There’s is a new community, with new platforms and even a refreshed language about to land with the arrival of ES6.

While writing this blog post I remembered a post I wrote on 2009 when I announced that I was going to learn Python. This blog post is basically about the same thing. I’m going to dive into Node.js.

The only difference is that this time I’ve been using the language for years, if you count all the years I used it without really knowing it. I divide my JavaScript experience in two parts before and after JavaScript The Good Parts.  Reading that book made me realize that JavaScript was a real language and not just a thing you had to use if you wanted to get fancy on the browser.

In the past year while working on Blimp I’ve learned a lot about JavaScript and about the new ecosystem that has emerged around things like Backbone.js and Node. Also having an awesome JavaScript developer (@Elving) always around has helped understand the new things a lot faster.

Why node.js?
Simple, the kinds of web apps I want to build in the near future are all going to be using web sockets and trying to do real-time interactions as much as possible. Node was built specially for this kind of thing and seems to be the more performant choice out of the box. It feels like the right tool for the job.

I already have a few projects in mind so my diving into Node should begin pretty soon. I’ll try to keep you posted.

Adobe Edge: HTML5 a la Flash

Screenshot Adobe Edge

Por: Francisco Tirado

Acaba de salir el primer preview de Edge por Adobe, inmediatamente baje la versión de Mac y me puse a trabajar!

¿Por qué la pompiadera?
Para quienes no comparten mi ánimo inmediato o no están al tanto de las recientes batallas entre el Flash plugin y HTML5 (ya no tan reciente desde que HTML5 ganó), Edge es la respuesta de Adobe a los ataques de Steve Jobs por incosistencias en el player en Mac, la inabilidad de tener una version no-limitada en los aparatos móviles y en fin haber perdido la batalla contra estándares.

¿Que es?
Lo que idealmente Edge nos traerá es un IDE (Entorno de desarrollo integrado) que haga mas fácil la creación de animaciones, aplicaciones y juegos sin necesariamente saber HTML/CSS/Javascript. En mi opinión la meta no es tanto la herramienta para quienes no saben tales lenguajes, si no una manera de estructurar el código en un ambiente visual mas fácil de apreciar y entender por varios programadores.

El GUI
Habiendo sido un fiel usuario de Flash por años, me resultó bien facil de usar, se siente como la versión futurística de la version del 1994 de Flash; explico…
Aunque el GUI (Interfaz gráfico de usuario) está a la par con los programas populares de Adobe inclusive mas ‘sleek’ que CS5; siendo el primer preview falta la mayoría de todo. Tanto asi que las herramientas con que uno cuenta son sólo tres: el pointer, un rectángulo y rectángulo con esquinas curvas. Por el momento no hay círculos, ‘paths’ y mucho menos movieclips.

¿Donde está el MovieClip?
Para todos aquellos que vienen del mundo de Flash conocen lo importante y poderoso que es un movieclip. Es tan importante que paré todo un momento y me pregunte cómo no había algo parecido… Mientras lo extrañaba me puse a pensar en el enfoque de diseño que le está dando Adobe a este proyecto. Realmente no hay necesidad para un movieclip, tus objectos son tan sofisticados como quieras determinar por Javascript. Por ejemplo, una vez termine mi animación en Edge quería que hiciera un loop y al no encontrar como hacerlo en el programa, escribi lo siguiente en el ready function:

 

El Código
Con esta realización me puse a verificar el código que genera Edge y es lo mas limpio que he visto ser generado por un programa. Se acabó el tiempo pre-web2.0 de los plugins con valores duplicados para ’embed’ y ‘object’, ahora parece que esto lo hizo la misma w3c. Todo está super organizado al abrir el bonete y obviamente el motor es jQuery. El css viene generado con fallbacks e interpretaciones específicas para cada browser. Todo lo que es Javascript está en un file aparte. Estoy seguro que en un futuro se podrán usar los CDN de Google y quizas comprimir los ‘.js’.

No todo es fiesta sin embargo, mayormente porque no se puede hacer casi nada con la aplicación, pero es el inicio. Edge puede ser el jQuery de javascript, y un punto de entrada para animadores y diseñadores a HTML/CSS/Javascript.

Aquí una animacioncita que hice.