See the Pen Dropbox inspired .card with some CSS animations by Martin Wolf (@martinwolf) on CodePen.
26. September 2014
visuelle Gedanken von Martin Wolf
26. September 2014
See the Pen Dropbox inspired .card with some CSS animations by Martin Wolf (@martinwolf) on CodePen.
27. April 2014
It’s sunday again already. Most of the past week I was on vacation and followed the web community only a little. Let’s see what we’ve got:
12 Little-Known CSS Facts
I’m sure there is something in there for everyone.
Meet finch
View your local websites on any internet connected device, it’s really awesome and currently in some kind of beta and free to use. I highly recommend you give it a try.
A Different Letter to a Junior Designer
Fits for Developers as well.
Sizer Soze
An analytics tools to find out what the cost of your non-responsive images is.
Inline SVG vs Icon Fonts
Spoiler: If you can get away with the browser support, Inline SVG wins. However, read the article.
One of those “Things I’m Learning the Hard Way†posts
Meagan Fisher about her experiences going freelance as a designer.
elf02 WordPress Responsive Images Plugin
Another interesting approach to incorporate responsive images with picturefill v2 into WordPress. Fully backwards compatible if you someday choose to disable the plugin. Looks pretty good to me, but haven’t tried it, yet.
Coast CMS
Make a static site editable with this database-free CMS.
20. April 2014
Happy Easter everyone! It was a slow week for me and thus it’s the shortest list since starting the Weekly Recap series, I apologise. Nevertheless, enjoy the links and don’t forget so spend some time with your family. Cheers!
CSSconf EU 2014
After the huge success last year, the CSSconf EU is coming back this year. I hope to be there this year.
gulp – The vision, history, and future of the project
Interesting background information on gulp.js.
Picturefill
Picturefill Version 2 (Alpha) with native picture element support by Scott Jehl is here.
WordPress 3.9 “Smithâ€
Version 3.9 of WordPress was released this week. It features easier image upload and editing and much more. I use it on this blog since it’s early alpha and recommend you update you blog, too.
Hassle Free Responsive Images for WordPress
Interesting and well done solution but I’m hesitant to using it because if one would ever disable this plugin, all the shortcodes and therefore all images won’t work anymore.
IcoMoon
If you work with icon fonts, this is THE web app for you. I use it all the time to create custom icon fonts.
14. April 2014
I use CodePen a lot for testing little things or getting to the bottom of a problem. Often I just need to color some divs or the like and I always fall back to using red
or blue
or green
or simple hex codes like #000
or #ccc
.
Recently I couldn’t take it anymore. Even though these are often only temporary pens I want them to please my eye at least a little bit. I remembered that there were some more predefined color names that one could use. What I found out was that there are actually 147 color keywords defined in the CSS3 Color Module. Pretty impressive.
I created a CodePen showing them off so I can go there and grab a nice color next time I need one.
See the Pen 147 CSS3 Color Module color keywords by Martin Wolf (@martinwolf) on CodePen.
13. April 2014
It’s already sunday again, so here I am bringing you a bunch of hot links gathered over the past week. It’s a nice mix of technical posts and articles about meta topics concerning developers.
Your Home Town Needs You
Maybe Silicon Valley or Brooklyn doesn’t need another you. Maybe you even like your home town.
Scroll performance / behavior in Atom Editor
If you are, like me, having trouble with the very fast scrolling in Atom Editor this hack can temporarily fix this for you. I hope they’ll implement some kind of option or just make it behave like all the other apps.
Dream on
Mark Otto explains why Frameworks are not to blame for the problems of modern designers and developers.
Pesticide
Having trouble debugging your CSS layout? This little tool could help you.
How To Be A Great Developer
Very good advice.
Fox fox’s sake!
Christian Heilmann about what it’s like to work at Mozilla. Sounds like an awesome place to be.
TouchyJS
If you are doing a lot of work with touch events, this small jQuery plugin might save your day.
Rethinking What We Mean by ‘Mobile Web’
Whether you use a browser or an app. It’s all the web. Very good article by John Gruber.
Ethan Marcotte on how responsive web design came about
A conversation with Ethan Marcotte about responsive design and his career.
Unleash the force of html5 apps – or why html5 apps aren’t that bad.
Good article summarizing the differences between HTML5 and native apps. I have to agree but I don’t think that is example app at the end is particularly good. Or at least it has a lot of little nuances that I think are distracting and don’t have to be there – or shouldn’t be there.
Twitter rolls out new facebook-like profiles
Here, have a few examples of Twitter's new web profiles:
https://t.co/awV2NLZrsM
https://t.co/fYkexzCp2c
https://t.co/DsUZ4jr1FL
— Marcel Wichmann (@UARRR) April 8, 2014
10. April 2014
While I work on a project I usually need two iTerm tabs. One to start and monitor my grunt tasks and one for doing git. So every time I start working I have to navigate to a folder two times.
So I searched for a way to open a new tab with the current directory but didn’t find anything. (Yes, for most projects I have an alias, but it’s still more „work“.)
But what I did find instead was an option to always open a new tab with the current directory. And that’s all I need.
Go to Preferences -> Profiles -> General
and under Working Directory
choose Reuse previous session's directory
.
07. April 2014
I’m currently experimenting with the HTML 5 App Cache. It’s important to know that the HTML5 appcache is different from the normal browser cache. Basically you link a manifest appcache file in your html which has instructions on which files the browser should cache and which it should always load new.
<html manifest="cache.appcache">
Your site goes here.
</html>
Example contents of a cache manifest:
CACHE MANIFEST
# These files will be explicitly cached
CACHE:
index.html
css/styles.min.css
js/scripts.min.js
img/logo.svg
# All other files require the user to be online
NETWORK:
*
In my recent experience the cache works very well, sometimes even too well. It will delete and cache all files new which are otherwise explicitly cached if you change anything in the cache manifest file. You could for example add a timestamp. But this seems to not always work or be at least a little dogged. So if you want to delete the appcache of Chrome for example manually you can do this by going to
chrome://appcache-internals/
and just delete what you don’t need anymore. It’s also just interesting to have a look at what you already gathered while surfing around the web.
In Safari it’s not that easy, but you can find an explanation on stackoverflow.
To have a look at your caches in Firefox you can go to
about:cache?device=offline
But you don’t have the option to delete them there. For that you have can go to Preferences -> Advanced -> Network. Here you find „Offline Web Content and User Data“.
Go ahead and experiment with the HTML5 app cache. It’s pretty cool especially for mobile web apps.
06. April 2014
Hello lovely readers. This week was a busy one for me so I didn’t manage to read a lot and thus the list is a little shorter than in the past. But there are still very good articles in here. Have fun!
Bringing Responsive Images to Browsers
We did it, we as a community funded the implementation of picture
into blink and webkit.
How Gmail Happened: The Inside Story of Its Launch 10 Years Ago
Very good and interesting long form article on how Gmail came to be.
List of Pseudo-Elements to Style Form Controls
The kind of article that one should bookmark and be happy about when the time comes.
The Values of the Web
An ode to the web community by Brad Frost.
CSS performance revisited: selectors, bloat and expensive styles
A lot of insights into modern CSS performance.
visibility: visible undoes visibility: hidden
Interesting find by Jake Archibald.
Brendan Eich Steps Down as Mozilla CEO
Shortly after becoming CEO, Brendan Eich steps down due to all the things surrounding him supporting an anti-gay marriage campaign financially in the past.
Atom Editor Package: Mobile Preview
This package shows a mobile preview right inside of Atom. I had trouble making the refresh work properly, but it’s a great addition to Atom if it works.
Workspiration
If you the kind of person who likes to read about how and with what hard- and software others work, this is for you. It’s kinda like The Setup.
30. März 2014
Hello everybody! It’s sunday again and this means it’s time for some link tips for you guys. A lot of good stuff this week. Let’s do this:
A Q&A on the Picture Element
Read this to get an insight on the progress of the picture
element implementation. Very interesting.
WTF, HTML and CSS?
A list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. Curated by Mark Otto.
Spring Editor Upgrades!
CodePen updated their editor. Read about the changes and additions here.
Choose tools you’ll use
Short but important advice. Learn the basics first and then move on to tools.
How to go freelance
A guide and a lot of tips on how to go freelance.
Our Enclosed Space
Very important piece stating that and explaining why the gap between the “thought leaders†of the web and the reality of people doing great work for clients on often extremely limited budgets widens.
Shop Talk Show Special: One on One with a Hacker
Chris Coyier interviews the guys who hacked CSS-Tricks. This is a weird, interesting and awesome podcast episode. And it shows what a great guys Chris is. Must-Listen.
2014 State of Element Queries
Tab Atkins summarizes the state of Element Queries and presents some ideas on how to make them work. (His site seems to offline as of publishing this article, but I hope it’s back up soon.)
Device State Detection with CSS Media Queries and JavaScript
Brilliant system by David Walsh. I’ll definitely consider using that in one of my next projects.
Readmill Team gets acqui-hired by Dropbox
Another Social Reading service gone. I’m likewise happy for the guys and sad because of losing the service/product.
29. März 2014
As you might know I’m a big fan of the BEM Syntax. If you haven’t heard of it, it’s basically a way to name your CSS classes in a way that makes sense and gives everybody involved with writing CSS for the site some knowledge of the structure. It really helps to write modular CSS and makes it easy to understand the code even if you get into a project later on.
BEM stands for Block Element Modifier. Here is an example to get you started:
.nav {
// This is the BLOCK
margin-bottom: 20px;
}
.nav__item {
// This is the ELEMENT
color: #000;
}
.nav__item--active {
// this is the MODIFIER
color: #1193e5;
}
Some people don’t like how the notation looks, but I assure you it works really well and even some people I first had to convince are totally stoked now.
Now let’s look at Sass 3.3 and what it has to offer.
With Sass you can use &
to reference the selector which is already in place if you want to nest code. Just like this:
.nav {
margin-bottom: 20px;
& a {
color: #000;
}
}
This compiles to the following CSS:
.nav {
margin-bottom: 20px;
}
.nav a {
color: #000;
}
That’s pretty nice and straightforward and helps a lot in authoring CSS. With Sass 3.3 it gets even better if you are a BEM guy or gal. Now you can write our first example like this and get the exact same CSS output only that your Sass looks cleaner and you have less to write:
.nav {
// This is the BLOCK
margin-bottom: 20px;
&__item {
// This is the ELEMENT
color: #000;
&--active {
// this is the MODIFIER
color: #1193e5;
}
}
}
The CSS output looks as follows:
.nav {
margin-bottom: 20px;
}
.nav__item {
color: #000;
}
.nav__item--active {
color: #1193e5;
}
I haven’t used that in production myself yet, but I will as soon as possible because I think it’s great. But I can imagine that if one would nest to deep it can get a little confusing. But the good thing is, just because you use it in one place doesn’t mean you have to use it every time. Nevertheless, make sure you Sass follows some kind of style guide.
Now if you ask yourself if you have Sass 3.3 installed you can check this by typing
$ sass -v
into you console of choice. If you are not on 3.3 you can update with
$ sudo gem install sass
After installing check if everything went well with
$ sass -v
As of writing this post Sass is at Version 3.3.4 (Maptastic Maple).
If you have any questions or suggestions, feel free to send me a tweet at @_martinwolf or write an email at martin@visuellegedanken.de
Hope this article helps some of you. Have a nice day!