Both professionally and personally, I identify as a software engineer. I practice web development – across the entire stack - but in the near future I will be diving into (Web)VR and IoT. I’m also interested in machine learning and data analysis, but I’m convinced that time is my nemesis. Yet I just can’t get enough of it; time. I also have experience in education and management, but regardless of my responsibilites, I will always be a software engineer and I will always do what I can to share my knowledge with others.

I am passionate about web development because of the ability to give others access to information on such a widely used platform. There are so many great ideas out there and I have many ideas of my own, I’m just excited to take on the challenges in bridging the analog and digital information gap. Additionally, we have a great community with many contributors.

I’ve built and maintained projects in front-end Javascript frameworks, AngularJS versions 1.4, 1.5 (component based architecture), Angular 2 and Ionic with respect to these versions. I’m also building projects in ReactJS and Redux. Modern day web development is very complex and consist of so much more than the JS client-side frameworks, but I’ll be posting about that later.

I’d often refer to myself as an full-stack engineer but I really want to emphasize that I enjoy working across the entire stack as well as DevOps. The software development lifecycle has so many overlapping boundaries and for me, to build in any specific area, I’d do best in understanding how all the parts interact and even enhance one another. In web development, I feel that it’s my job to fulfill team needs in building great user experiences and if the current version is feature complete and the API is set, I’ll work on styling, test coverage, tooling or working on the next iteration.

One of the things that I’m working on this year is asking others for help. Sometimes I’ll beat myself up trying implement a feature, working on async issues, or tracking down a bug. I think about giving up and starting over but I know that it has been solved before, so I can do it as well and also potentially help someone else with the same issue. But just another pair of eyes can often help solve some of the simple issues (also a good reason for testing and linting ASAP).

Altogether, I happy as long as I’m being challenged, there is room for growth and I have an opportunity to both learn more and help others. This is one of the many reasons I love software engineering. But when it comes to work, it’s also important to me that I get along and that I’m helpful to everyone on my team and to my organization.

Update: The beta version of Ionic2/Agular2 will soon be released. ngCordova plugins don’t work (or will require some clever hacking) with Ionic2. If you plan to migrate, you should understand this beforehand.

This post is specifically about my usage of the Cordova, InAppBrowser plugin. I did a considerable amount of searching to find answers to the problems I had and if I can help just one person get down to the root of their problem faster I’m more than happy with the time spent on this.

####First off, benefits of the InAppBrowser plugin:

Case: Accessing streaming media API’s such as Soundcloud, Youtube, Vimeo…

• Instead of actually embedding iFrames/widgets or even making frequent API calls, I just want to go straight to the media the sites link to using the oembed links (or not). I don’t want to have to load all this stuff when my app loads. I may not need EVERY link. I don’t want to have to manage the API’s plugin options (turning off autoplay/autoload…) so that it doesn’t steal resources from my app while loading. I just want to get the user to the content they need and I want the freedom (as much as possible) to determine how that content is displayed.

• Essentially, I want to create list items that the user clicks on, it opens the browser, they view the content (or not) which only then is it loading/streaming, hit the done or close button, and they’re right back in the app where they left off.

###Using the Plugin

Let’s assume a few things:

• You’re using Ionic/Angular version 1.x
• You’ve installed the InAppBrowserPlugin: cordova plugin add cordova-plugin-inappbrowser
• You’ve injected $cordovaInAppBrowser into your controller as a dependency

Assuming that you’ve completed the steps above everything else is simple enough. The first thing you’ll need to do is to set the options for the InAppBrowser which I reccommend doing as such:

var options = {}; options.location: 'no'; // Whether you want to display the url options.clearcache: 'yes'; options.toolbar: 'yes'; // Must be set to yes in order view the 'done' button options.closebuttoncaption: 'close'; // (ios) Must be set but you can choose the caption options.hardwareback: 'yes' // (Android) Enable the Android back button

• The next thing you’ll need to do is capture the URL Note: You’ll need to have the cordova-plugin-whitelist installed in order to resolve http to https I personally like to set the url to a variable and pass it in to make my function call cleaner: var url = https://www.soundclou.com/[name of the stream]

• Finally, you’ll want to call the the browser open function and pass in the paramenter like so: $cordovaInAppBrowser.open(url, _blank, options).

This should allow you open your streaming media without embedding iFrames/widgets, and making API calls, and you’ll be able to close the browser with the done button and return directly to your app.

Another important note: make sure to test these in device emulation. Running it in the desktop browser is not reliable in terms of testing.

Update: the InAppBrowser plugin works differenty in Ionic v2(alpha)

Branching is one of the most amazing tools you have with git. It’s essentially, version control inside of version control. What does that mean? Let’s say that all (the important stuff at least) of your code is working properly, and there is a feature that you really want to implememnt (if you can get it working before shipping) but you’re not sure that it will work.

