Forem: Al Romano

Better Browsers for the Web Dev

Al Romano — Mon, 03 Feb 2020 20:24:54 +0000

As web developers, we spend a lot of time in our browsers! Just looking at my CodeTime/RescueTime stats, I have well over 2500+ hrs looking at browser tabs in 2019. Yikes!

Constantly switching back and forth between tabs, windows, and Inspectors of various shapes and sizes can start to dull productivity.

When we use tools as much as our Browsers we do create a bit of a working relationship with them and over the years I've come to like a few a lot more than others (sorry, IE - looking at you here).

After 11+ years of front-end focused web development and seeing many co-workers gaze upon my screen only to ask "What... tool is THAT?!".

I thought I'd share some of the premium and free browsers I use on a regular basis. They have helped me turbo-charge my responsive web development pipeline and are chock-full of nifty features and functionality. With so many browsers out in the wild, all looking to be the go-to browser for developers make sure you give them all a try!

Here is a list of my favourite browsers built to enhance your every-day development or browser experience.

For Developers

Firefox Developer Edition - (Free)

What can I say, this is my go-to browser for development. Solid development experience with a growing tool-kit every day. Does require add-ons to help enhance the developer's experience out of the box. Amazing for accessibility-focused (WCAG/AODA) development.

Blisk - (Premium)

A Development browser built by developers, for developers. Synced browsing experience across devices and have multiple Inspector windows open for desktop/mobile at the same time. Yes, you heard me correctly.

Polypane - (Premium)

Polypane is a developer-focused browser that does responsive design really well. It's like having Re:emmt built right into your browser and has a slew of developer-friendly features that once you have them, you're surprised you've gone this long without!

For Power Users

Vivaldi

This is my default browser on all my PC's. Took the Vivaldi challenge and set it as default for a week and never looked back! Game Changer: hitting F2 brings up the Browser Command Palette - do everything from here. Yeah.

Brave

It's like Firefox but even more focused on Privacy, Ad Blocking and optimizing page-load times.

For Gamers

Opera GX

It's the beauty of Opera browser but slimmed down and optimized for when you're gaming and need all the resources possible, but still, need to look up that one...last...quest...

On Mobile

Opera Touch

The one-finger controls have made this my go-to default Browser on all my Android devices. Using Flow I can sync tabs across devices quickly and easily.

Firefox Focus

For when you need privacy out the gate, and don't want to clear that pesky history. Its Firefox but you're never logged into anything you need.

Noteworthy Mentions

Microsoft Edge

Yes, the newest build of the browser by Microsoft, is the noteworthy mention.

Having learned many lessons from the past (Internet Explorer...) and no longer looking to be the brunt of all web development jokes for eternity the MS team have really delivered a blazing fast browser experience for Windows 10 users. While it's no longer my default browser I constantly use it for Browser testing and it's legacy IE version emulation is solid.

And there you have it, let me know of any other browsers you think I should test out and add to the list.

Seeing build tools in your nightmares? I was.

Al Romano — Fri, 05 Apr 2019 21:56:19 +0000

Now, this is a story all about how
My build got flipped-turned upside down
And I'd like to take a minute
Just sit right there
I'll tell you how I saved my websites' build all while eating a pear.

In the project's node_modules init and raised
On VS Code was where I spent most of my days
Chillin' out maxin' relaxin' all cool
And just writtin some Gulpjs outside of the school
When a couple of pipes who were up to no good
Started making trouble in my build tool's hood
I got one little exception and my PM got scared
She said 'You're movin' away from Gulp to a better tool out their...'

Recently, I had the opportunity to refactor some old legacy sites. We have many of them and to keep things simple we use a standardized Gulp build template for a lot of the applications. I felt that it was time to revisit this build template since I made it back in 2017 and haven't really had time to update it much even though it's used regularly.

