Here is a handy collection of websites that will generate new files and improved versions of your files:
- TinyPNG: TinyPNG will take any .png file, and return a compressed version of it. The compression isn't lossless, but I can very rarely detect any difference in the files. They even have an API.
You may ask whether file sizes still matter in this day of high bandwidth connections. My answer is fishslap - of course they do. File sizes matter in mobile contexts, for any one with a slow or poor network connection, and at those conferences where every attendee and and their 3 devices are clogging the wifi.
- Favicon Generator: This will transform a number of image files into a nice tidy icon file; which you can use as a favicon (that image that appears in a site's tab, URL bar and bookmarks).
- Data URI / Base64 encoder: This actually does the opposite of generating files. Given an uploaded file it'll output a Base64 data URI; a string which you can use in place of an image file. This is super handy for standalone demos.
Here's another wonderful transcribed voicemail from Google:
Hi Sweetie it's a little bit after one I want to let you know that apartment and I are doing and she has the outgrowth this house, religion, the 6th in between so I can find. So.
To be fair, it got "Hi Sweetie it's a little bit after one" correct.
During the second lunch break, an attendee and I were chatting and he was emphatically pitching his upcoming start-up conference. This continued for an awkwardly long time, and he said that I should really consider coming to his conference to teach people to make robots. I said that I thought it was kind of wonderful that he thought I could teach people to make robots, but that I was going somewhere else...
That evening at dinner with some people, I told the story of these two encounters. We laughed and agreed that the situation was pretty silly. I admitted that sometimes I couldn't tell apart the multitude of white dude developers apart, either.
Even later, at the after party, I was talking one of my new friends from dinner who happened to be a speaker. A fellow came up to us and said that he really liked her talk on browser audio as well as my talk on robots. My friend and I turned to each other and had a good laugh and then I explained to this third attendee that I was not CJ.
Later still, I found CJ at the after party and told her this story, and we agreed that the pattern was hilarious. The official event photographer happened to take a picture of us; which I hope to share sometime.
There are a few possible interpretations of this pattern of encounters - from attendee eyesight to the impermanence of conference chats, but here's the most important message I see: There are too many women at the conference to rely on the cognitive shorthand of "the woman" or even "the brunette". Women are populous enough to necessitate identification as individuals. To me, this is a wonderful thing.
Here are a few things for working with commits and previous file versions.
git revert [sha]
- Roll back to the previous commit, throwing away all changes that you haven't yet committed.
git checkout -b [branch-name] [sha]
- Check out an old commit to a new branch so that you can fiddle with it.
git checkout origin/master -- [file]
- Replace the current working directory version of that file with the one from master. This is great for reverting a bunch of changes.
git add -A
- The above block is 2 sequential git commands which will allow you to save your work in the middle of a commit, and come back to it later. In detail:
Now you can do whatever you need to do next, such as checkout another branch or switch projects. When you're ready to come back to your stashed work:
- Save all changed, added and deleted files to the index
- Save that work into a magic "stash".
git stash pop
git stash list
- List all of the stuff you've previously stashed.
git stash apply --index
- Applies your most recently stashed work back to your working index. You must also
git stash drop [stash name] to remove that particular stash from the list of stashed stuff.
git stash pop as used above just handles all of this for you.
I made this bowl during a May 2010 class at Seattle Glassblowing Studio during a Beginner's II class. To this day, bowls remain one of my favorite forms to make.
The pink spots are "ghetto murrini" - cane cut into discs and then warmed on a kiln shelf until they're hot enough to pick up with the bubble of the bowl. The white is a standard lip wrap that didn't quite get hot enough and came on thick and blobby.
This technique is worth experimenting with again, and the pink and white color combination is always classy. As always, thanks to the husband for the photography.
Here is a list of books about Sass (Syntactically Awesome Stylesheets Sass), the CSS pre-compilier:
Here are my takeaway notes from Sassconf 2013 earlier this month, with a few examples that I hacked together and links to various pieces of awesome. These are the thoughts that happened to stick with me, and are probably not that cohesive outside of the context of conference.
Cheap Sass Tricks - John W. Long
- Unsemantic - A percentage-based grid system which is brilliant when combined with Sass's placeholder selectors.
- Sass can do awesome color math. Examples:
$newcolor: rgba($color, .5); and
- Use Sass's placeholder selectors (%).
- CSS Spinners.com - A collection of CSS only waiting spinners, also available via Github (which contains the .scss) and Bower. Contributions and pull requests welcome!
Sass at GitHub - Ben Bleikamp
- Instead of developer -> QA, do pull request -> peer review (repeat as needed).
- Mistakes will always happen; the cure is to make it easy to report them.
- Github's Living Styleguide
- If you want contributions, tell people what's expected in their commits. Best: add a CONTRIBUTING file.
We're more concerned with how our page loads for users than how clever our CSS is.
- SQL Explain for CSS Selectors
- Use the things you build.
- Keeping things simple helps avoid browser bugs due to edge cases.
It Takes a Village to Raise a Website - Chris Eppstein
- A developer should be critical of their own ecosystem; they should be able to see potential for change.
Don't be a Sasshole. Be positive.
- Evolve from a crazy person into an evangelist.
My passion is my job. This is a secret to life.
- Upcoming in Compass: no more Blueprint, fixed bugs and removed cruft, less Ruby and more Sass, more Sass tools and fewer CSS tools.
Sass: Bridging the Designer/Developer Gap - Bermon Painter
- A better workflow for design / develop is style tiles / element collages.
Clean out your junk drawer - Dale Sande
- Learn from doing it wrong.
- Manifest: a giant collection of imports of used styles.
- _config.scss: all logic, no CSS.
- Also, Sassmeister's new feature: HTML for more contextual demos! Amazeballs.
Show Your Work & Share Your Toys - Eric Meyer
- Contribute. You don't need anything revolutionary. Just push your code.
Whatever you document is what exists.
The Front End Revolution: A Call to Arms - Hampton Catlin
- Now it's CSS3. Now it's CSS2. Now it's CSS3.
"We're gonna have to sue you." "...Or you could buy it."
Sweating the Small Stuff - Tim Hettler
- The actual problems and solutions for translating small details from a Photoshop comp into CSS (and how that's way easier with Sass).
- Designers and developers speak different languages.
"Thanks for making my work obsolete." "Welcome to open-source!"
Programming? In MY CSS? - Jackie Balzer
- A function returns a value; a mixin outputs CSS.
- Damn - look at all the color functions.
Getting Sassy With Foundation 4 - Caleb Winters
- Foundation is a front end framework focused on mobile-first design built with Sass.
- There are two versions - standalone and with Compass.
- Foundation 4 drops IE8 support.
- Nest the grid for more columns.
- Tons of elements already exist, and can be configured with variables.
- Sites built with Foundation: Treehouse, Runway2Street, most NBC sites.
Take the Pain out of Sass - Ian Carrico
- Install homebrew
- Then install rbenv:
brew install rebenv ruby-build ## rbenv helps to run multiple versions of R
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile ## Add something to your bash_profile
rbenv install 2.0.0-p247 ## Install a new version of Ruby
rbenv rehash ## magic
rbenv global 2.0.0-p247 ## more magic
.ruby-version file ## root of all projects, IDs Ruby version. Ex: 1.8.7-p358
bundle install # in a dir to install appropriate gems
bundle exec compass compile # Use bundler's gem version managed version of Compass compile. bundle exec = managed version of thing
- Create a gemfile for the day when things break. For any Sass project, list the version of gems you're using.
- Default Mac Ruby requires
Designing in the Browser - Mason Wendell
It's not about anti-Photoshop; it's about the best tool for the job.
- When in doubt, share your stuff. That's the thing to do.
- Style tiles include little notes about what the selected images was reflecting; the core goal of the design.
- Entire Slide deck
- Slide 4: Stuff I Use - Mason's configuration, tools and apps.
- Mason's Sublime Text configuration
- Survival Kit - A starter set of HTML, Sass and various sundry files
The Panel - John Athayde, Elyse Holladay, Rachel Ober and Pam Selle
- Make Fridays "technical debt Fridays". No one wants to release new code on a Friday, so sweep up all those cobwebs that you've been meaning to get to.
- Refactoring is iterative.
- If you aren't looking at the CSS rendered by your Sass, you're doing it wrong.
- Ninety-five percent (roughly) of Sassconf attendees prefer .scss syntax to .sass syntax.
If you need more links to Twitters, decks, tools and repos, check out the awesome list o' links by Una Kravets or the 2013 Sassconf schedule.