CSS-Trickshttps://css-tricks.com
Tips, Tricks, and Techniques on using Cascading Style Sheets.Tue, 03 Mar 2015 20:12:16 +0000en-UShourly1http://wordpress.org/?v=4.1.1Considerations on Choosing a University CMShttps://css-tricks.com/considerations-on-choosing-a-university-cms/
https://css-tricks.com/considerations-on-choosing-a-university-cms/#commentsThu, 26 Feb 2015 21:08:34 +0000http://css-tricks.com/?p=196014The 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.

A lot of us have probably seen companies/institutions make what seems to be embarrassingly bad tech choices. For instance, paying unbelievable monthly fees for simple things like email and calendars when they could be using better and comparatively free Google …

]]>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.

A lot of us have probably seen companies/institutions make what seems to be embarrassingly bad tech choices. For instance, paying unbelievable monthly fees for simple things like email and calendars when they could be using better and comparatively free Google services (we yell, while nobody listens).

That's one of the places my mind immediately went when this comes up. Oh wow! What a great opportunity to save this large institution from wasting millions on some weird sleezy software contract and get them on something just as powerful and potentially free.

The other place my mind went is right to some tech that I would go with, if I was in charge. It would be so interesting to do this with WordPress Multisite! Just one set of software to keep updated. Yet, different departments could have their own sites with their own administrative control. Assets could be shared as needed, but each site could be as unique as needed as well. Fun!

I even asked on Twitter for other suggestions as well:

From a friend: “I’m on the committee to pick a CMS for our entire university. Opinions?”
I’ll relay yours!

Turns out: cart before horse.

It's thinking like I was doing that gets companies into messy situations to begin with. Some TECH DUDE who's got it all figured out before the considerations are even made very clear.

There is a lot more to consider than just tech.

Who's going to implement and work on this CMS?

You know how many IT employees they had to work on this and maintain it? Zero.

Yep, zero. They don't really have a true IT department (or whatever you want to call it) to manage the university's website(s).

They also aren't really looking to change that fact. They aren't trying to build a new department for that. They aren't trying to contract or hire freelancers to do it. They are trying to just buy a hosted CMS system. Probably from a company that specializes in that kind of thing. A company they can work with the set it up. A company they can call for help, or more likely, have an ongoing contract with to support.

Part of that reasoning is...

Capex vs Opex

That is, "Capital expenditure" vs Operating expenditure". This looks to be a decent article on that. It's a big differences for business like a university. One is deductible, one isn't.

@chriscoyier One big issue is HOW they pay—license fees are capital expenses, developer costs are not.

I'm sure there are other big important considerations here as well that are above my head.

But suddenly, spending a million bucks on a CMS contract doesn't seem so out of the question. Imagine trying to hire a whole team of local developers to take this project on. It would be hard, slow, and cost just as much if not more. And there is no guarantee it'll be better, in fact it feels more like a gamble.

As Karen says:

@chriscoyier Some orgs have an easier time paying a $500k license fee than paying for Drupal/WP devs

It's not the CMS

Any CMS can do CMSy things.

Obviously it needs to have custom data structures, custom templates, custom URL design. You should be able to build the kind of site you want with it. Some CMSs are more opinionated than others in this regard, but any one worth its salt is a tool toward building the site you need.

It's the CMS

And yet... it's certainly still worth your time to consider what CMS's offer and how they handle certain things.

Can the CMS manage multiple sites?

What is your mobile plan? Can the CMS deal with that?

What is the upgrade process like?

What is the documentation like?

Is community around the CMS important?

Is there paid support available?

Can it handle permission levels that match the university's structure?

Should you want or need to hire out to help with it, is that possible? Easy?

What features can you imagine your CMS needing? Now vs in a few years time? (e.g. "Let's add a forum! Let's give students profiles! We need a chat room!")

Have you thought about security? Backups?

Who's going to be actually using this CMS?

This is perhaps the most important consideration.

Not who's going to be using the website. That's students and prospective students and yes that's all important stuff but not what we're dealing with right now.

Who is going to be adding content, managing content, basically the primary user of the CMS? Can you give them a CMS that is perfect for their needs? That is easy for them to use? That allows them to wrangle that content in the most useful and effective possible way?

