position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.
I’d love to see this implemented in every browser and without vendor prefixes as soon as possible with a real spec. At the moment it just works in Chrome 23.0.1247.0+ and WebKit nightly. I had to build the same behavior with JS for the QUOTE.fm Labs and CSS would make it much easier and faster.
This repo is an experiment in responsive retrofitting. It’s a positive response to more negative (but still much needed) critiques of the mobile web like Brad Frost’s WTF Mobile Web.
This is fun. So what this little bookmarklet does is, it injects a meta tag in the head of website and applies a css file if one exists for the current page which makes the site responsive. At the moment there are only a few stylesheets but anybody can contribute to the project.
Some time ago I started making daringfireball.net responsive because I couldn’t and still can’t understand why John hasn’t done it yet. This isn’t necessary anymore, Ben did it.
Yeah, this project won’t make the web responsive and you always have to click the bookmarklet in order to make the site you are looking at behave bette, but it’s a nice way to practice your responsive development skills and after you did it you could tell the site owner about it and mybe he’ll implement the CSS.
Responsive Websites are the future and it’s good to raise attention for that.
I often come across the problem of widows and orphans when using fully fluid grids, so here are 2 techniques I use to avoid them as much as possible.
Daniel Mall presents two techniques for responsive line breaks. I definitely run into problems with line breaks in my responsive design workflow, so I think I might use his first approach some day. He points out that he uses the second technique but I don’t see the advantage there. The first one looks far simpler to me – with the same result. What do you think?
One line of JavaScript and a few mod_rewrite rules and we have no fuss Automatic Conditional Retina Images.
Shaun Inman posted a solution to automatically load retina images if you are using a retina device. His solution is to set a cookie and then automatically serve the 2x images with a fallback to the normal ones of course. Seems like a nice and easy way.
So far I only added retina images as background images and had no problem thanks to media queries. But this is a nice way for inline images like photographs without serving the big ones to a non-retina device. Sadly it doesn’t work in Firefox at the moment.
For years I was a heavy user of Coda, the web development IDE by Panic. I did all my HTML, CSS and JavaScript work with it and was very happy.
Then I suffered from performance issues with big CSS files and some other minor things bugged me. I knew that Panic was working on Coda 2, but there was no public release schedule. So I tried Espresso – again. But it couldn’t win me over – again. Then Sublime Text 2 entered my field of view. I tried it for a few weeks I guess and then Coda 2 came out. I liked ST2 but I jumped ship to the new version of my beloved Coda. Until a week or so I used it and liked it – but didn’t love it like I loved Coda years ago. So I once again turned to Sublime Text 2. And here I am – in love with this text editor. So let me tell you why.
After using Coda for so long I noticed that I don’t use most of the features if offers. Especially the new Coda 2. It can be great, but it’s not the right approach for me anymore.
I like simple apps. I like it if they do what they’re supposed to do very well, even if it’s not much. Sublime Text 2 has very basic functionality when you install it. It’s just a text editor, not a complete IDE like Coda or Espresso or Dreamweaver. This is new to me, but it seems to suit me very well.
Like I said, ST2 is very simple. You can create projects which basically are a bunch of folders that you can open at once and it saves the currently open files. That’s basically it. No FTP client, no MySQL client, no git, no SVN, and so on.
What is great about ST2 is, that you can expand it in almost every direction you want to. There are a ton of addons that you can install and somehow build the text editor that suits you best.
At the moment I only installed the package manager, LESS and SCSS Syntax Highlighting and the Soda Theme. With ST2 you are not only able to choose your favorite Syntax Highlighting, you can also install your own UI theme. That’s really great. I have a combo for a light ST2 and one for a dark ST2, between which I switch regularly.
There are basically three things that I love and use the hell out of them every day:
First
You can create tab groups. So you can view several files at once. I mostly use two tab groups besides each other. In the left one I almost always have my main CSS file open and on the right I can edit the corresponding HTML. You can also open one file in both groups, this comes in handy from time to time. If you need more than two tab groups, go ahead, create more. It’s completely up to you.
Second
I love Alfred, the application launcher that can also do so much more. I’m kind of a heavy keyboard user, so I love it to just hit CMD + SPACE and start typing – a name of an app I want to open or switch to, start a goole search or whatever. It’s a workflow I’m used to and which I really love. Sublime Text 2 offers exactly that. Just hit CMD + P and open up a little input field. Just start typing a file name, hit enter and open it. It’s so simple and fast. I just love it. It made me hide the sidebar which normally shows all of your project files. I simply don’t need it anymore and thus gain much more space for my actual coding.
You can also hit CMD + SHIFT + P to open up the command palette which offers you a bunch of commands. (Thanks Captain Obvious!)
Third
The search is very fast and very powerful. It took me a day to getting used to it’s behavior because it’s different from what I knew, but it’s really really great.
I’m sure there are a lot more great features of which I don’t know at the moment and I’m looking forward to discover them in the future.
What was a little bit odd for me at first was that there is no real preference pane. You can adjust some things through the menu bar, but if you really want to set something as a standard, you’ve to do it in a simple JSON file. Now I’m used to it and think it’s great. There are a lot of possible options and a lot of people who share there preferences. It’s fun to look at how others have customized their editor and to get inspired. You can find my current preferences here as a gist. I always update it when I change something.
I’m a little sad that I’ve to turn my back on Coda and Panic, but I think I’ll use their FTP client Transmit a lot more in the future. So that should be fine.
For now I’ve found the perfect text editor for me and it’s Sublime Text 2.
I hope you remember my interview with Harry Roberts of csswizardry.com. At one point we talked about his presentation at the FrontTrends conference, which is now finally available for watching online. I encourage every Front End Developer to watch it and also read his blog.
I just installed the iOS6 Developer Beta and found this little gem for Web Developers:
This means that you can connect your Mac Safari to your iOS Safari and use the Developer Tools on your Mac to inspected the Website shown on your iOS device. This will help very much with developing responsive Designs. Love it!
Ever wanted to blur an HTML element? Greyscale its contents? Use Photoshop-style blending modes on it, like „Multiply“? There are two new proposals that do exactly this
Lea Verou started a regular series on .net magazine in which she reports about upcoming cool stuff regarding web development. I’m really excited about CSS filters and blending modes. They will make my life so much easier every time I need to style HTML elements exactly like Marcel did in Photoshop – which is the case almost every day. There some more cool things on the way, so make sure to read the whole piece to stay up to date.
