JS studies – Angular.js

I’ve recently started learning AngularJS, following a course on Code School. Angular is a JavaScript MVC framework that has become really popular for building web applications over the last few years. We’re going to be using it in an upcoming project in work, which I’m very excited about. Here are my notes from my studies so far.

Building blocks of Angular:

Directives are HTML annotations that trigger JS behaviour.

Modules are where we write piece of the angular app and define dependencies.

Controllers are where we define app behaviour with values and functions. Initialisation and configuration of a module should be stored inside a controller.

Expressions are how dynamic values get displayed within a page. Expressions define a two-way data binding.

Directives

We can use our own custom directives for Angular to use, and also use the built in set of directives that come with Angular. Some of the built in directives include

ng-app attaches the app module to the page.

ng-controller attaches a controller function to the page.

ng-show / ng-hide shows and hides elements on the page based on a boolean value derived from an expression.

ng-repeat allows us to iterate over properties in an object and perform an action for each.

ng-click allows you to add custom behaviour when an element is clicked.

These directives are added directly in html as a tag attribute eg.

<html ng-app="MyApp">...</html>

Filters

Expressions can be formatted by filters. The syntax for filtering an expression is as follows:

{{data | filter:options }}

If you were to filter an expression to display as a currency you would do so as follows:

{{ 400 | currency : "€"}}

This would output €400.00 into your html. The options are not necessary to include.  If a symbol is not provided in the options for this currency example, it will default to the local currency symbol, which is pretty cool.

Some examples of built in filters include:

  • date
  • uppercase
  • limitTo
  • orderBy

You can read more about filters here.

Book Club studies – ‘Scope and Closures’ Chapter 1

I’ve been reading Kyle Simpson’s “Scope and Closures” from the “You Don’t Know JS” series for our new DD book club.

Notes :

Chapter 1 deals with defining scope, and understanding the relationship between the scope, engine and compilerThe code is compiled before it is executed.

The scope is a set of rules for looking up variables.

The compiler declares a variable in the current scope.

The engine looks up the variable and assigns it a value.

An LHS (left hand side) lookup is for the purpose of assigning to the variable. It looks up the container, not the value.

An RHS (right hand side) lookup’s purpose is to retrieve the value of the variable.

eg. in the following assignment operation

x = 4

x is the target of the assignment and is the source, or value of the assignment.

Implicit assignments

function foo(a){
  console.log(a);
}
foo(2);

In the above example, foo is an RHS lookup. is an LHS lookup, because it is being implicitly assigned the value 2, by the 2 being passed as an argument to the function foo.

The compiler will look for a variable in the current scope, and if it cannot find it, it will go up a level and continue to do so until it finds a matching var declaration.

If it does not find a match, for an LHS lookup it will be automatically defined in the global scope (unless using ‘strict mode’). If it does not find one for an RHS lookup, it will throw a reference error.

reference error is when the variable cannot be found.

type error is when the var can be found in an RHS lookup, but the action is illegal or impossible.

An identifier is the name of a variable already declared.

Global variables can be referenced from the global object eg.

Window.a

Lexical scope is only defined where the function is declared.

eval() can cheat scope by dynamically generating code. This is not worth the performance hit.

SMR App – Part 2

My goal for our most recent Hack Day here in Digital Detox HQ, was to use PHP and MySQL to get my SMR app up and running. I have some experience using PHP in my work projects, but saw this as a good opportunity to learn more about how to create a database from scratch.

Hack day tasks

  • Set up environment
  • Set up database structure
  • Use PHP form to submit users to database
  • Integrate camera for selfie
  • Do some work on visual design

The database setup

I used MAMP and phpMyAdmin to set up my server, my database and my tables. It was quite straightforward. I won’t go through all the steps I made, there are some great tutorials out there, but I’ll just go through what I did for my table structure, as main thing I learned in this exercise is how to structure a database using tables and what types to use.

I set up my tables in PHPMyAdmin. After doing a bit of research, and trying out a few variations, I set it up as follows :

name type Extra
id int(11) auto_increment
name varchar(255)
contact varchar(255)
role int(11)
level enum(‘jnr’,’mid’,’snr’)
url varchar(255)
selfie varchar(11)
dd int(11)

An explanation of the types in my table

Most of the fields have the type varchar(255). This is for a text field that can take any character input, with the 255 limiting it at 255 characters. This is perfect for our name, email etc where we don’t really want to limit what the user can enter.

The id field has an integer type int(11). This will not come from a form field, but will just assign each entry an integer starting at 1 and auto incrementing. 11 is the max amount of digits for this field.

The role and dd fields also have the int(11) type. These are both dropdown select boxes in the HTML form, and the integers will be used in conjunction with a lookup table.

The level field is an enum type, with some given values – enum(‘jnr’,’mid’,’snr’). This is a field that will only ever have those three values. In the previous fields we have used lookup tables as the options are quite likely to change.

For selfie we will want to be storing a photo, and potentially a video for each user. After doing a bit of research it seems that the best option for doing this is to upload the photo/video onto the filesystem, and to store a string reference to the file in the database, hence the varchar type.