When doing some research I stumbled across Brunch.io and once I started to learn more, I was hooked. As someone who's used a lot of the build tools available (Gulp, Grunt, NPM, Parcel, Webpack, etc..) I was surprised about how simple it was to set up, configure and simply - build.

What was originally 350+ lines of gulpfile.js build glory was boiled down to a mere 39 lines inside of a brunch-config.js file!

Seriously. I'm not kidding! Let's break this down.

The Gulp Build File

This is the "massive" gulp.js build file I used for my microsite project.

/**
 * Created by Alexander Romano on 02/05/2017.
 * Front-End DevOps - Automate using GulpJS
 *
 * A little dependent heavy, but not without purpose...
 */

// Assigning modules to local variables
var gulp = require('gulp');
var less = require('gulp-less');
var syncDocs = require('browser-sync').create();
var browserSync = require('browser-sync').create();
var header = require('gulp-header');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var pkg = require('./package.json');
var merge = require('merge-stream');
var connect = require('gulp-connect');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var runSequence = require('run-sequence');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');

// Sets Up Rollbar Error Reporting
// Get a free account at https://rollbar.com/signup/
var rollbar = require('gulp-rollbar');
// Make sure to get your Token and Version from Rollbar account first
// Paste in the values for the specific project
var rollbarToken = "###";
var rollbarVersion = "###";
// Set Production URL for Rollbar
var rollbarURL = "https://projectname.netlify.com";

// Set banner content
var banner = ['/*!\n',
    ' * Virtually(Creative) - &amp;amp;lt;%= pkg.title %&amp;amp;gt; v&amp;amp;lt;%= pkg.version %&amp;amp;gt; (&amp;amp;lt;%= pkg.homepage %&amp;amp;gt;)\n',
    ' * Copyright ' + (new Date()).getFullYear(), ' &amp;amp;lt;%= pkg.author %&amp;amp;gt;\n',
    ' * Licensed under &amp;amp;lt;%= pkg.license.type %&amp;amp;gt; (&amp;amp;lt;%= pkg.license.url %&amp;amp;gt;)\n',
    ' */\n',
    ''
].join('');

/**
 * BROWSER SYNC
 */
// Starts BrowserSync on the Compiled Dev Folder (APP)
gulp.task('browserSync:dev', function () {
    browserSync.init({
        server: {
            baseDir: 'app'
        },
    });
});

// Starts BrowserSync on the Compiled Dev Folder (DEMO)
gulp.task('browserSync:demo', function () {
    browserSync.init({
        server: {
            baseDir: 'demo'
        },
    });
});

/**
 * USEREF
 */
// Starts the DEV concat of all JS/CSS wrapped in Build Comments
// Pushes errors to Rollbar service to monitor during development
// Dumps the results in DEMO folder
gulp.task('useref:dev', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.identityMap())
        .pipe(gulpIf('app/js/*.js', uglify()))
        .pipe(rollbar({
            accessToken: rollbarToken,
            version: rollbarVersion,
            sourceMappingURLPrefix: 'http://localhost:3000'
        }))
        .pipe(gulpIf('app/css/*.css', cssnano()))
        .pipe(gulp.dest('demo/'));
});

// Starts the PROD concat of all JS/CSS wrapped in Build Comments
// Pushes errors to Rollbar service to monitor during production
// Dumps the results in the DIST folder
gulp.task('useref:prod', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(sourcemaps.init())
        .pipe(sourcemaps.identityMap())
        .pipe(gulpIf('app/js/*.js', uglify()))
        .pipe(rollbar({
            accessToken: rollbarToken,
            version: rollbarVersion,
            sourceMappingURLPrefix: rollbarURL
        }))
        .pipe(gulpIf('app/css/*.css', cssnano()))
        .pipe(gulp.dest('dist/'));
});

/**
 * IMAGE OPTIMIZATION &amp;amp;amp; CACHING
 */