Karen, again:

@chriscoyier Less important which one they pick, way more important that they plan for time required to define and customize author UX.

The right CMS is a customized one — right? Can you build input screens that are perfectly custom to what these people need? Can you make sure they don't resort to copying and pasting from Word? From linking up PDFs?

Insanity, confusion

I am not at all envious of my friend because of this. I just can't imagine a world in which a committee like this, conversations and meetings like the ones he's having aren't filled with insanity, confusion, and bullsh*t.

Probably some lightly bad stuff like people that are involved that probably shouldn't be. People that just aren't grasping what's going on. Important people not contributing.

And then probably some awful stuff like people posturing for control. Red tape. Power struggles.

I don't really have any advice for all that, except to say that it can't be ignored. The human part of all this is just as big a part than the intellectual tech discovery stuff.

I'm probably not going to maintain this list over time, but if you feel like chiming in about what universities are using what (and even better, how that's working for them) in the comments, please do!

]]>https://css-tricks.com/considerations-on-choosing-a-university-cms/feed/42Using AngularJS for Data Visualisationshttps://css-tricks.com/using-angularjs-for-data-visualisations/
https://css-tricks.com/using-angularjs-for-data-visualisations/#commentsWed, 25 Feb 2015 17:02:51 +0000http://css-tricks.com/?p=196752The 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.

]]>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.

As soon as I began playing around with AngularJS it struck me that its ability to grab data and use it directly in markup could offer a real quick and simple way to create data visualizations.

In this tutorial I will run through creating three different sorts of charts using both inline CSS and SVG.

Why Angular?

If you've ever written to the DOM from JavaScript or jQuery you will know how quickly your code can begin to look messy, especially if you are using several variables. Angular allows for data to be used right in the markup, leading to clean, easy to read and understand code.

There are also some great visualization libraries out there, but they come with a lot of default styling right out of the box. By using Angular, the visualizations are completely unopinionated, and will pick up your style right off the bat.

I'm not saying this is the best way of creating data visualizations, but it certainly appeals to me!

Note: I won't go through every aspect of Angular here, such as how the apps, controllers, etc work - I will be concentrating on the data. I have written 'A Hello World In AngularJS' that may help you understand some of that stuff, and there are plenty of other great resources around for getting started with Angular

Setting up our Angular App

Basic App setup

Firstly we need to set up an Angular app and a controller to house our functionality and data.

In the HTML we can start to pull the data out of the JavaScript directly in to the markup, both as content (such as the X and Y labels) and as inline style to control the height and width of our chart.

Note: The 'y' div uses the {{height}} variable for the width CSS property - this is because in our CSS we will rotate this counter clockwise by 90 degrees

The height is the value, divided by the maximum (as set up in our Angular app), multiplied by the total height of our chart. This ensures that the highest value in our data will take up the full height of the chart.

The width is the total width divided by the number of entries, with 5px knocked off to create some spacing once we place our bars on the X axis.

Finally, we need to position the bars along the X axis using the left CSS property.

Here, we are using $index, an Angular variable that will start at 0 and increase for each subsequent bar. We divide the index by the total number of entries and multiply this by the full width of the chart. This places the first bar at 0 and then spaces the rest of the bars equally across the chart.

It's worth noting here that if you wish to have a fluid chart you could multiply by 100 and use % as the unit rather than pixels.

And that's it - our bar chart has now been created and you can start getting fancy with your CSS to style it up!

SVG Line Chart

I'm rotating the SVG as by default it processes values from the top, and we need this to flipped to take values from the bottom.

Firstly, we need to create an SVG that spans the full area of our graph, and then inside that use our ng-repeat on a line element.

Each line element requires a start and end point on both the X (x1, x2) and Y (y1, y2) axis.

The X axis is pretty simple - we follow the same system as before, so that each line is spaced out evenly across the chart, starting at 0 using $index, and ending where the next line starts, using $index + 1.

For the Y axis this is where the $index variable comes in to its own, as it allows us to select values from previous or next entries in our array.

The initial Y point of each line gets the value from the previous data entry using data[$index - 1].value before we then apply similar maths as before. For the second Y point we can just call the straight value from the entry.

This may sound complicated (and I can assure you that working it out was a bit of a head shrinker!) but hopefully this explanation coupled with the code below should help you make sense of it!

