Posts

Creating a bower library

Inspired by Brian Fords bower post and using angularjs-library yeoman generator I created a simple angularjs component which can be installed using bower. My cheatsheet of steps: Make folder and run generator   mkdir dos-<library>   cd dos-<library>   yo angularjs-library init as git repo  git init Set & confirm commits email   git config user.email "deniskos@hotmail.com"   git config user.email Commit  git add .  git ci -m "inital commit" Add to remote Github   create a new github repo then use command below   git remote add origin https://github.com/DenisOS/dos-sequential-dates.git Verify   git remote -v Push to master   git push -u origin master Tag it and push tag (used by bower)   git tag v0.1.0   git push origin v0.1.0 Install a library dependency from Bower   bower install moment#2.5.0 --save-dev

FlexBox recap

Following along egghead.io flexbox tutorials Bootstrap framework v4 using Flexbox for grid layout Flexbox make container display: flex can set children row or column  column: flows top to bottom order: can set order in which children are displayed  all children have 0 for order by default and are laid out as in the dom  changing order high moves it after lower orders in flow  can also set to negative number to move higher justify-content: affets way children are aligned along the way the content is flowing  defaults to flex-start which means they bunch near start  center: can center vertically  flex-end  space-between align-items: affects space perpindicular to the flex direction  defaults to stretch align-self: sam as align-items but only applied to specific individual children

Arduino uno and nodejs Johnny-Five

Last fall at the HTML Developers conference I attended a talk about IoT and programming using an Arduino Uno board with a node library "Johnny-Five" which sent updates to Firebase. Wow It was cool. So end of last year I bought an Ardunio kit from Sunfounder with the purpose of learning myself but also teach programming and electronics to kids. Finally after much procrastination, I started this weekend with my son. We completed the basic hello world exercise . Tonight we wired and programmed a button to turn on and off an Led. It took two goes at wiring the board but we got it working. Hold down the button and the light comes on, release it and it turns off. Example here I think combining electronics and software programming could be an interesting way for kids to learn. Having the feedback of an Led blink on and off will hopefully stop kids from getting bored. I'd love to do some kind of tutorial for kids in his school, would be fun. Tonight I had to bribe ...

Mac testing IE using Virtual Box

To test on IE on Mac I use Virtual Box and an IE image (which Microsoft provides). Setup as follows. download virtualbox from Oracle download an IE image from Microsoft (mac page) ; choose VirtualBox as Platform unarchive the IE image (I had to download TheUnarchiver) as recommended by Microsoft; right click and choose the unarchiver to open; should unpack a .ova file start virtual box choose File -> Import Appliance and choose the .ova file you unarchived it should create an entry in the BV list which you can run should startup and you can run IE To access localhost I use my machines IP name instead of "localhost" 10.0.2.2 also works for localhost (don't forget ur port number if you have one) Links Import ova files to VB: https://www.maketecheasier.com/import-export-ova-files-in-virtualbox/

Angular 2.0 learnings

This contains links and project related to my learning of Angular 2.0. Building a new Angular2.0 app I followed this youtube vid and built a basic to do app. See the plunker here  for what I built. Its interesting because its a good guide and written in es5 not typescript. But I think its out of date (using alpha angular js library and component syntax seems to have evolved) so next I'll follow the quickstart guide on angulars site . ...and here's my implementation of  angulars quickStart implementation (still ES5) . I included a basic DI of a service which is used. It works but I know there's more elegant ways to accomplish DI. Next up, I built the Tour of Heroes tutorial on the angular 2.0 site. Its here in my github . The tutorial on the angular2 site does not include routing but John Papas github implementation does. So next is to add some routing to this app. Strategies for upgrading existing apps Some useful links I came across for dealing with 1.x a...

React learnings

My links and notes as I learn more about React "React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time." "React is all about building reusable components. In fact, with React the  only  thing you do is build components." I'm finding the React docs are pretty good for a beginner I worked  on this tutorial and built it out. Nice touch that they include all you need including simple server in the starter kit. Allows me to build something straight away. R eactDOM.render() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument The ReactDOM module exposes DOM-specific methods, while React has the core tools shared by React on different platforms props  are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mu...

Application Architecture consistency

Just read a good article on Angular App Structure .  I left a comment and as I wrote it I realized (duh) that a significant part of the problem is one of consistency: Organization by type is inconsistent with what the logical application architecture is.  Over time, that inconsistency leads to bad design decisions and all other kinds of mistakes large and small. When there is consistency through the app from features to architecture to physical code, it makes it easier for everyone, easier to think and reason about the app, make design decisions, add more code, share a common terminology, work together etc. And when I say "easier for everyone" I include the product team, qa, management, designers and developers. Thats not to say there can't be differences between logical architecture and its physical manifestation. Sometimes that is necessary. But I think its works best if the logical and physical are mostly in synch and material differences are exceptions.  Buil...