With my database structure all set to go, it’s time to use PHP to submit data from a HTML form to my new table. I’ll do a bit of a tutorial about this in the next post.

SMR App – Part 1

So for hack day, one of my bosses asked me to develop an app for the Silicon Milk Roundabout recruitment fair thing thats coming up.

We did the last one back in May and met lots of cool people, but we found a problem with how we took everyones details – pen and paper. The issues were that the handwriting was not always legible, it was messy, and it was hard to remember who was who – sometimes we couldn’t even figure out from the name if it was a lad or a lady.

So, although we looked into it and saw that you can purchase lots of apps for capturing these kind of details, we said, hey let’s do it ourselves! We love any opportunity to try something new and learn a few things.

So as a personal challenge, I decided that I would do the UX/design and also the back end integration using PHP and MySQL, and I’ve recruited one of the delivery managers in the office to do the front end work. She’s been learning HTML and CSS for a while now and we’ve all been helping to teach her, so it’s time for her first project :)

Step 1 : Planning

I sat down with Charlotte who I guess is playing the role of product owner in this little side project, and we made a list of requirements for our app. The requirements are the bare minimum that we need, and the nice to haves are what we will hopefully have time for. These were as follows:

Requirements :

  • Target device is iPad, both large and mini and such be usable on both portrait and landscape modes.
  • Target browsers are Chrome and Safari
  • Form validation
  • Camera integration to upload a selfie
  • User details captured in a database
  • Database can be exported to .csv file

Nice to have :

  • Video selfie
  • Email confirmation
  • HTML page that outputs user profiles
  • Filtering of profile page
  • A way of marking candidates as favourites

Step 2 : UX

ux

UX design is something I studied in college, but I haven’t done in about three years, so this was kind of a challenge for me. I thought because I was just building a simple form it would be very straightforward, but after a bit of research I found that there are a lot of different opinions on what is best practice, and conflicting with all I’ve learned in DD about accessibility. I found this “Ten Commandments” article by Johan Ronsse to be a very good resource.

After a few different iterations of sketches, wireframes and some guerrilla feedback courtesy of my colleagues, I’ve come up with a first version, which I think covers all of our requirements, but in its most simplistic form. I’m sure this is bound to change but it’s a good place to start.

smr_wires_0.2

 

Before I jump into the visual design, I’m going to do the back end work, as our office Hack day project, which I’ll do another post about.

Day 1 – 30 day JS challenge

Day 1!

In in all honestly, today was not a great start. I got about four pages into “Scope and Closures”, one of the books from the You Don’t Know JS series. I was excited to read this, but quickly remembered that JS books can be pretty dry. So far I’ve “learned” about the engine, compiler and scope. I say “learned” because although I may have read it, I sure don’t understand it yet.

Not to fear! A slow start is better than no start. I’ll do better tomorrow.

Today was v productive otherwise, as I started a new side project in work. Today I got to do some product development, fleshing out ideas, gathering requirements and creating the first sets of wires. These are things I haven’t really done in a couple of years and I found it quite enjoyable. It’s all in prep for our DD Hack Day tomorrow. I’ll do a separate blog post about Hack Day and this project I’m working on.

Peace out x

Personal site development

So today I took down my beautiful handcrafted personal one page website. Mainly due to the fact that I hadn’t updated more than just the intro blurb since it went live in 2012. I built it as a portfolio for finding jobs and although I’m still proud of it, the projects it showcased are all quite crappy and don’t really show my current skills as a developer.

This website is going to be kind of a live work in progress. I’ve decided to publish as regularly as possible, but have the work-in-progress visible. I think that will make me more likely to actually work on it, because this is my representation on the web, and I want to be proud of it.

The first step I took today was to install wordpress, which was easy as pie, I just pressed the “wordpress blog” button that is present in my hosting control panel. Et voila.

wp-install

This got the blog up and running on my domain, and I just opted for a generic WordPress theme, and created a quick front page. So much to do now…

  • download site and host locally for development
  • set up version control (probably git, but look into other options)
  • design new site!
  • build new site static
  • integrate into wordpress
  • Look into how to manage deployments (Jenkins?)

That’s just a list of tasks from the top of my head. Hopefully now I actually stay commited to this and follow it through. I love to dev, but as I already do it as a full time job, I don’t always make the time for my personal stuff.

Here goes nothing.

30 day JS challenge

Here we go!

Tomorrow I am starting my 30 day personal challenge to study JS for at least 30 mins every day.

I’ve been learning JS for about two years now, and work as a front end developer, but I really feel like my development has plateaued, and am looking to boost my skills.

My company have been kind enough to get me these awesome books from the “You don’t know JS” series by Kyle Simpson, which come highly recommended.

js-books

My basic plan is to get as far into these book as possible, and also to finish off my JS code school course, and see how I can apply the things I am learning to my current role at DD.

I’m excited! Lets hope I don’t lose all interest in two days time.

Wish me luck!