Where next?

You can use the $index variable in class names too, like this <element class="classname{{$index}}"> which allows for fine control of each bar, dot or line - which we can use to animate these visualizations.

I have worked up a full dot/line chart example with animation, as well as CSS tooltips using the labels from each entry in our data. You can see this here.

]]>https://css-tricks.com/using-angularjs-for-data-visualisations/feed/19Dropdown Menus with More Forgiving Mouse Movement Pathshttps://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/
https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/#commentsMon, 23 Feb 2015 22:24:10 +0000http://css-tricks.com/?p=196605This 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 …

]]>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 frustrating.

You can get to the menu item you want, but there are some narrow passages along the way.Many dropdowns are designed such that when the right area isn't in :hover, or a mouseleave or mouseout occurs, the submenu where the desired menu item is may close on you.

A Basic CSS Approach

Dropdown menus are typically designed such that a submenu is revealed through CSS on a :hover of a parent element. Or on a mouseenter / mouseover in JavaScript and a state change. So the trick is to try and prevent any of those events from happening too easily. Widen up the corridors, as it were.

The whole reason I got to thinking about this is because the corridors were mighty narrow for our submenus in the main dropdown at CodePen. To widen them up at the choke point, I added a couple of pseudo elements to the submenu. If the mouse goes over those, nothing happens, it's just like the mouse is within the submenu as normal.

The red there is just to demonstrate where those pseudo elements are positioned.

This is a super lightweight technique requiring only CSS, which I like. The slight danger is that you can cover up a decent amount of adjacent menu items, which could mean a user hovering over a legit menu item and not being able to click it. I imagine in a lot of cases they just move the mouse a little and it works, but it's definitely a balancing act between too small and too big.

Widening CSS Boundaries

(Un)hover intent

Have you heard of "hover intent"? It's this concept where you don't trigger a response right away to mouse location events. You wait a split second, that way you can be sure the user wanted a reaction. It's like intentional lag. It's used in situations where the UI might be too twitchy without it.

The opposite of that we could call unhover intent. Like we react to a hover event immediately, but don't react to a hover off for a little bit. In CSS, you could do something like:

JavaScript is certainly capable of unhover intent as well. You'd approach it kind of like a debounce, where you wouldn't call the functions that do the closing unless some time has passed. That could be done with a setTimeout that you clear if the mouse comes back on. This is overly simplistic, but:

Get fancy with a JavaScript-built triangle

There is a great post from a few years ago by Ben Kames on this subject. He was checking out how snappy the Amazon.com dropdown menus were, compared to other dropdowns that use delay tactics to handle the usability. The magic turned out to be math! If the mouse traveled at a reasonable angle toward the newly-opened submenu, it wouldn't trigger the other menu items. Visual aid:

Other Concerns

I think a wise person once said:

"Sometimes visitors to your website will have a mouse and sometimes they won't."

So, hopefully your dropdowns work with touch as well. You certainly can make them work! You can also make the call if you want to bundle all code together for efficiency, or if some kind of feature detection is in order to load different scripts and styles as needed (or a combo of both).

Keyboard accessibility is another classic concern with dropdown menus. I just didn't want to leave you with the idea that helping mouse movement is all you need to do for good dropdown UX. There is always something to improve!

]]>https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/feed/30Polylionhttps://css-tricks.com/polylion/
https://css-tricks.com/polylion/#commentsFri, 20 Feb 2015 13:04:55 +0000http://css-tricks.com/?p=196308The 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.

Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simplicity of the animation effect was easy enough to grok since I wasn't doing anything super crazy code wise, but I guess the end result was that cool. …

]]>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.

Sometimes the things you least expect, gain the most attention as the case was with the Polylion I posted on CodePen. I figured the simplicity of the animation effect was easy enough to grok since I wasn't doing anything super crazy code wise, but I guess the end result was that cool. I'd like to share with all of you how and why this animation went down.

The Polylion Effect

If you don't follow me on Twitter then let me fill you in. I'm writing an entire series of articles for Tuts+ focusing on TimelineMax by GreenSock. Essentially it flows from beginner to advanced and provides working examples for readers to put to the test themselves. The study with polygon animations also began as practice with a project I did for Jonno Riekwel at Polyon so it was basically a win-win for everyone.

