Archive for the ‘Uncategorized’ Category

Static sites? Let’s double that!

Monday, March 14th, 2016

Now that I’ve spent a good deal of time learning about what’s hot in the front-end area, I can go back to my initial goal: renew this Website.. or maybe I can fool around some more? :) In this post, I’ll describe the idea that I’ve got in mind.

One thing that’s been bothering me for a while is the dependency that I currently have on WordPress, PHP and a MySQL database. Of course there are pros and cons to consider, but currently I’m inclined to ditch WordPress, PHP and MySQL in favor of a static site.

Static site generators like Hugo (one of the most popular options at the moment) let you edit your content using flat files (e.g., using Markdown) with a specific folder structure. Once your content is ready for publication, you have to use a CLI/build tool that takes your content (e.g., posts, pages, …) and mixes it with a template.

Once the build is completed, you can upload the output on your Web host; no need for a database, no need for a server-side language, no need for anything more than a good old Apache Web server (or any Web server flavor you like). Neat!

Now what I’m wondering is: can we go further? What if we could create doubly static static sites? :)

Here’s the gist of my idea:
First, we can edit/maintain the content in the same way as with Hugo: through a specific folder structure with flat files. Of course we can add any feature we’d like around that: front matter, variables & interpolation, content editor, … For all that a build/CLI should be useful.. more on that later.

Note that the content could be hosted on GitHub or a similar platform to make the editing/publishing workflow simpler/nicer.

So, we’ve got static content, cool. What else? Well now what if we added a modern client-side Web application able to directly load those flat files and render them nicely?

If we have that then we could upload the static content to any Web host and have that modern Web app load the content directly from the client’s Web browser. The flow would thus be:

  • go to https://www.dsebastien.net
  • receive the modern Web app files (HTML, CSS, JS)
  • the modern Web app initializes in my Web browser
  • the modern Web app fetches the static content (pages, posts, …)
  • the modern Web app renders the content

Ok, not bad but performance could be an issue! (let’s ignore security for a moment ok? :p).
To work around that, we could imagine loading multiple posts at once and caching them.
If we have a build/CLI could also pack everything together so that the Web app only needs to load a single file (let’s ignore the HTTP 1.1 vs HTTP 2.0 debate for now).

In addition, we could also apply the ‘offline-first’ idea: put pages/posts in local storage on first load; the benefit would be that the application could continue to serve the content offline (we could combine this with service workers).

The ideas above partially mitigate the performance issue, but first render would still take long and SEO would remain a major problem since search engines are not necessarily great with modern client-side Web apps (are they now?). To fix that, we could add server-side rendering (e.g., using Angular Universal).

Server-side rendering is indeed nice, but it requires a specific back-end (let’s assume node). Personally I consider this to be a step back from the initial vision above (i.e., need for a server-side language), but the user experience is more important. Note that since dedicated servers are still so pricey with OVH, it would be a good excuse to go for DigitalOcean.. :)

Another important issue to think about is that without a database, we don’t have any way to make queries for content (e.g., search a keyword in all posts, find the last n posts, …). Again, if we have a build/CLI, then it could help work around the issue; it could generate an index of the static content you throw at it.

The index could contain results for important queries, post order, … By loading/caching that index file, the client-side Web app could act more intelligently and provide advanced features such as those provided by WordPress and WordPress widgets (e.g., full text search, top n posts, last n posts, tag cloud, …).

Note that for search though, one alternative might be Google Search (or Duck Duck Go, whatever), depending on how well it can handle client-side Web apps :)

In addition, the build/CLI could also generate content hashes. Content hashes could be used to quickly detect which bits of the content are out of date or new and need to be synchronized locally.

There you have it, the gist of my next OSS project :)

I’ll stop this post here as it describes the high level idea and I’ll publish some additional posts to go more in depth over some of the concepts presented above.


Modern Web Development – Part one

Wednesday, February 17th, 2016

Since April last year, I’ve been plunging again in the world of Web development.. and what fun it has been! In this series of posts, I’m going to summarize the stuff I’ve done last year in order to hop back on the train and I’ll describe what I’ve learned along the way.

At the time, I published two blog posts, which were my way of condensing my vision for an important project at work aiming to modernize the way we create Web applications by going towards a client-side architecture combined with RESTful Web Services on the back-end.

When I started looking back at how the Web platform had evolved during the 2012-2015 period, the main things I had on my mind were:

  • mobile first & responsive web design
  • client side Web application architecture (which I personally consider to be the part of Web 3.0 — seriously, why not?)
  • the new specs that had reached broad support in modern Web browsers and were gaining a lot of traction
  • the offline first idea that these specs made more realistic

