14 ms·

New Sublime Package Control Site

132 points by jfraser 13y ago

avolcano 13y ago
Really impressed by the progress bar built into the site - I don't know any sites besides YouTube that are doing that! For anyone else wondering, it looks like the app is powered by Backbone, D3, and Handlebars on the front-end.
- wbond 13y ago
  Thanks! I enjoyed playing around with a bunch of front end stuff on the site. I wanted to have a very fluid experience, so in addition to using Backbone with pushState and doing partial page renders, I felt the need to provide some sort of loading indicator. It uses CSS transitions combined with AJAX ready states to animate the loading, and the visuals were modeled after the Chrome loading bar from Android. I've also got some other subtle touches like when you go from one of the main site pages to a page about a package, I fade out the Package Control logo so it does not compete with the package name. I'll be posting the website up on GitHub in the next day or two. On the server side it is Bottle.py running on Python 3.3 and using pybars for templating. I used coffeescript with Backbone, D3 and Handlebars as you mentioned, although I did not use the model or collections parts of Backbone. I constructed the beginning of a lightweight framework that feel somewhat declarative in the frontend router so that adding new pages doesn't require any real setup. You write the model code in python to pull data out of the database, then write a handlebars template to display it and then throw in some JS to add interactive elements client-side. Since I use pybars on the server side and handlebars on the client, I can pre-render the initial page view and then let the client render further screens using just one set of templates. The only downside of using pybars and handlebars is duplicating the helpers. The other part of the site I am pretty happy with is the search. I use postgres as the database, so I started with the full text searching, but then added some custom functions and triggers to nicely split and weight different parts of the package info. One implementation detail that I think ended up working out decently was weighting results with shorter names higher. This was based on the idea that shorter names mean a larger percentage of the name is a match to the search terms.
  - shubhamjain 13y ago
    Pardon my ignorance, but is'nt webpage preloading + rendering a HTML5 specific feature? [1] [1]: http://www.igvita.com/2011/06/25/html5-visibility-api-page-pre-rendering/ http://www.igvita.com/2011/06/25/html5-visibility-api-page-p...
    - wbond 13y ago
      The pre-rendering I am referring to is the contrast between server and client side page rendering. On my site with the first page load the server sends you a full HTML page so you don't have to wait for the JS to load, then the JSON to be fetched and then the HTML to render. However, on all further navigation (if you are using anything but IE9 or less) I just request the JSON data from the server and I use handlebars via JS to render each page.
polarix 13y ago
I'm not sure what it is, but something feels very wrong to me about sublime package control. It might be the instructions for submitting new packages. It might be the difficulty of installing a bunch of packages at once.
- JungleGymSam 13y ago
  It strikes me as harsh to describe those things as "very wrong". Maybe it's just me, but for me, things that are "very wrong" are things like inequality, unconstitutional NSA spying, and watermelons with seeds. You know? Truly important stuff. edit: Is my tongue-in-cheek opinion really that bad? Am I, too, "very wrong"?
- wbond 13y ago
  I'm more than happy to discuss these things and work with anyone interested on improving them.
- teamonkey 13y ago
  For me it's the install method. I don't like the 'copy this code into your console' approach; all it takes is a subtly-hacked server and someone can redirect that URL request or cause other mischief. I just don't understand why Package Control isn't part of the standard Sublime Text 3 package by now. Do any Sublime users not use Package Control?
  - superchink 13y ago
    He also describes how to install it manually, so you can do that if you're not comfortable with the other method. https://sublime.wbond.net/installation#Manual https://sublime.wbond.net/installation#Manual
  - HCIdivision17 13y ago
    This is my feeling as well. The console shenanigans feel odd to me simply because it feels like it should already be there. There is a coolness to it, though, since it clearly demonstrates how effectively the interface can be modded from just a "simple" command. No doubt there are perfectly reasonable business explanations for why Sublime doesn't ship with it, but I wouldn't consider upgrading from 2 until 3 was supported. Anecdote on why the console code is bad and good: by coincidence this afternoon I decided to try ST3, and before using it spent about an hour trying to get Package Control working via the git repo route [1] (Sublime was already inside a local repo, so I had to RTFM git submodule stuff to appease the git_binary error); that went... poorly. I [ab]use Git's functionality, but don't grok it's inner workings well enough to feel like I can use submodules without contaminating the super repo, and eventually gave up when I accidentally came across the page that has the new command [2]. Bam it's working without trouble (after modifying it for the corporate proxy). Like magic it just worked, which was awesome, but silly that something so useful would have any barrier to entry at all. TL;DR: Package Control is an essential element of the joy of Sublime Text, so it's a little mystifying why it's not just built in. [1] I can't find the page at the moment. Hopefully I haven't simply hallucinated it somehow. [2] https://sublime.wbond.net/installation https://sublime.wbond.net/installation
