So, I previously blogged about how we hosted CraftCMS on Heroku. When we built the marketing site for Quala the twig templates were built for maximum authoring flexibility at the cost of some TTFB problems. We knew this going into the project. In an ideal world we would use GatsbyJS to build the frontend, but we very limited in time. When we went live, we saw a dramatic improvement to First Contentful paint, but a huge decrease to Time To First Byte, averaging at 1.3 seconds.
Serving AMP Pages with Dotnet Core
I remember when (Accelerated Mobile Pages) first came out, and it was very restrictive and weird. I think this ultimately hurt the AMP Brand Beyond this, several companies have built AMP experiences which haven't always been the best experience. I do however think AMP pages always load extremely fast. A lot of that is just the constraints of AMP. Last night I put my blog posts on AMP for a laugh, and it was much easier than I thought it would be.
Hosting Craft CMS on Heroku
So, like most early startups, Quala (where I currently work) bought into a Wordpress site to sell our product, probably before it really existed. Flash forward, we have customers, and we're on a path to building a platform to change the game on customer management. The Wordpress site was terrible for performance, and core web vitals. None of us know Wordpress, and barely know any php. We had huge drive to rebrand ourselves, but to do that we needed to edit the Wordpress theme 😬 or use something else.
Building a remote cache server for Turborepo
Turborepo is a tool that came across my virtual desk recently. Monorepo develoment has been around for a long time. This is a strategy where all of your code remains in one repository regardless of services. A lot of people use monorepo's even for microservices. The huge upside is to keep everything in one place, which allows for development efficiency, such as grepping an entire codebase for specific keywords. A quick example would be a top level directory which has child directories that each contain an npm package, unlike publishing these packages, you access them locally as though they were published.
Optimizing heroku's node_module cache for JS monorepos
For many of us a JS workspace is the simplest way to structure code for future growth while providing very quick iterations. Incase you are unfamiliar, several technologies exist such as yarn workspaces
, lerna
, npm workspaces
, etc. That can seamlessly stitch npm packages on disk as though they were published to a private NPM registry. This allows for fast iteration inside of a single git repo, while allowing a future where these dependencies could be abstracted.
Hosting dotnet core on Heroku
I've been getting back into building scrappy little web apps for my friends. On top of this, I recently joined a startup and getting away from Enterprise class software has made me make a huge mind-shift. In the recent past when I wanted to build apps I was thinking Kubernetes, Helm Charts, etc. However, in small app, and startup land reducing the barriers to ship is very important.
5 web perf tips for 2019
As more and more of the world is getting online, a larger part of the internet community is using the internet on lower powered devices. Making websites fast is becoming paramount. Here are 5 tips to improving you web page's performance
Must have vscode plugins for front-end devs
I've had a lot of people ask me about my choice of editors, and plugins. A while back I switched to vscode for all my programming work, for both front and back end. In the past I've blogged about the best plugins for visual studio as a backend dev, but I thought I'd give you a more front-end angle
Compressing images with tinypng's CLI
Ok so I'm really lazy, and I honestly think that has helped me a lot in this industry. I always try to work smarter, not harder. I take many screen shots for this blog, and I need to optimize them. Incase you didn't know many images are often larger than they need to be slowing the download time. However, I don't ever want to load them into photoshop. Too much time and effort!
Measuring, Visualizing and Debugging your React Redux Reselect performance bottlenecks
In the battle of performance one tool constantly rains supreme, the all powerful profiler! In javascript land chrome has a pretty awesome profiler, but every-time I looked into our react perf issues I was always hit by a slow function called anonymous function
Deploying a react app to azure blob storage websites with azure devops
Back in August of this year Microsoft announced static websites for azure blob storage. So this is the same feature AWS' S3 has had for years. Essentially make a blob storage folder public, and redirect /
paths to /index.html
internally. Also, register 404 pages. Before we had this we use to deploy our files to App Service
or do some weirdness with functions to rewrite urls. For static pages this can really bring costs down in the cloud
The battle of the bulge. Visualizing your javascript bundle
So incase you havn't been following me. I joined Cargurus in July. At cargurus we're currently working on our mobile web experience written in react, redux and reselect. As our implementation grew so did our time to first paint.
Creating a slack slash command with 0 code using Azure Logic Apps
Ok so recently I was chatting on a slack, mostly sharing cat pictures, when I realized the CarGurus slack account did not have a /cat
command. I knew immediately, this had to change!
Managing and catering events
A few weeks ago I ran a 3 day event at Vistaprint. We had many engineers fly into our organization. These engineers are from both other countries, and even other companies. We essentially had a mini 3 day conference, and I had to run it! I learned quite a bit about running a conference.
Writing an animated flyout hamburger menu
So I'm currently sitting on a plane at the moment. A recent project I started on was a travel guide where I live. Being on a plane without wifi for a long time is a quick wakeup to me how much I rely on the internet to code.
Building dotnet core apps, and packages with gulp
Here we are, its 2017 dotnet core is out, and finally dotnet has a proper cli. In a previous post we explored the new cli. In short you can use the dotnet cli to build, test, package, and publish projects. However sometimes just using the cli is not enough. Sometimes, you land in a place where you have many projects to compile, test, and package.
Precompiling razor views in dotnet core
Recently I had heard live.asp.net had started to precompile the razor views. I figured I'd dig in and quickly figure out how to do it.
StatsN a modern statsd client for dotnet core, and dotnet 4.5
tl;dr click here
When we talk about capturing metrics in applications. One server/service that constantly is in all conversations monitoring, is statsd. Incase you have never heard of it, statsd is a udp/tcp server that you send your in-code metrics to. These metrics get aggregated by statsd, and are forwarded to various backends. Some backends are services like librato or sumologic. Other times you are sending metrics to time series databases such as graphite or god forbid influxdb.
This boils down to in code you can say "log whenever this block of code is hit" or say "measure how long this function takes to execute". These stories come together to form pretty graphs, and rich alerts. All of this enabled by statsd.
Parsing cli arguments in dotnet core Console App
tl;dr view this gist
So its 2016, and we are still making console apps/cli's. In fact I would say there has been a surge in popularity of these types of tools. I think we have come to the realization that buttons on forms are not automatable, and that the command line doesn't have to be scary.
I recently started writing an app in dotnet core, which is the new runtime for dotnet. In the past I have often used command line parser, but as of this writing it does not support core.
I was really lost trying to find an arguments parsing library when I realized the dotnet cli was open sourced.
After much struggle, failing to bingle. I started ripping through the Entity Framework, and dotnet cli's code hoping to find a gem. Thats when I stumbled across a diamond. You see many dotnet projects use Microsft.Extension.CommandLineUtils to do cli parsing.
Dockerize that old webforms app
So now that Windows server 2016 is generally avalible for the first time ever windows users can now use containers. Ok, so what exactly are containers? Well more or less they are virtual operating systems that share the same kernel as the host OS. In regular VM's the hardware is shared between machines, but containers go a step further and share the kernel of the OS. Why does this matter? Well because you are sharing an existing kernel that is already running, your startup times are instantanious. To put this in perspective, this is virtualization at the OS level.
On Linux, containers have been a thing for a long time. This technology is called LXC. Docker itself is a layer ontop of various container platforms embedded in operating systems.
Use dotnet rc2 with appveyor
dotnet CLI is currently in RC2, and while the train is fast approaching RTM, most tools are still catching up. dotnet seems to have a documented cli based install for every platform except the good ol windows. That being said getting a windows based install/build is possible.
Fixing your build after updating all nuget packages
So if you are like one of my co-wokers whom are newer to .net
land you probably thought
"hey it would be good just to update all my nuget packages".
Then you quickly ran into issues.
Bringing configuration management to the underconfigured
I spend much of my time at Vistaprint just being a normal developer. In fact its over 75% of what I do. I am a Web Developer, however with my background in ops I have spent more and more time at Vistaprint doing configuration management, and coaching other teams how to approach the subject.
Just got a Nexus 5x
Just got a new phone last week, and its one of the new Nexus phones
I recently bought a Nexus 5x from our favorite search engine, Google. Incase you didn't know I am an Android fanboy, to really specify I am an apple hater. Outside of iPhones my options are *droid or Windows Phone. Every time I have used someone else's windows phone I am honestly stricken at how great it is, but I stuck with what I know and love, which is android.
Why Nexus?
As you all are aware there are a large number of Android devices in the ecosystem that is android. The flagship phones of this year seem to be the Galaxy S6, LG G4, and various other phones that are not Nexus
phones. The competitor to these phones in the Nexus line would have to be the Nexus 6p; Which is larger, and more powerful than the 5x.
UI
My huge gripe about non nexus phones, is that they are not really Android. Well they are, but they usually come with a ton of weird apps, and a non-stock UI. The UI that google ships for Android stock is fantastic. The OS looks crisp, clean, and somewhat futuristic without being tacky. Other UI's such as TouchWiz cannot even compete, and yet these manufacturers insist on adding this experience to their phones.
Updates and security
There is no doubt that Nexus phones get updates much faster than non-nexus phones. Incase you were not aware, Nexus phones get their updates pushed directly from google. These phones often receive more updates than non-nexus phones, which have to get updated though the manufacturer, working in tandem with the carrier. Google around yourself, and find out which phones got updated to Lollipop, or even Marshmallow. Most of the nexus phones have been kept up to date.
The updates are not just about features. Updates contain security fixes. At the end of the day a Smartphone is really just a computer that can place phone calls. Like any other computer, smartphones are susceptible to hacks and can be compromised. Updates can often contain security enhancements to reduce the surface area of attack to these phones, allowing your personal information to be stored safely.
Review?
Ok so I should actually review the phone right?
The Nexus 5x is the sequel to a phone (Nexus 5) that was a cheap phone that really competed with phones twice its price. The 5x fails to live up to that a little as the specs are at best what a good phone was last year. That being said this phone is extraordinary in both performance, size, and quality.
The 5x is about as fast as most Android phones. The camera is a 12 MP camera that takes pretty solid pictures. The battery life seems to last roughly 24 hours for me just doing daily activities on the phone. The fingerprint scanner can wake the phone from sleep, and is located in the centre on the back. This is a very convenient place that is usually where my index finger lands. This Nexus phone gets GPS locks every time, and never seems to stop performing beautify. Other phones such as the 6p would probably out perform it if you sat them side by side, but day to day you wouldn't notice any slowness in the 5x. Overall I'd say its a good buy for the value.
The future
I'd really love to see a day when manufacturers would stop putting custom UI's ontop of Android. I'd love to see a day where all Android phones get updates direct from google. Until that time we must live with what we have, which is a weird market place in Android land. iOS users do not have to worry about such things, and I believe the same needs to happen for Android.
Migrating Ghost blog to hexo
I recently ported my ghost blog to hexo, and it was pretty easy.
Checkout my other hexo blogs:
Getting Started with hexo
To get started with hexo run the following commands:
npm install -g hexo-cli
hexo init
npm install
This will drop many files, and folders. The primary one we are going to talk about is the _config.yml
. You will want to start by filling out the _config.yml
file. Name your blog, give a descripton, etc.
Porting your blogs over
To get your data over you will need to go to this url: http://yourblog.com/ghost/settings/labs/
and click the export button. Place the json file at the root of your hexo blog, then run.
npm install hexo-migrator-ghost --save
hexo migrate ghost NameOfYourExportFile.json
Your posts should drop in the posts folder, but the tags will need fixing. Open atom (or another editor that can do find replace in a directory) and replace tags: |
with tags:
in all the files.
Now that it is done we need to fix the paths to your images. Download your images (if you are using azure
you can get them via ftp), and place the folder in the source directory.
Now run hexo server
, browse to port 4000. Your blogs should appear.
Backward compat. urls
We need to make some modifications to make sure the urls are backward compatible.
Set the tag_dir to tag, in ghost the path to tags is /tag.
if your post urls were just /Title then put :title/
in the permalink setting. Otherwise adjust the urls for the proper date format.
RSS
You will want to have an rss feed. You will want to npm install hexo-generator-feed --save
You can then add the following to your config.yml
feed:
type: rss2
path: rss
limit: 0
If you were like me you registered your ghost rss feed to /rss
instead of /rss.xml
. I have no perfect answer to fix this, but I used azure's Url redirect to redirect /rss
to /rss.xml
.
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="SpecificRewrite" stopProcessing="true">
<match url="^rss$" />
<action type="Rewrite" url="public/rss.xml" />
</rule>
</rules>
</system.webServer>
</configuration>
If you are using github pages you can use the jekyll-redirect-from
gem.
Hosting hexo in azure webapps
If you have read this blog for any length of time, you know I am a fan of Azure. I thought about using github pages with hexo, but github pages only supports 1 doman name. I could start 301 redirecting my other domains, but I really didn't want to do that.
How the ASP.NET team made the web framework I have always wanted
So I know I do a lot of blogging about C#, or JavaScript, but I actually do a lot of nodejs apps as well as other languages. For a very long time I have not found the stack of my dreams. .NET has always been very close but there were multiple things about the app model that I was not a fan of. I think NancyFX has been the closest framework to my dreams in .NET land.
Wiring up client side logs into c#/node.js logging frameworks
Around a year ago I joined a new team where I work, and this team was starting to undertake a full rewrite of their code. We were going from a full c#/mvc app to a tiny c# api, and a very big SPA.
Early one one of the huge things to do was to make sure that our JavaScript error logs could land in our Log4Net infrastructure. I started to write something to do just that, and as I was coding I quickly realized this was less trivial that it sounded. We had something internal we could use, but it was tied to a lot of other code that we didn't want to pull in.
I started Bingling around and I stumbled across jsnlog. JSN log lets you quickly wire up your client side logs to your server. I have been able to get PR's into the code base and the guy behind it has been very friendly to me when I have had questions.
Moving from beta 7 to beta 8 in ASP.NET 5 (MVC 6)
So Beta 8 was recently announced, and I thought I'd update DotNetMashups to beta 8.
In case you havn't been paying attention, recently it was announced that helios was no longer a thing. Helios was the loader for ASP.NET 5 in IIS. Instead they are using the http Platform Handler to proxy the connections to kestrel.
So I thought that this was going to be a difficult update. I loaded the announcements repo in my browser and got to work. You can view the Pull request here.
Why I avoid switch statements in c++
So one thing that kills me a lot in c++ is the switch statement. As you all know switch statements look like the following.
auto s = 0;
switch(s)
{
case 0:
doSomething();
break;
case 1:
doSomething1();
break;
}
c++, when should I use the stack or heap?
So I have started learning c++ recently, and as a .NET/Java developer I always want to write the following code.
var s = new myClass()
.
In c++ you have to manage memory yourself, there is no garbage collector.
If you do not use the new keyword var s = myClass()
you will create that class and assign it to on the stack
.
Any stack variables will be cleaned at the end of the block, so in this case s will be cleaned. However if you use var s = new myClass()
s will be allocated onto the heap and must be deleted, otherwise memory leaks will occur.
To clean the variable you must call delete
when you are done with the variable, this will cause the memory in the heap to be cleaned.
Less Pager duty, more Yak duty. My (Strange) DevOps (rant) story.
Growing up I always wanted to work with electronics, and as soon as I could work I was working with a computer. I currently work as a Software Engineer at Vistaprint. I work on the Gallery team, which is an agile development team that works on our platform to display products in a gallery (hence the name). Before I joined the gallery team, I spent most of my career doing ops things.
Avoid the Godclass
I joined a team earlier this year, who own a core set of pages on our website. This part of the site makes us buckets of money, and was written by people whom are clearly smarter than me. However every platform is not without its quirks.
Most of the code is C# MVC but a lot of the problems with the platform are more historic architecture, and less .NET
specific.
Razor Websites, lightweight C# web coding
I was exploring around github, and I stumbled upon an interesting project called Miniblog which was a lightweight blog engine written in c#. The thing that immediately stood out to me was the lack of a .csproj
file.
As I dug around the code I realized this was not a Web App, which most of us were familiar with, but a websites project. I then suddenly realized that the whole thing only used razor!
I am a huge fan of Nancyfx because its much more lightweight than the MVC framework created at Microsoft. To say the least I am a massive fan of small tools, and micro frameworks. So when I realized this whole thing was powered by razor only I was immediately impressed.
I decided to dig around on the internet to see if anyone else was talking about this. I found out quickly that it has been possible for some time, but I didn't find many references about it.
The one thing that bummed me out about the Miniblog example was that it was not a web app. You can use nuget packages will websites, but you cannot make references to other projects in the solution. This was a problem for me, and unlike websites, web app's are precompiled which reduces application startup time.
VS 2015, Getting Resharper Experience Without Resharper
click here for vs2017
Resharper has long dominated the c# landscape as the tool of tools. Roslyn shipping with VS 2015, the quick actions light bulb, and the community analyzers, all combine to produce a resharper-like experience.
Using Bower with a traditional MVC.NET app (While thinking about vNext).
Where I work .NET rules supreme. Personally I really don't care that much about the technology so long as it supports really good workflows. One of my major issues with nuget is that is very opinionated.
Hosting NancyFx with OWIN on IIS
So I was quite confused about hosting Nancyfx on OWIN under IIS. Parts of the Nancy wiki led me slightly astray.
Here is the simple guide.
Make sure you Install the following nuget packages (if you havn't already).
Working with Entity framework (Code First)
Entity Framework is the ORM that has been pushed by the MSFT giant over the last few years to the .NET community.
Binding SSL Certs on Windows Installer XML (WiX) deployed Web Applications
This tutorial is about using SSL certs with WiX for IIS websites. For those of you whom didn't know, WiX is an MSI generator. You can even deploy IIS applications with WiX's MSI's.
Using Action<>, Func<> to hide using statements
Ok so to give you all some background. I always write my data access with a repository pattern in c#. Now I often use dapper, however I'd guess this problem would also apply with Entity framework.
Must Have Tool: NDepend
Code quality tooling has become a bigger, and bigger industry. Tools like Resharper, and stylecop have been telling us how bad us human beings are at developing code.
The one problem I have always had with these tools is they dont go above and beyond to help you understand your code at a higher level.
Custom error pages in Nancyfx (C# Web Framework)
To do custom error pages in Nancy you must implement an IStatusCodeHandler. This class must provide 2 methods. HandlesStatusCode is a bool that basically should tell Nancy if this class will handle the status code. If this returns true then this class will be responsible for handling the request.
Getting SquishIt to work with Nancyfx and Razor (...and other static content issues)
SquishIt is a content bundler and minification tool. The github documentation contains exaples how to install and use it, and a sample application is provided. However I had some issues getting it to work with razor so I figured I would share these pain points with you.
Admob with Xamarin Android Part 2: InterstitialAd
Interested in Interstital ads, but not banner? Thats ok, but I recommend your read my first post about banner ads. The first steps, installing Google Play Services, altering your permissions, adding to your manifests files, and reviewing my github demo are located in that tutorial.
Admob with Xamarin Android Part 1: BannerAd
This will be a brief overview on how to get admob working with Xamarin.
Disclaimer
I highly suggest you run this on a real phone. I'm not sure if the virtual phones can load content on the internet. I always develop on a real phone.
Sample code located in a repo at github
Abstracting Xamarin Android SharedPreferences
The standard way to get/set SharedPreferences in Xamarin is with the following code.
Get Preference:
var shared = con.GetSharedPreferences(_preferenceName, FileCreationMode.WorldReadable);
var value = shared.All.Where(x => x.Key == key).FirstOrDefault().Value;
Set Preference:
var shared = con.GetSharedPreferences("PreferenceName", FileCreationMode.WorldWriteable);
var edit = shared.Edit();
edit.PutString(key, val);
edit.Commit();
The main issue I have/had with this is you often have to know what will be returned, and what type you need to save as. Usually this isn't difficult, but it adds an un-needed level of complexity.
The other major issues I have with this, is that it is quite verbose, and unnecessary. The code duplication here can be quite high.
You're doing it wrong! (Recruiter Edition)
Recruiting, I am sure is a tough job (I wouldn't actually know), but often being on the other end I see pitfalls that a lot of recruiters fall into. So for all of you recruiters, please do not do these things.