This, in itself, is shocking. When it first came out, nobody expected a tool made by Microsoft to become so dominant. After all, Sublime Text and Atom (made by GitHub) were incredibly popular and had a large user base; Microsoft had a large hill to climb.

Microsoft did lots right when developing VS Code, but there are a few (okay, five) specific things that sick out (to me) that make it universally appealing. First and perhaps foremost, they integrate extensions as a primary function of the IDE.

This focus is obvious. It has a button in the activity bar! Extensions are popular in Atom and Brackets, as well (both very similar IDEs built on Electron), but neither have made extensions so accessible and simple. This means that if, for some reason, you want your editor to work differently, there’s probably an extension for that. If there isn’t one, you can code one yourself using their thorough documentation and API.

Secondly, Visual Studio Code is fast. Maybe not FAST like Sublime Text (which is built with C++, as opposed to JavaScript and HTML, implemented with Electron), but significantly faster than either Atom or Brackets. And you know what they say: you don’t have to be faster than a bear, you just have to be faster than the person next to you. The speed of VS Code makes similar editors feel sluggish and unresponsive.

Then there’s Git. Sublime doesn’t have it out of the box. Atom does, but VS Code just does it better. Want to git a lot of developers excited? Get Git right!

Microsoft made Visual Studio Code open-source, hosting it on GitHub. This was unexpected. Microsoft is not known for being open-source-friendly. Perhaps this was originally a foreshadowing of June 2018, when they bought GitHub for $7.5 billion. No matter what the reason, being open-source invigorated and built a community, quickly.

The last thing that sets them apart is actually two things that works as one: they have listened to their user base on GitHub, then have promptly fixed or added whatever had been requested. This responsiveness has captured many fans and caused Visual Studio Code to improve leaps and bounds in a short time. Today, they’re at nearly 60,000 commits with no signs of slowing down. Developers love them some pull requests (PRs) and lots and lots of commits.

(In comparison, Sublime Text 2 had, at one time, appeared to have stopped development entirely, with Sublime Text 3 seemingly forever in beta. It was eventually released on September 13, 2017.)

Speed Up / Customize / Tweak Your Development

Before you continue, I’ve got to break something to you. The following tips aren’t necessarily unique. I haven’t discovered hidden settings that nobody else has found.

Instead, the following pieces of advice aim to surprise you with a new keyboard shortcut or an extension you hadn’t heard about. I’d like to try to address almost all aspects of how you can modify or customize VS Code to your liking, not just list a bunch of neat extensions. If you need a more in-depth primer on everything Visual Studio Code, I recommend reading the official Getting Started Guide, which is fantastically thorough.

One last thing, all of the keyboard shortcuts are for MacOS; I chose to omit the Windows shortcut as opposed to getting some wrong. Here’s the Windows VS Code shortcuts reference, the MacOS shortcuts, and the Linux shortcuts.

Sound cool? Keep calm and develop on.

Visual Aids

Color Themes

If there’s one thing that you can do that will go furthest in enhancing your enjoyment and efficiency when using Visual Studio Code, it’s making sure you use a color theme that is legible and reduces your eye strain. A lot of developers will be staring at their IDE for hours at a time, so you owe it to yourself to find a theme that works for you.

Here are a few I’ve used for quite some time and enjoy a lot. You might notice these are all dark themes with nary a light one to be found. After trying a few light themes for a while, I just couldn’t get past the extra strain they put on my eyes. For me, when coding, darker is better. If lighter themes are your jam, check out some good ones here.

Cobalt 2 by Wes Bos

• I recently started using Cobalt for Visual Studio Code and now also use it as my Firefox theme, although I prefer this one. I like that the focus is clearly on the editor with the side panels darkened the right amount. Additionally, highlighted elements are clear and pronounced. It’s really nicely done.
• Search extensions for: wesbos.theme-cobalt2
• VS Code Marketplace link

Monokai Pro (nagware – 10€ to remove the occasional popup, but it’s worth it!)

• I used Monokai Pro for a couple years and found that the lower contrast really helped with long-term eyestrain. The developer has put a ton of work into this theme and it shows. It comes highly recommended, even though it’s a paid theme (although you can ignore the occasional nags, if you prefer).
• Search extensions for: monokai.theme-monokai-pro-vscode
• VS Code Marketplace link

Material Theme (website or Github)

• This is a theme I’ve actually not used for more than a brief time. However, with 1.7M installs, clearly people like it. Check it out if Material Design is your thing.
• Search extensions for: equinusocio.vsc-material-theme
• VS Code Marketplace link