laurent123456 13y ago
So far I've been managing my packages in a GitHub repository and that works well too. Since I keep switching between Mac, Linux and Windows it also allows me to easily share the profile with each installation.
- wbond 13y ago
  If you just sync your Packages/User/ folder between machines, Package Control will automatically install the correct versions of each package for each OS. Unfortunately I've found the "sync everything" process that you've outlined leads to issues where users end up installing the OS X version of a package on Windows and then wonder why it doesn't work properly.
  - manojlds 13y ago
    I was using the sync everything approach as well and it was painful. I did not know about the package settings file. Should be a great timesaver.
mfjordvald 13y ago
I wonder if this one works from within China. I always have to go on a full VPN rather than just browser VPN to get Sublime to talk to the package control site.
tednaleid 13y ago
Very nice! I love seeing the download stats graph showing the last couple months of downloads with OS stats and embedded github README instructions. (ex: https://sublime.wbond.net/packages/EasyMotion https://sublime.wbond.net/packages/EasyMotion (disclaimer: my plugin))
- fphilipe 13y ago
  A feedback on that GIF: It's way to fast to understand what's going on. Even after looking at it for several cycles I don't get it. I suggest you slow down the playback :)
  - ZoF 13y ago
    You press the shortcut for it, type the character you want to jump to, it highlights every instance of that character and shows you a unique shortcut key for each one, you then press that key to jump to your desired character. I agree though, that gif is far too fast.
    - tednaleid 13y ago
      I agree with both of you that the playback is too fast. I tried to get it slower a number of times, but the compression phase seems to take out some of the pauses... I'll take another look to see if there's anything that I can do with the gif creation process I have. If anyone has suggestions for gif recorders that give you control at this level, I'd love to know about it.
      - tednaleid 13y ago
        I switched methods and used GIFBrewery and was able to generate a better gif (I think). I'd be interested to hear if this one is easier to understand. Thanks!
        fphilipe 13y ago
        I used GIFBrewery a couple times before and it works great [1] [2] [3]. It is easier to understand now, but I think you should stay on the last part a bit longer before looping it to make it clear that the animation finished. [1] https://github.com/fphilipe/PHFComposeBarView https://github.com/fphilipe/PHFComposeBarView [2] https://github.com/fphilipe/PHFArrayComparator https://github.com/fphilipe/PHFArrayComparator [3] https://github.com/fphilipe/PHFRefreshControl https://github.com/fphilipe/PHFRefreshControl
theone 13y ago
I really liked the changes, especially the loading indicator. On the side note, I really feel that there should be some sort of "package file" on each sublime installation. Something like a bower.json or package.json. It'll help us to sync / move settings easily. Moreover if it is coupled with a simple command to install all packages in that file, it'll be even better.
- wbond 13y ago
  The Package/User/Package Control.sublime-settings file may be what you are looking for. It tracks your settings, but also your installed packages. If you sync that to another machine that has Package Control installed, PC will install any missing packages the next time Sublime Text starts.
grobie 13y ago
Please don't use different label names for the same information. Having both "2" as well as "ST2" in different context leads to confusion.
- wbond 13y ago
  That was done because the labels are shown in different contexts. When there is a very small amount of space to show information, I use 2 if it is ST2 only, 3 if it is ST3 only, or nothing if it is compatible with both. However, when there is more room in the design, I use ST2, ST3 and ST2/3. Additionally, I made pretty liberal use of the title attribute on the site. Most things that are not obvious can be hovered for more information.
fphilipe 13y ago
Interesting to note that, according to the stats, most Sublime users that installed Git are on OS X while most users that installed PHP are on Windows. Overall it seems that the Windows user base is the largest.
baby 13y ago
But still no Package Control for ST3... Seems like I'll never make the switch.
- buro9 13y ago
  > But still no Package Control for ST3... Seems like I'll never make the switch https://sublime.wbond.net/installation https://sublime.wbond.net/installation ST3 is the default visible tab for the installation instructions. Many of us have been using ST3 with package control just fine for a while. I really only use it for GoSublime, and it works perfectly on ST3.
  - baby 13y ago
    oh he released it then! I've been watching it pretty closely and you had to go through git and more before to set it up (which I didn't manage to do).