The Polyman

I started my research by examining the Polyman SVG I found on CodePen. Originally it was accomplished with CSS (also explodes on hover \o/), but I wanted to investigate the abilities of finer control with each polygon shape. The result is what you see below using TimelineMax to display the polygons at once.

The Polyman SVG using TimelineMax

Since the SVG contained portions of the man (ears, face, etc.) within <g> tags it made hooking to each one a cinch with JavaScript. Since SVG is XML everything that creates it is simply a node. In jQuery land the selector would be like this: $('svg g#shirt path').

Polylion Setup

For the lion I wanted to grab each polygon element individually $('svg.polylion > polygon') for maximum control and give each one a cascading effect as you saw. Obviously the result is super dope and frankly not terrible at all to make move. Let me explain how the lion got it's mojo.

Since I meander around frequently on CodePen I caught a glimpse of the lion posted by Dmytro Batarin's Pen SVG Low Poly Lion which appeared to have been originally posted on Dribbble by Breno Bitencourt who also wrote about the process of making polygon vector work here. In case you don't have time to read the article Breno wrote; the entire SVG is made by hand. There is no smoke and mirrors behind it at all and apparently it's the only way to get the best results at this time.

Making A Polygon SVG The Old Fashioned Way…By Hand!

Since the design part was already done for me the only thing I really needed to do was integrate TimelineMax and adjust my config as such in order to achieve the effect I was after.

Not too much to this SVG. Besides the fact we know it was difficult to make, the output is pretty straight forward. If you're not familiar with the polygon element you can read more about it here. The polygon element defines a closed shape consisting of a set of connected straight line segments.

JavaScript was the only way to count the polygons in order to avoid using fingers and toes. As I mentioned earlier, GreenSock's TimelineMax was used in order to control each polygon shape.

I started with my initial setup for TimelineMax involving a few variables like the config (tmax_options) and the timeline constructor (TimelineMax()).

Based on the config represented as an object literal, the lion sequence is delaying the initial play state by 0.25 seconds, repeating the animation, delaying the sequence by 0.25 seconds on playback and finally setting the yoyo value to true so the polylion sequence animates in reverse.

Setup

For the remaining bits of my setup I define a few variables for reference at a later point in my code.

The only way to count the number of polygons dynamically was with JavaScript and that's exactly what we're using (we query for them all, then count the length of the set it returns). The svg_shapes variable is just an empty array that I'll explain in more detail momentarily. The rest is for easier config that defines how long the entire animation duration lasts in seconds and the amount I want each polygon to stagger by during playback.

Since the first argument of TimelineMax can be an array of elements I count each one within a loop and push the results into the empty array we created earlier. Also note we're grabbing each polygon individually using the :nth-of-type CSS selector.

The rest of the config is standard settings stuff, but this is where the magic happens. Our first object literal holds the CSS properties and values we'd like the object to animate from and the second object literal are the properties we're animating towards. What really makes this whole thing pop is the Elastic easing that gives the piece it's subtle bounce.

Yeah, but this is "CSS-Tricks" not "JS-Tricks"

I hear ya. We still would probably use JavaScript to count the polygons, but once we know that, we can create a loop using a pre-processor like Sass, LESS or Stylus to do the work. Let's try using the powers of Sass and this lion created by Jord Riekwel (@Larkef) for the Polyon project I previously mentioned.

Here's an example of the Polyman TimelineMax animation above using only CSS for the effect.

In order to obtain the numbers for my loops in Sass I used JavaScript to count the length of the polygons that existed. I also went through by hand to separate the mane from the face so we could control those sections independently. I took each polygon element relating to the face along with the mane and grouped them within a <g> tag. You can see for yourself in the HTML output of the haml in the pen above. As I was saying, in order to count the length of the polygons I used JavaScript which looked like this…

A few things like width and height are set and we also configure an animation that states "go from the currently set properties in the declaration to these property values indicated here."

The next steps are to remove the object entirely from view initially (i.e make invisible). The scale transformation and opacity values used in the code that follows are shrinking and hiding the polygons in order to make the lion invisible. We're also saying we'd like the point of origin to be the direct center of the polygons themselves when they transform. This essentially breaks down to the object animating from the center of themselves outwards.

