Posts Tagged ‘extensions’

Chrome Extensions that rock

Friday, August 14th, 2015

TL;DR: I can’t live without browser extensions, here are my favourite ones

Most if not all power users rely on the presence of a number of browser extensions to satisfy their specific needs/lunacies. The fact that Internet Explorer never provided an easy/accessible way to develop & deploy extensions is one of the many reasons why it was never my default Web browser (apart from when Microsoft forced my hand with OS upgrades…).

Fortunately for us, modern Web browsers (apart from MS Edge) are very customizable and major ones such as Google Chrome & Firefox have huge catalogs of extensions. The difficulty that remains for us is to find the truly great extensions among the huge number of crappy and plain evil ones ;-)

I’ve switched from Firefox to Chrome at the time Chrome came out and was blazingly fast and I haven’t taken a look back ever since (even if I know I probably should), hence I’ll only list the Google Chrome extensions that I use, although there are counterparts for most of the ones I’m about to mention.

So here’s my current list, in no particular order:

  • uBlock Origin: efficient AD blocker. If you need but one extension then it must be this one (light CPU/memory usage)
  • Personal Blocklist (by Google): if you want to block domains/hosts from appearing in your Google search results (e.g., shopping/comparison crap sites when you search for information about products)
  • Clickable Links: doesn’t it make you mad when websites display URLs without links? This extension fixes that automatically
  • ScriptSafe: if you want to stay in charge of what Web browser does
  • View Thru: if you’re concerned about what stands behind shortened URLs (e.g., bit.ly & the like)
  • Ghostery: if you care even a little about your privacy then this one should get your attention
  • Shoptimate: automatic price comparison: awesome extension to help you know if you’re getting the best price you can
  • The Camelizer: see historical pricing data and even get mails when prices drop
  • Page Eraser: sometimes there are things on Web pages that aren’t necessarily ads but that we just don’t care about/don’t wanna see. This extension will help you make them disappear.. for good :). I’ve developed a similar extension a while ago but I don’t maintain it anymore :p
  • Link2Clip: Copy all links in the copied text to your clipboard. Very useful when you don’t want to manually extract links from web pages
  • LinkClump: alternative that supports fast bookmarking
  • Docomplete: this extension enables autocomplete for password fields on websites that intentionally disable it (use this only if you know what that means.. ^^)
  • Lazarus: Form Recovery: automatically save everything you type in forms so that you can easily recover from timeouts, crashes & network errors
  • BehindTheOverlay: easily close overlays on any websites
  • iMacros for Chrome: automate tasks by recording/replaying macros
  • Gestures for Google Chrome: mouse gestures rock, just try it out
  • Desprotetor de Links: sometimes websites send you through link protectors & whatnot with tons of boring ads. If you’re like me then you’ll like this extension because it’ll help you go right through to the content you’re after
  • Fast Bookmark Scanner: scan your bookmarks & identify duplicate links, folders & empty ones
  • SuperSorter: alternative extension to fix your bookmarks
  • SmoothScroll: smooooooooooth scrolling is something you need even if you don’t know it yet
  • I’m a Gentleman: one click to save images
  • Neater Bookmarks: neat bookmarks tree popup with easy filtering
  • Session Buddy: save/load entire browsing sessions; useful for context switches
  • Session Manager: alternative for session management
  • Turn Off the Lights: fade the entire web page to dark in order to better appreciate videos
  • Capture Webpage Screenshot – FireShot: quickly capture a screenshot of an entire web page
  • Random Bookmark: this may sound dumb but if you have a huge backlog of bookmarks to check then this one can help :)
  • Scroll To Top: does what it says
  • Shut Up: lets you choose if comment sections should be visible or not
  • Live HTTP Headers: because it’s always useful to know what your browser is up to
  • Page Monitor: for times when you need to know as soon as a page has changed without killing your F5 key (e.g., that concert reservation page that’s about to go live)
  • Pastebin.com: put stuff on Pastebin.com easily
  • Enhanced Steam: dramatically improve the Steam website (highlight games you own, games on your wishlist, calculate bundle discounts based on the games you own, etc)
  • Play to Kodi: if you’re using XBMC errr Kodi then you need this extension to easily send content to your server
  • Google Cast: if you have a Google Chromecast, then you just need this
  • Language Immersion for Chrome: cool extension to immerse yourself in a new language. This extension switches certain words/phrases from English into a language of your choice and you can switch back and forth between the original & translated versions
  • Reddit Enhancement Suite: nice improvements for browsing Reddit
  • .torrent to Transmission: easily add torrents to Transmission (works with distant hosts as well; useful since Transmission runs on my NAS)
  • Better Usenet: if you’re a Usenet user then you’ll love this one; it adds a ton of improvements to Usenet related websites (e.g., Binnewz, Binsearch, NZBIndex, …)
  • Binnews Enhancer: another Usenet-specific extension that improves the Binnewz website
  • CouchPotato: if you use CouchPotato then you’ll like this one