I wanted to learn more about AngularJSnode.jsnpm and sass but that was about it. I remember that at first, I had no precise idea yet about the build tool and the build steps that I wanted/needed… I hadn’t even heard about ES6 yet!

Since then, I’ve learned a ton about ES2015, TypeScript, module systems, module loaders, JS frameworks & the tooling around, front-end state management solutions, front-end build systems, project boilerplates, css style guides, quality assurance for front-end apps, unit & e2e testing libraries, … and the integration of it all…

The funny thing is that… I failed to deliver.

Initially, my personal goal was to create a responsive client-side Web app exploiting the RESTful API of my WordPress installation to replace my current theme, but I changed my mind along the way… So far, my site hasn’t changed one bit. I did improve some things though, but that was more around security than anything else.

So what made me change my mind and where did I spend my time?

At first, I was concentrated on the task at hand and I looked at how the HTML5 boilerplate had evolved as I knew that it was one of the best starting points around for creating modern Web apps. My idea was simple: use HTML5 boilerplate or InitializR to get ModernizR… and add some good old script tags… :p

I started with HTML5 boilerplate, but shortly after, I stumbled upon Web Starter Kit which was fresh out of Google’s oven, was based on HTML5 boilerplate and had some really cool features.

It came out of the box with a nice build which included support for JSCS (JS code style), JSHint (JS code quality), autoprefixing, BrowserSync (if you don’t know that one, DO check it out!), sass and ES6 (that was still the name at that point) with the help of Babel, …

 I really liked their setup and decided to use it as basis for my project; and that’s where my trajectory deviated :)

Given that I’m quite curious, I spent a while deconstructing Web Starter Kit’s build so that I could really understand what made it tick. That made me discover npm, gulp and the whole ecosystem of gulp plugins.

I really enjoyed doing so as it has helped me better grasp the necessary build steps for modern Web apps:

  • transpile code (ts->js, sass->css, …)
  • check quality
  • check style
  • create a production build (bundle, minify, mangle, …)
  • execute unit tests
  • execute end to end tests

At that moment, I was happy with the build as it stood so I continued to focus on developing my app. I took a good look at what ES6 was, what it meant for JavaScript, its ecosystem and how Babel helped (was it still called 6to5 then?). Learning about ES6 features took me a long while and I’m still far from done, but it was well worth it. ES2015 is such an huuuuuuuuuuuge step forward for the language.

I also took a glance at Angular 2 which was still in alpha state. It looked interesting but I believed that it would never be ready in time for our project at work (and it wasn’t). Still, I did spend a few days toying around with the alpha just to get to understand the basic principles.. and I must say that I really really loved what I saw!

That quick research spike also made me discover TypeScript.

Having a strong Java & OO background, TypeScript (TS) directly got me excited. I’m a strong believer in strong (heh) typing, and the fact that TS already supported many ES6 features that weren’t natively supported by Web browsers yet was very appealing to me.

Moreover, having dozens of Java developers in our development teams at work, TypeScript seemed really ideal for us as it supports many features and idioms that our developers are very familiar with (classes, interfaces, generics, strong typing, decorators, …).

If you want to learn more about TypeScript, I definitely recommend the Typescript Deep Dive.

At that point, tsconfig.json wasn’t there yet and the most evident choice to integrate the necessary build step was gulp, as advertised by Dan Walhin’s excellent blog post. If I had read more about npm I might have gone a completely different path (i.e., used npm scripts only).. ^^.

At that point, I had to deviate from what Web Starter Kit offered me in order to add build tasks for TypeScript, tslint, etc. Fiddling with the build made me realize that it was quite brittle, so I refactored it quite a lot and tried to improve things (e.g., separate the build tasks in different files, extract the configuration settings, ensure that it would not break the build on each error, etc). I remember that I wanted to contribute back to Web Starter Kit but realized too late that I had made too many changes at once for them to be able to integrate easily (silly me, bummer).

I went pretty far with actually as at some point, I was using TypeScript to output ES6 code that I then sent through Babel, just so that I could use async/await and other things that TypeScript wasn’t able to transpile to ES5… :)

The exercise helped me see how “immature” and “fragile” the whole JavaScript ecosystem was. What I mean by that is that there seems to be only moving parts and each of those parts don’t necessarily keep happy with each other. Not only do too few people really understand what semver actually means and respect it, but everything that shines bright gets replaced faster than the speed of light :)