digitalmaster 13y ago
As a front end engineer -- this makes me happy!
Achshar 13y ago
I want to use SFTP with st3 but the package installer won't install without git. I don't have git. Does anyone know how can I get package control working?
- ne0phyte 13y ago
  Install GIT. Otherwise stick to downloading repos manually as zip, unpacking them and moving them manually.
  - Achshar 13y ago
    I am willing to do that but I can'f find any instructions to where to get the repo from and where to put it.
- coldtea 13y ago
  It's a requirement. Install it and be done with it.
- wbond 13y ago
  That was while Package Control 2.0 was in alpha. It is no longer in alpha and no longer requires using Git to install.
  - Achshar 13y ago
    I run the code, and it downloads the Package Control.sublime-package file alright. But the sublime won't recognize package control even when I restart it. ctrl + shift + p won't give package install or any other command.
    - wbond 13y ago
      I recommend pasting the Sublime Text console output into a new issue at https://github.com/wbond/sublime_package_control/issues https://github.com/wbond/sublime_package_control/issues.
danielmagnusson 13y ago
Nice looks! I'm having troubles finding how to set a package st3 compatible? Found some info on github, but not much documentation, https://github.com/wbond/sublime_package_control/issues/291 https://github.com/wbond/sublime_package_control/issues/291
Scaevolus 13y ago
A few things: If you can't secure it by downloading over SSL, couldn't you add a hash verification to the installation steps? Having homepage & issues listed as 'github.com' for most repos isn't very helpful-- maybe show more of the URL? Thanks for all your hard work, Package Control is a joy to use!
- wbond 13y ago
  That is an interesting idea about the hash verification of the download, I may spend some time playing around with that. I could probably even do a combination of hash and size verification to make a hash collision harder. The reason the downloads are truncated to domain is because the URLs tend to be far too long to display in the UI. If you mouse over the domain, you'll see a title attribute with the full URL. This is the same for many elements on the site. Icons, abbreviations and numbers with suffixes all have a title attribute to describe the item in more detail.
  - dbpatterson 13y ago
    If you use any decent known hashing algorithm, the probability of collision is astronomically small.
