Recommended resources

There are lots of great resources out there for the front-end developer who wants to keep learning. I know that I’ve been able to glean much just from joining and listening to the right sources. Here’s a list of my favorite people/articles/podcasts to listen to. Get ready for a huge link list!

Share

Read More

OnePlus 3 Reviewed

I recently won a Twitter contest through XDA Developers, and they came through and sent me a OnePlus 3. It’s quite literally the first time I’ve won something of value! I am super excited about a new phone!!!

I’ve been a fan of OnePlus for a long time, ever since I began using the OnePlus One last year. Here are my impressions so far!

Love, love, love

My immediate opinion is that this phone is awesome. It has a “premium feel” overall, whatever that means. It is weightier but still maintains a good balance, similar to what an iPhone 6+ feels like.

Share

Read More

Angular2: Using third-party libs without typings

Angular2 is great in many ways, but one situation that I’ve found painful is integrating third-party libraries that do not have typings.

If you’re not already familiar with typings, these are the type definitions of libraries not written in TypeScript. Without these, TypeScript can’t type check them and therefore causes compilation errors. Fortunately, these libraries can still be used but they have to be added differently than imported modules.

  1. Include a script reference to the library on your page (index.html)

    1
    2
    <script src="//cdn.somewhe.re/lib.min.js" type="text/javascript"></script>
    <script src="/local/path/to/lib.min.js" type="text/javascript"></script>
    • The first is an example script that is pulled from some CDN.
    • The second is an example of a script that can be referenced locally. These could be managed by npm (node_mdules), bower, or manually.
    • These scripts will add or attach to a global (eg. THREE, mapbox, $, etc.)
  2. In the component that requires these, use declare to initialize a variable matching the global name used by the lib. This lets TypeScript know that it has already been initialized1.

    1
    declare var <globalname>: any;
    • Some libs attach to globals, such as window or document. Since these already exist in TypeScript, these objects need to be extended with the new object interface in order to be accessible.

      1
      2
      interface WindowIntercom extends Window { Intercom: any; }
      declare var window: WindowIntercom;
  3. Use the lib inside your components as needed.

    1
    2
    3
    4
    5
    6
    7
    8
    @Component { ... }
    export class AppComponent implements AfterViewInit {
    ...
    ngAfterViewInit() {
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    window.Intercom('boot', { ... });
    }
    }
    • NOTE: Be aware of and make sure to use the lib in the appropriate component lifecycle method. For example, any libs that manipulate the DOM should be used in the AfterViewInit stage (like in the example).
Share

Install zsh on Mac without homebrew

I’m not a big supporter of Homebrew. It just doesn’t solve any problems for me. I have only needed brew for zsh and maybe node (but for that I could use nvm or n). I don’t want to install brew just for those when they can be set up easily. Seems like a lot of overhead just for one function.

That said, I had a lot of trouble finding how to get zsh installed without brew. Seems like a lot of people have bought into it for what that it offers.

So here’s how I installed zsh on my machine without brew.

  1. Get the source tarball (zsh-*.tar.gz) from zsh.org
  2. Unpack the file

    1
    tar xzf zsh-5.2.tar.gz
  1. Build the binary. This will install zsh under /usr/local/bin/zsh

    1
    ./configure && make && make test && make install
    • The version of zsh that ships on Mac machines is outdated, thus why its necessary to build the binary.
    • You may get an error message saying install: /usr/local/bin/zsh-5.2: Permission denied. If so, you will need to sudo make install instead.
  2. You now have zsh installed and working on your system. Begin configuring it by running zsh in your terminal; you’ll see a series of prompts to enable and disable features to your liking.

  3. Next, you’ll want to also install oh-my-zsh. It makes zsh even more awesome by building in additional plugins and themes. This was the install script at the time of this writing.

    1
    sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
    • NOTE: you should read the contents of install.sh before directly piping it into your shell. Ya know, because security.
  4. Customize your heart out! Become familiar with the themes and plugins now available to you. Enable those which you might use most.

  5. Make sure everything works. I had exported some paths in my ~/.bash_profile file, and needed to copy those over to ~/.zshrc.

    • For some reason, nvm was one of those things that I couldn’t get to work quite right. I tried adding the paths to the zsh profile, making sure $NVM_DIR was correctly set, etc. Reinstalling was the only way I got it to work again.
  6. For these changes to persist, you’ll have to change your default shell. The easiest is to just access the setting through the UI. You could do this with a terminal command, so Google it.

    • Open “System Preferences”
    • Click on “Users & Groups”
    • Unlock the settings by clicking on the padlock and entering your password.
    • CTRL + Click on your user and select “Advanced options…”
    • Choose /bin/zsh from the Login shell dropdown
    • Click OK to complete

