Category Archives: Responsive

Angularjs 2: My Journey

Well, started my course on Angular2 yesterday. So, I was thinking I would share my experience and thoughts about learning the latest Google technology as I go along.

Angularjs 2: February 23, 2017

Today I learned that, Angularjs2 is not Angularjs 1. They are completely different animals. If Angularjs1 is a walrus, then Angularjs2 is a Sea Lion. They’re kinda the same, but not really.

That’s not necessarily a bad thing! I mean, I was able to get up and running with my first Hello World application within 10 minutes — it really couldn’t be faster! Simply install the Angularjs 2 package from the CLI using npm (node’s package manager). Create a project, and ask it to serve… and you’re viewing “Your App” @ localhost:4200 tout suite!.

Install Angular2 via NPM

$ npm install -g @angular/cli
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng serve

Additionally, I learned that (as with its predecessor), there is the main component, or “root component” entitled, ‘app-root’. And, that alot of what I will be building is components. So what are components? Well they consist of a .css file (optional), an .html (optional), a .ts (typescript file) (or two if you’re testing).

How to Create an Angular2 Component via NPM

$ ng generate userinfo

This generates four files (there are other commands to omit files):

  • userinfo.component.css (optional)
  • userinfo.component.html (optional)
  • userinfo.component.spec.ts (testing, optional)
  • userinfo.component.ts (required)

When i opened up the userinfo.component.ts file – the typescript file. I could clearly see an import statement at the top which seemingly imported the “Component” library from the angular/core. I imagine I could add additional libraries to import from angular/core or perhaps from external libraries.

The next section included an @Component({}) section with a number of parameters which reminded me of the Angularjs 1.5 versions of a directive. Mainly, the setting a selector part.

The selector can be set with a # – (just like in Angular 1.X), which makes this a div component so it would be called like

. Optionally, the component can be rendered by setting its call like this :

 

.

The templateUrl: would allow me to include an external html, but I can optionally write inline html instead by changing this parameter to ‘template’. Same goes for the style, include as external file as generated above, or use inline. The general rule for using inline html and css though, is if your component is small enough. So mostly, you’ll utilize the css and html generated files. If you don’t need them, you can simply delete them. The only required file — is the .ts file

Angularjs 2: February 3, 2017

So its been a few since my last post on this subject, and I’ve skipped ahead. So today, I’ll share some of the “oh yea” moments.

Constructor versus ngOnInit

Angularjs2 provides hooks to various points in the app’s lifecycle. But recently, I had this question: What is the difference between the constructor() and ngOnInit() ?. Here’s what I found out…

The constructor is called regardless of whether you include the constructor. The constructor is called before the ngOnInit. And the constructor is used to initialize parameters and variables. The ngOnInit is where you would put code that needs to make sure component’s initializations have taken place. The ngOnInit happens right after the constructor is called. So put your code in ngOnInit when the component has built.

// Annotation section
@Component({
  selector: 'my-app',
  template: `
Hello {{ name }}
` }) // class MyApp { // Constructor call is optional... if I don't // include the constructor, it will be called by default. // Every Class has a constructor by default. // Instantiate any code you need to initialize in your component. constructor() { this.name = 'Valerie'; } setChildComponent(info) { this.ChildComponent = info; } // ngOnInit is auto generated in the file when you create your component. // Initialize any child components here. ngOnInit(){ setChildComponent(info); } }
web-design

Web Designs

WEB DESIGN SNAPSHOT

In no particular order, here are just some web design projects I’ve worked on over the past 20 years.

harmonica.com

Harmonica Lessons – Web Design – WordPress

Integrated payment processing system into wordpress to automatically display products with sales data as set-up outside. Designed and integrated layout alterations into wordpress. Designed and developed single sales pages.

Chrysler / Jeep

Chrysler, Jeep – Web Design

As a web developer for Autodata, designed a jeep customizer for Jeep.ca which enables users to customize their own jeep. Carousel scrolling of each of the car parts, and auto swaps the image to update accordingly. In addition, provided ongoing bug fixing for chrysler.com by tracking down issues as reported by ticketing system; and providing solutions to each.

Theodore Alexander

Theodore Alexander – Web Design Custom C# .NET

Working for Critical Mass as the Interface Developer, sliced the PSD file to pixel perfection and worked with back-end developers to integrate with back-end C# / .NET with dynamic javascript elements. The sliding drawer didn’t which was considered for the home page, but ultimatately didn’t make it into the design, can be viewed here.

Bank of America

Bank of America – Web Design Java HTML CSS

Working for Critical Mass again, worked on their Americas Cheer website which celebrated the 2008 Olympics by integrating facebook, youtube, and twitter live blurbs to a beautiful, dynamic front end. As the Interface Developer, I was responsible for building the front page which randomly selected from three possible layouts, and filled each section dynamically with random social media blurbs.

The Shopping Channel

The Shopping Channel

Part of a large team of developers working to re-do the entire infrastructure of theshoppingchannel.com website in-house. As the front-end developer, worked with back-end developers on how to integrate a dynamic C# back-end with pixel perfect front end design. The challenges here were the ability to build “zones” dynamically to allow non-developers to affect real change on the site on a go-forward basis (in-house CMS).

Technologo – The place where it all began…

Technologo

Taking my visual basic experience and parlaying that into asp classic to build a complete suite of online B2B tools directed at the Promotions Industry.

Various

Case Study: Kings 1912 Mobile Web Design

Kings 1912 Case Study

Such is the case with Kings 1912, that their online ecommerce website simply contains far more information than is necessary for presentation on a mobile device. Users want to know your location, and be able to browse your products with ease.

The mobile design was features a slider and an accordion style menu system. And was built with jQuery.

Kings Mobile Site