A few weeks ago Marcel had an idea for a simple iOS app that acts as a sharing service for beautiful Textshots. Never heard the term?
Over the past month more and more people take screenshots of articles with a marked text passage and share the image with a short commentary and the link on Twitter. These screenshots are called Textshots by a group of people. So why not go with it?
As you know I’m not an iOS developer, but Florian is. So Flo and Marcel are in the process of building the iOS app: cite
The app is currently in private beta status and a couple of people will get invited very soon. In the meantime I built the website to promote the app and explain the concept.
It’s a relatively simple one-pager product page and I tried to make it as fast as possible.
The site was developed with vim in iTerm. My CSS preprocessor of choice is SCSS and the build system to put everything together and run a simple dev server is gulp.js.
It’s a static, minified HTML page. I used svg images for easy retina support where possible and picturefill.js for the responsive pixel image.
The sliders are build with Owl Carousel 2, which I used for the first time and I’m very pleased with.
We use Mailchimp to send out news about cite and I implemented a form as simple as possible. All the validation happens after you hit the “Send” button and Mailchimp does everything for us. At first we hid the submit button and only send the form when the user hit enter, but it turns out mobile Safari didn’t like that.
If you want to dig deeper into the codebase, you can do that on GitHub. If you find a bug, please open an issue. Thank you!
<section> in IE6-9. You can download it here from GitHub: https://github.com/aFarkas/html5shiv.
Include the script in the head of your page, so IE knows the new elements before rendering them. You should do that with Conditional Comments to make sure that the file is only loaded for the browsers that need it, in this case IE9 and below.
<!--[if lt IE 9]>
Honestly, it has been a while since I had to think about IE7 or even IE8. Their usage dropped substantially over the past years and months. Sure, for certain audiences they are still a big topic, but luckily in the projects I worked on in the past I could happily ignore those and just was able to just focuse on IE9 and newer. What a nice new world.
But as it turns out in the current project I’m working on we have to at least somehow consider IE7 and IE8 and make things work okay. A page doesn’t need to look the same in every browser, I hope we all have understood that by now, but the site should be usable and the key content should be consumable by your target audience. Read Article …
The responsive redesign of MTV’s news site had a big impact across all devices.
Who would have thought! ∞
Have you ever tried to set a different color for
ol list style items in contrast to the list item text? Sadly there’s no such thing as
Luckily there’s a really easy way around that. If you set the color of the Read Article …
li the text as well as the list item will be affected. You use that definition to color the list style items and then wrap the text inside the
li in another element and set the color of that one, too.
There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a list of them here, since that’s perfect fodder for CSS-Tricks. I ended up slapping it into a table with a few bits of data that are easy to compare, just for fun.
Speaking of the Sass Architecture at Evernote, Chris Coyier recently put together a table with a bunch of Companies which shared their approaches over the past months. ∞
In order best organize all these modules we’ve created four main directories where these files can live. Using the directories: base, layout, modules, and themes helps organize our files in a project and compile CSS into a clean, logical file.
Another post about the Front End Architecture, in this case Sass specifically, of a certain service/product. I really enjoy those posts. ∞
I’d like to get Jekyll 3.0 out the door in Q1 2015 to bring all the amazingness we have been cooking out to you excellent Jekyll users and developers. […] Anything else you’d like to see?
Even though I don’t have any site running Jekyll, I’m a big fan. Version 3.0 is right around the corner and now is the time for you to make your wishes for the coming update. ∞
Microsoft is planning to radically overhaul its web browser in Windows 10. Sources familiar with the company’s Windows plans tell The Verge that the new browser, codenamed Spartan, will include a host of new features not found in rival browsers.
What we know so far about the new Browser, codenamed Spartan, sounds really promising. I’m really excited about how Microsoft is developing itself lately. ∞
Being a freelancer and doing a lot of serious work for clients had me wondering where the fun in just developing simple, little and maybe stupid things has gone.
So last weekend I sat down in the living room in a comfy chair and just started to build this collection of gifs which had been sitting in a folder for quite a while. This simple one-pager automatically loads all the gifs from a folder and shows them in grid with the according url. I used opportunity and learned a few simple things about PHP and tried laying out a grid with Flexbox. Read Article …
The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools.
That’s another awesome addition to the Chrome DevTools. Especially debugging CSS animations can, or I should say could be quite hard. Make sure to check out Val’s screencast demonstrating the feature. ∞