// Finds and optimizes all images and caches results
// Only need to redo cache if new images are added after build
gulp.task('images:dev', function () {
    return gulp.src('app/img/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('demo/img'));
});

// Finds and optimizes all images and caches results
// Only need to redo cache if new images are added after build
gulp.task('images:prod', function () {
    return gulp.src('app/img/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/img'));
});

/**
 * ASSET COPIES
 * FONTS &amp;amp;amp; VIDEOS
 */

// Copies font's to DEMO folder
gulp.task('fonts:dev', function () {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('demo/fonts'));
});

// Copies fonts to dist folder
gulp.task('fonts:prod', function () {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('dist/fonts'));
});

// Copies vids (if any) to demo folder
gulp.task('vids:dev', function () {
    return gulp.src('app/vids/**/*')
        .pipe(gulp.dest('demo/vids'));
});

// Copies vids (if any) to dist folder
gulp.task('vids:prod', function () {
    return gulp.src('app/vids/**/*')
        .pipe(gulp.dest('dist/vids'));
});

/**
 * DEPENDANTS (NPM / BOWER)
 */

/**
 * CLEAN (Delete)
 */
// Cleans DIST folder
gulp.task('clean:prod', function () {
    return del.sync('dist');
});

// Cleans DEMO folder
gulp.task('clean:demo', function () {
    return del.sync('demo');
});

/**
 * MAIN BUILD TASKS
 */

// Main Dev task
// Runs Browser Sync with Watcher
gulp.task('dev', ['browserSync:dev'], function () {
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
    gulp.watch('app/css/**/*.css', browserSync.reload);
});

// Main DEMO task
// Runs Browser Sync with Watcher
gulp.task('demo', ['browserSync:demo'], function () {
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('demo/*.html', browserSync.reload);
    gulp.watch('demo/js/**/*.js', browserSync.reload);
    gulp.watch('demo/css/**/*.css', browserSync.reload);
});

// Main Dev Build task
// Builds Demo Folder by running all :dev tasks
gulp.task('demo:build', function (callback) {
    runSequence('clean:demo',
        ['useref:dev', 'fonts:dev', 'vids:dev', 'default'], 'images:dev', 'demo',
        callback
    );
});

// Main PROD Build task
// Builds Dist folder by running all :prod tasks
gulp.task('prod:build', function (callback) {
    runSequence('clean:prod',
        ['useref:prod', 'fonts:prod', 'vids:prod', 'default'], 'images:prod',
        callback
    );
});

// Default PROD Build task
// Builds Dist folder by running all :prod tasks
// typically invoked during an automated deployment
// Default task
gulp.task('default', ['prod:build']);
// Default "build" task
gulp.task('build', function (callback) {
    runSequence('prod:build', callback);
});

// Less task to compile the less files and add the banner
gulp.task('less', function () {
    return gulp.src('app/less/*.less')
        .pipe(less())
        .pipe(header(banner, {
            pkg: pkg
        }))
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

// Minify CSS
gulp.task('minify-css', function () {
    var vCBP = gulp.src('app/css/*.css')
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }));

    var vCVS = gulp.src('vendor/*/css/*.css')
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('css'))
        .pipe(browserSync.reload({
            stream: true
        }));

    return merge(vCBP, vCVS);
});

// Minify JS
gulp.task('minify-js', function () {
    var vCBPjs = gulp.src('app/js/*.js')
        .pipe(uglify())
        .pipe(header(banner, {
            pkg: pkg
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }));

    var vCVendorjs = gulp.src('vendor/*/scripts/*.js')
        .pipe(uglify())
        .pipe(header(banner, {
            pkg: pkg
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }));

    return merge(vCBPjs, vCVendorjs);
});

// Copy Bootstrap core files from node_modules to vendor directory
gulp.task('bootstrap', function () {
    return gulp.src(['node_modules/bootstrap/dist/**/*', '!**/npm.js', '!**/bootstrap-theme.*', '!**/*.map'])
        .pipe(gulp.dest('vendor/bootstrap'));
});