As a technologist, I love the pace it imposes for the fun and innovation it brings to the table, but it’s also frustrating for many reasons and (should be) quite scary for enterprises (to some degree). People talk about JavaScript fatigue, which is quite a fun way to put it and I can certainly understand the idea now.

One example that I thought a lot about is the fact that each and every front-end project seems to have its own build chain and build configuration that lives within the project, in complete isolation and has to be maintained.

Of course each and every project has its specificities so there really can’t be ONE rigid & reusable solution to rule them all, but the idea of duplicating so much effort needlessly across a whole community of developers violates the DRY principle as much as anything ever could.

Just try and imagine how many people must have used some Yeoman generator to scaffold projects, which now all have separate builds with tasks that all do the same things but are all defined 20.000 times in a gazillion different ways using variable and unreliable dependency versions… :)

When you scaffold a project using a generator, you end up with a snapshot of the template and of the build provided by the generator at that point in time and then it’s up to you to keep your version up to date and to integrate all improvements and bug fixes, assuming you have time to follow that… you poor thing!

Being part of a core software development team at work, my focus is most often on finding reusable solutions to common problems, limiting effort duplication and what not and thus, the front-end universe’s situation seems quite sad in that regard.

Another point that struck me was how limited the main package management solution was. npm is nice and all, but not being able to define some parent/generic/reusable configuration (e.g., like parent pom files in Maven) is kind of surprising. Again, the DRY principle probably corresponds to DO Repeat Yourself in the frontend universe. I’m sure that front-end experts will tell me that you can work around all that in countless ways, but that’s exactly the issue: I shouldn’t have to invent my solution for a general issue people should be concerned about.

To conclude on a positive note though, I do believe that all the tooling DOES bring added value because it makes it possible to manage dependencies correctly, define build steps which execute tests, generate coverage reports (e.g., using Istanbul), generate production builds etc.

This piece is getting a bit long, so I’ll continue my little story in part two!

 


Installing node and npm on Ubutun 15+

Friday, December 18th, 2015

In case you would want to use one of my recent projects (e.g., ModernWebDevGenerator or ModernWebDevBuild) on Ubuntu (or any other OS btw), you’ll need nodejs and npm.

If you’re using ubuntu and go the usual way (i.e., sudo apt-get install…) then you’re in for a bad surprise; you’ll get node 0.1x.y and also a very old npm release.

Actually, the best way to get nodejs and npm on Ubuntu is to use the node version manager (nvm).

nvm can be used to install and keep multiple versions of node in parallel, which is very useful, especially when you have to test your node-based project on multiple versions.

The installation is very straightforward:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

After that, close and reopen your terminal. You now have ‘nvm’ at your disposal.

nvm install 4.0
nvm install 5.0
nvm use 5.0

Just with the above, you get two versions of node (along with npm) installed. As you can see, you can use ‘nvm use’ to change the active version easily.

That’s it!


Quelques conseils pour vos achats en ligne

Friday, August 28th, 2015

Je ne blogue pas souvent en français, mais une fois n’est pas coutume :)

Depuis quelques années, comme pas mal de gens, j’achète de plus en plus de choses sur le Web. Pas tellement que je sois contre les commerces locaux, mais simplement car la différence de prix est souvent très importante.

J’achète principalement sur Amazon.fr car c’est souvent là que je trouve les meilleurs prix pour ce dont j’ai besoin. Si vous comptez acheter en ligne, il y a quelques bons tuyaux à connaître.

Par exemple, si vous appréciez Amazon, il faut savoir qu’ils ont plusieurs sites en Europe comme Amazon.de, Amazon.es, Amazon.it, Amazon.co.uk, … et les prix des articles sont souvent différents (parfois même de manière substantielle) entre ceux-ci! Donc mon premier conseil c’est de vérifier avant d’acheter que le produit n’est pas moins cher sur l’un des autres sites d’Amazon. Il n’y a pas de frais supplémentaires en commandant là bas.

Notez que si la barrière de la langue vous empêche d’utiliser un des sites étrangers d’Amazon, Google Chrome peut traduire les pages automatiquement pour vous (c’est approximatif mais largement suffisant pour pouvoir retrouver son chemin).

Une autre chose à laquelle faire attention sur Amazon, c’est que c’est une plateforme de vente en ligne: la société Amazon permet à d’autres sociétés de vendre leurs produits sur leur site (un peu comme sur eBay). Ca a pour conséquence que les prix peuvent varier beaucoup d’un vendeur à un autre pour un seul et même produit. Quand c’est Amazon qui vend & expédie, c’est en général le moins cher. Sur la fiche d’un produit on peut voir les différentes offres pour un produit donné en cliquant sur le lien “xx neufs”:

