small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2tdb4j2">medium bookmark / Raindrop.io</a> | 
<div>
<h2>Hey everybody!</h2>
Can you believe it? CSS-Tricks is 10 years old. It was the 4th of July in 2007 when this site first went live. It&#8217;s tempting to consider all the things that have changed since then. Certainly plenty has changed, but a surprising amount hasn&#8217;t.
The web today is just as exciting as it was back then. HTML, CSS, and JavaScript continue to evolve, but remain firmly seated as the unchallenged languages of browsers themselves. Using the web, understanding the web, and betting on the web is as smart a thing to do as it ever was.
Here&#8217;s to another 10 years!
We&#8217;ll be here, attempting to be as helpful as we can on your journey to learn web design and development. We wouldn&#8217;t be here without all of you readers.
 <img src="http://ift.tt/2uovGDB" alt="Chris Coyier"></div>
<div></div>
 <a href="http://ift.tt/1JFipLF">birthday</a> 
<div>
We made it a decade! It&#8217;s our tenth birthday! 🎉 This is an extra-special one, as we hit those double digits. Each year on July 4th <a href="http://ift.tt/1JFipLF">we mark the occasion</a> with a post. In that tradition, allow me to ramble on a bit about the past and present.
<hr>
<a href="http://ift.tt/2tdkJWN">The very first post ever</a> on this site was literally a CSS trick. It&#8217;s a classic, too. &#8220;Header Text Image Replacement&#8221;:
<pre><code>.headerReplacement { 
 text-indent: -9999px; 
 width: 600px; 
 height: 100px; 
 background: url(/path/to/your/image.jpg) #cccccc no-repeat; 
}</code></pre>
Funny, I just used that trick a couple of days ago. 
The post is interesting to me for a number of reasons. For one, I certainly didn&#8217;t come up with that technique. At the time, I was just learning CSS myself and writing down interesting stuff I&#8217;d come across and used in my own work. I think I felt like I learned it a little more deeply by writing it out as an explanation like that.
For another, at the time, I was entirely unaware of where a trick like that fit into CSS history and larger discussions about CSS and semantics and accessibility and all that. A year later, I started getting interested in stuff like that and did stuff like <a href="http://ift.tt/2iW0b08">rounded up many possible techniques for image replacement</a>. Ultimately, even making a <a href="http://ift.tt/1XLZUZE">&#8220;museum&#8221;</a> for it.
<hr>
Before I go too much further here, I gotta mention the fact that we just <a href="http://ift.tt/1RaL2T9">re-opened the shop</a> in honor of this anniversary. We made up some nerdy web related T-Shirts, and would love it if you would pick one up to help support the site:
<a href="http://ift.tt/1RaL2T9"><img src="http://ift.tt/2tdogoj" alt=""></a>
<hr>
CSS-Tricks was a WordPress site running on PHP and MySQL back then. Today, it&#8217;s&#8230; a WordPress site running on PHP and MySQL. Although WordPress was 2.0.1 back then and 4.8 now. PHP was 5.2 then and 7.1 now. MySQL 5.0 then and 5.7 now. All those seem fairly small version bumps for a 10-year span, but really they are quite significant technological advances.
<hr>
Back then we made sites with HTML, CSS, and JavaScript. These days, sites are&#8230; HTML, CSS, and JavaScript.
<hr>
I try to keep <a href="http://ift.tt/2sJcizf">a design history</a> the best I can. Let&#8217;s do a little blast-to-the-past of header styles:
<img src="http://ift.tt/2tdMTkJ" alt=""><img src="http://ift.tt/2sJfjj0" alt=""><img src="http://ift.tt/2tdt3pI" alt=""><img src="http://ift.tt/2tdHcU0" alt=""><img src="http://ift.tt/2tdotI1" alt=""><img src="http://ift.tt/2sIEvGu" alt=""><img src="http://ift.tt/2tdssV9" alt=""><img src="http://ift.tt/2sIEuCq" alt=""><img src="http://ift.tt/2sITRul" alt=""><img src="http://ift.tt/2tdvt7F" alt=""><img src="http://ift.tt/2sIJtmt" alt=""><img src="http://ift.tt/2tdMZbZ" alt=""><img src="http://ift.tt/2sILrTQ" alt=""><img src="http://ift.tt/2tdN2EH" alt=""><img src="http://ift.tt/2tdlwaw" alt="">
<hr>
This one isn&#8217;t to be underestimated: it takes serious work to keep a website running. There is always something that needs to be done. 
<ul>
<li>There is always some bit of software that needs to be updated.</li>
<li>There is always some weird bug that needs attention.</li>
<li>There is always some business opportunity that needs work to get going.</li>
<li>There is always some part of the design that really needs a look.</li>
<li>There is always some SSL certificate to worry about.</li>
<li>There is always some server or DevOps thing to think about.</li>
</ul>
I have a whole section of my TODO&#8217;s called &#8220;Site Work&#8221; that is full of things I need to get done around here. For example, right this second, I know there are some assets that are loading in a way I don&#8217;t want them to and I need to look at it for performance reasons. I&#8217;d like to do some stuff with embedded Pens to make them a bit wider by default, but need to be careful not to screw up any layout. I know markdown is behaving weird in the forums for the 692nd time, and that a private forum is showing publicly in a place I don&#8217;t want. That&#8217;s like 5% of the list! 
I shudder to think what would happen if all this work wasn&#8217;t done constantly. The site would fall to pieces.
And that doesn&#8217;t include what you might actually think is the hard work involved in running a website:
<ul>
<li>Writing new content</li>
<li>Editing submitted content</li>
<li>Updating old content</li>
<li>Managing the publishing schedule and planning future content</li>
<li>Community management</li>
<li>Promoting and marketing the site</li>
<li>Finding sponsors</li>
<li>Make sure sponsors are happy</li>
<li>Social media</li>
</ul>
If you do all that work, on both lists, the hope is that you just keep to keep on keeping on. Everyone gets paid for their effort. This is not a hockey-stick growth kind of site. It&#8217;s a modest publication.
<hr>
Speaking of slow growth, that&#8217;s the deal:
<img src="http://ift.tt/2sILsam" alt="">
That&#8217;s not representative of just doing the same ol&#8217; same ol&#8217; year in and year out. That&#8217;s representative of more and more people working on the site and more and more money being invested back into the site.
One interesting aspect of this is how the bulk of that traffic is generated by search. Of course, I have no problem with that. I&#8217;m very happy that this site shows up in search results and can be useful to people that way. At the same time, having an active readership is a very valuable thing. Not just people who show up in search, but people who read the site regularly like they do the news. Definitely a balance there. That&#8217;s why we do things like invest in <a href="http://ift.tt/2jjxlYG">the newsletter</a>, to make sure we have ways to read CSS-Tricks that come to you and are worth your time.
<hr>
On a personal note, I&#8217;m still living in Milwaukee, back here after a 7-month stint in Miami. My fiance Miranda got a job down there at FIU and we took the opportunity to move down, skip the Wisconsin winter, and be close to our Florida friends. I don&#8217;t post publicly all that much about personal life stuff, but this will be a huge year for me. The Miami move to and back was big! Miranda and I are getting married this summer! We&#8217;re also expecting a baby in the fall! And we&#8217;re also planning to move to Oregon in late summer! Crazy times. There almost couldn&#8217;t possibly be more going on, especially factoring in all this running multiple businesses stuff and a fairly aggressive speaking schedule this year.
<hr>
My main focus is <a href="https://codepen.io/">CodePen</a>, which has had a tremendous last year. After taking funding, hiring <a href="http://ift.tt/2sIRWGb">an amazing team</a>, and releasing lots of <a href="http://ift.tt/2nrh57f">big stuff</a>, we&#8217;ve got ourselves to that wonderful spot all businesses desire: profitability. The roadmap of ideas on CodePen is absolutely never ending. I&#8217;ve never felt like we have more work in front of us as strongly as I do right now.
<hr>
I&#8217;d like to give special thanks to all the <a href="http://ift.tt/1D3V8x8">sponsors</a> that make the site possible. I can&#8217;t thank every single one, but I will give a special shout out to <a href="http://ift.tt/2qArUFG">Media Temple</a>, who has been a long time sponsor and supporter of CSS-Tricks. 
<hr>
And of course the heartiest of thanks to all you readers, without whom there would be no reason to have a site at all. The discourse that happens here is top notch and I couldn&#8217;t be happier to facilitate it. And lastly, as you likely know, this site is by front-end developers for front-end developers, so if you have <a href="http://ift.tt/1MZExAY">something to say</a>, feel free to reach out.
<hr>
</div>
<div><a href="http://ift.tt/2tdb4j2">http://ift.tt/2tdb4j2</a></div>

The Tenth Fourth

The Tenth Fourth

Hey everybody!

Top Stories