// Copy jQuery core files from node_modules to vendor directory
gulp.task('jquery', function () {
    return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
        .pipe(gulp.dest('vendor/jquery'));
});

// Copy Magnific Popup core files from node_modules to vendor directory
gulp.task('magnific-popup', function () {
    return gulp.src(['node_modules/magnific-popup/dist/*'])
        .pipe(gulp.dest('vendor/magnific-popup'));
});

// Copy ScrollReveal JS core JavaScript files from node_modules
gulp.task('scrollreveal', function () {
    return gulp.src(['node_modules/scrollreveal/dist/*.js'])
        .pipe(gulp.dest('vendor/scrollreveal'));
});

// Copy Font Awesome core files from node_modules to vendor directory
gulp.task('fontawesome', function () {
    return gulp.src([
            'node_modules/font-awesome/**',
            '!node_modules/font-awesome/**/*.map',
            '!node_modules/font-awesome/.npmignore',
            '!node_modules/font-awesome/*.txt',
            '!node_modules/font-awesome/*.md',
            '!node_modules/font-awesome/*.json'
        ])
        .pipe(gulp.dest('vendor/font-awesome'));
});

// Copy all dependencies from node_modules
gulp.task('copy', ['bootstrap', 'jquery', 'fontawesome', 'magnific-popup', 'scrollreveal']);

// Create browserSync task for Docs
gulp.task('syncDocs', function () {
    browserSync.init({
        server: {
            baseDir: 'docs/'
        }
    });
});

// Watch Task that watches for HTML/JS changes in Docs folder and reloads BrowserSync
gulp.task('docs', ['syncDocs'], function () {
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('*.html', syncDocs.reload);
    gulp.watch('assets/*.js', syncDocs.reload);
    gulp.watch('assets/*.css', syncDocs.reload);
});

Wowza, 356 lines (including comments) just to build a single-page microsite.
What's going on here? Check out the comments within each section to get an idea.

The Brunch.io Difference

Comparatively, Brunch is simple. Brunch compiles, concats and (optionally) minifies your scripts and styles. It can also package JavaScript files into AMD or CommonJS modules. Brunch automatically applies plugins in the correct order to the right files - so with the right plugins, a .coffee file would be converted into a .js file and then minified, with no explicit setup necessary. To learn more check out the brunch.io documentation.

Brunch has a few conventions that help keep things simple - but you don’t have to follow all of them.

Firstly, Brunch asks you to specify a folder called assets that are directly copied into your output folder with no modifications.

Secondly, most Brunch projects have two separate JavaScript files - app.js, which contains your code, and vendor.js for all external libraries, including bower packages. This allows you to package your files into modules without affecting external libraries.

Using Brunch

The brunch command has two main commands - brunch build --production and brunch start.

Build runs the Brunch compilation process and immediately quits, conversely start compiles everything then waits for changes on any of your files, and then immediately compiles and updates the files.

Unlike Grunt or Gulp with plugins, Brunch caches your files, so after the initial compile, the start command is incredibly fast.

By default, minification is disabled. Brunch has a --production flag, which minifies the output files, removes source maps and disable the auto reload plugin.

Ok, there are a lot of things going on above in that Gulp.js file that we'll need to replace.

To do all of that, here is what our brunch-config.js turns out looking like,

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': [
          'vendor/jquery/1.11.3/jquery.min.js', // include specific file
          'vendor/jquery/mobile/touch/1.4.5/jquery.mobile.touch.min.js', // include specific file
          'vendor/bootstrap/3.3.5/bootstrap.min.js', // include specific file
          'vendor/global/js/custom.js', // include specific file
        ],
        'app.js': /^app/ // all code from 'app/'
      },
    },
    stylesheets: {
      joinTo: {
        'vendor.css': /^vendor/, //all code from 'vendor/'
        'app.css': /^app/ // all code from 'app/'
      }
    }
  },
  plugins: {
    cssnano: {
      autoprefixer: {
        add: true
      },
    }
  },
  swPrecache: {
    swFileName: 'sw.js',
    'autorequire': false,
    options: {
      staticFileGlobs: ['public/**/*.*'],
      stripPrefix: 'public/',
    }
  }
}

