Considerations on Choosing a University CMS
The other day a friend of mine, who works at a university, told me he was on a committee to choose a CMS for the whole university. I definitely don't envy that task, but I do find it quite interesting. …
The other day a friend of mine, who works at a university, told me he was on a committee to choose a CMS for the whole university. I definitely don't envy that task, but I do find it quite interesting. …
The following is a guest post by Nick Moreton. I gotta say I find this idea rather intriguing. I know that I love working in HTML, SVG, and CSS, so when Nick shares that we can use that for structure and use the data directly to style a chart, that appeals to me. And then to know that, because you're using Angular, the chart can automatically change when the data changes... that's just dang cool.…
This is a fairly old UX concept that I haven't heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to in a dropdown menu. It's easy to screw up (have the mouse pointer leave the path) and be penalized by having it close up on you. Perhaps we can make that less …
The following is a guest post by Dennis Gaebel. Dennis created some pretty captivating polygon SVG effects on CodePen, and here he'll share how he did it.…
Since Hack Reactor's Remote Beta online coding school kicked off its first cohort this past July, it’s grown into a program that rivals the company’s renowned onsite course in educational quality and student experience.
In an effort to showcases confidence in the employability of Remote Beta Software Engineers, Hack Reactor has recently announced a need-blind tuition model, never before seen in online immersion education. Starting with the March 23 class:
Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It's not a bug, it's just how CSS works. I've seen it confuse people plenty of times. Let's shine a light on the issue to hopefully make it more understood.…
There are lots of business on the web. One type of those is a website that sells products or services. Those websites employ people who work on the site, incur server costs, material costs, etc. The products and services they provide are useful to people, and they pay for them. Business. Cool.
Those websites need customers. They need people to come to those sites. There are all sorts of ways to do that. Word of mouth. SEO. Wear a costume …
As I write I'm half way through my month-long stay at Hilton Head Health. I like coming here to keep my weight in check. I hope to break some personal records while I'm here this time. It's also been a good way to escape some of the Wisconsin winter. It has been mild up until I left, but it sounds like February has been pretty rough so far. …
Stack is what we use here at Team CSS-Tricks to keep organized. Check out our interview over on their site.
There is a lot to keep track of: article ideas, site bugs, site improvement ideas, guest posts, etc. Also business things like invoicing statuses, accounting tasks, and merchandise. Stack allows us to break all those things up into projects. Then each project has tasks, like "Update the Sprites article" or "Order more green T-Shirts" - which get organized by custom …
First, Last, Invert, Play.
Paul Lewis demonstrates a performant way to approach animations. It's the opposite of how you normally think of them. In this approach, the state you first see elements in is the the result of manipulation from the elements final state. Then you remove all the transforms (et al.) to trigger the animation.…
I was watching ol' Dave Rupert play around with horizontal layouts in CodePen the other day. He found something that I wasn't aware of. A CSS trick, if you will. …
It was only a year and a half ago when Shane Osborne introduced BrowserSync here. It does those things we really love as front end devs: style injection, reloading when necessary, and running a server so you can test across multiple devices and see that stuff happen across all of them. But it did more: synced forms as-you-type, synced scroll position across devices, even followed links so as you navigated around the site all the devices would come …
Ana Tudor produced dozens of beautiful examples, all with just a single <input type="range">. We've covered the how-to before, but Ana goes deeper adding useful functionality and using new uncharted stuff like /deep/.…
Sound advice from Jason Garber.…
Using actual social sharing buttons, as provided by Twitter or Facebook (et al.) is a no-go for most performance-concerned or privacy-concerned websites. Too slow, too dangerous. It's kind of a shame though, as those buttons are nicely functional. An alternative is "share intent" URL's, which generally link to a barebones page in which to share the content. Jonathan Suh shares how you can fancy those up a bit with popup windows. I like it, feels much nicer.…
Dave Rupert digs into the idea of web design technology obsoleting web designers themselves.…
Sprites aren't limited to background-image, as with the object-fit and object-position properties we can nudge an inline image around its content-box to act just like a sprite. …
Give your team the right tools to communicate. HipChat combines IM, group chat rooms, file sharing, screen sharing, video chat and audio calls - into one simple team communication solution.
Don't want to walk to the other side of the office? Relax, your co-workers are just keystrokes away. Big project? Create a group chat room for your team members to collaborate and make decisions. Want to integrate with other tools? We've got over 50 integrations, from the practical like GitHub …
I like Dan Na's introduction here:
Naively, CSS appears easy to comprehend — it doesn't have many programming constructs, and it's a declarative syntax that describes the appearance of the DOM rather than an executable language. Ironically it's this lack of functionality that can make CSS difficult to reason about.
I've tried to make the pitch the preprocessing makes CSS easier (not harder) myself.…
The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I've ever seen on the web. So much so I couldn't resist blogging about them myself several times. Much better this time: we got the man himself to explain how SVG filters work and how you can use them to create a very cool gooey effect.…
You can in Blink/WebKit, anyway. You can't directly in JavaScript, as I'm sure that's some security (or good taste) issue that just isn't allowed. Sites that do it tend to rely on Flash. But it works in the console, and that can be all kinds of useful!…
The following is a guest post by Chris Scott. Chris has written for us before - always on the cutting edge of things. This time Chris shows us something new in the form of a new charting technique his company offers. But it's based on something old: the fundamentals of the web itself.…
Highlighting rows of a table is pretty darn easy in CSS. tr:hover { background: yellow; } does well there. But highlighting columns has always been a little trickier, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript can handle it easily, but Andrew Howe recently emailed me to share a little trick he found on StackOverflow, posted by Matt Walton.
It was a few years old, so …
Ironhack is a coding school that offers full-time, immersive 8-week courses in Web & iOS development. Founded in Madrid and Barcelona, Ironhack recently launched its third campus in Miami and is accepting applications for its March 16th Web Development cohort.
Receive instruction from experts, hailing from leading technology companies such as Spotify, Yahoo and eBay, among others. In addition to teaching relevant technologies, they impart to you their methodologies for making quality software.
Ironhack provides career support to all its …
The following is a guest post by Ana Tudor. Perhaps you know Ana from her amazing work combining code, math, and art. Here, she shows us how we can change the normal behavior of clipping paths by applying some clever geometry, and then make it work across different technology and browsers.…
The following is a guest post by Sarah Drasner (@sarah_edo). Sarah has been researching and giving talks about animation lately. I jumped at the chance to have her share some of that research here, this time focusing on SVG animation and the different tech choices you can make to do it.…
The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It's a vital property for typographic control. Too low and lines are awkwardly squished together; too high and lines are awkwardly far apart. Both inhibit readability. But you probably already know that.
In this article we'll focus on some trickery. If you know (or can figure out) the …
Patrick Stirling of The Guardian shows off some new ads formats they are using. The first two look like they are just using some @media queries to shuffle things around and resize them. I wasn't able to find a live one to look under the hood at though. It would be really neat to see SVG be used for these because 1) you could make it nicely accessible with real text 2) The scale-and-maintain-proportions ability (even text) would seem appealing. …
Jeremy Keith attempts to make this distinction, using Angular and the concept of "enterprise" software as the catalyst.
"Of the web": Built of fundamental principles of the web. Universal access.
"On the web": The web as a delivery mechanism. The owners dictate use.
Jeremy, who has been banging the progressive enhancement drum since forever, is predictably an "of the web" kinda guy. He only takes issue with the fact that other folks might be forced into working against their principals …
The following is a guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross. They emailed me to show me their new website and how performant it was despite having cool features, being visually rich, and responsive. I was like, hey, you should write about it! This is that. Bask in the math.…
Remember Tim Evko's guest post on responsive images in WordPress? Here's some news on that:
srcset attribute instead of <picture>, since it just does resolution switching.Have you seen THIS IS WATER? It's great. It's about choosing to think differently, especially when frustrated. I think about it all the time. For instance, every time someone cuts me off on the road, I assume they are rushing someone to the hospital. It doesn't always work, but it's nice when it does. And it's not just a trick, it's learning to think differently. …
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, …
Matt Mastracci on combining existing positional selectors in interesting ways to create logic you might not have thought possible. For instance, select all elements only if there are five of them, with:
span:first-child:nth-last-child(5),
span:first-child:nth-last-child(5) ~ span {
/* select the span if its BOTH first and 5th from the end, then all spans after it. */
}
The usefulness lies in applying special layout to accommodate unknown markup.
Reminds me of an old CSS parlor trick I saw Estelle …
Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up over time, and there is a hard ceiling to that. I'm sure we've all felt the pain of !important tags and inline styles.
So how do we keep that specificity …
The following is a guest post by Andy Adams (@andyonsoftware). Andy is writing a book on freelancing with WordPress and has some WordPress chops. This post has been on my idea list for ages, so when Andy expressed an interest in writing for the site, I was stoked to have him tackle it. This isn't one of those "a good idea for a rainy day" things, it's a "you must be doing this or you'll probably lose your …
The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming RWD Summit as well! Here, she shares an epic guide to scaling SVG, covering all the ways you might want to do that. It's not nearly as straightforward as scaling raster graphics, but that …
Sometimes it's neat to uncover trends through social metrics.…
Say you're building an SVG icon system. You're building a SVG sprite full of symbols by hand, or using a build tool like IcoMoon or grunt-svgstore to create it for you.
What do you do with that sprite.svg?…
I'd love to say I can choose a typeface based on its history, structure, form, characteristics and fancy stuff like that. But usually it's more like seeing examples like this, being all "woah that looks hot", and imagining how it would work in the project I'm working on.
Created by @femmebot, with submissions by a bunch of folks. As part of this, which is chock full of good ideas.…
The following is a guest post by Geoff Graham. Geoff told me: "I love WordPress plugins but sometimes feel we rely on them without really understanding what they do." Ain't that true? Here, he walks us through how you might build this functionality yourself into WordPress. This might be just the ticket for those of you who resolved to start a podcast in 2015!…
The following is a guest post by Eduardo Bouças (@eduardoboucas). Sass allows you to write nested media queries, which is wonderful in itself, but it's possible to abstract things a bit further. Eduardo tried a bunch of different takes on writing media queries in Sass, from the very simple to the complex. This is one of the reasons I like Sass. The language has all the stuff needed for clever folks to write complex solutions to real problems …
Fourty videos by yours truly covering everything from why and when you should be using SVG, to fun things you can do with it, to little gotchas you might encounter. We go over a variety of build tools to help with implementation of icon systems. We cover places to get your hands on SVG. We look at optimizing SVG with a variety of tools. We discuss SVG accessibility, animation techniques, and software available. There is a lot to know!…
Speaking of "naming things how you would name them", Paul Lloyd:
Regardless of higher-level conventions, there's no getting away from the fact that, at some point, we're still going to have to name things.
Then goes on to list a slew of considerations for a name, including things like considering industry standards, business-specific names, keeping things obvious, consistent, and extendable, and my favorite, names that you make up because they make sense to you.
... at Clearleft we coined the …
Stephen Hay on why "designing in the browser" isn't mutually exclusive to using other design tools.
Creativity is tool-independent.…
Have you ever worried that you're approaching CSS all wrong? That you're missing out on some new approach that makes everything easier and better? That you wish you were more confident about the state of your CSS?
I'm sure we can all empathize with Anna's sentiment here:…
If you need to position a background-image in CSS 20px from the left and 10px from the top, that's easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and 10px from the bottom?
Let's also assume we don't know the exact width and height of the element, which is likely, because fluid layouts and dynamic content. If we did, we could just do a little scratchpad math and …
Eric Range wrote in with this blog post idea. Is it better to wrap a header tag in an anchor link, or the other way around? Assuming HTML5, both of these are completely valid. …