You’re worried that messing around with working code may mess up the whole project. You begin to make local copies of the repo so you don’t risk breaking your working code, but now it’s not tracked by git. Let’s say the feature you decided to implement works and you want to set the new version to include the updates you just made. Now you have to go back and try to track all the changes you made, copying and pasting all that back into the master repo.

In that process you’ll likely end up breaking your code. Luckily, you created a bunch of the local, working, copies but you still face the same copy and paste dilemna. The solutions to this is branching. Branching allows you to create all those local copies (and push them to your git repo as a different branch) and then merge them with your master branch when you have them working. If you don’t get them working you can either just leave the branch for later work or delete it. The code on your master branch still works. You only have to be upset about spending time on a scrapped feature and without the worry of broken code.

There are also some very specific work

If you need to brush up on your Git basics see my previous post at: Git Started With Git

Step 1: [check branches] $ git branch - this will list the branches you have created and which branch you are currently on.

Step 2: [create new branch] $ git checkout -b [the name of your new branch (no whitespace)] Create a your new branch - Note:It’s good practice to prefix branches with common tags such as feat/newfeature.

Step 3: [commit, push] (feat/newfeature)$ git push origin feat/newfeature - This assumes that you want to commit and push your new branch to your Github.

Step 4: [merge branch] (master)$ git merge feat/newfeature When you have your new feature working and you want to merge it with your master, make sure that:

• You have commited your changes
• $ git checkout master - checkout to your master branch (or other branch you want to merge to) Once, you’re back on the branch you want to merge to run the merge command above. This will make you master branch identical to feat/newfeature branch.

Some good practices: - prefix your branch names with tags feat, refactor, bug, fix, style…so other collaborators have an idea what your’re working on. This also helps to keep me focused on my current feature. - It’s good practice to always work in a new branch and to keep your master branch clean and working. - As always commit often.

Additional branching features: - Get all the branches on a project: $ git fetch origin or $ git fetch upstream - Clone directly from a branch: $ git clone -b [branch name] [link to repo]

So “Git”, is a version control system for software engineering. It was designed by Linus Tovalds, the ‘Linux’ guy. I’ll explain it in terms of some problems it aims to solve (I’ll try to keep this as layman as possible):

####1. Version Control: Say that you get your project to a working state and you want to save it and use it now before you break it again. You still have some features to add but again, you don’t want to risk breaking your already working code. Maybe one way you’d account for this is to just create a bunch of local copies of your working code on your hard drive or a few different places. So when you break your code building that new feature or refactoring, you can just go back to one of 50 copies of your working code. If the new feature works and that ends up being version 1.x, recurse!

####2. Working in teams: Think about #1. It’d suck pretty bad if every time you want to add or change a feature of your team’s project, everyone one had to carry around a copy of the working project on a flash drive. Then, when you end up having to copy and paste your code into the current version - because of course, this is all supposed to happen asychronously - they ended up changing stuff that they didn’t say they were going to touch but needed to do so in order to get their feature working. Also, imagine that everyone has to document, every single change to every single file and you’d have to possibly review each of those changes before you can even get to making your own, so that you don’t end up with conflicting code. We’re not gonna get into package management or scaffolding, but let’s just agree that with projects this day in age, there are so many tools we use and we don’t know absolutley everything that is happening, especially in development. Long story short, this is a very difficult workflow (sort of).

####TL:DR: Basically, Git allows you do all the stuff above in a more automated manner. So instead of worrying about the mutiple copies, the documentation of changes…worry about your team’s Git workflow, which mostly includes all this stuff. Alright, if I’ve made this concept any more confusing you’ll get it when you’ve got some projects under your belt.

So moving on, there are bunch of great tutorials out there on using Git but many are filled with stuff you don’t need right away. While you’ll eventually understand it if you continue to work through it I think they could do a much better job at stripping down to basics first. This is going to be a series of posts tyring to hash out basics that will help make the more complex stuff easier to handle as your workflow needs it.

The first thing is that you’ll learn this stuff much easier if you actually apply it to a workflow. Also, we’re going to assume that you already have a few things already setup:

• We’re going to apply this to Github’s version control service. So you should have a Github account (it’s free)
• We’re going to be using an sh or “shell” CLi so you should be able to navigate to your terminal in OSX (download Git Bash for Windows).
• Next you need to have some basic command line interface (CLi) knowledge, specifically cd (change directory) and ls (list directory contents)
• You need know the different uses of cd in terms of navigating and creating directories your system’s directories (the directory structure is different for PC’s and Mac’s, I’m going to use)

I’ve not tried it out but I believe codecademy.com has a tutorial on the CLi

####A few more things to note: - That this aticle specifically will be a combination of using the GUI (not the Github GUI) and command line - I’m not yet going to explain branch, checkout, pull, --rebase, diff, hist…those will come in the future - This all, will be demostrated in a workflow that help to understand the commands. But within any organization, project, team… your Git workflow will differ

####Your editor and commit messages: NOTE: To do some of this stuff ($ git commit) You will be taken to a code editor (don’t do the -m thing). By default, Vim (a VI editor) or Nano will be your editor. I will discuss Vim usage since Nano has pretty clear instructions. I so I’m going to write the instructions for Vim below and you will have to refer to them if there is a step where I tell you to do so.