Neufs-01

Ce qui vous amène à la page suivante où vous pouvez voir les différentes offres et ajouter celle qui vous intéresse dans le panier:

Neufs-02

Parfois, l’offre affichée au départ sur Amazon est celle d’un tiers car Amazon n’a plus l’objet en stock; dans ces cas là il vaut souvent mieux attendre qu’Amazon vende à nouveau le produit pour bénéficier d’un meilleur prix et éviter les frais de livraison car, en général, quand c’est Amazon qui vend & expédie, il n’y a pas de frais de port, ce qui est rarement le cas avec les autres vendeurs; mais bon tout dépend du prix :)

Il serait trop facile de dire qu’Amazon est toujours le moins cher; c’est souvent le cas, mais pas toujours et parfois il y a même des différences de prix importantes pour certains produits et à certaines périodes.

De plus les prix pour un produit donné varient parfois énormément dans le temps (sur de courtes périodes). Il existe une extension très pratique pour Google Chrome & Mozilla Firefox appelée Camelizer, qui permet de voir sur un graphique l’évolution des prix pour un produit donné; c’est très utile pour voir si le prix actuel est intéressant ou non :)

Dans tous les cas, il ne faut pas hésiter à faire le tour des commerces en ligne pour trouver le prix le plus intéressant, ça tombe sous le sens, mais le tout est encore de connaître les bonnes adresses…

Une autre extension indispensable pour un shopping en ligne efficace c’est Shoptimate qui peut vous mâcher le travail; si vous êtes sur la fiche d’un produit d’un site géré par l’extension, celle-ci cherchera automatiquement le prix de cet article sur les autres sites gérés qui le vendent. De plus elle vous indiquera directement s’il existe une meilleure offre ailleurs:

Shoptimate-01

Shoptimate-02

Dans l’exemple ci-dessus, le même produit est actuellement 100€ moins cher sur Amazon.de, comparé à Amazon.fr, ce qui est assez.. énorme ;-)

Toujours dans cet exemple, le site designere_fr a l’air d’être encore moins cher, mais là ne connaissant pas le site j’ai préféré rester sur l’offre d’Amazon. J’imagine que ce site est digne de confiance puisque Shoptimate le propose, mais comme on dit, prudence est mère de sûreté ^^.

En parlant de sûreté, je vous conseille d’éviter les sites peu connus pour commander en ligne. Si certains vendeurs sur eBay vendent des produits neufs, ils ne sont pas nécessairement tous fiables; il en va de même pour certains sites de e-commerce… Méfiez-vous aussi des résultats de recherches Google quand vous cherchez un produit, c’est rempli de sites à éviter.

Aussi, quand j’achète sur un autre site qu’Amazon, en général j’essaie d’utiliser Paypal si possible; ça me permet d’éviter d’envoyer les informations de ma carte de crédit à tout va. Sur Paypal on l’enregistre une seule fois et les informations de la carte ne sont jamais dévoilées au site où l’on fait ses achats. En plus de ça il est même possible de faire des achats en ligne sans carte de crédit grâce à Paypal, le seul bémol étant que tous les sites de e-commerce ne supportent pas Paypal.

Je pourrais écrire un bon paquet d’articles au niveau de la sécurité informatique, mais ça sera pour une prochaine fois ^^.

Personnellement, ma liste de boutiques en ligne est assez restreinte:

  • Amazon: un peu de tout & souvent les meilleurs prix
  • bol.com: un peu de tout & parfois des prix très très bas sur certains produits (e.g., 500€ de différence sur le prix de mes enceintes!!)
  • Philibert: Jeux de société (meilleurs prix)
  • LDLC: matériel informatique & smartphones & hi-fi (très souvent plus cher)
  • Rue du Commerce: matériel informatique, smartphones & hi-fi (souvent plus cher)
  • Rue Montgallet: idem
  • Photo Erhardt: matériel photo (Allemagne)
  • Sarenza: vêtements & chaussures
  • ZooPlus: nourriture pour animaux
  • eBay: composants électroniques seulement ou trucs introuvables à l’état neuf
  • Seeed Studio: composants électroniques
  • f-mobile: Smartphones & co (parfois moins cher)

Si vous connaissez d’autres sites ou avez des tuyaux à partager, n’hésitez pas =)


Additional Windows 10 Configuration Tips

Wednesday, August 26th, 2015