But wait, where's image minification and what's that swPrecache stuff?
Image minification is already done for you out of the box with imagemin-brunch package installed in the project.

Need to turn your app into a Progressive Web App? Add in swprecache-brunch to auto-generate your service-worker.js and offline cached assets.

Using Node Modules

NPM integration is enabled by default starting Brunch 0.2.3 so there's no additional setup! Simply npm install --save-dev your front-end packages as you normally would, require them in your app, and Brunch will figure out the rest! Usually, there is a package-brunch for what you need which auto-config's that item out of the box.

Package.json

To highlight the ease-of-use for Brunch, here is the package.json dependencies section to showcase what I mean. Once you install a -brunch package that's usually all you need to get it working!

 "devDependencies": {
    "auto-reload-brunch": "^2",
    "babel-brunch": "~6.0",
    "babel-preset-latest": "^6",
    "brunch": "^2.10.17",
    "cssnano-brunch": "^1.1.8",
    "imagemin-brunch": "^1.1.0",
    "sw-precache-brunch": "^2.0.1",
    "uglify-js-brunch": "^2"
  },
  "dependencies": {}
}

In Gulp's Defence...

In defence of Gulp, that gulp.js file above is rather sloppy and has lots of repeated code sections & verbose comments which easily could be removed and refactored into more succinct functions and then called upon when required.

I get that.

But, part of the point is rather than having to work through a large refactoring effort, I still only need 40 lines or less in Brunch to achieve my intended results. What if this wasn't my own project but another developer's I adopted and saw that massive Gulp file and was told to "make this better"?

These 40 Lines in brunch-config.js I'm sure would take me less time to type than even thinking about how I'd like to go about refactoring that gulp code above.

Still, As we mentioned earlier, Brunch simplifies the setup process tremendously by making some basic assumptions about the setup of your project. Unfortunately, if your project is exceptionally unique it might be quite a headache trying to customize Brunch to work with what you’ve got.

Conversely, Gulp really shines here. Gulp's configuration file is definitely more demanding than Brunch’s, but it offers pretty much-unlimited flexibility. You can control just about every aspect of the task runner through the many options made available to you in the Gulp API and CLI documentation. And, of course, those 2,800+ plugins don’t hurt either...

How do you guys handle some of your more seemingly simple builds? Could this be done in even fewer lines using Webpack or something else entirely? Let me know! Would love to learn how you guys go about building some of your pipelines.

If anyone has questions, feel free to reach out!

Featured Photo Credit, Oomph Inc - 2017

Deep Dive: Visual Studio Code - Azure Extensions

Al Romano — Wed, 20 Feb 2019 16:46:51 +0000

Getting to know Visual Studio Code better over the last couple of years lead me down some new and interesting learning paths when it comes to finding ways to deploy web applications, UI and other front-end related items hassle-free.

Coming from Visual Studio 2015 and before that Eclipse, I was used to having my IDE do most, if not all, of the work when it comes to the running of a CI/CD pipeline. Thankfully those dev-shops having already setup environments/configs allowed me hassle-free on-boarding and deployments. The senior and principle developers already had a tried and tested workflow to follow and making sure other developers followed it was important.

Now that I've started to look into doing more full-stack work for my own projects I wanted an easy, hassle-free way to set up deployments using some built-in Extensions for Visual Studio Code (VSC) to achieve the same feel and flow like in those dev-shops of projects past.

The Microsoft Azure extensions for VSC along with Microsoft's free Azure offering for new devs ($200USD credit and free tiers in the USA) made it the perfect opportunity for trying out. Just make sure to stick with the free tier when deploying apps - otherwise Azure will burn through that $200 fast!

If you're unfamiliar with Azure's roster of products, here is the comparison between Azure and AWS and between Azure and Google Cloud. This helped me learn the equivalent service from one to the other.