To make one final polish to the block above I'll add a couple more lines for a fallback in case JS is turned off or the animation property has no support. For this task I'm using Modernizr and it's feature classes placed on the HTML tag.

Now we need to delay the polygons for the lion's face slightly from one another and also do the same for the mane. To do both tasks we need two loops since our count differs (76, 26). We also need to multiply the animation delay by the count of the polygons on each loop iteration giving the animation a bit of randomness.

You may have noticed I used a class called polyonloaded. This class controls the loading of the animation and execution once the DOM loads. Essentially I wait until the DOM is loaded then run a setTimeout for 900ms and finally place a class on the body that triggers my animation sequence. All that looks like this in jQuery:

Parting Thoughts

I can't stress enough how cool SVG is these days, but I'm sure you already know that. It's pretty crazy as the bar gets higher and higher in the community or on places like CodePen that really examine the powers of SVG in regards to animation. When you have some free time definitely checkout my collection on CodePen where I've been gathering my favorite SVG animations. You can always checkout the developers on CodePen as well that are creating mind-bending movements with SVG daily.

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:

]]>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:

Eligible Remote Beta students can now defer up to $15,000 out of the program's $17,780 tuition cost into an interest-free payment plan.

Payments are capped as a percentage of monthly income beginning after the students find jobs and start working.

This new tuition model is designed to be attractive to applicants who are unable to afford the full cost of Remote Beta and expand the reach of the program by breaking down one of the few remaining barriers for otherwise talented and motivated people to join the rapidly growing software engineering industry.

]]>https://css-tricks.com/sponsored-hack-reactor-remote-beta-now-with-need-blind-tuition-deferral/feed/0Accidental CSS Resetshttps://css-tricks.com/accidental-css-resets/
https://css-tricks.com/accidental-css-resets/#commentsWed, 18 Feb 2015 16:43:03 +0000http://css-tricks.com/?p=196202Any 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.

]]>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.

The shorthand CSS background property overrides all the sup properties. The default value for background-repeat is repeat, so by not declaring it in the shorthand, it gets set to that default value.

It works that way for every single one of the background sub properties:

.module {
/* This will get set to `repeat` */
background-repeat: no-repeat;
/* This will get set to `0 0` */
background-position: top right;
/* This will get set to `auto auto` */
background-size: 100px;
/* This will get set to `scroll` */
background-attachment: fixed;
/* This will get set to `border-box` */
background-origin: content-box;
/* This will get set to `border-box` */
background-clip: padding-box;
/* This will get set to `transparent` */
background-color: red;
/* This will get overridden */
background-image: url(cool.png);
/* OVERRIDE */
background: url(lion.jpg);
}

p {
/* Will get reset to what is set in shorthand (required) */
font-family: Sans-Serif;
/* Will get reset to what is set in shorthand (required) */
font-size: 24px;
/* Will get reset to `normal` */
line-height: 2;
/* Will get reset to `normal` */
font-style: italic;
/* will get reset to `normal` */
font-weight: bold;
/* will get reset to `normal` */
font-variant: small-caps;
/* OVERRIDE */
font: 16px Serif;
}

Note that the shorthand requires at least the font-family and font-size to work.

Lists are yet another:

ul {
/* Will get reset to what is set in shorthand */
list-style-type: square;
/* Will get reset to `outside` */
list-style-position: inside;
/* Will get reset to `none` */
list-style-image: url(cooldot.png);
/* OVERRIDE */
list-style: disc;
}

This is an unusual one though, as rather than the shorthand resetting things you might not want reset, it resets them in ways you probably do want reset and might not even know it. Fantasai:

We (the Flexbox spec editors) strongly recommend not using the longhands of 'flex' unless you really, really want to cascade in flex settings from some other style rule, so I'd suggest somehow discouraging the use of 'flex-grow/shrink/basis' here (or, preferably, leaving it out/in an advanced section). The shorthand resets things in appropriate ways, and will therefore result in fewer cascading errors. Please use the shorthand!

]]>https://css-tricks.com/accidental-css-resets/feed/27Thoughts on the Advertising Ecosystemhttps://css-tricks.com/thoughts-advertising-ecosystem/
https://css-tricks.com/thoughts-advertising-ecosystem/#commentsTue, 17 Feb 2015 13:34:11 +0000http://css-tricks.com/?p=195960There 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 …

]]>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 and wave a sign at traffic. Some more effective than others. The most effective, generally is to do marketing and, as a subset of that, do advertising. Web advertising, in particular, as potential customers are just a click away.

