-
Crit: Superhero Studios.
Posted 6 days ago by Zach Inglis
Earlier Mark wrote a post on critique and his idea for bringing it to the industry. I am really on board with that. I have a thirst for learning and becoming better. And this is a great tool. To listen … Continue reading
-
It’s Not Working For Me: #crit
Posted 7 days ago by Mark Boulton
“What we have is bricks. I don’t see a house, yet.” Don Draper I started ‘formal’ art and design training when I was about fourteen years old. I took Art as an option at secondary school and progressed to an … Continue reading
-
Should CSS remain without power?
Posted 7 days ago by Zach Inglis
After a debate in the office about the new vh and vw measurements another broke out about the power of CSS. An argument was made that CSS should be as simple as possible, and to leave CSS as it is. … Continue reading
-
iPad HD Retina Wallpapers designed by Simon C Page
Posted 8 days ago by Veerle
Most of you that visit here often know that I have a soft spot for geometrical shapes. In this post you'll get plenty of those and you'll have the option to download it as a wallpaper for your shiny new iPad 3 with the retina display.
Repetitions of a shape
The creator of these beauties is Simon C Page, a name that rings a bell properly as I featured Simon's work before in a post called International Year of Chemistry 2011. His latest experiment didn't take too long to create. I'll let Simon reveal some of the process:
These pieces actually didn’t take long to create as they are just repetitions of this shape equally spaced with a double sized version over the top. I then picked out some nice colors, ran a random color and transparency script, added some noise and hey presto.
Where to download?
Now that some of the mystery has been revelead it is time to admire these colorful geometric shapes. If you want to download them for your iPad 3 head over to Simon's page.
CUBEN Space Io
CUBEN Space Pandora
CUBEN Space Titan
CUBEN Space Oberon
CUBEN Space Atlas
CUBEN Space Calypso
CUBEN Space Janus
CUBEN Space Ophelia
CUBEN Shambles 1
CUBEN Shambles 2
CUBEN Fiber 1
CUBEN Reflect 1
Twisted Geometry J
-
Inspiration Stream, now with downloadable ASE file
Posted 15 days ago by Veerle
Time to talk about color inspiration today. Each image in my Inspiration Stream contains a color that is handpicked. No ingenious automation process in action here, as I want to have full control over this. I even try to choose my colors so I end up with an interesting palette at the top of each page. Even though, each time I add a new image to the gallery, the colors move one position per page as the images move one position as well. Still, I try to watch that the neighboring colors are in harmony.
That said, it has always been my intention to create some sort of non-stop color palette, or a color palette per page. You could already copy the hex color value, but now it goes one step further thanks to the help of Ben Bodien, who implemented a script and some PHP magic so that you can now download an ASE file.
What is an ASE file?
An ASE file is an exchangeable Swatches palette. It contains a group of colors saved into one file that you can use in different Adobe programs. Saving your colors in Illustrator, Photoshop or InDesign as an ASE file, makes it possible to use them in one of these applications. So the colors of an ASE file are exchangeable among these programs. Photoshop has also its own ACO color palette file, but such file can only be loaded into a Photoshop Swatches palette, and not in an Illustrator or InDesign Swatches palette. In Illustrator the swatches can be saved as an AI file and only to be used in Illustrator. This is useful in case your swatches also contain gradient or pattern swatches, as these type of swatches can't be saved as ASE files.
Download the ASE file
At the top of each gallery page, you'll now see a download link to the right of the colors. Clicking the link will download an ASE file to your HD. Now it's just a matter of loading this color palette file into Photoshop, Illustrator or InDesign.
Load the ASE file
To load this color palette into one of these applications, you need to access the drop down menu of the Swatches palette, which can be found under the arrow button on the right of the palette. If the palette isn't visible on your screen you go to Window > Swatches. For InDesign you go to Window > Color > Swatches. If you are using Photoshop, you can either choose between Load Swatches or Replace Swatches. Load Swatches will add the swatches to the current ones, while Replace Swatches will replace all the currently loaded swatches in the palette. After you've chosen one of the 2 options, you browse to the ASE file, select it, and you are all set.
In Illustrator, you choose Other Swatches Library > Other Library…, browse to the ASE file, select it and you are done. In InDesign it's also the same method. You choose Load Swatches… from the Swatches palette drop down menu, browse to the ASE file and select it.
Save your own ASE file
Of course you can also save your own ASE file for the project you are working on. I usually add the colors I frequently use in a project into the Swatches palette. Before I start to add any colors into the palette, I make sure there are no colors in the palette. However this is with the exception of InDesign, because there you just select the swatches you want to save. In case of Photoshop or Illustrator, I always make sure I start with an empty palette. To clean out the palette in Photoshop, you need to hold down the Alt/Option key and click on the swatches one by one. At least this is the only way I'm aware of, besides dragging them one by one to the trash icon at the bottom of the palette. In Illustrator and InDesign you can select multiple swatches at once holding down the Shift key, and then click the trash icon button at the bottom of the palette. However, in Indesign and Illustrator there are swatches that can't be removed. In Illustrator there is the None and Registration swatch, and in InDesign you also have Black and Paper which can't be removed, but like I mentioned before no need to do this here as you just select the colors you want to save.
Once you have emptied the Swatches panel and added your own, you go to Save Swatches for Exchange… from the palette's drop down menu in Photoshop. In Illustrator you choose Save Swatch Library as ASE… from the drop down menu. In Photoshop the colors will be loaded into the Swatches palette. However, in Illustrator the swatches will be there in a separate Swatches palette. From there you can just select them and drag them into the main Swatches palette of your document if you like.
Did you know…
In Illustrator you can also import swatches from any other Illustrator file by just accessing that file via the Swatches palette's drop down menu. By going to Other Swatches Library > Other Library… and selecting the file, Illustrator will open the Swatches palette of that file. The custom swatches you've saved in the Swatches palette for that file will be available in a separate palette. From there you can just select the swatches you want to use and drag them into the main Swatches palette if you want.
Hopefully you'll find this new addition to the Inspiration Stream helpful in your search for the perfect color palette.
-
Project Detritus
Posted 22 days ago by Jon Snook
Zielun asks of managing projects:
It often happens in projects that based on one, large system with tons of modules that can be enabled or disabled, and documentation is often not up-to-date or doesn`t exist at all. At least I have such experience. I know that real problem lies elsewhere like in project management but such things often plays main role when you or team decides which coding standard to pick for a project to solve such issues.
This project detritus can definitely be frustrating. Big projects that go on for extended periods of time begin looking like sediment layers of a rock formation. It becomes an interesting archaeological expedition as you chip away at the months (and years) of development and can almost pinpoint the time that a chunk of code was written based on the style it was written.
I've rarely seen a long running project maintain an absolutely rigid and consistent coding style. We make mistakes in the course of building a project, correct those mistakes, but rarely go back to correct the ill-conceived approaches used at the beginning of a project.
Nobody wants to clean out the cruft for fear of unsettling the foundation and having the entire project collapse on them.
A modular approach, a good naming convention, and an reduction of element selectors can make it much easier to determine what is and isn't being used on a project. Do a search for a module name and you'll discover right away if it is used and where it is used. Tools can be built to automatically review which classes are being used and which aren't.
This is easier to do if you keep styles in the CSS. Don't keep them inline and don't set them in script.
Why avoid element selectors? HTML can change but it's not as easy to tell if the CSS is being used or not unless you examine every instance. How relevant is
#sidebar h2if I've long since switched level 2 headings to level 3 headings?To be clear, element selectors can be quite useful. Don't throw out the baby with the bath water. Just strike that balance between when to use an element selector and when adding a class would be cleaner, clearer, and more semantic.
Of course, I talk more about this in a little e-book I wrote...*ahem*
-
Project Detritus
Posted 22 days ago by Jon Snook
Zielun asks of managing projects:
It often happens in projects that based on one, large system with tons of modules that can be enabled or disabled, and documentation is often not up-to-date or doesn`t exist at all. At least I have such experience. I know that real problem lies elsewhere like in project management but such things often plays main role when you or team decides which coding standard to pick for a project to solve such issues.
This project detritus can definitely be frustrating. Big projects that go on for extended periods of time begin looking like sediment layers of a rock formation. It becomes an interesting archaeological expedition as you chip away at the months (and years) of development and can almost pinpoint the time that a chunk of code was written based on the style it was written.
I've rarely seen a long running project maintain an absolutely rigid and consistent coding style. We make mistakes in the course of building a project, correct those mistakes, but rarely go back to correct the ill-conceived approaches used at the beginning of a project.
Nobody wants to clean out the cruft for fear of unsettling the foundation and having the entire project collapse on them.
A modular approach, a good naming convention, and an reduction of element selectors can make it much easier to determine what is and isn't being used on a project. Do a search for a module name and you'll discover right away if it is used and where it is used. Tools can be built to automatically review which classes are being used and which aren't.
This is easier to do if you keep styles in the CSS. Don't keep them inline and don't set them in script.
Why avoid element selectors? HTML can change but it's not as easy to tell if the CSS is being used or not unless you examine every instance. How relevant is
#sidebar h2if I've long since switched level 2 headings to level 3 headings?To be clear, element selectors can be quite useful. Don't throw out the baby with the bath water. Just strike that balance between when to use an element selector and when adding a class would be cleaner, clearer, and more semantic.
Of course, I talk more about this in a little e-book I wrote...*ahem*
-
Project Detritus
Posted 22 days ago by Jon Snook
Zielun asks of managing projects:
It often happens in projects that based on one, large system with tons of modules that can be enabled or disabled, and documentation is often not up-to-date or doesn`t exist at all. At least I have such experience. I know that real problem lies elsewhere like in project management but such things often plays main role when you or team decides which coding standard to pick for a project to solve such issues.
This project detritus can definitely be frustrating. Big projects that go on for extended periods of time begin looking like sediment layers of a rock formation. It becomes an interesting archaeological expedition as you chip away at the months (and years) of development and can almost pinpoint the time that a chunk of code was written based on the style it was written.
I've rarely seen a long running project maintain an absolutely rigid and consistent coding style. We make mistakes in the course of building a project, correct those mistakes, but rarely go back to correct the ill-conceived approaches used at the beginning of a project.
Nobody wants to clean out the cruft for fear of unsettling the foundation and having the entire project collapse on them.
A modular approach, a good naming convention, and an reduction of element selectors can make it much easier to determine what is and isn't being used on a project. Do a search for a module name and you'll discover right away if it is used and where it is used. Tools can be built to automatically review which classes are being used and which aren't.
This is easier to do if you keep styles in the CSS. Don't keep them inline and don't set them in script.
Why avoid element selectors? HTML can change but it's not as easy to tell if the CSS is being used or not unless you examine every instance. How relevant is
#sidebar h2if I've long since switched level 2 headings to level 3 headings?To be clear, element selectors can be quite useful. Don't throw out the baby with the bath water. Just strike that balance between when to use an element selector and when adding a class would be cleaner, clearer, and more semantic.
Of course, I talk more about this in a little e-book I wrote...*ahem*
-
Project Detritus
Posted 22 days ago by Jon Snook
Zielun asks of managing projects:
It often happens in projects that based on one, large system with tons of modules that can be enabled or disabled, and documentation is often not up-to-date or doesn`t exist at all. At least I have such experience. I know that real problem lies elsewhere like in project management but such things often plays main role when you or team decides which coding standard to pick for a project to solve such issues.
This project detritus can definitely be frustrating. Big projects that go on for extended periods of time begin looking like sediment layers of a rock formation. It becomes an interesting archaeological expedition as you chip away at the months (and years) of development and can almost pinpoint the time that a chunk of code was written based on the style it was written.
I've rarely seen a long running project maintain an absolutely rigid and consistent coding style. We make mistakes in the course of building a project, correct those mistakes, but rarely go back to correct the ill-conceived approaches used at the beginning of a project.
Nobody wants to clean out the cruft for fear of unsettling the foundation and having the entire project collapse on them.
A modular approach, a good naming convention, and an reduction of element selectors can make it much easier to determine what is and isn't being used on a project. Do a search for a module name and you'll discover right away if it is used and where it is used. Tools can be built to automatically review which classes are being used and which aren't.
This is easier to do if you keep styles in the CSS. Don't keep them inline and don't set them in script.
Why avoid element selectors? HTML can change but it's not as easy to tell if the CSS is being used or not unless you examine every instance. How relevant is
#sidebar h2if I've long since switched level 2 headings to level 3 headings?To be clear, element selectors can be quite useful. Don't throw out the baby with the bath water. Just strike that balance between when to use an element selector and when adding a class would be cleaner, clearer, and more semantic.
Of course, I talk more about this in a little e-book I wrote...*ahem*
-
Moving On, My Health & The Future
Posted 24 days ago by Zach Inglis
It comes with incredibly deep sadness I’ll be leaving Mark Boulton Design. It has not been long and there are many reasons behind my decision but in large part I want to focus on my health. I have adored my … Continue reading
-
Caleb Kozlowski cycling posters
Posted 29 days ago by Veerle
With the Waalse Pijl/La Flèche Wallonne race going on today it seems like the perfect timing to combine my passion for cycling and the love for vectors. Just like we did with Neil Stevens aka Crayonfire and his Tour de France Series.
Illustrations & cycling
Illustrations & cycling is an addictive combo that I don't mind featuring here. The people who follow me on Twitter will also know that I'm just keeping my promise. These posters by Caleb Kozlowski fit the profile. These follow a long tradition of illustrative sports posters with the ones from the 1972 Munich Olympics by Otl Aicher as the most iconic designs. Pretty amazing if you think they're done before the desktop publishing era.
The posters by Caleb follow the same principles of simplistic information design. They are built around simple geometric shapes and have a distinctive vintage feel. These posters are on sale at super7 store. Enjoy and remember, "vive le vélo!"
- King of the Mountains
- Giro di Lombardia
- Paris - Roubaix
- Meisterschaft Von Zurich
- Giro di San Francisco
King of the Mountains
Giro di Lombardia
Paris - Roubaix
Meisterschaft Von Zurich
Giro di San Francisco
-
I Love Adaptive Web Design poster contest winners
Posted about 1 month ago by Veerle
The graphic design enthusiasts that read this blog have put their pencils down on their desks and finished their entries for our contest. Here are the results…
The I ♥Adaptive Web DesignPoster Contest
Winners
-
Grand Prize Winner
Erin Crocombe
Queensland, AustraliaCharity: World Wildlife Foundation
-
1st Runner Up
Valentina Rachiele
Pesaro e Urbino, ItalyCharity: Free Tibet
-
2nd Runner Up
Phillip Keys
Wisconsin, USACharity: Charity: Water
-
3rd Runner Up
Cristian-Ioan Colceriu
Mureș, RomainaCharity: Amnesty International
-
4th Runner Up
Heidi Sergel
New Mexico, USACharity: American Cancer Society
Honorable Mentions
-
Rebecca L. Macaulay
Arizona, USACharity: HOPE Animal Shelter
-
Alisa Frincke
Piacenza, ItalyCharity: World Wildlife Foundation
-
Carlos J Roldán
Antioquia, ColombiaCharity: Colombianitos
-
Guus van Zeeland
South Holland, NetherlandsCharity: Evy van Kempen Foundation
-
Catalin Boroi
Bucharest, RomaniaCharity: Save the Children
Take a moment to thank the sponsors
We could not have done it without them.
-
-
Replication
Posted about 1 month ago by Avalonstar
Good artists copy, great artists steal. Imitation is the sincerest form of flattery. Clichés we’ve come to know and love. For what seems like an eternity now, I’ve been encouraging people trying to get into our field to get into the practice of replicating. When used as a learning tool, replication can be an invaluable teacher and an invaluable motivator.
So this week on the hastily-named-but-I-sort-of-like-it-now Vlogalonstar: Replication.
(This time I managed to talk slower and keep everything under the 4 minute mark. Next time I hope to talk about something a little less… teachy. That is, unless you’d all like me to keep being all… teachy. I can go either way with this.)
-
The design process of my Eco theme for Fork
Posted about 1 month ago by Veerle
Last year Bart De Waele from Netlash bSeen asked me if I would be interested in designing a theme for their Fork CMS. Designing themes is something I always enjoy doing because of the creative freedom that comes with these kind of projects, so it didn't take me all too long to accept this great challenge. Here is another short behind the scenes story of my design adventures…
The briefing
The briefing for this project was pretty straightforward as the client gave me total freedom. I could just choose my own theme, and design style. The boundaries I needed to stay into were the ones of the CMS, but they felt more like guidelines to me. I only had to make sure the different elements of a page were there. In total there were 4 pages to design: homepage, secondary page with sub navigation, blog overview page and blog detail page, but I also delivered a design for the archive page just to show the styling of a list of blog articles.
Finding inspiration and ideas
At first I had no idea which subject I would pick for this theme. The idea of creating an eye-catching visual for the header was something I had in mind from the start. I thought maybe if I just do some sketching the ideas for a theme will come. So I started doodling one of my favorite subjects, which is landscapes. Inspired by the poster series of the Tour de France, the idea of a landscape using minimal and geometrical shapes started to gradually fill my mind. Usually I do several sketches, but for some reason this 1st sketch sparked my inspiration for the next step.
While sketching this visual on paper, the idea to use ecology as subject for the theme was born. So I started adding elements that refer to energy, power,… I decided to name it Eco.
Initial design
Trying to find the perfect layout for the homepage was a bit of trial and error as I had a hard time trying to make it look interesting, and eye-catching. One of the reasons was that this visual was lacking some contrast, it felt too flat and light, and I didn't see a clear picture in my head of the structure and layout of the page. I wasn't sure whether to put the main navigation above or below the visual, or have the path above it, have the visual go all the way over the browser screen or not,… Another problem was that I didn't get any content for this page, so I had to come up with something myself. Total freedom over which content to put on the page might seem easier to start from, but to me it's not. The question was also which grid I would go for, 3 or 4 columns?
Trying to find the structure and grid
After a bit of doodling I decided to go for a 3 column grid, having the header go all the way across the browser screen. The idea came to mind it would be fun to build in a parallax effect in the header, using 2 or maybe 3 layers: the sky and clouds, the circles and the sun, and the trees and hills.
Exploring colors
Meanwhile I was also exploring some colors. At first I tried to combine subtle greens and blues in combination with more vibrant colors and some dark brown, but for this theme I decided to mute things a bit and use subtle colors of nature and stick to sand, brown, green,… with orange as highlight, in combination with a teal blue.
Getting there
After some experimentation, and leaving it rest for a bit, I managed to work out a final and presentable design.
Homepage
Feedback
It seems I was spot on with my design, as the feedback was really positive. They liked the header illustration and the idea to use a paralax-effect. Only a few minor details needed to be changed, but nothing major really. We also decided to use the typeface Chunk for headings, and other elements like buttons and navigation. My initial idea was to use Bree, but since I had to go for an open-source typeface, I thought Chunk would be the perfect fit, since it adds this nice contrast. After having that out of the way, the other 3 pages followed pretty quickly.
Final design
The header
As for the header, the illustration itself was created in Illustrator, and then pasted as a SmartObject in Photoshop. To make sure the horizontally repeating would occur seamlessly, I've set the width of my document in Illustrator to match the width I use for the website layout.
Creating a seamless repetition
Then I rearranged a few clouds, hills and trees to make sure the repeating would look balanced and seamless. To keep things simple, I try to avoid having the split line right in the middle of a cloud or a tree, but it seems this was inevitable as I wanted to keep a balanced composition. By copying the entire illustration to the left, and then also to the right of the document, I could see if things were connecting seamlessly and how it would look. Then I adjusted where needed, and repeated this action until I got it right.
Once finished, I copy pasted the different elements in Photoshop layer by layer. First I copy pasted the sky and clouds, then the hills and trees, and lastly the circles and sun. This makes it possible to export each layer separately, with the top ones as transparent PNGs to create the paralax-effect. As you can see from the layers in the above screenshot, I also added a Layer Group where I added a bit of info for the developers to show the repeating area.
Textures and effects
I added textures and effects on the illustration to add a bit more depth and contrast, as it was missing from my initial try in Photoshop. For the trees and hills I duplicated its layer and applied Multiply as layer mode with a 75% opacity, to add extra contrast. Then I added a mask to the original layer and removed some of the inside area of the hills and trees using a transparent smooth brush. This way the borders of the trees and hills got more accentuated by the layer in Multiply mode above it.
I also added the paper texture on top of the trees and hills as a separate layer, masking only the trees and hills, to make sure the texture is applied to these elements once this would be exported as a transparent PNG. The tricky part is that the texture is actually a bottom layer in my design, and so once you export the hills and trees to a transparent PNG, the effect of that texture is gone because you have to hide that layer. So you need to add this effect on top of it and apply it with a mask of the hills and trees (see the image above).
Secondary page
For this page I used a 4 column grid, using 1 column for the side navigation and 3 for the content. For the 2 other pages, the blog overview and blog detail page, I used the same 3 column grid as I used for the homepage, using 1 column for the sidebar and 2 for the content.
Blog overview page
Blog detail page
For this theme I made sure the link with nature and the environment was everywhere in every little detail. That's why I used leafs and trees for titles, lists or quotations etc. It's of course a matter of finding the right balance here, making sure you don't overdo, or overdecorate. As for the colors, I also tried to find the balance between subtle colors of nature, and still making sure there is a nice contrast for buttons, links and other necessary elements.
A final note…
For the people who follow me on Instagram, you might have noticed that the photos are from my Instagram feed. They are all taken by myself from my cycling adventures here in Flanders, Belgium. What can I say, I had much fun creating this theme, and I hope people will enjoy using it for their website. Don't forget to check it out.
-
On Photoshop, Defaults and Panel Options
Posted about 1 month ago by Avalonstar
You know, it figures that the first episode of the hastily named “Vlogalonstar” would be on Photoshop. This, my friends, is my first real test at the new format. More so than the first video, this was both a joy and a challenge to make.
I really feel that if I keep at this, something good will come out of it. That said, I hope you enjoy it! (o^_^)b
And now for an errata. I had said in the inaugural video that the Vlogbrothers had 5 minutes per video to keep their audience’s attention before being “punished.” That was incorrect—the correct number being 4. So with that in mind, I managed to fit what I needed to into 3:54.
-
CoffeeConsole: A Chrome Extension
Posted about 1 month ago by Jon Snook
Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing.
The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window.
I've put together a quick video to demonstrate this.
Behind the scenes, I hobbled together a bunch of resources. Namely, the Ace editor and the CoffeeScript compiler There really wasn't a lot of code that I needed to add except to figure out how to run the compiled JavaScript in the proper context.
There's definitely more features that can (and maybe should) be added such as the ability to review the compiled JavaScript and the ability to view the compilation errors. The project has been added to GitHub, so feel free to contribute. (As of writing this, I still need to choose a license but likely an MIT license.)
Download the extension or check out the repo on Github.
-
CoffeeConsole: A Chrome Extension
Posted about 1 month ago by Jon Snook
Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing.
The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window.
I've put together a quick video to demonstrate this.
Behind the scenes, I hobbled together a bunch of resources. Namely, the Ace editor and the CoffeeScript compiler There really wasn't a lot of code that I needed to add except to figure out how to run the compiled JavaScript in the proper context.
There's definitely more features that can (and maybe should) be added such as the ability to review the compiled JavaScript and the ability to view the compilation errors. The project has been added to GitHub, so feel free to contribute. (As of writing this, I still need to choose a license but likely an MIT license.)
Download the extension or check out the repo on Github.
-
CoffeeConsole: A Chrome Extension
Posted about 1 month ago by Jon Snook
Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing.
The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window.
I've put together a quick video to demonstrate this.
Behind the scenes, I hobbled together a bunch of resources. Namely, the Ace editor and the CoffeeScript compiler There really wasn't a lot of code that I needed to add except to figure out how to run the compiled JavaScript in the proper context.
There's definitely more features that can (and maybe should) be added such as the ability to review the compiled JavaScript and the ability to view the compilation errors. The project has been added to GitHub, so feel free to contribute. (As of writing this, I still need to choose a license but likely an MIT license.)
Download the extension or check out the repo on Github.
-
CoffeeConsole: A Chrome Extension
Posted about 1 month ago by Jon Snook
Harry Brundage, a co-worker of mine at Shopify, does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome's Web Inspector. I asked Paul Irish, a "dev relations guy" at Google, to point me in the right direction on building just such a thing.
The result of today's pet project is CoffeeConsole, a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window.
I've put together a quick video to demonstrate this.
Behind the scenes, I hobbled together a bunch of resources. Namely, the Ace editor and the CoffeeScript compiler There really wasn't a lot of code that I needed to add except to figure out how to run the compiled JavaScript in the proper context.
There's definitely more features that can (and maybe should) be added such as the ability to review the compiled JavaScript and the ability to view the compilation errors. The project has been added to GitHub, so feel free to contribute. (As of writing this, I still need to choose a license but likely an MIT license.)
Download the extension or check out the repo on Github.
-
Vlogalonstar
Posted about 1 month ago by Avalonstar
Welcome to an experiment. Video blogging is something that’s completely new to me, but it’s something that I’ve been wanting to try and have been mentally preparing for—on and off—since the beginning of the year. I felt that now was a good time as any to get started.
This is an introduction and a background as to why you’re seeing my face in this video as well as what I plan to do. While today was a warm-up, I’m excited to get started. I could go into length about it here, but that would kill the need for a video wouldn’t it? ;)
Finally, If you have a topic request, let me know!
-
Vlogalonstar
Posted about 1 month ago by Avalonstar
Welcome to an experiment. Video blogging is something that’s completely new to me, but it’s something that I’ve been wanting to try and have been mentally preparing for—on and off—since the beginning of the year. I felt that now was a good time as any to get started.
This is an introduction and a background as to why you’re seeing my face in this video as well as what I plan to do. While today was a warm-up, I’m excited to get started. I could go into length about it here, but that would kill the need for a video wouldn’t it? ;)
Finally, If you have a topic request, let me know!
-
My Humanscale M8
Posted about 1 month ago by Avalonstar
I’ve been on a mounting spree as of late. First, my TV. Then my microphone. Now, my iMac. This, the Humanscale M8, is the last piece of the puzzle I alluded to in my last post. While I didn’t have the best luck with actually getting it—it took me nearly a month to receive it since it was on backorder—it was definitely worth the wait.
In the spirit of practicing for my next endeavor, I took a timelapse of the installation.
If you’re interested in getting your own M8, do use Google to find it. Unless you like torturing your wallet, you can get this for around $225 USD (Humanscale sells it for over $400).
-
On Removing Barriers to Writing
Posted about 1 month ago by Avalonstar
This’ll probably be the second and final post in mine in February. Has my fire been put out? Nope, but there’ve been a few roadblocks.
The first? A plan I had hoped to hatch this month has been put on hold due to a couple of “components” being backordered.
The second? It’s really easy for barriers like designing to get in the way of progress—almost too easy. It’s partly why I’ve left this place unfinished since I re-released. My content needed to look “good enough” for me to start writing and it worked! But now, I’m thinking of expanding on this place and it’s starting to get to me. This is what I’ll quickly jump into.
I love Harmony, I always have. It’s run by some of the best guys in the industry in my Ordered List co-workers. However, there have been a few minor points that I’ve lived with ever since I moved my blog here. The main one is the online template editing. My problem with it? It’s online. As awesome as it is, it’s not Sublime Text. It’s not a desktop experience. So there’s a barrier. It’s a barrier to finishing a design, which is a barrier to me continuing to write—you see can see where this is going.
So with a heavy heart, I’m going to be moving off of Harmony and onto GitHub Pages and Jekyll over the course of the next few weeks. It’ll be more of an experiment than anything else. I’ve said on multiple occasions that a static-site generator can’t hold my plans for Avalonstar, but with further research, I think it can. By bringing blogging to the same level as my development process, I hope to effectively knock down these barriers.
That said, tonight I’ve thrown Avalonstar up on GitHub in preparation for the move. Let’s hope this goes well! -
Super Hybrid Robots
Posted about 1 month ago by Avalonstar
Last year, I presented the concept of J-pop to my colleagues of GitHub at my first summit. It was surprisingly well received. Since I missed a summit due to the wedding, I gave my second summit talk yesterday. When it came to this year’s topic, as always, Jen was the catalyst that got me started—two weeks in advance.
Whew. I need to work on putting coherent sentences together, but at least the slides were pretty! ;) #ghsummit
— Bryan Veloso (@bryanveloso) January 18, 2012Here’s a quick preface.
The day I finished my first Django app, three or four years ago, my life changed. Up until then I was an interface designer who had a lot of ideas but never the foundation to go forward. Also, I feared it. But after that first successful app, I wanted to know the entire stack. So over the next few years I tried everything, from Cocoa to Puppet and now Redis and Rails. I followed what was interesting and what seemed fun at the time, even if it was a waste of time. So, I started to associate with the concept of a hybrid.
Oh yes, my presentation. I found a lot of parallels to two of the greatest series of platformers of all time, Mega Man and Mega Man X for the NES and SNES respectively. I talked a bit about Mega Man X last month, but I completely ran with it this time. As to not derail the deck, I’m quite happy to present “Super Hybrid Robots” below:
Finally, go be a fan! (o^_^)b
-
Spoon-feeding
Posted about 1 month ago by Avalonstar
Let’s talk about one of my favorite games of all time, MegaMan X. I’ve played them all, and I’ve beat them all—yes, even the 3D ones—but I’ll focus on the inaugural edition.
Like many of the games that have defined my history as a gamer—Final Fantasy, Chrono Trigger, Super Mario Bros.—the nostalgia kick the X series gives me is, to this day, immense. The gameplay was extremely fun, it wasn’t stupidly difficult, the artistic direction was a welcome-but-faithful departure from its predecessor, and the music still gets me going to this day. I still listen to the themes of Armored Armadillo and Storm Eagle on repeat once.
But here’s where I’ll stop and encourage you to watch the video below. It is a bit long, but don’t let that stop you! Even if you’re not a fan of this style of presentation, the message behind this video is powerful and equally universal.
Did you finish it? Good. Now nod if you agree with it’s message. Note that Arin expectedly only mentions game developers when it comes to the notion of introducing a user to your experience, but it applies everywhere.
Not only did this video expose me an entirely different viewpoint of one of my favorite childhood video games, it also spoke to the builder and designer within me, while confirming a belief I’ve always held about user experience. I’ve always been a proponent of exploration and discovery: the sense of motivation, accomplishment and wonder that comes with being able to finding things on one’s own rather than being bugged by Navi. This notion of overtly spoon-feeding—guided tours, pop-ups and the like—is something that spits in the face of exploration and experimentation… [INSERT BIG ASTERISK] or rather, unless it’s done tastefully.
In fear of veering off-topic, I’ll save you the blabbering and let you take the video for what it is: a prime example of getting your point across while swearing at the same time. But in all seriousness, if you’re reading this, you already understand the fact that you shouldn’t be underestimating or worse, insulting your users’ intelligence.
Nothing annoys somebody more than being forcefully taught something they already know.