Azure Extensions List

This was going to be a long list of extensions but the Azure Tools extension coupled with Azure Repos and Azure Pipelines does the heavy lifting you'll need and uses other azure extensions to facilitate various aspects of the features mentioned.

Azure Tools

Get web site hosting, SQL and MongoDB data, Docker Containers, Serverless Functions and more, all on Azure, all from VS Code, in this one extension from Microsoft.

This is a must have that replaces several individual Azure extensions and adds the Azure Explorer inside Visual Studio Code. This lets you easily navigate around your Azure portal resources and can manage most items right here.

The Azure App Service extension lets you quickly create sites, deploy them, view logs, and even set environment variables (such as a Connection String), right from within VS Code.

VS Code's Cosmos DB support lets you create and manage databases as well as write MongoDB command scripts in a scrapbook, with rich completions (IntelliSense) just as if you were writing JavaScript, Python, or C#.
If you use SQL Server or Azure SQL Databases to store data for your applications, the SQL Server extension enables SQL database connectivity directly within VS Code. With handy commands for connecting to database servers or instances, in-editor query results views, and IntelliSense completion for SQL, you'll be able to validate your code is manipulating your data properly without leaving VS Code.
Have a static site you want to host? You can use Azure Storage to host your site quickly and inexpensively. The Storage service also provides massive scale blob, file, and document storage with low latency and high throughput. VS Code's Storage support lets you deploy static sites, browse and edit Blob Containers, File Shares, Tables, and Queues.
Store your Docker images in private Container Registries using the Azure Container Registry, and run them in the cloud using App Service. VS Code's support for Docker helps you author Dockerfile and docker-compose files with rich completions (IntelliSense), syntax highlighting and checking, and linting support. The Explorer view makes it easy to build, run, and manage your local and remote containers and images.
The Azure CLI extension makes it easy to manage all of your Azure resources from a terminal. If you write CLI scripts, VS Code's support provides syntax highlighting and completions (IntelliSense) for the CLI commands as well as your resources in Azure. You can execute one or more commands and even see the results in richly formatted JSON, document.
You can also automate the management of Azure resources using Azure Resource Manager ("ARM") templates. VS Code's support for ARM makes it easy to author these JSON documents with rich editing and navigation experiences for deployment templates and template language expressions, including completions (IntelliSense) for TLE function names, parameter references, signature help, Go to Definition, Peek Definition, and Find All References (Shift+F12) as well as Errors and Warnings.
Develop and connect your IoT applications to Azure using the Azure IoT Toolkit. With this extension, you can interact with an Azure IoT Hub, manage connected devices, and generate code for your Azure IoT applications.

Azure Pipelines

This is a small extension that is critical for me when automating front-end deployments. Basic YAML validation is built into VS Code, but now you can have syntax highlighting that's aware of the Pipelines YAML schema. This means that you get red squigglies if you say tasks: where you meant task:. IntelliSense is also schema-aware.

Azure Repos

This extension allows you to connect to Azure DevOps Services and Team Foundation Server and provides support for Team Foundation Version Control (TFVC). It allows you to monitor your builds and manage your pull requests and work items for your TFVC or Git source repositories.

Wrapping Up

So there you have it, with these 3 extensions you can gain pretty good coverage over the most used Azure services to quickly and easily deploy your applications. In another post, we'll deep dive into how to lift a local application to become a production-ready Web Application.

Use different Azure extensions, or got some tips and tricks to using the ones I mentioned above? Let me and others know in the comments!

Stop thinking like a developer!

Al Romano — Mon, 11 Feb 2019 22:45:33 +0000

Being part of a development team for an organization is a refreshing change coming from several years as a solo freelance developer. While I enjoy doing freelance development, there is something about being a part of a larger organization that helps motivate me in ways Freelancing did not but - being part of a larger development team, which is actually just a team as part of a larger organization - does come with it's own set of challenges I had to learn and absorb. And glad I did so, as I think in the long-run it makes for a better developer overall.