Monokai One Dark Vivid

• This is a less popular theme, but I used it for a long time. I really loved the high-contrast rainbow color scheme but the ultra-high contrast might not be for everyone.
• Search extensions for: ashpowell.monokai-one-dark-vivid
• VS Code Marketplace link

Bracket Colors

Extension: Bracket Pair Colorizer 2

• Search extensions for: coenraads.bracket-pair-colorizer-2
• VS Code Marketplace link
• This also colors the indentation guides.

Icon Themes

I prefer the Material Icon Theme, but VS Code Great Icons are also… uh, great.

Material Icon Theme

• Search extensions for: pkief.material-icon-theme
• VS Code Marketplace link

VS Code Great Icons

• Search extensions for: emmanuelbeziat.vscode-great-icons
• VS Code Marketplace link

Extensions

ACF Snippets

• Do you do a lot of coding with Advanced Custom Fields (ACF)? This is the extension for you. I prefer this to the more-installed alternative as I find the snippet triggers for this one are simpler to remember. Want to Get Sub-Field? Yep, it’s gsf + TAB. Straightforward.
• Search extensions for: baerkins.acf-snippets-vscode
• VS Code Marketplace link

Auto Comment Blocks

• • You can easily insert multi-line comments. Just type /** + Enter and you’re good to go.
  • Search extensions for: kevinkyang.auto-comment-blocks
  • VS Code Marketplace link

Better Comments

• This goes nicely with Auto Comment Blocks. Highlight TODOs and FIXMEs and NOTEs (and more) so they stand out in your code. It’s also very customizable.
• Search extensions for: aaron-bond.better-comments
• VS Code Marketplace link

Comment Anchors

• I clearly love comments. This extension automatically adds an anchor, essentially a bookmark, to anything that says NOTE, TODO, FIXME, etc. It also creates a VS Code panel, so you can find all Anchors in a project or just the ones in the current file, which is handy.
• Search extensions for: exodiusstudios.comment-anchors
• VS Code Marketplace link

Settings Sync

• This feature is absolutely fantastic if you use more than one computer and you want the exact same setup, even if you’re going from Mac -> Windows -> Linux. Everything is beautifully kept in sync.
• Search extensions for: shan.code-settings-sync
• VS Code Marketplace link

Search the WordPress Docs

• If you can’t remember (like me) if get_permalink accepts the post object or just the ID, and whether or not it has any optional parameters, you’ll find this feature super useful. I have mine bound to cmd + F1 and set to open in a side-by-side panel.
• Search extensions for: yogensia.searchwpdocs
• VS Code Marketplace link

Path Intellisense

• This is great if you need to include() a lot of files.
• Search extensions for: christian-kohler.path-intellisense
• VS Code Marketplace link

Highlight Matching Tag

• So subtle, but it’s very useful. It gives you a bit of context, both as an underline as well as a gutter marker, and works with everything from functions to SCSS blocks to good ol’ HTML.
• Search extensions for: vincaslt.highlight-matching-tag
• VS Code Marketplace link

SCSS Formatter, SCSS Intellisense, SCSS Everywhere

• If you write SASS, you need these.
• Search extensions for: sibiraj-s.vscode-scss-formatter, mrmlnc.vscode-scss, gencer.html-slim-scss-css-class-completion
• VS Code Marketplace – SCSS Formatter, SCSS Intellisense, SCSS Everywhere

Emmet

Emmet is a great time-saver, allowing you to write a bunch of custom HTML & CSS snippets on the fly. Pro tip: use multi-cursors (find out how below) to activate Emmet in a variety of spots at once.

Here’s a great tutorial on all the ins and outs of Emmet in VS Code. Some quick Emmet shortcuts can be found below.

• HTML
  • div.header>ul.menu>li.menu-item*3
• SCSS / CSS
  • Use TAB to trigger the following shortcuts. To enable TAB triggering, see the Settings below.
  • m > margin
  • p > padding
  • d > display: block
  • r > right
  • t > top
  • w > width
  • h > height

Useful Settings

Add the following to your Settings file (cmd + ,), or modify them with the Settings UI:

• “files.trimTrailingWhitespace”: true
  • Always removes trailing space on lines.
• “files.insertFinalNewline”:true
  • Add a newline at the end of the file.
• “editor.smoothScrolling”: true
  • So smooooth.
• “workbench.editor.enablePreviewFromQuickOpen”: false
  • If you’re using cmd + p to open files, don’t set them as previews.
  • This leaves files that you single-clicked in the file explorer as previews.
• “extensions.ignoreRecommendations”: true
  • Hide the extension recommendations.
• “editor.fontLigatures”: true
  • Turn on font ligatures. (See below.)
• “emmet.triggerExpansionOnTab”: true
  • Let emmet trigger suggestions with the TAB key.
• “telemetry.enableTelemetry”: false
• “workbench.settings.enableNaturalLanguageSearch”:false
  • The above two settings disables data collection by Microsoft.
• “editor.cursorBlinking”: “phase”
  • I prefer this to a blinking cursor.

Keyboard (& mouse) Shortcuts

If you want to be efficient, don’t take your hands off of the keyboard! As I mentioned at the top of the article, all of the keyboard shortcuts are for MacOS. You can find links to the keyboard shortcuts for all platforms here. Before starting in on the shortcuts, are you coming from a different IDE? If so, there’s probably a keymap for that!

Downloadable Keymaps:

• Sublime Text
  • Search extensions for: ms-vscode.sublime-keybindings
  • VS Code Marketplace link
• Atom
  • Search extensions for: ms-vscode.atom-keybindings
  • VS Code Marketplace link
• Notepad++
  • Search extensions for: ms-vscode.notepadplusplus-keybindings
  • VS Code Marketplace link
• JetBrains
  • Search Extensions for: isudox.vscode-jetbrains-keybindings
  • VS Code Marketplace link
• Visual Studio
  • Search Extensions for: ms-vscode.vs-keybindingsPreview
  • VS Code Marketplace link
• Xcode
  • Search Extensions for: stevemoser.xcode-keybindingsPreview
  • VS Code Marketplace link
• Did I miss your favorite IDE? There’s lots more.
  • VS Code Marketplace Keymaps

Keyboard Shortcuts

The official Key Bindings list can be found here.

cmd + shift + p

• Command Palette
• Do anything by typing.

cmd + p

• Open any file quickly with fuzzy search.

cmd + shift + .

• Display and jump through your code tree via breadcrumbs.

cmd + shift + ;

• Select current breadcrumb, then navigate with arrows.

cmd + ,

• Open and play with your settings.

cmd + alt + click

• Goto Definition in a side-by-side pane

cmd + l

• Select whole line with cursor.
• Works with multi-cursors

ctrl + j (note: NOT cmd)

• Join line (Mac only)

shift + option + Up/Down

• Duplicate line up or down

cmd + shift + k, cmd + c, cmd + v

• Simply put your cursor on the line to manipulate. The whole line doesn’t have to be selected.
• Delete line > cmd + shift + k
• Copy / cut line > cmd + c / cmd + x
• Paste line > cmd + v

cmd + d

• Select word under cursor, highlight all occurrences of that word in the file.
• Hit again to progressively select more of the same word.

cmd + shift + l

• Select all occurrences of a word in current file.

shift + option + drag

• Column mode
• Alternatively, use the middle mouse button

cmd + shift + t

• Reopen files that you recently closed in order (just like in your browser!).

cmd + shift + e, f, g, d, x

• Focus panels > file explorer, find, git, debug, extensions (in order, from top to bottom)

Multi-cursors

• Option + click
• (Might be set to ctrl + click, toggleable in the Settings or in Selection > Switch to…)

shift + option + right (or Left)

• Select everything inside brackets { }.
• Use Right to expand selection to include next section.
• Use Left to shrink selection.

Quickly toggle between terminal and editor focus

• Add the following to your settings, modifying as desired:
  • { “key”: “ctrl+`”, “command”: “workbench.action.terminal.focus”, “when”: “editorTextFocus” }, { “key”: “ctrl+`”, “command”: “workbench.action.focusActiveEditorGroup”, “when”: “terminalFocus” },

Other cool things

Fonts with Ligatures

So, why use font ligatures at all, and what are they?

Ligatures are a font that will merge several characters into a single one, to make them more legible or to stand out in some way. In programming, that basically means you’ll see ⇒ instead of => and ≥ instead of >= and so on. Different fonts will support a different number of ligatures, so try a few to decide what works for you. Here’s an example of the ligatures supported in Fira Code:

Want to try some out? Cool. To start, enable ligatures in your settings by adding “editor.fontLigatures”:true, (or use the UI) then install and select one of the following fonts:

• Fira Code
  • https://github.com/tonsky/FiraCode 
  • https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions 
• JetBrains Mono
  • https://www.jetbrains.com/lp/mono/
• Cascadia Code
  • https://github.com/microsoft/cascadia-code

Good fonts for coding:

• https://speckyboy.com/best-free-fonts-coding/
• https://github.com/chrissimpkins/codeface

Zsh shell > Bash

• Here’s why you should use it.
• How to use it in Visual Studio Code after installing:
  • Use the Command Palette:

• • Adding the settings manually: (cmd+.)
    • “terminal.integrated.shell.osx”:”/bin/zsh
    • “terminal.integrated.shell.linux”:”/bin/zsh”

Workspaces

• You can have workspace-based settings!
  • Formatting
  • Color themes
  • Etc.
• In one Workspace, you can open different folders which are not necessarily in the root folder.
  • File > Add Folder to Workspace

Get a Wider Monitor

No, really. Consider buying an ultrawide monitor. Check out the screen real estate! This is one of best things I’ve ever done to increase my productivity.

That’s all I’ve got. If I find some new efficiencies, I’ll add them here so be sure to check back periodically. Also, if you find some that I’ve missed, feel free to share them with me on twitter.

Have fun coding!

The post Speed Up Your Development with Visual Studio Code appeared first on WebDevStudios.

In short, AMP is an HTML Framework, which helps pages load faster and look better than standard HTML pages. The framework prevents developers from shooting themselves in the foot by having strict coding standards and by requiring all pages to be validated before they can be “Amplified.” If you want to learn more, check out a recent blog post, “AMP More Than Just Mobile Pages.”

Discovery and Scope

When our client, Microsoft, came to us last month, they had already rolled out AMP on another one of the web properties, Office Products, and were ready to get Microsoft 365 on AMP. The goal was to provide mobile users with a better experience when searching for Microsoft Office products.

We knew that we wanted to leverage the official AMP for WordPress plugin, and we’d need to customize templates to account for minor design adjustments on the blog post template. The stakeholders required custom pixel tracking, support for their custom videos, as well as a header and footer that closely matched their current design. Finally, this project would need to go live by mid-August.

Development

Knowing we only had two weeks of development and QA time, we got right to work. Looking at the options available in the AMP for WordPress plugin, we decided to leverage Reader Mode and customize the Classic Templates. It just so happened that we were busy writing blog posts about AMP and the AMP for WordPress plugin. Both Weston Ruter and Paul Bakaus from the Google AMP team had offered to peer review them and offered to point us in the right direction if we had questions about customizing templates.

Getting Started

The first thing we needed to do was customize the header and footer. While AMP for WordPress offers a hook for customizing the footer output, it doesn’t offer the same thing for the header—just a hook to inject things into the <head> of the page.

Our first run at this was through using the amp_post_template_file filter, which allows you to specify a different template file then what the plugin would use by default. While this worked, we soon pivoted to a much simpler and more streamlined solution: the /amp/ directory in our theme. Similar to other plugins which allow you to override and customize template files in your theme, AMP for WordPress gives you the ability to customize its various templates by adding template overrides to a top-level /amp/ directory in your theme.

So, instead of using filters to specify a brand new header and footer, we simply copied the header.php and footer.php files from the AMP for WordPress plugin into our theme’s /amp directory and customized them there.

The Single Post Template

Of course, a nice header and footer don’t mean much if you don’t also have a nice single post template. The out-of-the-box single template packaged with AMP for WordPress works really well and did most of the heavy lifting for us, but Microsoft 365 has some custom functionality that needed to be reworked to be AMP-compliant.

AddThis

Since we were using AddThis on the desktop version of the site, we needed to continue using AddThis on our AMP single post templates. Like a bunch of real sweethearts, the AMP team has made this an extremely easy process to undertake.

The first step, aside from having your AddThis widget ready, is to call the required JavaScript required for the service to work. It’s all spelled out super clearly in the AMP documentation, which tells you exactly which script is required. For us, we were also going to be using the `amp-audio` component (which we’ll look at in a bit), so our header script hook looks like this:

View the code on Gist.

Next, grab your publisher ID and widget ID from AddThis and drop this in place wherever you need to display it:

View the code on Gist.

Easy! We’ve now got fully functional and AMP-approved AddThis tools in place.

Audio Player

Aside from standard post content, we also needed to ensure that our post meta would transfer from the full version of the site to AMP. In this case, this comes in the form of an optional MP3 uploaded to each post. If the MP3 is present, then an audio player should display above the post content. In WordPress, this is fairly easy to do by using built-in shortcodes with our post meta passed in. In AMP, audio is just as easy—and even easier if you’ve already implemented something like AddThis.

Just like with AddThis, the AMP documentation has detailed information on how to implement the amp-audio component. You’ve already seen how we’re including scripts in the <head>, so we won’t cover that again. For implementation of the audio player itself, we simply needed to pass our post meta into the amp-audio component:

View the code on Gist.

This, combined with our header script, gives us a perfect audio player! You can see that we’ve got a fixed width of 840px on our player. This is because, at its largest, our content area is 840px wide. We’ve added some CSS to ensure this never expands past max-width: 100% so our player doesn’t break the viewport on mobile.

Analytics

You didn’t think we’d forget analytics, did you? AMP didn’t, either!

While there is a specific amp-analytics component, the specific analytics tool we’re using is embedded through a standard iframe. AMP is built to handle this, too. Using the documentation for amp-iframe, we were able to smoothly implement our analytics tracking… until we weren’t. More on that later on in the tricks and tips section of this post.

For the setup, you just need to include the required script as noted in the documentation. By this time, you’re an old pro having implemented AddThis and the Audio Player. You can include the script in the <head> like we saw in our previous examples, then include your amp-iframe with the necessary details in place:

View the code on Gist.

We included this snippet at the bottom of our /amp/footer.php file to ensure it was included on every post with a unique identifier (the post title) to meet the needs of the analytics tracker.

Tips and Tricks

amp-iframe

Earlier we talked about implementing amp-iframe into the site. This was a fairly painless process, but we did run into one speed bump along the way.

It turns out that when a post embeds a video or some other piece of content, which creates its own amp-iframe element, the AMP for WordPress plugin automatically includes the required amp-iframe script.

This created a problem for us on some posts but not all of them. Certain posts included video embeds in the content, and when this happened, our post would fail AMP validation. Why? Because, since we were already manually including the required amp-iframe script in our <head> and AMP for WordPress was requiring it again based on the existence of amp-iframe in the post content, the script was included twice and failing validation.

The solution came from one of AMP’s Head Developers, Mohammed Razzaq, on the AMP for WordPress plugin support forum.

To get around the issue, remove the manual call to the amp-iframe JavaScript in the <head>. Then, hook into the amp_post_template_data filter to check for the existence of the amp-iframe component script. If it hasn’t been loaded yet, tell AMP to load it. Otherwise, do nothing:

View the code on Gist.

Implementing this solved our duplicate script woes and helped all of our posts reach full AMP validation!

The /amp/ directory

This was mentioned earlier in the post when discussing the header and footer, but like many other plugins, AMP for WordPress makes it incredibly easy to modify default template parts.

While you can do this via hooks and filters, we prefer to use the directory method where you create a top-level /amp/ directory in your theme and modify the templates as you see fit. This helps keep everything compartmentalized in the /amp/ directory and keeps other theme files lean and trim.

To start modifying, simply copy the template you need from the AMP for WordPress /templates/ directory into your theme’s new /amp/ directory, and go wild. We wound up doing this for four template files: header.php, footer.php, meta-author.php, and single.php to make the necessary customizations for this project.

Yoast Integration

While validating the templates, we ran into a structured content error with the site logo. The structured data requirements are very strict and requires the logo to fit in a 60x600px rectangle and either be exactly 60px high (preferred) or exactly 600px wide. This led us on a wild goose chase.

At first, we swapped out our website logo in the WordPress Theme Customizer to match the 600x60px requirements and then tried to re-validate. When it failed, we scratched our heads a bit. We went through code bases for both the theme and the AMP for WordPress plugin and could not find any reason why this was happening. The AMP for WordPress plugin is supposed to pull in the logo used in the Theme Customizer.

Finally, we found a setting in Yoast, under Search Appearance, called Knowledge Graph and Schema.org. There’s an option to upload a logo, which ended up superseding the logo we used in the Theme Customizer. When we uploaded the 600x60px logo there, the structured content finally validated.

The Result

The AMP project for Microsoft Office 365 was deployed on August 13, 2019, and now we wait for Google, Bing, and Twitter to pick up the AMP versions of the page. Our clients were pleased with how quickly we were able to turn around gorgeous article templates, while ensuring their existing media worked and making sure they would continue to have accurate insight into key visitor metrics.

If you’re looking for a long-term partner to help you with your AMP strategy and delivery, WebDevStudios is your solution. Check out our other blog posts around AMP, and if you’re ready to chat, reach out via the Contact page.

The post WDS and Microsoft 365 Partner Together to Create a Custom AMP Experience appeared first on WebDevStudios.