Last Modernist

Posts tagged web development×:

January 8, 2013

Updated: Open With Chocolat and Open With Sublime Text 2 Alfred Extensions

image

Just updated Open With Chocolat and Open with Sublime Text 2 extensions for Alfred. Both now also work as file/folder actions in addition to opening the currently open Finder directory as a project.

Download Open With Chocolat Alfred Extension

Download Open With Sublime Text 2

December 17, 2012

Create A Compass Project In Current Directory With Alfred

Here’s another extension for Alfred that creates a Compass project in your currently open Finder directory and optionally have Compass watch it immediately.

image

Once you have installed the extension type “cch” into Alfred and hit Enter to create a new Compass project.

image

To create a project and have Compass watch it in one go use “cch w” (or “cch watch” if you prefer).

Download Create Compass here 

Unzip and doubleclick “Compass Create Here.alfredextension” to install. Style away!

Note: You need to have the Alfred Powerpack in order to use extensions. To use the Compass Create Here extension, you obviously need to have Compass installed (Although I’m tinkering with the thought of adding the option to install Compass with Create Compass Here if it isn’t on your system yet. Maybe in a next version). 

December 13, 2012

Open Folder As Project In Your Fave Editor With Alfred

Just built two tiny extensions for Alfredapp to open the directory you currently have open in the Finder as a project in your favorite text editor.

image

image

Once Open With Chocolat is installed, type “owc” into Alfred and hit enter to open the current Finder directory as a project in Chocolat. With Open With Sublime Text 2 use “ows” into Alfred and hit enter to open the current Finder directory as a project in Sublime Text 2.

You can easily change the keyboard shortcuts in the Alfred preference window.

Download Open With Chocolat here 

Download Open with Sublime Text 2 here

To install simply unzip and double-click the respective .alfredextension file(s).

Note: You need to have the Alfred Powerpack in order to use extensions.

Update: Both now working as file/folder actions, too.

August 31, 2011

 
Now there’s really no excuse any more for not using Compass/Sass for those who find installing/running it a bit too techy:
Scout - Compass and Sass without all the hassle
Run self-enclosed Compass without touching the command line.

Now there’s really no excuse any more for not using Compass/Sass for those who find installing/running it a bit too techy:

Scout - Compass and Sass without all the hassle

Run self-enclosed Compass without touching the command line.

Notes: 2

August 16, 2011

Editor (on fire)

After lying dormant for a while, the discussion about the ‘perfect’ web design application seems to be alive and running again, surely at least in parts down to Adobe releasing Muse, an AIR-based visual web editor.

Quite a few very prolific and very qualified people have elaborated on that topic over the last couple of years, take the in-depth considerations of Jason Santa Maria to name but one. We never saw that ‘perfect’ rock-bottom-jack-of-all-trades-pleasing-everyone-producing-proper-standard-compliant-no-overhead-markup-and-css-while-being-intuitive-and-easy-to-use editor evolve over the years yet – and I doubt we will in the foreseeable future.

The last ten or so years have brought us a quite a few visual editors, from Golive and Dreamweaver (and Fireworks to a certain extent) to – since yesterday – Muse, to name only a few of the ones with ‘for professional use’ written on the packaging. They also brought us overly complex and overheaded markup, whackiness on all fronts, proprietary crutches, some more, some less, but the output of any of these never got a sniff of what a capable frontend developer armed with nothing but a text editor came up with (no, this is not another one of those ‘I’ll have Notepad only, thanks.’ show-off statements, read on!).*

I myself have dreamed – for a long time – of a ‘perfect’ rock-bottom-jack-of-all – ok, I’ll skip the rest – web editor, web based, that, instead of mimicking the technology we design for, internally is based on the elements and attributes/properties they actually have in their real-world habitat, the browser. Probably such a thing would still make sense today. For a lot of needs, this demand is totally valid.

