At Virtual Coffee, we have events almost every day, and we hang out in Slack every day! So, it was inevitable that we'd get some sort of event reminders going in Slack. Our first pass was by the late Mike Rogers (we miss you, Mike ❤️). Our events were listed on MeetingPlace.io, so Mike wrote a Ruby app to pull date down from MeetingPlace and post to Slack: Meetingplace Events Bot.
In our Slack for Virtual Coffee, our members had started a practice of Coworking over Zoom. Coworking is a way to share space with other people while still getting work done, and I thought it was very cool. Members would simply post a personal Zoom link saying something like "starting a Coworking session if anyone wants to join." Eventually we made a Slack channel specifically for this.
In chatting with our members, I realized we probably could do a couple cool things to support this a bit better. It’d be nice to have an official Virtual Coffee Coworking setup for Zoom, so I put one together using Zoom, Slack, Airtable, and Netlify Functions. Here's how it's all set up.
Using some special magic, Gatsby can transform date fields in GraphQL queries into different formats. But what if you would like more than one format, and don't want to import an entire date formatting library?
A tweet from Eric Meyer invited us to revive the tradition of CSS Naked Day!
I recently gave a talk at our Cleveland React meetup group about different ways to style React components. I thought it'd be cool to share both the slides as well as the example code for the talk.
In my hooks talk for the Cleveland React Meetup, I live-coded a conversion from a class-based app to one using hooks. I have published the code from the talk on GitHub.
This repo has branches containing each step along the way, from the basic class-based app to the completed thing.
I had been wanting to use Gatsby pretty much since I heard about it, and finally found some time to put it to use. Combining Gatsby (the 2.0 beta), Craft CMS, and CraftQL, I have arrived at the CMS+Progressive Web App Promised Land.
A friend came to me wondering about how to pull off a nested Matrix situation in Craft CMS. What he wanted was to be able to use a Matrix field within another Matrix field, which is not possible at the moment. However, while talking about it with him, I came up with something that will work at least for his use-case.
“The fool doth think he is wise, but the wise man knows himself to be a fool.”
William Shakespeare, As You Like It
This is maybe the fourth or fifth incarnation of dtott.com. This time around I tried to simplify everything, do away with (mostly) useless features, and concentrate on the reading experience. Here's some notes on the site. Hope you enjoy it!
If you're tired of Flat Design and looking for something to spice it up, why not try Long Shadows? And if you're going to try Long Shadows, why not use a pure CSS solution with this Sass mixin?
A couple of weeks ago, a good friend sent me an email with a list of questions for me. He'd been out of the front-end game for a little while, and wanted to pick my brain a little bit. I thought that instead of just answering him directly, I'd share my answers with everyone.
About a year and a half ago, I had some ideas about using 3D CSS to create nonstandard 3D shapes, but never got around to writing a post about it. However, inspired by the incredibly impressive Acko.net redesign, I decided to finally clean it up and share it with you. Here it is.
By stacking and rotating elements in 3D space, you can create some new shapes out of pure CSS. It's not practical or useful in the least, but it is interesting. These examples work best in Safari, but they will mostly work in Chrome. Check it out: Pure CSS 3D Shapes (remember to click and drag to rotate. Thanks to Dirk Weber's traqball.js for that little bit of magic).
I've recently starting developing using LESS CSS (lesscss.org), and quickly decided that I would benefit from a toolkit containing mixins that I would use over and over, such as border-radius or box-shadow.
Enter LESS CSS Toolkit.
We all have various tools in our box to deal with the constant headache that is Internet Explorer. Browser hacks, conditional comments, filters, pounding our heads against the wall, etc (wait, is it possible that's where the headaches come from? I'll look into it and get back to you).
This situation gets even worse when one wants to use some of the fantastic techniques available to us in CSS3, like border radius, drop shadows, and gradients. In the past, we had to use images for all of these design elements, but now it's possible to have a fancy, shiny button that uses only a
<button> element and some css. Well, possible except in IE. Enter CSS3 PIE.
It's been quiet around here for a few months. Part of that, of course, is the holidays and all the craziness that comes with them. But the main reason is that I've spent most of my free computer time on this: my new site.
Client-side validation (checking for things like required fields, valid email address, etc) is always one of those sort of pain in the butt, last minute, only because i have to sort of things. It's not usually fun or flashy, it's just one of those things you have to do. Enter VanadiumJS, a new library just released by Daniel Kwiecinski.
Speaking of HTML5 and
canvas, Carsonified has a nice little tutorial to get started with
canvas. This article includes a good overview of where you can use
canvas (anywhere), which browsers support it (most of them, at least with a little help (even IE6!)), and how to get going with some easy stuff.
Dive Into HTML5 is a thoroughly beautiful site by Mark Pilgrim that houses text from his upcoming book of the same name.
As I'm sure you're aware, Firefox 3.5 was released recently. If you haven't already, I would suggest updating(:
A new site, HTML5 Doctor was recently released, and it promises to be a good resource for learning HTML5.
Yes, it's back. The annual CSS Naked Day.
10bestthings.com just went live a few minutes ago. It's basically a site where you can make top 10 (or any number, really) lists and then share them around. It's actually a lot of fun to play with. Here's a list I made a while ago that I'm fairly proud of: My favorite Christmas movies.
There are no good desktop Twitter apps out there. I seriously can't stand any of them. So this is a plea to the software developers out there: Please, make a good one. To get you started, here's a list of features I'd like to see:
One of the more popular posts on this site is my explanation of the easyclear method of clearing floats. I had been using it for a while when I wrote the post, and it's a great solution. However, Dave Woods commented on that post with a new method: setting
overflow:auto on the containing element actually has the same effect as the clearfix, without all the extra stuff.
I have a lot of articles "in the pipes," but I've been finding it hard to get into the rhythm of writing again, so I thought I'd start with an easy post to get the juices flowing. This sort of post is obviously something plenty of people have done before, but I usually find them interesting. Since it's been done before, I thought I would concentrate on some of the smaller things that make my life better/easier, instead of the normal operating system (OS X Leopard)/text editor (Coda) writeup.
It's been a very busy summer. Between buying a house, moving into said house, getting married, vacationing, and somehow managing to work, I haven't had any time for the website. But I'm finally caught up with (most) everything, so I thought it was time to get back to the blog.
Today, April 9th, is Naked Day. It's an annual event in which sites remove all of their style information, to reveal the naked page structure underneath. This is my first year participating, but I think it's a great idea.
I'm very excited to announce that CSS Off is back from a brief hiatus. Clevelander Brad Dielman has come on board to lend his expertise to the project, and Clevelander (and Brad) Brad Colbow is our guest designer. I've seen the comp already, and it's going to be a challenge.
I know, I know. What this world really needs is a new rounded corners solution. With CSS3 support right around the corner (ha, right), why bother, right? Well, this solution offers something new to the world of rounded corners. What it does is this: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. See below:
So most everyone I know in the community is a Twitter user, but I've managed to avoid it up to this point. However, seeing as I have absolutely nothing to do today, I joined Twitter. I'm hoping it will give me a chance to say things that are too inconsequential for a full-on blog post, but that I still want people to hear. Up till now, I was using Sprokets' campfire room for that purpose. I'll probably keep doing that, but, you know, Twitter is cool, too.
Aside from browser bugs, float clearing can be one of the most frustrating aspects of CSS development. It takes a little bit of patience and thought to set up your floats and clears in a way that facilitates both your design and the flexibility required in a modern website.
Read http://dtott.com/thoughts/2009/01/06/clear-your-floats-even-easier/ for an even easier way of dealing with floating elements.
For years, I've always formatted my CSS in what I like to think of as the "traditional" manner. Each selector on one line, and each property indented one tab underneath. But when I started working with Sprokets, the other front-end developer there was using one-line css declarations. This threw me for a loop for a while, but I slowly started liking it better and better.
Well, well. It looks like someone has been neglecting their blog.
Congrats to Brad Dielman for pulling in the win in this month's CSS Off. Attention to detail, clean code, and a sly use of hReview helped Brad in the newest victory for Cleveland. Nice work, Brad!
You may or may not have noticed, but there is a new section here. It consists of sites that I have saved to my Ma.gnolia account. Every day, I find things on the web that I want to share with people, but I haven't wanted to clutter up my blog to do so. The solution is Ma.gnolia. There's a feed and everything. I hope you find it useful/interesting.
So here's some good news. The guys over at CSS Off recruited five judges to help out, including yours truly.
So I've been thinking for a while about what I'd like to blog about, now that I'm at least comfortable (if not perfectly happy) with the presentation of dtott.com. What I decided on is starting an ongoing series of in-depth CSS tips. This will (obviously) be the first one.
The CSS Off guys announced today that the next contest will begin on September 15. Wooo!
I'm not sure if anyone noticed, but Google Reader now has a search bar. Those of you who use it should be jumping up and down for joy. Those of you who chose another reader because for some unknown reason Google didn't include a search with their RSS aggregator can finally come back home.
Well, I made it almost a month since the last design change. However, this redesign is a little more extensive.
Turns out that there's an even easier way to create transparent favicons (assuming you have photoshop): A photoshop plugin. It supports transparency and, from what I can tell, creates better looking images altogether. Nice.
So I discovered the other day that it is possible to make transparent favicons. Favicons are a good idea. Transparent favicons are just awesome.
Well, as I was telling Eric, I've officially moved. Sunny Bloomington, Indiana is the city I now call home. Emily and I have mostly finished putting everything away and moving around our furniture (you really don't realize how much stuff you have until you have to move everything...), and now all that's left is hanging pictures and organizing shelves. Last week was a crazy, stressful one, but now I finally feel kind of settled in. Emily started orientation today at IU, and I've been purposely trying to get lost in order to explore the city.
Well, it took a little time to get the results, but apparently I've won. I'm very excited about the results. Thanks as always to the css off guys, and more on the subject tomorrow(:
Back from the trip. It was wonderful. Some catch-up news:
Emily (pictured) and I are leaving this evening for our annual trip to Cape Cod. We'll be gone for a whole glorious week, hanging out on the beach and drinking beers. I can already smell the ocean. See everyone in a week!
I came across a post (via Daring Fireball) by Joel Spolsky regarding comments below blog posts. While I think that he sort of misrepresented Dave Winer's post about blogs (Dave's post was about what it means to be a blog, and the fact that having comments don't make a blog), Joel does bring up some interesting points about comments:
Judging is underway for the latest CSSOFF contest, so, as promised, here's my entry, and here's the jpeg of the initial file we got. As I said before, I'm pretty happy with the results. Here are my thoughts on this entry.
I've finally finished with my cssoff entry. I worked on it from 1am till about 8am, and then a couple hours this afternoon ironing out browser (read: Internet Explorer) bugs. I'm pretty happy with what I ended up with though.
One of my goals for this website was to use it as a vehicle not only for web dev stuff, but also for art. So, here is the first set of images. This is a collection of landscapes that I've done over the past year; some in conjunction with class, others on my own time. These were all made with my old Minolta digital camera and Photoshop.
FreelanceSwitch is holding a survey for freelance workers of any kind. I took it. So should you.
So last month, I was attending the fairly new Cleveland Web Standards Meet-Up. I was talking to Eric Wiley about the redesign I did for the Free Times, and Eric Meyer, who came for the first time, overheard. He says "new site, huh?" and pulls out his laptop.
Finally, I'm live and on the scene. This is the forth or fifth incarnation of this website since I first registered the domain and started working on it. It was a challenge from the beginning, and I think that I succeeded in keeping it standard, accessible, and pretty.
The second round of CSS OFF starts tonight at midnight CST (which would be 1: 00 AM for us Clevelanders). If you didn't hear about it already, CSS OFF is a monthly contest to create the best single web page. They give you a .psd and 24 hours, and you have to come up with the best standards-based solution using images, css, and (x)html. I entered in the first contest, and had a great time (here's my entry). It's just pure fun. If you win, you can either take $30, or donate $50 to a charity of your choice. The first winner, Dawid Lizak, chose a charity, as I'm sure most will.