Jormundir 13y ago
The stats page says ~1.8 million users, does this mean the sublime text creator made maybe $30-$40 million in sales?
- Scaevolus 13y ago
  Sublime Text is nagware (it has "Unregistered" in the titlebar, and reminds you it's unregistered sometimes when you save)-- I'd estimate the vast majority (95%?) of its users never pay.

132 points by jfraser 13y ago

Really impressed by the progress bar built into the site - I don't know any sites besides YouTube that are doing that! For anyone else wondering, it looks like the app is powered by Backbone, D3, and Handlebars on the front-end.

wbond 13y ago
Thanks! I enjoyed playing around with a bunch of front end stuff on the site. I wanted to have a very fluid experience, so in addition to using Backbone with pushState and doing partial page renders, I felt the need to provide some sort of loading indicator. It uses CSS transitions combined with AJAX ready states to animate the loading, and the visuals were modeled after the Chrome loading bar from Android. I've also got some other subtle touches like when you go from one of the main site pages to a page about a package, I fade out the Package Control logo so it does not compete with the package name. I'll be posting the website up on GitHub in the next day or two. On the server side it is Bottle.py running on Python 3.3 and using pybars for templating. I used coffeescript with Backbone, D3 and Handlebars as you mentioned, although I did not use the model or collections parts of Backbone. I constructed the beginning of a lightweight framework that feel somewhat declarative in the frontend router so that adding new pages doesn't require any real setup. You write the model code in python to pull data out of the database, then write a handlebars template to display it and then throw in some JS to add interactive elements client-side. Since I use pybars on the server side and handlebars on the client, I can pre-render the initial page view and then let the client render further screens using just one set of templates. The only downside of using pybars and handlebars is duplicating the helpers. The other part of the site I am pretty happy with is the search. I use postgres as the database, so I started with the full text searching, but then added some custom functions and triggers to nicely split and weight different parts of the package info. One implementation detail that I think ended up working out decently was weighting results with shorter names higher. This was based on the idea that shorter names mean a larger percentage of the name is a match to the search terms.
- shubhamjain 13y ago
  Pardon my ignorance, but is'nt webpage preloading + rendering a HTML5 specific feature? [1] [1]: http://www.igvita.com/2011/06/25/html5-visibility-api-page-pre-rendering/ http://www.igvita.com/2011/06/25/html5-visibility-api-page-p...
  - wbond 13y ago
    The pre-rendering I am referring to is the contrast between server and client side page rendering. On my site with the first page load the server sends you a full HTML page so you don't have to wait for the JS to load, then the JSON to be fetched and then the HTML to render. However, on all further navigation (if you are using anything but IE9 or less) I just request the JSON data from the server and I use handlebars via JS to render each page.

polarix 13y ago

I'm not sure what it is, but something feels very wrong to me about sublime package control. It might be the instructions for submitting new packages. It might be the difficulty of installing a bunch of packages at once.

JungleGymSam 13y ago
It strikes me as harsh to describe those things as "very wrong". Maybe it's just me, but for me, things that are "very wrong" are things like inequality, unconstitutional NSA spying, and watermelons with seeds. You know? Truly important stuff. edit: Is my tongue-in-cheek opinion really that bad? Am I, too, "very wrong"?
wbond 13y ago
I'm more than happy to discuss these things and work with anyone interested on improving them.
teamonkey 13y ago
For me it's the install method. I don't like the 'copy this code into your console' approach; all it takes is a subtly-hacked server and someone can redirect that URL request or cause other mischief. I just don't understand why Package Control isn't part of the standard Sublime Text 3 package by now. Do any Sublime users not use Package Control?
- superchink 13y ago
  He also describes how to install it manually, so you can do that if you're not comfortable with the other method. https://sublime.wbond.net/installation#Manual https://sublime.wbond.net/installation#Manual
- HCIdivision17 13y ago
  This is my feeling as well. The console shenanigans feel odd to me simply because it feels like it should already be there. There is a coolness to it, though, since it clearly demonstrates how effectively the interface can be modded from just a "simple" command. No doubt there are perfectly reasonable business explanations for why Sublime doesn't ship with it, but I wouldn't consider upgrading from 2 until 3 was supported. Anecdote on why the console code is bad and good: by coincidence this afternoon I decided to try ST3, and before using it spent about an hour trying to get Package Control working via the git repo route [1] (Sublime was already inside a local repo, so I had to RTFM git submodule stuff to appease the git_binary error); that went... poorly. I [ab]use Git's functionality, but don't grok it's inner workings well enough to feel like I can use submodules without contaminating the super repo, and eventually gave up when I accidentally came across the page that has the new command [2]. Bam it's working without trouble (after modifying it for the corporate proxy). Like magic it just worked, which was awesome, but silly that something so useful would have any barrier to entry at all. TL;DR: Package Control is an essential element of the joy of Sublime Text, so it's a little mystifying why it's not just built in. [1] I can't find the page at the moment. Hopefully I haven't simply hallucinated it somehow. [2] https://sublime.wbond.net/installation https://sublime.wbond.net/installation

laurent123456 13y ago

So far I've been managing my packages in a GitHub repository and that works well too. Since I keep switching between Mac, Linux and Windows it also allows me to easily share the profile with each installation.

wbond 13y ago
If you just sync your Packages/User/ folder between machines, Package Control will automatically install the correct versions of each package for each OS. Unfortunately I've found the "sync everything" process that you've outlined leads to issues where users end up installing the OS X version of a package on Windows and then wonder why it doesn't work properly.
- manojlds 13y ago
  I was using the sync everything approach as well and it was painful. I did not know about the package settings file. Should be a great timesaver.

mfjordvald 13y ago

I wonder if this one works from within China. I always have to go on a full VPN rather than just browser VPN to get Sublime to talk to the package control site.

tednaleid 13y ago

Very nice! I love seeing the download stats graph showing the last couple months of downloads with OS stats and embedded github README instructions. (ex: https://sublime.wbond.net/packages/EasyMotion https://sublime.wbond.net/packages/EasyMotion (disclaimer: my plugin))

fphilipe 13y ago
A feedback on that GIF: It's way to fast to understand what's going on. Even after looking at it for several cycles I don't get it. I suggest you slow down the playback :)
- ZoF 13y ago
  You press the shortcut for it, type the character you want to jump to, it highlights every instance of that character and shows you a unique shortcut key for each one, you then press that key to jump to your desired character. I agree though, that gif is far too fast.
  - tednaleid 13y ago
    I agree with both of you that the playback is too fast. I tried to get it slower a number of times, but the compression phase seems to take out some of the pauses... I'll take another look to see if there's anything that I can do with the gif creation process I have. If anyone has suggestions for gif recorders that give you control at this level, I'd love to know about it.
    - tednaleid 13y ago
      I switched methods and used GIFBrewery and was able to generate a better gif (I think). I'd be interested to hear if this one is easier to understand. Thanks!
      - fphilipe 13y ago
        I used GIFBrewery a couple times before and it works great [1] [2] [3]. It is easier to understand now, but I think you should stay on the last part a bit longer before looping it to make it clear that the animation finished. [1] https://github.com/fphilipe/PHFComposeBarView https://github.com/fphilipe/PHFComposeBarView [2] https://github.com/fphilipe/PHFArrayComparator https://github.com/fphilipe/PHFArrayComparator [3] https://github.com/fphilipe/PHFRefreshControl https://github.com/fphilipe/PHFRefreshControl

theone 13y ago

I really liked the changes, especially the loading indicator. On the side note, I really feel that there should be some sort of "package file" on each sublime installation. Something like a bower.json or package.json. It'll help us to sync / move settings easily. Moreover if it is coupled with a simple command to install all packages in that file, it'll be even better.

wbond 13y ago
The Package/User/Package Control.sublime-settings file may be what you are looking for. It tracks your settings, but also your installed packages. If you sync that to another machine that has Package Control installed, PC will install any missing packages the next time Sublime Text starts.

grobie 13y ago

Please don't use different label names for the same information. Having both "2" as well as "ST2" in different context leads to confusion.

wbond 13y ago
That was done because the labels are shown in different contexts. When there is a very small amount of space to show information, I use 2 if it is ST2 only, 3 if it is ST3 only, or nothing if it is compatible with both. However, when there is more room in the design, I use ST2, ST3 and ST2/3. Additionally, I made pretty liberal use of the title attribute on the site. Most things that are not obvious can be hovered for more information.

fphilipe 13y ago

Interesting to note that, according to the stats, most Sublime users that installed Git are on OS X while most users that installed PHP are on Windows. Overall it seems that the Windows user base is the largest.

baby 13y ago

But still no Package Control for ST3... Seems like I'll never make the switch.

buro9 13y ago
> But still no Package Control for ST3... Seems like I'll never make the switch https://sublime.wbond.net/installation https://sublime.wbond.net/installation ST3 is the default visible tab for the installation instructions. Many of us have been using ST3 with package control just fine for a while. I really only use it for GoSublime, and it works perfectly on ST3.
- baby 13y ago
  oh he released it then! I've been watching it pretty closely and you had to go through git and more before to set it up (which I didn't manage to do).

digitalmaster 13y ago

As a front end engineer -- this makes me happy!

Achshar 13y ago

I want to use SFTP with st3 but the package installer won't install without git. I don't have git. Does anyone know how can I get package control working?

ne0phyte 13y ago
Install GIT. Otherwise stick to downloading repos manually as zip, unpacking them and moving them manually.
- Achshar 13y ago
  I am willing to do that but I can'f find any instructions to where to get the repo from and where to put it.
coldtea 13y ago
It's a requirement. Install it and be done with it.
wbond 13y ago
That was while Package Control 2.0 was in alpha. It is no longer in alpha and no longer requires using Git to install.
- Achshar 13y ago
  I run the code, and it downloads the Package Control.sublime-package file alright. But the sublime won't recognize package control even when I restart it. ctrl + shift + p won't give package install or any other command.
  - wbond 13y ago
    I recommend pasting the Sublime Text console output into a new issue at https://github.com/wbond/sublime_package_control/issues https://github.com/wbond/sublime_package_control/issues.

danielmagnusson 13y ago

Nice looks! I'm having troubles finding how to set a package st3 compatible? Found some info on github, but not much documentation, https://github.com/wbond/sublime_package_control/issues/291 https://github.com/wbond/sublime_package_control/issues/291

Scaevolus 13y ago

A few things: If you can't secure it by downloading over SSL, couldn't you add a hash verification to the installation steps? Having homepage & issues listed as 'github.com' for most repos isn't very helpful-- maybe show more of the URL? Thanks for all your hard work, Package Control is a joy to use!

wbond 13y ago
That is an interesting idea about the hash verification of the download, I may spend some time playing around with that. I could probably even do a combination of hash and size verification to make a hash collision harder. The reason the downloads are truncated to domain is because the URLs tend to be far too long to display in the UI. If you mouse over the domain, you'll see a title attribute with the full URL. This is the same for many elements on the site. Icons, abbreviations and numbers with suffixes all have a title attribute to describe the item in more detail.
- dbpatterson 13y ago
  If you use any decent known hashing algorithm, the probability of collision is astronomically small.

Jormundir 13y ago

The stats page says ~1.8 million users, does this mean the sublime text creator made maybe $30-$40 million in sales?

Scaevolus 13y ago
Sublime Text is nagware (it has "Unregistered" in the titlebar, and reminds you it's unregistered sometimes when you save)-- I'd estimate the vast majority (95%?) of its users never pay.