With so much fresh-blood pouring into the industry and with how rapid technology changes, of my ten plus years as a full-stack web developer this is something my mentors have drilled into my head over the years...

Don't focus only on the "How" - Stop thinking like a developer!

Early in my development "adventures" I was part of an 'upkeep and maintenance' team and was often called in to help the business solve a particular set of issues with currently running legacy systems.

For all issues I was assigned, the old me did a simple discovery (or scope) planning session, learned as much as we could and then happily powered up my editor (Eclipse at the time...) and started to hammer away at some ugly code solution.

For simple support tickets, this was fine and I was getting pretty good experience fixing CSS issues here, and simple Javascript interactions there until my first major project landed in my lap, a new feature to our slider - add full-screen video slides.

"Ok, great!" I thought as I assigned the ticket to myself and started to get cracking on how I was going to make a full-screen video player slide in and out, not stutter and then transition to the next video.

Two days worth of coding later, I update the ticket with my progress, show awesome screenshots and examples and promptly get chewed out by our Project Manager.

"What happened?!" I thought. "Where did I go wrong??"

I bulid what they asked for - or so I thought...

Focus on the "Who", "Why" and "What"

A lot of the time as a developer (myself included) we get caught up in the finer details of things and since we know how the inner-workings of the web it's easy to quickly deep-dive into 'how' we should go about solving a particular problem (and quickly end up knee-deep in prototype land with no scope) before realizing we forgot to ask some key project questions.

Who?

Being some of the most important questions, 'who' covers many topics/angles depending on the point of view.

In this case, I never asked the people in the business unit,

'Who' will update or add slides?
'Who' is picking the videos and from what source are they being delivered (Youtube, Vimeo, Self-hosted)?
'Who' is going to update already inserted slides and correct issues?

Why?

Helping to organize the bigger picture, 'why' covers many topics/angles depending on the point of view.

In this case, I never asked the people in the business unit,

'Why' self-host the videos over Youtube or Vimeo?
'Why' do we need to hide play buttons?

What?

Helping to tie loose strings, 'what' covers many topics/angles depending on the point of view.

In this case, I never asked the people in the business unit,

'What' is the expected behaviour of the slide?
'What' data does the CMS need to create a video in the template?
'What' starting list of video content do you have?

All of these items needed to be scoped out as part of the discovery process and I never did - I just dived right into the 'how' worrying about things like black-background flicker, maintaing proper aspect ratios on mobile and a custom mute feature.

The biggest take-away I got from that project was that my first step, my first several steps really - was never to start coding. I should never be coding right away on projects, always take the time to ask lots questions and learn more about the "big-picutre" of the project, business, goals - whatever.

'Who' is this for?
'Why' is this being done this way?

All of these important questions all help you formulate the 'how' - your specialization - and asking lots of questions helps make the 'how' that much easier on yourself.

Have a nightmare project that you'll never forget? What was it and what was the most important thing you learned for next time? I would love to hear your thoughts!

20 VS Code Extensions You'll Actually Use

Al Romano — Fri, 08 Feb 2019 16:14:24 +0000

I've noticed several VS Code extension posts and have been thoroughly disappointed with the mentioned extensions with the exception of a couple so I thought I'd compile my list of plugins that I personally use.

I think these are helpful for any primarily front-end developer who wants to get the most out of using Visual Studio Code. Some of these you'll already have - as they're the most recommended extensions on the platform - but others you may not.

Easy to Read