Where do you do that advertising? Enter another type of business on the web: the publication.

Publications have very similar costs as product and service websites. They employ people who work on the site, incur server costs, material costs, etc. They just typically don't sell anything directly to the people visiting the site. They give away what they produce for free. Thus they tend to have higher traffic and a larger audience. Their customers aren't the visitors themselves. Their customers are the product and service websites. Their product is audience.

The two have the same risks: not selling enough product to cover costs.

The two coexist nicely. It's an ecosystem. There is plenty of gray area here (e.g. publications that sell things, product sites where the product is DIY publication). But everything fits together as a supply and demand, largely self-correcting ecosystem.

I think that's pretty dang great! Or at least, it can be.

So why are products and services generally (generally) revered as proper, honest businesses - and advertising generally seen as slimy? Shouldn't advertising be seen as a necessary, useful, equal partner in this ecosystem? Celebrated in the same way?

The Troubles with Advertising

The reason we don't celebrate both sides of this ecosystem, I believe, is these three troublesome issues:

Advertising is often obnoxious.

Advertising feels like it could be dangerous.

Advertising can feel like a breach of trust.

Popups, pop unders, unwanted sound, awkward placements, barriers to content, ads covering 90% of the screen. Obnoxiousness we've all experienced. As a whole, it doesn't seem to be getting better. The ecosystem is at a point where it's incentivizing obnoxious. We don't celebrate obnoxious.

Danger is another concern. People are, rightfully, more and more concerned about their privacy online. Is this ad following me? How does it know I like William Burroughs? What other kind of data is it collecting on me and what is being done with that data? Oh god there is camera on this monitor pointed right at my face. Of course something that creepy isn't being celebrated.

Breach of trust might even be the worst one. Money is clearly changing hands. Doesn't that compel a publication to always write favorably of the advertiser? How do I know what is honest and what isn't?

Small scale solutions

I don't think I'm the person with the ideas to fix the web advertising problems. But I think the three issues from above can be fought against in pretty obvious ways:

Don't be obnoxious with ads. Don't block content, don't overwhelm, don't open other windows, make sound and other multimedia opt-in (if used at all). Pretty obvious stuff. The publication has control here. An ad can be prominent without being obnoxious.

Don't do anything underhanded with ads. I actually think it's a bit rare to come across truly nefarious ads, but you can also take steps to make the ads feel safer. Don't allow advertising from any company you wouldn't actually recommend is a good step. Have a public advertising policy that says exactly what you will and won't do. Only run JavaScript that you vet yourself and that has public incentive to not do anything shady.

Be clear about what is advertising and what isn't. Perhaps you can't fight the advertisers influence. So rather than try, or say you can, be clear about disclosure. Any time you write about another company that has advertised with you, mention it. When something is an ad, say so. When content is sponsored, be clear about that.

The reason this can work on a small scale is that these things can make the ads more valuable. A prominent and non-obnoxious ad doesn't erode the reputation of either the advertiser or publisher, and is more valuable. A simple ad for a company you personally endorse is more valuable.

I think its even (weirdly) more effective when you say "Hey, this company is a sponsor, but I love them!" than when you say "I love this company!" without the sponsorship disclosure. The honesty is more valuable.

I fit into this picture

This website is a part of this ecosystem. This website is largely a publication and I sell ads. (The Lodge is a product, and a vital part of the business, but not as large a part as advertising.)

On this tiny slice of the web, I attempt to address all those problems. I have prominent ads and (you can be the judge) but I try and make them non-obnoxious. The ads are just images, text, and links. The only third-party JS is BuySellAds who are very publicly incentivized to keep that clean. I've looked at the JS and its responsible for inserting images, text, and links like any other ad. I have sponsored posts that are always clearly marked as sponsors.

Everyone can adapt

As a publisher, you can start being more trustworthy with your ads. You can start being less obnoxious. You can gather feedback from your audience on what they think along the way. You can measure effectiveness.