####Using Vim (be very careful here): Note: Look at the status bar at the bottom to see what mode you’re in - Hit a to enter into ‘insert mode’ so you can type stuff - Type the stuff your want (you must use arrow keys to move around) - Hit esc to get out of ‘insert mode’ - Then type a : - (shift :) - Then w then q then enter

####I’m going to explain how to: - fork - a project or repo (Github repository) to your Github profile - git clone - the repo to your computer - Check the git status - of the repo after you’ve made changes to it’s files - Stage or git add - the changes to be committed - git commit - or save those changes to make them Github ready - git push - those commited changes to your now forked repo

####But first, a bit of setup and for that you will : 1. From the CLi git config --global user.name "FIRSTNAME LASTNAME" 2. Then git config --global user.email "example@gmail.com"

##Here we go!

####Forking the Repo: 1. From the github.com page of the repo you want to fork, click Fork button under the thumbnail of your profile pic 2. The you’ll get a pop-up with options of where you want to for it to. Click on your profile picture…FORKED!

####Clone the Repo: 1. From the CLi, navigate to the folder where you want to store the repo you just forked 2. Navigate back to the forked repo in your own Github profile and copy the URL 3. From the CLi prompt [SOMESTUFFHERE]$ - type - git clone [PASTE THE URL HERE] - ex: git clone https://github.com/Shinobi881/Stakes-is-High 4. BAM!!! REPO CLONED!!! 5. Now is a good time to - cd - into the repo you just cloned and - git status -, no changes yet

####Make some changes: 1. From this point you can navigate to and open the repo however you feel comfortable 2. Right now just make a VERY small change to any file you choose and save it

####Stage changes and commit: 1. Go back to the CLi where you should be in the directory of your cloned repo 2. git status - to see the VERY small change you just made (it shows changes made from commit to commit) 3. git add [THE CHANGED FILE, VERBATIM] - or - git add . - to stage ALL the files you changes (optional) 4. git commit - Read below and follow Vim instructions above - This will send you to Vim to enter your commit message - Keep it concise and descriptive of you changes - Once you exit and save from Vim BAM!!! COMMIT DONE!!!

####At this point we’ve: 1. We’ve Forked - a repo to work on ourselves 2. git clone - to copy it locally 3. git add - to stage the changes for committing 4. git commit - to save the changes for committing

####Time to push the changes to Github: 1. git push origin master - This saves the changes to your Github profile - Publishes to your commit history (as long as it’s a public repo) - Compares changes against the master of the upstream repo

Next up will be branching with Git

I keep on hearing “You don’t JQuery!!!”

Truth be told, you don’t really NEED anything but vanilla JavaScript to engineer in JavaScript. But we’ve done some things to make it faster and eaiser for to be more productive with JS. The ongoing mission to improve user experience but most importanly, maximize for developer time. Enter JS libraries, frameworks and such. Or really just the concept of code reuse. I’m really just going to start rambling with out any specific examples but simple enough concepts, in the attempt to prove that: “No longer should JQuery be used in a shipped product.”

##The questions I’d ask:

• What are you using JQuery for?
• Are you using JQuery on top of another framework?
• Are you using enough JQuery to include a whole library?
• Is JQuery a library or framework (I’m still trying to figure this out. If I put much though to it I could prob make a good case for both. It probably is both with consideration to context of use)?

I do believe that JQ is fundamental to JS development. There are some moments when you have to just maximize for dev time and JQ is helpful for that. But let’s be real, these days, you’re likley working Angular, React or Backbone (let’s not even talk about React Native and/or Ionic). Some version of these has JQ or JQlite included. But the frameworks themselves come packaged event listeners and triggers, animations, their own DOM manipulation tools… Bottom line, if your app is well built with the framework you’re using there is no need for JQuery at least in the shipped version. I should say that DON’T use JQ in the shipped version (or get it out in future realeases).

I’m just starting to dabble in React and I’m seeing that some parts of it are intentionally left open for use with JQ, if you choose. In which case, use it! I’m curous as to whether or they will continue with this pattern in future versions. But in Angular, most of the ways that you’d use JQ - which I’ve stated above - are mostly built in. Use those.

The battle here, is what is maximizing dev time? Just using JQ to get the job done now or possibly spending more time debugging later, why what should work, doesn’t?

I said all that just to really say, using JQ these days is like mixing inline styles and stylesheets, Eventually, something is going to mess up and you need to account for it.

##So in summary:

• When you’re just checking “real quick” just to see if that one thing works, make sure to account for it or just use DevTools.

• Check first to see if your framework already has something for that

• Make sure you account for where and how you’re using (a case for good documentation) and keep in clear mind potential conflicts.

• Are you using it enough to include the library (yeah, even JQLite)

But even with all this, JQ is still very relevant and useful. Just be careful in how you use it.