I’ve recently blogged about my Windows 10 configuration. In this post I’ll list some additional things that I could disable/tweak/configure using a new application called W10Privacy.

If you haven’t read the first part, then I recommend you to do so first as it has some interesting tips in store for you :)

First, you need to download the application here. Once downloaded, you should uncompress it and run it with administrator privileges. To have access to the list of System applications, you can also download PSExec and place the executable in the folder where W10Privacy is located.

Here’s what I’ve configured using that tool (knowing that my configuration already covers many of the settings it provides):

  • Privacy
    • Turn off SmartScreen Filter to check web content (URLs) that Windows Store apps use
    • Disable sending of information on writing behavior
    • Disable location for this device
    • Disable asking for Feedback
    • Disable the AutoLogger
    • Block Microsoft server, to which telemetry data will be sent (in the hope that this setting has additional domain names to block)
  • Search
    • Do not search online and do not include web results
    • Disable the retrieve of Bing search suggestions and web results (applies only to the actual user)
  • Network
    • Do not connect to proposed public hotspots
    • Do not connect to wireless networks shared by my contacts
    • Do not share my networks with my Outlook.com contacts
    • Do not share my networks with my Skype contacts (w t f)
    • Do not share my networks with my Facebook contacts (w t f)
  •  Explorer
    • Remove search option on the taskbar (searching by Windows key + Q is still possible)
    • File Explorer opens at “This PC” instead of “Quick Access”
    • Show a desktop icon for “Computer”
    • Show extensions for known file types in File Explorer
    • Show hidden files, folders or drives in File Explorer
    • Show protected operating system files in File Explorer
    • Turn off Windows SmartScreen
    • Remove “- Shortcut” suffix from future shortcut file names (w00t!)
  • Services
    • Disable Windows Diagnostics Tracking Service – reboot required!
  • Edge
    • Send “Do Not Track” requests
    • Do not help me protect me from malicious sites and downloads with SmartScreen Filter
  • OneDrive
    • Do not start OneDrive automatically when I sign in to Windows
    • Remove OneDrive from the File Explorer sidebar in Windows 10
  • Tasks
    • Disable the task “Microsoft Compatibility Appraiser”
    • Disable the task “ProgramDataUpdater”
    • Disable the task “Proxy”
    • Disable the task “Consolidator”
    • Disable the task “KernerlCeip Task”
    • Disable the task “UsbCeip”
    • Disable the task “Microsoft-Windows-DiskDiagnosticDataCollector”
    • Disable the task “DmClient”
    • Disable the task “FamilySafetyMonitor”
    • Disable the task “FamilySafetyRefresh”
    • Disable the task “SmartScreenSpecific”
  • Tweaks
    • Disable automatic restart, the user is instead asked to plan a restart
    • Disable updates for other Microsoft products on Windows Update (e.g., office, etc)
    • Updates and apps will no longer be distributed to other clients (disables the lower switch) (i.e., my bandwidth is my own)
    • Distribute updates and apps only on the local network (disables upper switch)
  • Background-Apps
    • Disable background functionality for … (ALL THE DAMN APPS!)
  • User-Apps
    • Uninstall the following:
      • Money
      • News
      • Sports
      • Weather
      • First Steps
      • Get Office
      • OneNote
      • Skype download
      • Groove-Musik
      • Movies and TV shows
      • Maps
      • companion phone

As you can see, W10Privacy has quite a lot of nice features. I know that disabling the privacy related features will not protect my privacy much more than it currently is (i.e., it ain’t), but it can’t do harm either and at worst it’ll just save me some CPU cycles.. ;-)


Google Translate bash function (Windows)

Friday, August 7th, 2015

I’ve noticed that since I switched to Windows 10, my Google Translate bash functions were broken. I suppose that something has changed in the way that explorer.exe interprets URLs (?). Anyway, here’s a fixed version, simply using a different way to construct the URL ;-)

I use the function below to translate from english to french:

enfr(){ (explorer "https://translate.google.com/?sl=en&tl=fr&text=$*" )& }

The only things to know to understand the above:

  • sl = source language
  • tl = translation language
  • text = what to translate :)
  • $* = arguments passed to the function (i.e., what you want translated)
  • calling this function will open a new tab in your default Web browser

I know that it could be improved because it needs proper escaping (e.g., running frnl c’est sympa will break it because of the ‘), but it’s just enough for what I need.

One could create a more intelligent function supporting multiple languages (please do :p) but I don’t need one =)


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) =)


Farewell Google Reader

Thursday, June 20th, 2013

Oh dear GReader, you’ll be missed!

greader trends