As an advertiser, you can choose to advertise in clean ways. You can find sites that align with your thinking. You can have policies about what you will and won't do to ensure you don't cross any bad boundaries.

As a consumer, you can avoid companies that run obnoxious ads. You can avoid publications that run obnoxious ads. You can tell companies when they are being obnoxious. You can tell companies when you heard of them from well done advertising.

I don't know if we're going to make any big institutional change here, but I find comforting that it's possible to exist within a strong mini advertising ecosystem that does the right stuff.

]]>https://css-tricks.com/thoughts-advertising-ecosystem/feed/13CSS-Tricks Chronicle XXIhttps://css-tricks.com/css-tricks-chronicle-xxi/
https://css-tricks.com/css-tricks-chronicle-xxi/#commentsSun, 15 Feb 2015 14:04:15 +0000http://css-tricks.com/?p=195931As 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.

]]>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.

We've brought on a couple of part-time writers here on CSS-Tricks to help me keep all these articles around here up-to-date and produce new stuff as well. They've already been hard at work!

I've been a guest on three different podcasts recently. I was on Dradcast with Brad Williams and Dre Armeda. Then The Web Platform Podcast with Rachel Nabors, Erik Isaksen, Christian Smith, and Danny Blue. Then Developer Tea with Jonathan Cutrell.

We talked about different things on all of them, but generally about all the stuff I love: CodePen, CSS, work, all that good stuff.

Speaking of podcasts, ShopTalk is going strong in 2015. New website and everything. We have been booked solid with great guests and will continue to be for quite a while. It's crazy to think we'll dang near hit 200 episodes this year. I'm so grateful to be able to talk with so many smart people all the time, and then get to share it.

We can't quite afford to get every single episode transcribed, but we pick some here and there to have done. Most recently Tom Dale and Wren Lanier.

Shout out to RealThread for always doing a great job with the T-Shirts we print around here. It's cool to see some of the shirts be used around their site for demonstrating stuff. Like this and this (taken from when we were testing the last shirt with a bunch of different options to find the best combo).

We'll get a store back open here soon.

Perhaps you've seen the job board around here? It's all about front end design and development jobs. You know, the kind of stuff we work about endless here on CSS-Tricks. It's actually powered by the CodePen job board, and it triples as the ShopTalk job board as well.

If you're looking to hire, your post goes a long way between all three sites. If you're looking for work, we have some pretty fantastic jobs on there. Dream job stuff. In a parallel universe somewhere I'm dropping everything to apply for them.

And speaking of CodePen, there is always a lot going on there. And the end of last year, the three of us gave ourselves "three wishes". Three things we really want to see get done at CodePen. So nine wishes total, and we're going to chug through those this year before moving onto more development work. I always say this, but we have easily years worth of ideas to build.

One recent thing I've been working on is making sure everything that displays code on CodePen does it the exact same way. It uses the same syntax highlighting engine, and honors the logged in users choice of font, theme, etc. We figure if you've specifically chosen those things, you'll want to see code that way everywhere. The first port-over was the blogs.

We've also rolled out the most requested feature ever: proper settings for your choice of tabs or spaces, and how deep the indent.

I'll be speaking at some conferences coming up. Not many this year, trying to chill that out, but some. The nearest upcoming ones are the RWD Summit (online) this March 10-12 then An Event Apart Boston this May 11-13.

]]>https://css-tricks.com/css-tricks-chronicle-xxi/feed/2Sponsor: Stackhttp://synd.co/1CYZeHf
https://css-tricks.com/sponsor-stack/#commentsThu, 12 Feb 2015 23:44:02 +0000http://css-tricks.com/?p=195826Stack 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 …

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 status like "to do", "doing", and "done". Each task has notes, checklists, and discussion specific to that task.

The team can be a part of (and get notifications for) whatever projects and tasks are relevant to them. I really like Stack, because it matches how I think about organization. Ongoing projects, tasks-with-statuses, and in-task notes. It's that three-level system that makes so much sense. It gives you a framework, so it's not too loose in that regard, but it also doesn't limit how you want to organize. If I was going to build organizational software, it would probably be just like this. Good thing I don't have to!

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.

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.