Beautify - Makes HTML, CSS and JS very easy to read by de-minifying and properly spacing your horrendous markup.
Better Comments - Create more human-friendly comments in your code. I use this all. the. time. It's a mandatory extension for our dev team.
Bookmarks - It helps you to navigate in your code, moving between important positions easily and quickly. I use this in conjunction with MetaGo to be almost mouse-free while coding.
MetaGO - Wicked fast cursor movement/selection for a focus on keyboard usage. This changed how I use VS Code forever. Seriously.
Log File Highlighter - Just as it sounds, gives VSCode .log file support so you can actually read those log dumps without your eyes bleeding.
Guides - Now you don't have to collapse and open all your freaking elements to figure out nesting. This works really great with Beautify mentioned above and Rainbow Brackets, below.
Rainbow Brackets - Highlights the current bracket-set you're in and colours the rest differently for very easy location identification. If you're a heavy JS developer this is a great extension.
Image Preview - Shows an image preview in the gutter and on hover. So key for checking if I just referenced the correct image/icon.
GitLens - One of the most used extensions for sure; Gitlens is a must have for VS Code and just makes the Git experience so much better all around. Pair this with the .gitignore and .diff extensions for good coverage.

Faster Coding

CSS Peek - Inspired by a similar feature in Brackets called CSS Inline Editors. One of my favourite Brackets features now in VS Code.
stylelint - We lint our JS, so why not our LESS/SASS/CSS too? Great for quickly cleaning up sloppy CSS.
Live Sass Compiler - Sure, you got Gulp, Webpack, NPM, Grunt but sometimes you want to compile/transpile your SASS/SCSS files to CSS files in realtime with live browser reload. This does just that.
Live Server - Best local development Server with live reload feature for static & dynamic pages (even PHP!).
Version Lens - Update dependencies/devDependencies to latest version for specified package.json. Recommended by: Mihail
DotENV - Adds support and highlighting for .env files - something I rely on heavily pushing to Heroku, Netlify, etc...

Pretty Screenshots

Polacode - Highlight code, snap a really nice screenshot with your code theme's colours. Great for tutorials or documentation and you want to provide code examples.

Multiple Instances

Settings Sync - Uses a private gist to save a setting file so you can sync Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions between multiple VS Code instances. I use this to keep my Laptop, Work Desktop and Home Desktop all in sync with two simple commands.
EditorConfig - Override user/workspace settings with settings found in .editorconfig files. I use this to enforce specific rules for the development team on a per-project basis.

So there you have it, while I have lots of other plugins more specific to the environments I use (Front-End Web + Azure Cloud) hopefully you'll find these extensions useful in your daily use of VS Code!

Let me know if you already use them and if you love or hate them. Or, some extensions I might have missed and should try out!

Noteworthy Mentions

After getting some feedback in the comments of you guys showing me some of your favourite VS Code extensions here are some new ones that I think are solid enough to also include:

Import Cost - Shows the filesize cost of importing. - Recommended by:

miku86Follow

Mentor & Senior Web Developer - I help people to reach their (career) goals. => https://miku86.com
Window Colors - Run multiple instances of VS Code? Have each window uniquely coloured so you don't lose track of which project is in what window. - Recommended by:

Jefry PozoFollow

A .NET and Web developer from Dominican Republic.
Prettier - Very "Pretty" markup cleaner. Used by Stackoverflow to display nice code snippits. But, doesn't handle HTML inside .js/.ejs/.jade/.pug templates so not the best if working with many static site generators.

Forem: Al Romano

Better Browsers for the Web Dev

For Developers

For Power Users

For Gamers

On Mobile

Noteworthy Mentions

Seeing build tools in your nightmares? I was.

The Gulp Build File

The Brunch.io Difference

Using Brunch

Using Node Modules

Package.json

In Gulp's Defence...

Deep Dive: Visual Studio Code - Azure Extensions

Azure Extensions List

Azure Tools

Azure Pipelines

Azure Repos

Wrapping Up

Stop thinking like a developer!

Don't focus only on the "How" - Stop thinking like a developer!

Focus on the "Who", "Why" and "What"

20 VS Code Extensions You'll Actually Use

Easy to Read

Faster Coding

Pretty Screenshots

Multiple Instances

Noteworthy Mentions

miku86Follow

Jefry PozoFollow