Bonus

Don’t let the fun end there. Here’s a few more things you can do to further refine your terminal to your liking.

Disable ‘last login’ banner

When I open up the terminal I see a line at the top saying something like

Last login: Mon Jan 1 12:00:00 on ttys004

This information is not very relevant to me, so I’d rather not see it. Silence this message by simply creating a .hushlogin file.

touch ~/.hushlogin

Disable the user banner

You can disable the user banner by simply adding DEFAULT_USER="yourusername" to your profile file.

Get a better font

I quickly became a fan of the Agnoster theme, but it required patched fonts (Powerline fonts) to be installed in order to display some of the special characters it uses (eg. git icons). I’m a fan of Source Code Pro, but I’ve also heard great things about Meslo, Inconsolata, and Terminus.

Share

Must-have Apps: Cross-platform edition

I believe that developers can benefit and learn from others’ favorite suite of tools. I’ll go over my favorite applications that help me be as efficient and quick while working on a Mac.

F.lux

F.lux is a great example of cross-platform compatibility. It comes with presets that are fine enough for me, and is available for Mac, Windows, and Linux. I installed it on my two computers that I use regularly, one a Mac and the other running Windows. The peeps at F.lux have gone through a lot of research to set the foundation of why their application is so useful. This is a must for anyone on their computer passed 6pm.
The’ve recently released an Android Beta app, but might become superseded by Apple’s Night Shift and Android N’s Night Mode.

KeePass

Alright here’s one that I’ve debated with friends about. There are alternatives like LastPass and 1Password, but I’m always one to avoid paying money. KeePass is my favorite so far for several reasons.

  • It is free and open-source software. Freedom!
  • It is cross-platform. Use it on Windows, Mac, Linux, Android, iOS, Windows Phone, Chromebook, and even BlackBerry.
  • They all use the same database filetype. You could save your database file to the cloud using Google Drive, OneDrive, Dropbox, etc. and use the same file among multiple clients.
  • Use in conjunction with chromeIPass (Chrome extension) or PassIFox (Firefox add-on) to populate your credentials into login inputs if a URL is matched to an entry’s site field.

PushBullet

I really couldn’t stand to use the iPhone (personal preference!) despite its great interoperability with the Macbook. PushBullet makes up for that loss by allowing me to receive notifications from my phone while on my computer, as well as letting me respond directly to text messages. An additional bonus is that I can use this on my Windows machine as well as other Android devices (think tablet). This way, I can see my notifications and respond to texts from literally any of my devices. Lastly, it allows me to push things like notes, links, and files between devices as well. Send a link from my phone to my desktop, push a new background image from my phone to my tablet, whatever. Its awesome!

Synergy

Synergy is a super handy utility that bridges multiple computers so that you can share one keyboard and mouse between them. You can use them multiple machines with the same keyboard, copy and paste from one to the other, and even transfer files using drag-n-drop (ahem, sorry. Between Windows-Mac only). Need it for enterprise? You can use the Pro version to encrypt your traffic using SSL. Its absolutely necessary if you work on different machines.

Share