https://fromanegg.com/ Recent content on From An Egg Hugo -- gohugo.io en-us Tue, 27 Jul 2021 10:00:00 -0600 https://fromanegg.com/post/2021/07/27/conditional-data-types-with-typescript/ Tue, 27 Jul 2021 10:00:00 -0600 https://fromanegg.com/post/2021/07/27/conditional-data-types-with-typescript/ When dealing with data that’s returned from an API you don’t always have control over the exact structure which can make it a bit of a challenge to add types to that data with TypeScript to improve the developer experience. I have recently run into this issue when hooking up the Juju Dashboard to a new API endpoint that sends deltas every time there is a change in the users environment. https://fromanegg.com/post/2021/06/11/opening-changed-files-in-vscode/ Fri, 11 Jun 2021 10:00:00 -0600 https://fromanegg.com/post/2021/06/11/opening-changed-files-in-vscode/ A significant portion of my day to day activities are based around code reviews and helping debug issues with other developers. When doing this I will usually open up all of the files that have changed between the current branch and master so that I can get an understanding of the problem as a whole. After a decade of doing this I finally got sick of doing it manually…There must be a better way! https://fromanegg.com/post/2020/02/28/use-ubuntu-on-mac-os-with-multipass/ Fri, 28 Feb 2020 16:28:00 -0600 https://fromanegg.com/post/2020/02/28/use-ubuntu-on-mac-os-with-multipass/ Running and developing an Ubuntu based workload on Mac OS has never been easier. Canonical has released a new tool called Multipass which allows you to quickly spin up Ubuntu Server virtual machines on Ubuntu, Mac OS and Windows. The following instructions will get you an Ubuntu Server VM up and running, and the Ubuntu file system mounted to Mac OS so that you can work in the Mac OS UI using your regular development tools like VS Code. https://fromanegg.com/post/2020/01/01/testing-your-user-contract/ Wed, 01 Jan 2020 18:40:00 -0600 https://fromanegg.com/post/2020/01/01/testing-your-user-contract/ Whenever you write any code that is to be consumed by another, whether it be a library or some UI element, that consumer expects it to work in a certain way every time they interact with it. All good developers would agree and that’s why we also write tests that either break our code up into chunks and test that each chunk works as expected, unit tests, or test the entire lifecycle, end to end tests. https://fromanegg.com/post/2017/07/21/eliminating-missing-props-in-react-components/ Fri, 21 Jul 2017 10:51:26 -0600 https://fromanegg.com/post/2017/07/21/eliminating-missing-props-in-react-components/ An advantage to components, React or otherwise, is that they can be used multiple times in various contexts across your application. As the application grows and components get modified over time the component call signatures can drift from their original spec and the many call locations across the application can miss getting updated. Compound that with shallow rendering unit tests and you’ve got yourself a problem where parts of your application don’t work as expected because of invalid data being sent to the components, not because the components are broken themselves. https://fromanegg.com/post/2016/11/22/how-to-semantic-blog-markup/ Tue, 22 Nov 2016 21:23:26 -0600 https://fromanegg.com/post/2016/11/22/how-to-semantic-blog-markup/ After writing some great content you’ll want people to be able to find it on the various search engines and easily share on social networks. This is done by using the proper HTML, microdata, and meta tags to allow search engines and social networks to correctly parse the content on your page and display the correct summary content. You’ll first want to start with the original description and canonical tags as the basic fallback for anything parsing your page. https://fromanegg.com/post/2016/11/13/secure-github-pages-with-ssl-tls/ Sun, 13 Nov 2016 18:19:00 -0600 https://fromanegg.com/post/2016/11/13/secure-github-pages-with-ssl-tls/ At the time of writing, this blog is hosted on GitHub and they do not support serving https on custom domains. But because there are many reasons why every website should be hosted under https this guide will show you how I got https for this blog on GitHub. First you’ll need a couple things: A website hosted on GitHub Pages with a custom domain. An account with Cloudflare. Then follow these steps: https://fromanegg.com/post/2016/11/12/welcome-to-from-an-egg-v2/ Sat, 12 Nov 2016 16:49:53 -0600 https://fromanegg.com/post/2016/11/12/welcome-to-from-an-egg-v2/ Welcome to v2 of the From An Egg blog! Built with Hugo, a static site generator built with Go, v2 is considerably faster and nicer to look at than its v1 counterpart which was hosted by Tumblr. This new version is also being served over HTTPS and I’ll be releasing the theme sometime in the future. Thanks for stopping by! https://fromanegg.com/post/2016/01/02/the-importance-of-minification-and-compression/ Sat, 02 Jan 2016 13:15:00 -0600 https://fromanegg.com/post/2016/01/02/the-importance-of-minification-and-compression/ Over the holidays I’ve been working on a small project playing with some of the new Javascript libraries that came out over the past year. After a while I noticed that the size of the Javascript I was sending to the client was growing and starting to approach 100 KB for a basic isomorphic website. I figured now was a good time to look into minification and compression. The site starts out by loading in the following raw code: https://fromanegg.com/post/2015/08/26/automatically-build-files-when-they-change-with-make/ Wed, 26 Aug 2015 12:07:00 -0600 https://fromanegg.com/post/2015/08/26/automatically-build-files-when-they-change-with-make/ When writing code which needs to be built before it can be used, whether that’s a transpile step like ES7 JavaScript to ES5, or a compile step like with Go, you’re likely going to want to do this when a file in your application tree is modified. There are a large number of project and language specific tools which were developed to tackle this problem but did you know that there are system level packages available that you can use across all your projects? https://fromanegg.com/post/2015/06/13/using-juju-for-development/ Sat, 13 Jun 2015 16:11:00 -0600 https://fromanegg.com/post/2015/06/13/using-juju-for-development/ Juju works great for software development involving simple environments and is amazing for complex environments. A recent question on Ask Ubuntu “Is Juju a suitable tool for development as well as deployment?” made me realize that we use Juju for development every day but there really isn’t much documentation on the subject. For the rest of this post I’m going to assume that you are already familiar with the concept of Juju and what problems it solves on the deployment side of things. https://fromanegg.com/post/2015/06/06/write-javascript-like-its-typed/ Sat, 06 Jun 2015 21:44:00 -0600 https://fromanegg.com/post/2015/06/06/write-javascript-like-its-typed/ Over my career I’ve written in a number of different programming languages, most of them dynamic. It’s been about 10 years since I last wrote a project from start to finish in a typed language, C++, but recently I’ve been working with Go. It’s safe to say I had become blissfully ignorant of the benefits and challenges of a typed language and in working with Go I found myself really enjoying the explicit declaration of types with regards to stability and code legibility. https://fromanegg.com/post/2015/04/22/easy-testing-of-code-involving-native-methods-in-javascript/ Wed, 22 Apr 2015 19:57:00 -0600 https://fromanegg.com/post/2015/04/22/easy-testing-of-code-involving-native-methods-in-javascript/ When using ‘use strict;’ in your scripts you’ll find that you are no longer allowed to overwrite native methods like FileReader() so how do you test that these methods are being called with the appropriate parameters? Lets start with a typical function call involving FileReader() and then modify it to make it easier to test. function importFile(file) { var reader = new FileReader(); reader.onload = function(e) { processData(e.target.result); }; reader.readAsText(file); } Pre ‘use strict’; days you could simply stub out the global FileReader() but since that’s no longer an option we need to get a little creative with our code structure. https://fromanegg.com/post/2014/12/05/how-to-rewrite-and-redirect-with-haproxy/ Fri, 05 Dec 2014 12:52:00 -0600 https://fromanegg.com/post/2014/12/05/how-to-rewrite-and-redirect-with-haproxy/ It’s common when moving from one version of your application to another that you will want to maintain all of the SEO cred you have built up while simultaneously moving to a new url syntax. To do this people usually reach for mod_rewrite with apache or nginx for which there is quite a bit of documentation on this topic. Unfortunately the same can’t be said for rewriting and 301 redirecting when using HAProxy. https://fromanegg.com/post/2014/09/08/juju-explain-it-to-me-like-im-5/ Mon, 08 Sep 2014 23:10:00 -0600 https://fromanegg.com/post/2014/09/08/juju-explain-it-to-me-like-im-5/ Juju is brilliant. Ok I am a little biased being that I work at Canonical on the Juju project, but every week I’m more and more impressed with how awesome Juju is and how easy it makes developing software and working in the cloud. I tweet and post a bunch about Juju but today I was asked to explain what Juju is to someone like they are 5. Juju is often described as apt-get for the cloud, but what does someone who isn’t familiar with the Ubuntu ecosystem know about apt-get? https://fromanegg.com/post/2014/06/17/new-release-juju-gui-1-1-0/ Tue, 17 Jun 2014 13:23:00 -0600 https://fromanegg.com/post/2014/06/17/new-release-juju-gui-1-1-0/ Last week we released a new version of the Juju GUI which brings with it one major UI change plus a huge refactoring of the application state system. We moved the inspectors default rendering position to the left over top of the charm browser to give you more room to work with your active environment. A new uni-directional data flow system was implemented which dramatically simplified the GUI’s data flow and execution. https://fromanegg.com/post/2014/05/15/unidirectional-data-flow-architecture/ Thu, 15 May 2014 23:18:00 -0600 https://fromanegg.com/post/2014/05/15/unidirectional-data-flow-architecture/ Since Facebook released Flux there has been a lot of chatter about the unidirectional data flow architecture and how it helps large scale applications be easier to reason about and develop. With the Juju GUI nearing 70,000 lines of code in the core application we were running into an issue where it was becoming difficult to maintain the correct state throughout the many rendered UI components which are being consistently changed from the user interactions and changes coming in over the websocket from the users Juju environment. https://fromanegg.com/post/2014/04/25/when-to-update-your-semver-version-number/ Fri, 25 Apr 2014 10:49:00 -0600 https://fromanegg.com/post/2014/04/25/when-to-update-your-semver-version-number/ Anyone who is familiar with package versioning has used, or at the very least heard of, Semantic Versioning. For the uninitiated, semver is a three part version number in the format MAJOR.MINOR.PATCH ex) 1.13.2, and you can find very in-depth details on the semver website. The semver website outlines the rules for incrementing version numbers as: MAJOR: When you make incompatible API changes. MINOR: When you add functionality in a backwards-compatible manner. https://fromanegg.com/post/2014/04/09/how-to-install-ubuntu-on-a-mac-or-macbook/ Wed, 09 Apr 2014 20:09:00 -0600 https://fromanegg.com/post/2014/04/09/how-to-install-ubuntu-on-a-mac-or-macbook/ The official release date of Ubuntu 14.04 LTS Trusty Tahr is coming up in just over a week from the time of writing. With that, many of you are going to want to install the next version of the best Linux operating system on your computers, and if you want to install on metal along side OSX and have a Apple Mac or Macbook this is the guide for you! https://fromanegg.com/post/2014/03/13/self-documenting-code-is-not-enough/ Thu, 13 Mar 2014 09:22:00 -0600 https://fromanegg.com/post/2014/03/13/self-documenting-code-is-not-enough/ Our industry moves so fast that just to stay on the curve, let alone ahead of it, you need to spend a considerable amount of time reading other peoples code. Whether that be in code reviews, gists, or open source projects, you can glean a lot of invaluable information about new technologies, protocols, and techniques. As an industry as a whole we need to understand this and write all code, even that which at first is not meant for public consumption, as self-documenting code with comments which detail, to anyone reading it, the why the code is doing what it’s doing. https://fromanegg.com/post/2014/01/26/new-release-juju-gui-1-15-0/ Sun, 26 Jan 2014 12:49:00 -0600 https://fromanegg.com/post/2014/01/26/new-release-juju-gui-1-15-0/ Last week the latest version of the Juju GUI was released. With the holidays and our move from Bazaar and Launchpad to Git and Github there was unfortunately over a month from our last release. Have no fear however because this one brings with it some big changes. We made a large number of bug fixes most of which were reported by you, like incorrect unit counts in bundle details and fixing the inspector height calculations so that it doesn’t hide some of the lower buttons for environments with a lot of units. https://fromanegg.com/post/2013/12/30/canonical-to-simplify-sso-and-2fa-using-ubuntu-juju/ Mon, 30 Dec 2013 12:09:00 -0600 https://fromanegg.com/post/2013/12/30/canonical-to-simplify-sso-and-2fa-using-ubuntu-juju/ One thing that anyone who has used the internet for more than a day can attest to, is that we have a lot of credentials to remember. Every new product we purchase, every new website we log into, every system in corporate networks need a unique username and password to access. To help combat the huge number of credentials we need to remember many administrators have started to implement what is known as single sign on. https://fromanegg.com/post/2013/12/05/yui-in-the-wild/ Thu, 05 Dec 2013 22:57:00 -0600 https://fromanegg.com/post/2013/12/05/yui-in-the-wild/ Earlier today I talked with some of the YUI team about the Juju GUI and how we use YUI for the first ‘YUI in the wild'. The links I mentioned in the video: Juju GUI Demo Site Juju GUI Bazaar repository Juju GUI Git repository https://fromanegg.com/post/2013/12/05/new-release-juju-gui-0-14-0-juju-quickstart-0-5-0/ Thu, 05 Dec 2013 12:05:00 -0600 https://fromanegg.com/post/2013/12/05/new-release-juju-gui-0-14-0-juju-quickstart-0-5-0/ It’s been a few weeks since our last Juju GUI release which means here comes another! This GUI release brings with it the latest beta version of the Juju quickstart plugin… Juju GUI Our latest work focuses on making the Juju GUI a more effective day-to-day tool: The service inspectors now categorize errors and pending units by their types instead of grouped as ‘error’ and ‘pending’ so that it’s easier to see your services status at a glance. https://fromanegg.com/post/2013/11/16/intro-to-go-from-a-javascript-developer-barcamp-yxe-sides/ Sat, 16 Nov 2013 12:22:00 -0600 https://fromanegg.com/post/2013/11/16/intro-to-go-from-a-javascript-developer-barcamp-yxe-sides/ Today I gave a quick presentation at Barcamp YXE and below are the slides. I’ll be following it up with a screencast within a week for those who couldn’t make it. https://fromanegg.com/post/2013/11/15/juju-gui-0-13-0-release-and-updates/ Fri, 15 Nov 2013 11:52:00 -0600 https://fromanegg.com/post/2013/11/15/juju-gui-0-13-0-release-and-updates/ Over the past month and a half we have done 3 releases of the Juju GUI and with each release came a lot of great functionality. If you are not on 0.13.0 you should definitely upgrade your GUI charm to take advantage of these great new features. Bundles! This is probably the biggest release of the Juju GUI since it was officially unveiled. The GUI now supports importing, exporting, browsing and deploying bundles. https://fromanegg.com/post/2013/11/09/a-juju-charm-designed-to-fail/ Sat, 09 Nov 2013 14:06:00 -0600 https://fromanegg.com/post/2013/11/09/a-juju-charm-designed-to-fail/ While writing code for the next features in the Juju GUI I needed to test instances when charms would fail in various stages of their setup or execution. After a lot of messing around it became apparent that most charms are just too stable for this kind of testing so, I wrote a Juju Charm which is designed to fail in a large number of hooks depending on the configuration set on deploy (or later), and can relate to itself to test relation failures. https://fromanegg.com/post/2013/10/01/juju-gui-0-10-1-released-bug-fixes-and-updates/ Tue, 01 Oct 2013 17:10:00 -0600 https://fromanegg.com/post/2013/10/01/juju-gui-0-10-1-released-bug-fixes-and-updates/ About a week after releasing the new service inspector in the Juju GUI we are following it up with another quick release which consists primarily of bug fixes. The largest of those fixes are: Changing settings did not work in Juju Core. (Fixed) The GUI was unable to deploy charms without config options. (Fixed) Remove unit button did not work in Juju Core. (Fixed) Plus a number of additional fixes. https://fromanegg.com/post/2013/09/18/juju-gui-0-10-0-released-0-brand-new-service-inspector/ Wed, 18 Sep 2013 15:52:00 -0600 https://fromanegg.com/post/2013/09/18/juju-gui-0-10-0-released-0-brand-new-service-inspector/ After a few months of hard work we have released the Juju GUI v0.10.0 which has the awesome new service Inspector as the default! Quickly following up on v0.9.0 which added IE10 support, this release switches the new deployment and service inspector to be the default, switches to the new Go sandbox by default, and adds internal support for the upcoming charm bundles! Additional information on Juju can be found on the newly redesigned https://jujucharms. https://fromanegg.com/post/2013/09/15/parseint-only-numbers-in-an-object/ Sun, 15 Sep 2013 10:08:00 -0600 https://fromanegg.com/post/2013/09/15/parseint-only-numbers-in-an-object/ A couple weeks ago I had an issue…I needed to send the number values contained in an object to the server as integers. The only catch was, I didn’t know how many elements were in the object or which ones were supposed to be integers and which were supposed to be strings. I could however trust that the values in the object were appropriate for each key. I ended coming up with a little hack using some of JavaScripts type coercion to get the results I needed. https://fromanegg.com/post/2013/09/11/juju-gui-0-9-0-released-now-with-ie10-support/ Wed, 11 Sep 2013 18:21:00 -0600 https://fromanegg.com/post/2013/09/11/juju-gui-0-9-0-released-now-with-ie10-support/ We have just released the latest Juju GUI charm, 0.9.0 which brings with it a number of improvements as well as full IE10 support. Yes, we have added IE10 to our support matrix for the GUI bringing some company to the latest Chrome and Firefox release versions. With Chrome, Firefox, and IE10 now available for the GUI and Ubuntu and OSX available for the command line tools, your ability to create and manage your environments with Juju is getting easier and easier. https://fromanegg.com/post/2013/08/19/juju-for-osx-is-now-available-via-homebrew/ Mon, 19 Aug 2013 13:36:00 -0600 https://fromanegg.com/post/2013/08/19/juju-for-osx-is-now-available-via-homebrew/ About a month ago I posted that Juju for OSX was available on GitHub. Well thanks to a Homebrew pull request by Rodrigo Chacon it’s now available for easy install via Homebrew! For those who don’t know, Juju enables you to build entire environments in the cloud with only a few commands on public clouds like Amazon Web Services and HP Cloud, to private clouds built on OpenStack, or raw bare metal via MAAS. https://fromanegg.com/post/2013/08/05/css-selectors-the-next-level/ Mon, 05 Aug 2013 16:53:00 -0600 https://fromanegg.com/post/2013/08/05/css-selectors-the-next-level/ As a continuation of my previous post Understanding CSS2 and CSS3 attribute selectors I wanted to bring everyones attention to some of the less used but very powerful CSS selectors. I have sorted these by their IE support because they are all supported by all of the other modern browsers. IE6+ SUPPORT S1::first-line: Pseudo element selector Selects the first line of text in an element which matches the S1 selector. https://fromanegg.com/post/2013/07/31/android-file-transfer-could-not-replace-file-could-not-copy-file/ Wed, 31 Jul 2013 20:27:00 -0600 https://fromanegg.com/post/2013/07/31/android-file-transfer-could-not-replace-file-could-not-copy-file/ Do you have a new Android phone and cannot transfer files to OSX using the Android File Transfer Tool because you keep getting the error “Could not replace file, could not copy file .” ? The fix for me was to make sure that the phone was unlocked and the screen on on the homescreen. Hope this helps anyone else running into this error. Do you have another solution? Let me know and I’ll add it here for others. https://fromanegg.com/post/2013/07/22/juju-gui-0-8-and-jujucharms-com-released/ Mon, 22 Jul 2013 18:51:00 -0600 https://fromanegg.com/post/2013/07/22/juju-gui-0-8-and-jujucharms-com-released/ It was a very busy day for Canonical releases. Juju core 1.11.3(devel) was released which brought with it a number of bug fixes along with the long awaited Local Provider support. The stunning, cutting edge, crowd funded Ubuntu Edge Ubuntu smartphone campaign was released and, at the time of this writing is sitting at $2.4Million of it’s record setting $32Million goal after less than 24 hours. Most exciting to me however is release of the Juju GUI v0. https://fromanegg.com/post/2013/06/20/juju-gui-0-6-0-released/ Thu, 20 Jun 2013 18:59:00 -0600 https://fromanegg.com/post/2013/06/20/juju-gui-0-6-0-released/ Earlier this week we released the latest version of the Juju GUI, 0.6.0. This version brings with it a bunch of bug fixes and stability improvements, an updated UI, and a new charm browser which allows you to find new charms without leaving your environment. You can find the source here. Other changes include: The beginnings of a Go backend sandbox. Automatic view portal zoom and centring. Support for Google Analytics. https://fromanegg.com/post/2013/06/13/juju-for-osx-is-now-available/ Thu, 13 Jun 2013 17:11:00 -0600 https://fromanegg.com/post/2013/06/13/juju-for-osx-is-now-available/ This just in… Juju for OSX is now available! From the team which brought you Juju brings you the ability to manage your OpenStack, AWS, and HP Cloud environments from OSX. Setup: Untar the tarball, run the binary. Open up the above documentation list and skip to the configuration section to set up your cloud. At the time of writing there are 137 services ready to deploy. Plus you can deploy your app right from github using our node. https://fromanegg.com/post/2013/06/07/test-driven-development-the-easy-way/ Fri, 07 Jun 2013 22:45:00 -0600 https://fromanegg.com/post/2013/06/07/test-driven-development-the-easy-way/ A number of people, myself included, have a hard time getting started with test driven development (TDD). The issue lies in that it’s difficult to wrap your head around something that is rather non specific in its implementation and it is usually described as “writing your tests before you write your code”. When developers hear “Write your tests before you write your code”, then they look at their previous test suite they wonder… “How can I possibly write this without having written the code first? https://fromanegg.com/post/2013/06/06/calculating-timezones-in-javascript/ Thu, 06 Jun 2013 10:02:00 -0600 https://fromanegg.com/post/2013/06/06/calculating-timezones-in-javascript/ I’m sure most people cringe when they hear that they have been assigned a task which has to do with dates in JavaScript. Because JavaScript is lacking a fully featured date library these tasks are rarely trivial and become even more difficult when you need to support users around the world. Converting a timestamp to UTC time. To display a timestamp in UTC around the world instead of in the users local timezone you use getTimezoneOffset, multiply it by 60,000 and then subtract that from your timestamp. https://fromanegg.com/post/2013/06/03/juju-gui-0-7-1-released/ Mon, 03 Jun 2013 13:51:00 -0600 https://fromanegg.com/post/2013/06/03/juju-gui-0-7-1-released/ As of a few minutes ago the 0.7.1 version of the Juju GUI was released. It brings with it over 1000 unit tests, performance, memory and stability improvements, along with: Added drag and drop deployment from charm browser. Export environment to Juju deployer YAML format from keyboard shortcut (shift-d). Databinding and conflict resolution finalized (feature-flagged). Start of new service inspector development (feature-flagged). Added relations to Go sandbox (Go sandbox still in progress). https://fromanegg.com/post/2013/06/01/xor-in-javascript/ Sat, 01 Jun 2013 12:08:00 -0600 https://fromanegg.com/post/2013/06/01/xor-in-javascript/ Typically when writing a XOR check in JavaScript you would do something like… if (( foo || bar ) && !( foo && bar )) { } The issue with this approach is that it can be very verbose when not in psudo code or you will have to convert each expression into a boolean value prior to the check to get it as small as the above example. In order to start working towards a better solution we first need to define our desired outcome. https://fromanegg.com/post/2013/04/07/transparent-links-not-clickable-in-internet-explorer/ Sun, 07 Apr 2013 17:59:00 -0600 https://fromanegg.com/post/2013/04/07/transparent-links-not-clickable-in-internet-explorer/ When making a carousel it’s a common practice to not only include navigational arrows outside of the carousel but to also allow the user to click on the left and right side of the photo to navigate forward or backwards. This is typically accomplished by placing two absolutely positioned elements on top of the photo and listen for clicks on those elements to control navigation. This is going to work as intended until you try it in IE. https://fromanegg.com/post/2013/03/18/nfs-between-ubuntu-vm-and-osx-host/ Mon, 18 Mar 2013 20:03:00 -0600 https://fromanegg.com/post/2013/03/18/nfs-between-ubuntu-vm-and-osx-host/ If you find yourself needing to run Linux-only-software for development of some kind but would prefer to work in the host OSX operating system for whatever reason instead of the VM then this guide is for you. An updated version of this post can be found here: Use Ubuntu on Mac OS with Multipass At the time of writing I am using OSX 10.7.5 and Ubuntu 12.04 [Update: Also works with OSX 10. https://fromanegg.com/post/2013/02/22/insert-an-array-of-values-into-an-array-in-javascript/ Fri, 22 Feb 2013 12:00:00 -0600 https://fromanegg.com/post/2013/02/22/insert-an-array-of-values-into-an-array-in-javascript/ Yesterday I had an array of objects which needed to be inserted into another array at a specific index point. // Array #1 ["a", "b", "c"] // Array #2 [1, 2, 3, 4, 5] // Desired outcome [1, 2, "a", "b", "c", 3, 4, 5] But none of the native array methods allowed me to insert an array of values into an array. Splice comes close but it takes a comma delimited list of values, not an array of values. https://fromanegg.com/post/2013/02/06/using-css-function-image-set-for-high-dpi-displays/ Wed, 06 Feb 2013 14:57:00 -0600 https://fromanegg.com/post/2013/02/06/using-css-function-image-set-for-high-dpi-displays/ Anyone who has put together a website with high-DPI displays in mind has likely used the {prefix}-device-pixel-ratio CSS media query and then specified the background images independently under each different media query. This can not only get tedious but media queries also split the display rules for a single element into multiple locations in your stylesheet. You can get away from this separation by using the SASS CSS preprocessor and the @media directive which allows you to keep your element media query rules with the element styles. https://fromanegg.com/post/2013/01/28/understanding-css2-and-css3-attribute-selectors/ Mon, 28 Jan 2013 10:01:00 -0600 https://fromanegg.com/post/2013/01/28/understanding-css2-and-css3-attribute-selectors/ I received a large number of questions after my last blog post, 100% pure css radial progress bar, about the attribute selector I used so I figured a quick followup post detailing the 7 (at the time of writing) available attribute selectors across CSS2 and CSS3. Attribute Selector Syntax [attributeName{selector}value] Attribute Selectors [user] /* matches */ <div user></div> <div user="foo"></div> Any element which has a user attribute regardless of value. https://fromanegg.com/post/2013/01/23/100-pure-css-radial-progress-bar/ Wed, 23 Jan 2013 15:25:00 -0600 https://fromanegg.com/post/2013/01/23/100-pure-css-radial-progress-bar/ Building any kind of progress bar in pure css is kind of a misnomer because after all it is a representation of some external event, and as such needs to be told what stage to represent. No matter, this is how I went about creating a radial progress bar (or circular progress bar if you prefer) in pure css3 - in a follow-up post I’ll show you how to use javascript to influence the value. https://fromanegg.com/post/2013/01/21/prototypes-and-class-like-objects-in-javascript/ Mon, 21 Jan 2013 10:00:00 -0600 https://fromanegg.com/post/2013/01/21/prototypes-and-class-like-objects-in-javascript/ Javascript being prototypal means that it can access methods and properties through what is known as the prototype chain. Everything in Javascript is an object, and every object has a special property known as the ‘prototype’. This post is a continuation of my previous post Constructor chaining & inheritance in javascript. I recommend that you read that post first as I’ll be referencing some of the same code. The prototype is defined as an “object that provides shared properties for other objects” - Ecma International. https://fromanegg.com/post/2013/01/17/yuiconf-talk-2012/ Thu, 17 Jan 2013 11:07:00 -0600 https://fromanegg.com/post/2013/01/17/yuiconf-talk-2012/ My talk from YUIConf 2012, where I showcase the issues of modern web development that arise when using various libraries and explain how the features of YUI make it a clear leader for development teams of any size. I discuss standard development procedures, modular development and extensibility, API consistency, documentation, and testing. Hope you enjoy, Let me know what you think! https://fromanegg.com/post/2013/01/09/the-importance-of-personal-developer-projects/ Wed, 09 Jan 2013 10:54:00 -0600 https://fromanegg.com/post/2013/01/09/the-importance-of-personal-developer-projects/ Fueled by the constant push for new ideas and better experiences by our clients and employers; web development has to be one of, if not the, fastest evolving industry today. It’s our job as developers to at least keep up with the curve; unfortunately because of this constant push we often end up over specializing, leaving us ill prepared come the time to move onto the next big thing. We try to remedy this complacency by reading what others are working on and dabbling here and there on side projects, but quite often we can’t dedicate enough of our personal time to keep ahead of that curve. https://fromanegg.com/post/2013/01/03/constructor-chaining-inheritance-in-javascript/ Thu, 03 Jan 2013 20:56:00 -0600 https://fromanegg.com/post/2013/01/03/constructor-chaining-inheritance-in-javascript/ Javascript takes a lot of flack for being prototypal vs class based which leads a lot of developers to incorrectly assume that OOP techniques like constructor chaining and inheritance aren’t possible. This couldn’t be further from the truth; the real issue is that Javascript didn’t used to include any native OOP style methods. Luckily however javascript still provided us enough power to be able to build these methods and techniques ourselves. https://fromanegg.com/post/2012/12/29/form-validation-with-keydown-keypress-and-keyup/ Sat, 29 Dec 2012 12:58:00 -0600 https://fromanegg.com/post/2012/12/29/form-validation-with-keydown-keypress-and-keyup/ There is quite a bit of confusion in the beginner JavaScript world as to what the difference is between the keydown, keypress, and keyup events. So I hope that the following can help clear up some of the common questions as well as provide some solutions to make your life easier when dealing with cross browser key events. As with all DOM events there is a generally accepted order to which they fire and key events are no different. https://fromanegg.com/post/2012/12/01/using-after-event-listeners-to-react-to-attribute-value-changes/ Sat, 01 Dec 2012 18:30:00 -0600 https://fromanegg.com/post/2012/12/01/using-after-event-listeners-to-react-to-attribute-value-changes/ If you have written anything using events in YUI you know that you have a few ways to listen to a single event on a target, two of the most popular are the on() and after() methods. Essentially the on() method allows you to listen to the event before the after() listeners are given a chance to react to it and after() allows you to listen after the on() callbacks have had a chance to execute. https://fromanegg.com/post/2012/10/18/hatched-links/ Thu, 18 Oct 2012 09:52:00 -0600 https://fromanegg.com/post/2012/10/18/hatched-links/ HTTP access control (CORS) (mozilla.org): Learn how Cross-Origin Resource Sharing works. Never use black (ianstormtaylor.com): Design tip on why you should never use black. 31 CSS code snippets (designyourway.net): Great list of some cool css hacks. CSS3 & HTML5 Experiments (designyourway.net): a list of 47 great CSS3 and HTML5 experiments. Rundown of handling flexible media (css-tricks.com): Great resource for information on how to handle flexible media. Have something you would like to see on the next Hatched Links? https://fromanegg.com/post/2012/10/18/hatched-links/ Thu, 18 Oct 2012 09:52:00 -0600 https://fromanegg.com/post/2012/10/18/hatched-links/ Flick Scroll (simurai.com): Very cool new swipe technique. Responsive Embeds (andmag.se): Great technique for using responsive sized embeds. Responsive Sketchsheets (zurb.com): Unique collection of sketchsheets for responsive layouts. Javascript Array Methods Reference (impressivewebs.com): Reference for the various array manipulation methods in javascript. Box-Shadow vs Filter-Drop-Shadow (bricss.net): A comparison of these two shadow css rules. Have something you would like to see on the next Hatched Links? Mention me on Twitter @fromanegg or find me in #yui on irc. https://fromanegg.com/post/2012/10/11/hatched-links/ Thu, 11 Oct 2012 13:56:00 -0600 https://fromanegg.com/post/2012/10/11/hatched-links/ GUI Git Client For OSX (laullon.com): Open source and runs on OSX 10.6+ and Git 1.6.0+. Test Across Devices With Adobe Shadow (adobe.com): Setup browsing and debugging with Adobe Shadow. Web Platform Docs (webplatform.org): Community driven wiki looking to become the be-all end-all of web development docs. Windy: A Plugin For Swift Content Navigation (tympanus.net): Make items fly away like a deck of cards. Transition to height: auto trick (dropshado. https://fromanegg.com/post/2012/10/04/hatched-links/ Thu, 04 Oct 2012 09:04:00 -0600 https://fromanegg.com/post/2012/10/04/hatched-links/ An Online Editor For reveal.js (rvl.io): Edit the popular reveal.js HTML presentation framework online. YUI Test Tool (yeti.cx): Run YUI Test in multiple browsers. 220 Icon Font (Font Awesome): Has icon parity with Bootstrap plus a lot more. Git Remote Branch (webmat): Easily manipulate git branches in shared repos. Learnable Programming (worrydream): Designing a programming system for understanding programs. Have something you would like to see on the next Hatched Links? https://fromanegg.com/post/2012/10/01/clicking-through-a-div-to-underlying-elements/ Mon, 01 Oct 2012 09:07:00 -0600 https://fromanegg.com/post/2012/10/01/clicking-through-a-div-to-underlying-elements/ Yes it is possible to click through a div to underlying elements using only css. I’ve seen this question asked so many times online and so often the answer given is that you require javascript, or even sometimes whole libraries to accomplish this task. Let me introduce you to the pointer-events CSS property. This property allows you to control under what situations an SVG target element should become the target of mouse events. https://fromanegg.com/post/2012/09/27/hatched-links/ Thu, 27 Sep 2012 22:39:00 -0600 https://fromanegg.com/post/2012/09/27/hatched-links/ Today I bring you the very first Hatched Links! Hatched Links is going to be a weekly post bringing you links to cool things in software development from around the web. I hope you enjoy! YUI3 3.7.2 Patch Release (YUI Blog): Fixing a couple loader & module issues. Designing for Android (Smashing Magazine): Tips and techniques for designing applications for Android. Interactive Globe with CSS Shaders (HTML5 Rocks): Applying the new CSS Shaders to Google Maps. https://fromanegg.com/post/2012/09/19/great-yui-3-datatable-resources/ Wed, 19 Sep 2012 18:05:00 -0600 https://fromanegg.com/post/2012/09/19/great-yui-3-datatable-resources/ It’s rare that those tasked with displaying tabular data have an easy go of it. Usually the data isn’t in the right format, the standard libraries either do too much or too little, and the styles are never quite right. For the developers using YUI 3 and the YUI 3 DataTable I have included a couple resources below which will surely make your lives a lot easier. YUI 3 DataTable documentation : Extensive documentation outlining the core features of DataTable. https://fromanegg.com/post/2012/08/24/adding-a-validation-fail-event-to-yui-y-attribute/ Fri, 24 Aug 2012 13:41:00 -0600 https://fromanegg.com/post/2012/08/24/adding-a-validation-fail-event-to-yui-y-attribute/ One of the first things that a YUI developer learns about are the attribute change events that are fired any time an attribute value is successfully changed. But one often overlooked feature of Y.Attribute is the validator. The validator allows you to test that a value is valid for the attribute prior to it being sent to the setter. A common use is validating that the value trying to be set is in an accepted format - such as only allowing integers in a quantity attribute. https://fromanegg.com/post/2012/08/10/book-review-are-you-smart-enough-to-work-at-google/ Fri, 10 Aug 2012 10:36:00 -0600 https://fromanegg.com/post/2012/08/10/book-review-are-you-smart-enough-to-work-at-google/ I have been trying to take some time away from the warm glow of the LCD screen after hours so I haven’t had much time to write up new code related posts. Instead, I have been spending some of this time away reading books, blog posts, and articles on business and web development. So in an effort to keep my blog from going stale here is my very first book review outside of high school English class. https://fromanegg.com/post/2012/07/31/add-toggle-button-support-to-y-popupcalendar/ Tue, 31 Jul 2012 15:57:00 -0600 https://fromanegg.com/post/2012/07/31/add-toggle-button-support-to-y-popupcalendar/ A commonly requested feature for the popup calendar is to be able to pop it open via a button. Unfortunately I haven’t had time to add this feature directly into the module but today @gdanko popped into #yui on irc.freenode.net and was willing to help test the small code changes required to make sure that this would work. Until I am able to add support into the module, simply copy and paste the following code before the first instance of Y. https://fromanegg.com/post/2012/07/01/loading-yui-from-yahoos-cdn-for-phonegap-cordova/ Sun, 01 Jul 2012 13:34:00 -0600 https://fromanegg.com/post/2012/07/01/loading-yui-from-yahoos-cdn-for-phonegap-cordova/ Loading YUI from Yahoo!’s CDN was one of the most requested features after the previous post Guide to using YUI with PhoneGap (Cordova). The good news is that it’s very easy to setup but does come with a few drawbacks. Using the code from the previous post we only need to make minor changes to load from the CDN. <!DOCTYPE HTML> <html> <head> <title>My First Cordova YUI App</title> <script type="text/javascript" src="cordova-1. https://fromanegg.com/post/2012/06/12/guide-to-using-yui-with-phonegap-cordova/ Tue, 12 Jun 2012 07:58:00 -0600 https://fromanegg.com/post/2012/06/12/guide-to-using-yui-with-phonegap-cordova/ If you have ever wanted to use YUI in your next PhoneGap (Cordova) application you are in luck, it is so easy, it’s almost trivial. This will be the first in what will probably be a series of posts about using YUI with PhoneGap (Cordova). This tutorial assumes that you already know the basics of YUI but, at least for this first instalment, you shouldn’t have any problem following along if you don’t. https://fromanegg.com/post/2012/04/12/yui-popup-calendar/ Thu, 12 Apr 2012 19:22:00 -0600 https://fromanegg.com/post/2012/04/12/yui-popup-calendar/ The often requested Popup Calendar or as some may call it, Date Picker, is now finally available in the Yahoo CDN hosted YUI Gallery! The YUI Popup Calendar component extends YUI’s Calendar Widget as well as a few other Widget modules you likely have already loaded on the page giving you a very lightweight (1.6KB minified) way to add date picker like functionality to your web page or application. Additional details, examples, and more can be found by following the links below. https://fromanegg.com/post/2012/02/26/how-to-make-a-nodejs-static-file-server-part-1/ Sun, 26 Feb 2012 19:19:00 -0600 https://fromanegg.com/post/2012/02/26/how-to-make-a-nodejs-static-file-server-part-1/ This multi-part series will take you through everything from how to get a basic Node.js static file server going, to different way’s to deliver the content to the user, common pitfalls, caching, and when to use Node.js to serve files vs other solutions. I’m going to assume you already have Node.js up running on your computer and that you know javascript. This code was developed on v0.6.1-pre and I will make an effort to update it and the version number as things change with Node. https://fromanegg.com/post/2012/02/06/handling-module-load-errors-with-yui-loader/ Mon, 06 Feb 2012 15:50:00 -0600 https://fromanegg.com/post/2012/02/06/handling-module-load-errors-with-yui-loader/ This information is accurate for YUI 3.5.0pr2 - there are cross browser issues with the following method on previous versions. From time to time you may find yourself loading modules that aren’t available. Whether it be from a user supplied modules list or an unreliable source, the YUI instance confg gives you an easy way to check if there are any errors while loading your modules. A common YUI config and use statement would look like the following. https://fromanegg.com/post/2012/02/03/introduction/ Fri, 03 Feb 2012 20:43:00 -0600 https://fromanegg.com/post/2012/02/03/introduction/ After a year of trying to get the time to roll my own blog I cut my losses and set up with tumblr. The plan is to write a quality article every week on web development but you will probably see an odd one here and there about other things that I find interesting. I hope you enjoy the things to come and I look forward to your comments. -Jeff Pihach https://fromanegg.com/yui-popup-calendar/ Mon, 01 Jan 0001 00:00:00 +0000 https://fromanegg.com/yui-popup-calendar/ YUI Popup Calendar The YUI Popup Calendar component extends YUI’s Calendar Widget as well as a few other Widget modules you likely have already loaded on the page giving you a very lightweight (1.6KB minified) way to add date picker like functionality to your web page or application. You can find the code via Github here: YUI Gallery fork How to use Almost all of the configuration properties for Y.PopupCalendar are for Y. https://fromanegg.com/about/ Mon, 01 Jan 0001 00:00:00 +0000 https://fromanegg.com/about/ I’m Jeff Pihach, welcome to From An Egg. I’m a senior software engineer at Canonical, entrepreneur and front end developer. I focus primarily on web application development for mobile and desktop. I blog about web development but will mix in the odd post about other things that interest me. https://fromanegg.com/projects/ Mon, 01 Jan 0001 00:00:00 +0000 https://fromanegg.com/projects/ Active JAAS Dashboard - A Dashboard for Juju and JAAS Bit Rot Depot.JS - Small, modular, & fast JavaScript datastore. Juju GUI - A web-based GUI for Juju. YUI Popup Calendar - Date picker for YUI3.