But I somehow have gotten over that today. Today I usually do some basic design work in photoshop and illustrator to begin with, and then as soon as I have a rough idea turn over to an (text-) editor and start building the thing or a portion of it, adjusting, deleting, expanding, minimizing, improving on the way. The amazing thing about that is you have to think about what you’re doing, how it all goes together, what markup elements would best describe it while still leaving you enough flexibility to make changes later on. One understands what the thing really is and what you want it to be – and what the difference between the two is, and how best to bring all that in sync. And it forces you to keep things simple and clear and to carefully consider how far you are willing to go to achieve your goals, because if you mess things up, you’ll have to clean them up later on yourself, so that for a lesson in self-discipline. Doing all that on the fly, in my experience, will also bring better results quicker than first building it perfectly in Photoshop, then build a prototype that is nothing than just that and will be thrown away, and then realizing how hard that one thing you were so fond of in your original design is to implement in the grim reality of a rendering engine. 

The fundamental problem with visual editors as I see it today is that they need to rely on some kind of abstraction layer, the more ‘easy to use’, the whackier and more overheaded the result. (remember those tables and position-absolute divs DW used to generate from rectangles freely drawn on some canvas with some metrics derived from out of nowhere? OK, a pretty extreme example – but illustrates my point oh-so extremely well). 

The probability of a visual editor that produces good markup and CSS is dwindling by the day with CSS3 evolving, experimental implementation and adaption of new properties speeding up and the lifespan of browser versions shortening rapidly. Any abstract layer will have a hard time catching up with what the latest status is and will always be behind.

As I see – and learn, learn, learn – every working day, good markup and clean, stable and efficient CSS require some understanding of their structure and relationship as well as some intelligence and –yes, I’ll type it! – creativity (albeit also on the structural level rather than in terms of aesthetics alone). Something that software still can’t boast of having in excess. The really good things today still are built from scratch, by human beings knowing their tools – and not expecting any magic to help them. And (this is were the good news begin) we have a good set of tools at our hands today that take the most tedious part out of it, with things like Markdown, Sass, Haml and the mighty Compass framework, just to name a few (that I just wish I had more time to look into myself and that I have just recently begun to understand what they can do each!).

To cut my long rantings short, I don’t think we need any more visual tools that require that overhead-producing abstraction layer. We need to gain a better understanding of what we do, on any level, and that includes technology. We can now stop romantizing the craftsmanship of old when drooling over vintage hand built bicycle frames or furniture in our spare time. We just need to have the guts to become the craftsmen of today. In what our own trade and craft and everyday work is. Proper work is imposssible without an understanding of the underlying technology. Oh, and if you have an app bound to revolutionize web design up your sleeve , I’d still be interested to have a peek.



*One must admit though that these editors, flawed as they were/are, have helped a great deal in democratizing the web, enabling more or less anybody to end up having a couple of files somewhere to upload somewhere. For the price, see above. That phase is – I hope – over now, may they rest in peace.

Notes: 1

August 14, 2011

Hover states for the icons as I had planned them. Turned out that CSS3 transitions on the background-image property only work with (CSS-) gradients, not actual image files. Ah well, need to find something else…
Click here for a list of transitionable CSS3 properties.

Hover states for the icons as I had planned them. Turned out that CSS3 transitions on the background-image property only work with (CSS-) gradients, not actual image files. Ah well, need to find something else…

Click here for a list of transitionable CSS3 properties.

September 14, 2010

Still fiddling around with 960grid…

Still fiddling around with 960grid

September 9, 2010

Just modifying 960grid for a project I’m working on. Would have loved to use it out of the box, but twelve columns isn’t flexible enough, 16 is better but won’t work for three cloumn layouts, 24 cols is great in terms of flexibility and would meet our needs, it’s just that 10px margins is that tiny tad too tight. As I said, it’ll always be hard (or not so hard) work. It’s just about mapping technology and human perception onto each other.

Just modifying 960grid for a project I’m working on. Would have loved to use it out of the box, but twelve columns isn’t flexible enough, 16 is better but won’t work for three cloumn layouts, 24 cols is great in terms of flexibility and would meet our needs, it’s just that 10px margins is that tiny tad too tight. As I said, it’ll always be hard (or not so hard) work. It’s just about mapping technology and human perception onto each other.