Bonus: DO IT! (just in case you need some motivation

Voilà! Apart from a bunch of software development related ones, the extensions above are the ones I can’t live without!

Which ones do YOU rely on and why?


Sublime Text plugins that I use

Monday, June 1st, 2015

TL;DR: I’ve started using Sublime Text as my default text editor, it is indeed awesome and I’ve compiled a list of the plugins that I find useful.

For a very long time, my text editor of choice has remained Notepad++ (NPP for friends). NPP is still great (it’s free and open source, it has tabs, extensions, syntax highlighting and some other goodies), but it’s not AWESOME.

I’ve been hearing about Sublime Text for a while now but never really took the time to try it out seriously. Moreover, the last time I checked I’ve noticed that it wasn’t free so I didn’t get any further. Although I do understand the reasons why some developers choose the lucrative path, I’m in general more inclined to use free and preferably open source software (why pay when you can get something just as good for free?).

So Sublime Text’s website URL was hidden somewhere in some dark corner of my bookmarks and was set to remain in there forever, until a Web designer at work gave me a quick demo which led me to reconsider it :)

The first word that now comes to my mind when thinking about Sublime Text is “polished”: the UI is really beautiful and that alone makes it very pleasing to use. Sublime has really neat text selection/edition features (e.g., column and multi-selection editing, auto-completion, …), support for many languages (syntax highlighting), uber fast search and navigation, tabs, macros, etc. I’m not going to list it all here as I’m pretty sure many people took time to do so already.

But even though the out-of-the-box feature-list is quite nice, it is far from enough to make me consider it worthy of replacing NPP which I’m very used to. Really getting to know an editor takes time and I only have that much available.

What really made me change my mind is the ecosystem of Sublime. Over time, as the community has grown, many developers have spent time to develop a ton of extensions, themes and color schemes for it. The package manager for Sublime is called Package Control and contains almost 3K packages, hence at least 100 are probably worth the try :)

Suffice to say, knowing this, I needed to go through the catalog and try out the most popular extensions. In doing so, I’ve realized that Sublime + extensions > NPP + extensions, which is why Sublime is now my default text editor. It’ll take me a few weeks/months to really take advantage of it, but I already enjoy it a lot.

I’m not going to explain here how to install the package manager or install packages; for that you should rather check out the following video.

Without further ado, here’s the list of extensions that I’m currently using along with a small description to give you an idea of why I consider each useful/relevant for productivity (assuming that you’re into software development that is ^^). I’ll create new posts whenever I discover new ones that are of interest.

General:

  • NPM: Easily interact with the Node Package Manager (NPM) from Sublime (e.g., install NPM packages, add project dependencies, …)
  • Gulp: Quickly execute Gulp commands directly from Sublime (I’ll talk about Gulp in a future post)
  • SublimeCodeIntel: Code intelligence and smart autocomplete engine. Supports many languages: JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP (phew ^^)
  • BracketHighlighter: Highlight brackets in the gutter (bar left of the file contents); very useful to quickly see where any given code block ends
  • Git: Execute git commands directly from Sublime through easy-to-use contextual menus
  • Git Gutter: Show an icon in the gutter indicating whether a line has been inserted/modified or deleted (checked against HEAD by default)
  • SidebarGit: Add Git commands in the sidebar context menu
  • ApplySyntax: Detect file types and apply the correct syntax highlighting automatically
  • Alignment: Easily align multiple selections and multi-line selections
  • AutoFileName: Automatically complete filenames; very useful when referring to project files (e.g., src for an image tag, file name for a CSS import, …)
  • TrailingSpaces: Easily see/remove trailing whitespace (if you’re crazy like me about small details). Check out the options here
  • SublimeLinter: A plugin that provides a framework for linting code in Sublime. Basically this one is a pre-req for some neat plugins (see below). Check out the docs for more information
  • FileDiffs: Show diff between current file or selection(s) in the current file, and clipboard, another file or unsaved changes
  • SidebarEnhancements: Better sidebar context menu
  • ExpandTabsOnSave: Automatically convert tabs to space (or the other way around, depending on your indentation settings)
  • Open Folder: Add an ‘Open folder’ option to the sidebar context menu
  • Pretty JSON: Prettify JSON, validate JSON, etc
  • Indent XML: Fix XML and JSON files indentation
  • JSONLint: JSON linter; checks JSON files for errors and display them in context
  • EditorConfig: Useful to respect the editorconfig file (.editorconfig in the project) which defines a common configuration for text editors
  • Dockerfile Syntax Highlighting: Add syntax highlighting for Dockerfiles

Web development

  • Emmet: Add zen-coding support to Sublime. (e.g., write div*2>span.cool*5 then hit TAB). Emmet is awesome (note that plugins exist for various editors, not only Sublime). Emmet allows me to quickly generate a ton of HTML code without wasting time
  • TypeScript: Add syntax highlighting and autocompletion for TypeScript code
  • JSCS: Check JS code style using node-jscs. To be able to use this you first need to install NodeJS, NPM then JSCS (npm install -g jscs). Check this link out for the complete list of rules that you can configure. Here’s an example from my latest project
  • JSCS-Formatter: Format JS code based on the JS code style that you’ve configured for your project (i.e., through the .jscsrc file) which is pretty neat
  • SublimeLinter-jshint: JSHint linter for SublimeLinter. Shows you what’s wrong with your JS code (requires SublimeLinter
  • SublimeLinter-csslint: CSS linter for SublimeLinter. Shows you what’s wrong with your CSS code (requires SublimeLinter)
  • SublimeLinter-annotations: Make TODOs FIXMEs etc stand out (requires SublimeLinter)
  • Sass: Sass support for Sublime. Adds syntax highlighting and tab/code completion for Sass and SCSS files. It also has Zen Coding shortcuts for many CSS properties
  • SCSS snippets: Additional SCSS snippets (use tab for autocompletion)
  • CSS3: Add CSS3 support. This plugin includes draft specs and provides autocompletion for each and every CSS3 property. It also highlights bad/old CSS
  • Color Highlighter: Highlight hexadecimal colorcodes with their real color. Here’s a small tip; in the plugin configuration (ColorHighlighter.sublime-settings), it’s possible to enable permanent color highlighting, which I find particularly convenient: { “ha_style”: “filled” }
  • Color Picker: What the name says ;-)
  • Autoprefixer: Add CSS vendor prefixes. This plugin is useful for small prototypes but is otherwise better done through a build process (e.g., using Gulp)
  • HTML5: Snippets bundle for HTML5. Useful to add HTML5 tags/attributes (e.g., type <time then hit TAB)
  • JavaScript Snippets: JavaScript snippets: useful to quickly write JS code
  • AngularJS: AngularJS code completion, code navigation, snippets
  • jQuery: jQuery syntax highlighting and autocompletion (snippets)
  • DocBlockr: Add support for easily writing API docs

Visual candies

  • Seti_UI: Awesome theme with custom icons for file types
  • Schemr: Color scheme selector. Makes it easy to switch color schemes
  • Themr: UI theme selector. Makes it easy to switch themes
  • Dayle Rees colour schemes: A ton of color schemes (.. that I’ll probably never use now that I have Seti_UI :p)

As I’ve explained in previous posts, I’m now busy with the creation of a new version of this website using more modern technologies.

With my current set of Sublime Text plugins, I now almost have a full-featured Web-development-oriented IDE at my disposal. For my current/specific development needs, Jetbrain’s WebStorm (commercial IDE) is actually a better alternative (it supports many of what the plugins above bring and has its own plugin repository) but it’s overkill to use it as my all-around text editor and my wife probably won’t appreciate the 50$/y license cost (even though very reasonable) :)

For casual text editing, quick prototyping etc, Sublime Text wins hands down given how fast it starts and how reactive it is overall.

Note that there is another interesting editor called Atom. Atom has been developed by GitHub and is free and open source. Its engine is based on Web technologies (I assume WebKit, Chromium or the like) which is great for hackability and it is gaining a lot of momentum (it has already >2K plugins). I think that it’s still a bit young so I’ll check back in a year or two.. but don’t take my word for it. Try it out and don’t hesitate to tell me if you think it’s actually better than Sublime (and why) =)