DEV Community: Gabe

Running CSS Animations Once Per Session

Gabe — Sat, 18 Jul 2020 22:35:53 +0000

I was working on some intro animations the other day for my site and had an idea to have a user land on the homepage, and the word “hello” would slide in from the left greeting them.

The animation bit was reasonably straightforward, I used CSS animations to translate the text’s X value from -100% to zero. When testing the animation, I got what I wanted; the text now slid in from the left.

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

There was a problem though, every time I refreshed the page, the animation would replay, this got pretty annoying when navigating through the site and returning home. So I decided to use some JavaScript and the Window's session-storage property to solve my problem.

For those who may be unfamiliar with the session-storage property: think of it like local-storage. With local-storage, we can store data that won't expire. The difference with session-storage is that the data expires after the window or browser tab is closed.

I started with an if statement that read something like “If a property called animated within the session-storage property is equal to null, run the following code”

if (window.sessionStorage.getItem(‘animated’) === null) {}

Within that if statement code block, I targeted the text that would be animating, added the “animate” class to it, which contained the CSS animation rule, and then set the animated property within session-storage to 1.

if (window.sessionStorage.getItem(‘animated’) === null) { 
    document.getElementById(‘my-text’).classList.add(‘animate’);
    window.sessionStorage.setItem(‘animated’ ,1);
}

And now, the animation only fires once per session. A quick and easy way to ensure we don’t annoy our users with our fancy animations.

Bringing this 2-D Nebula Drawing to Life With Code

Gabe — Mon, 16 Mar 2020 11:55:46 +0000

A few weeks back, after wrapping up my space-themed drawing, I thought about how cool it would be if I could somehow go the extra step and potentially make my new scene interactive.

After some digging, I realized the easiest way to go about this would be to make my drawing a parallax-like experience using Matthew Wagerfield's Parallax.js

My goal was to turn this...

...into this

Preparing the assets

Before I could dive into my code, I had to prepare my assets. I had to export each layer of my drawing as its own image, or PNG in this case. I ended up with a total of 9 PNGs.

My assets were also pretty large in terms of file size, so to solve that, I used TinyPNG to help reduce file size without compromising too much on the image quality.

Project Structure

After optimizing my assets, I moved them into their own folder for the sake of organization. I downloaded the minified version of Parallax.js I found in the GitHub repository and placed it in the root of my project directory like so

Development

With my files in place, I opened up index.html and set up my images

      <div id="scene">
        <div><img src="images/background.png" /></div>
        <div><img src="images/Nebula.png" /></div>
        <div><img src="images/Pink Haze_.png" /></div>
        <div><img src="images/Dark Haze.png" /></div>
        <div><img src="images/Stars.png" /></div>
        <div><img src="images/bottom.png" /></div>
        <div><img src="images/top.png" /></div>
        <div>
          <img id="small-planets" src="images/Smallest Planets.png" />
        </div>
        <div>
          <img id="main-planet" src="images/Main Planet.png" />
        </div>
      </div>

With the images in place, I needed to add the data-depth attributes to their parent divs. The closer something was to the foreground, the higher its data-depth value.

The movement applied to each layer will be multiplied by its depth attribute.

      <div id="scene">
        <div data-depth="0.00"><img src="images/background.png" /></div>
        <div data-depth="0.00"><img src="images/Nebula.png" /></div>
        <div data-depth="0.00"><img src="images/Pink Haze_.png" /></div>
        <div data-depth="0.10"><img src="images/Dark Haze.png" /></div>
        <div data-depth="0.40"><img src="images/Stars.png" /></div>
        <div data-depth="0.60"><img src="images/bottom.png" /></div>
        <div data-depth="0.70"><img src="images/top.png" /></div>
        <div data-depth="1.00">
          <img id="small-planets" src="images/Smallest Planets.png" />
        </div>
        <div data-depth="0.80">
          <img id="main-planet" src="images/Main Planet.png" />
        </div>
      </div>

I then targeted the scene with javascript and created a new parallax instance with that scene as the parameter.

      var scene = document.getElementById("scene");
      var parallax = new Parallax(scene);

I now had a functioning parallax experience. However, it was too large, and things were a bit out of place

I resolved this by adding some CSS, though ideally, I should have resized my actual images.

.scene {
  margin: auto;
  padding: 0;
  max-width: 700px;
  max-height: 700px;
  overflow: hidden;
}

[data-depth="0.80"] {
  left: 25% !important;
  top: 20% !important;
}

[data-depth="1.00"] {
  left: 80% !important;
}

#main-planet {
  width: 50%;
}

and with that, I had my end product. If you'd like to see it for yourself, head on over to my site on a desktop browser and hover over the canvas. Enjoy!

A little bit of CSS micro-interactions and some cards

Gabe — Sun, 08 Mar 2020 04:14:45 +0000

I recently reworked my site to feature cards on the homepage that acts as a gallery for some of the recent drawings that I’ve done.

Initially, I had the cards pop a bit on hover by giving them a drop shadow. I played around with various other properties for a few hours before ending up with the following

A few micro-interactions are happening in the GIF above.

Zoom effect on the image
Increased letter spacing in the title
Box-shadow transitions between a subtle/noticeable state

These are all done in conjunction with CSS transitions, to give it a smooth effect, both in and out.

To create that, I started with three divs. One is the actual card, the second is where we will house the background image, and the third is our title box.

<div class="card">
  <div class="card_background"> </div>
  <div class="title">
    <h2>Parallax Galaxy</h2>
  </div>
</div>

The CSS was a bit more involved. I also had to mess around with the transitions a bit until I got it just right.

.card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0, 0, 0, 0.295);
}

.card_background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  transition: all 2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover .card_background {
  transform: scale(1.1);
}

.card:hover .title {
  letter-spacing: 4px;
}

.title {
  position: absolute;
  left: 0;
  top: 2rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 1);
  max-width: 400px;
  transition: all 3s cubic-bezier(0.25, 0.8, 0.25, 1);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.title h2 {
  display: inline-block;
  width: auto;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

The end-effect functioning on multiple images. A relatively quick and easy way to spice-up any gallery.

Landing Page development in 2019/2020

Gabe — Mon, 04 Nov 2019 20:03:08 +0000

A landing page is a standalone web page, created specifically for the purposes of a marketing or advertising campaign. It’s where a visitor “lands” when they have clicked on a Google AdWords ad or similar. Unbounce

With services such as Wix and Unbounce propping up, I wanted to ask the Dev community what it thought about Landing Page development in 2019/2020.

Are developers still using WordPress or other CMSs to create landing pages? Or have people adopted using static-site-generators for such content? Could it be that people are abandoning these methods altogether in favor of site builders like Wix or Unbounce?

If people are still using WordPress or other content management systems to spin up landing pages, are there tools you may have found or built to assist you in development?

Any information on the topic is greatly appreciated.

Single File Components in Two Minutes

Gabe — Sun, 20 Oct 2019 17:15:17 +0000

Single-File-Components or SFC is a Vue.js feature that allows us to build our entire component - template, logic, and styles, in one .vue file.

Below is an example of a component that displays a paragraph element with static text and a dynamic winner.

<template>
<p>And the winner is: {{ winner }}</p>
</template>

<script>
module.exports = {
    data: function () {
        return {
            winner: 'You'
        }
    }
}
</script>


<style scoped>
p {
    color: blue;
}
</style>

Template & Script

The template portion of this example is a paragraph element with some template syntax that allows us to render data to the DOM.

Templates in single-file components must be wrapped in one HTML tag, so if we wanted to include multiple paragraph elements in our example, we would have to wrap our elements in a div or a similar container element.

In between the script tags are where our logic and data are found. The data and DOM are linked allowing us to dynamically change our data, so if we were to change the winner data to say 'me', the DOM would reflect that change reactively.

Style

<style scoped>
p {
    color: blue;
}
</style>

In the example above, the style tag features the attribute scoped. This attribute allows us to style the elements of the current component only.

Meaning if this component is featured on a page with other paragraph elements, only the paragraph element in this component will take on the color blue, the rest will follow whatever default rules were set for the paragraph elements.

For additional reading on single file components or the Vue framework in general, I recommend checking out the official Vue.js documentation

Four Firefox Dev-Tools I use daily

Gabe — Wed, 12 Jun 2019 00:51:56 +0000

I love Firefox, and this is no secret. I find it to be a snappy browser with some phenomenal developer tools built right in.

Most around me use Chrome, (or more recently Brave) and swear by their dev tools. And I'll admit that they're pretty great, I even ended up switching over to Brave for a few weeks and found it to be a fantastic browser. However, after weeks of straight usage both at home and at work, I found myself switching back to Firefox. It felt like coming back home when I launched the developer tools and started working. Functionality-wise, both FF and Chrome are almost identical, almost. I'll briefly highlight some of what I think are the most useful features of Firefox's dev tools.

Highlighting

One of the most useful features of Firefox's inspector tool for me is the ability to highlight elements on a page matching any selector I choose. In my example GIF above, I highlight every anchor tag on my homepage, which contains the class .wp-block-latest-posts. This feature is handy when I'm trying to figure out which item or items fall under a certain class name, or need the overview of a certain div box-model while I inspect an element directly above it or below it, etc. Elements will stay highlighted even if you switch over to a different tab in your dev tools. So you can leave an element highlighted while you change over to the fonts tab or browser console. It's a small feature with many uses.

Fonts

The fonts tab is a newer addition to the Firefox dev tools. Here, you can get a nice overview of the fonts being used on the current page as well as controls to quickly customize their appearance - from font-weight to font-size and even the line-height.

Changes

I am constantly using the inspector tool to highlight items and make CSS changes right then and there. If I like what I see, I backtrack through my changes and write out the code in my text editor. The changes tab conveniently takes all the CSS revisions that I have made in the inspector tool during my often long sessions and lumps them together so that I can quickly get an overview as to what exactly I did, Firefox even gives me the ability copy and paste directly from here. Gone are the days of painfully backtracking through an endless number of elements because I no longer remember what exactly I did to make something look as intended.

Scratchpad

Scratchpad is cool; it allows you to write out some JavaScript and execute it when ready. It also allows you to inspect JS objects. What I like about Scratchpad is that it works more like a text-editor than a browser console. I can write out my JS as if I were in VS Code, and it won't execute until I tell it to run, as opposed to the console, which at times I have run mid-way through writing some JavaScript thanks to a slippery finger on the return key.

There are so many other cool Firefox dev tool features I did not get to in this post, such as real time CSS tips, or the CSS Grid Inspector. For further reading into what Firefox's dev tools can do, you can hop on over to their DOCS, I'd also recommend giving their twitter a follow for the latest on their developer tools. Enjoy friends!

Fluid Animated CSS Gradient Text Effect

Gabe — Tue, 12 Feb 2019 02:36:20 +0000

CSS animations are awesome. Not only do they make great digital art pieces, they also give us the ability to add fluid design elements, right into our web pages. Recently, I integrated a CSS gradient animation in many of my blog links to give them a living, liquid feel to them. See my 'Recent Essays' module below

note: gif is sped up for demonstration purposes

Neat, right? And fairly simple to accomplish. All we really need is CSS!

Let's deconstruct it

So first thing in my CSS is the animation rules.

Here, I'm saying - play the animation named flow for a duration of 30 seconds. Set the animation to ease in and out for a smoother effect, and have the animation loop for an infinite number of times.

Then there are the background rules.

I set my background to be a linear-gradient and give it my desired colors. For beautiful gradients I use often UI Gradients when I can't come up with anything nice. I then stretch out the background to 300% the size using the background-size property to give the animation room to move.

I then set the background-clip to be text and set the text-fill-color to be transparent so my default font color doesn't interfere with my gradient.

Now on to the actual animating. I create a keyframe animation named flow and set up keyframes at the zero, fifty, and one-hundred percent marks.

Final result:

And there you have it - a nice, fluid animated gradient over text. Just another little fun design element courtesy of CSS.

Setting up a 'Recent Posts' section using Twig

Gabe — Sat, 09 Feb 2019 18:27:55 +0000

I'm embarrassed to admit that when I initially setup my Grav blog, I did so without much forethought. My entire home page was coded directly into the WYSIWYG. It was pretty simple so I got away with it for a bit.

It wasn't until I went to update my "Recent Essays" section today that I realized how poorly I had setup my homepage. So I spun up my local environment and got to work on a quick fix.

Auto pull the five most recent posts

Using this post I found in the Grav documentation, I was able to take the first example and tailor it to my needs with ease. I came up with the following:

And with that, I no longer have to worry about manually updating my homepage every time I write a new blog post. I simply write, publish, and call it a day.

A brief introduction to tiny CMS

Gabe — Sat, 02 Feb 2019 23:47:49 +0000

I recently setup my own blog using a 'flat-file' content management system known as GRAV. If you are unaware of what a Flat File CMS is, it's essentially a CMS like WordPress in where it uses PHP to process logic. Where it's different is in it's lack of database, for storing posts and other data it uses flat text files. It's pretty neat. In the short time since my install, I've installed five amazing small plug-ins, and have built out my own custom theme using CSS and TWIG. It's been a fun experience working with the small CMS, I've especially enjoyed having a full blog at roughly 30mb in size. It's incredibly fast. So in this post I'm going to be giving a small introduction to the CMS.

We're going to head on over to Grav's download page and grab the 'Grav Core + Admin Plugin' bundle. Once you've downloaded and extracted the zip, you'll find the entire CMS plus the admin plugin in that 20mb folder.

What's in the box?

I've attached a screenshot of an almost default folder structure below with the only modification being the addition of the .ddev folder.

Pages

Almost everything you need is located under the user folder. That's the really neat thing about this CMS. Rather than storing your posts in a database like a traditional CMS such as WordPress or Drupal, GRAV stores them right in your users/pages directory. The pages are then organized into folders that contain their respective markdown files.

Themes

Themes could, and probably should, get it's own post. There's so much to go over when it comes to themes, and it's all really cool. I'm going to keep it brief for this post. Themes in GRAV are made using TWIG, a PHP template engine. For my own custom theme, I downloaded a blank starter theme, and started with two template files, a 'blog.html.twig' for my blog posts and a 'default.html.twig' for any non-blog pages. In these TWIG files, there are PHP code that pull in my template partials, such as my footer, header, etc. from my partials folder and pieces them all together. I've attached a screenshot of the folder structure for the default theme, Quark to give a clearer image.

Setting up a local

In order to setup and start developing locally, we gotta do some prep work first. We need to install Docker and DDEV. Docker is a straight forward install, create an account, download the DMG, slide the Docker.app into your applications folder. For DDEV, I chose to install it via BREW. Assuming you have BREW installed, we must first add the ddev repository using

brew tap drud/ddev

once it's added, we can run the following to install ddev onto our machine.

brew install ddev

We should at this point have DDEV and Docker installed, so now we're ready to get started. Let's move our Grav folder from downloads to a more secure location. I moved mine into my "Sites" folder in my home directory. Open Terminal and lets CD into our site folder.

Once there, we want to run

ddev config

we will then be prompted to enter a name for our project. I chose grav-demo in this case.

Another prompt appears asking us the DocRoot location, leave it blank. Finally, the last prompt will ask us to enter the project type, in our case it is PHP.

And now we run

ddev start

This may take a bit since it's building out our container. Once it's done it should spit out a nice link where we can view our local install.

Admin Panel

The first screen you'll be presented with is the Admin User Creation screen, since we have the admin plug-in installed by default but no admin accounts. Create one and it'll throw you right into the admin panel.

Here we have a brief overview of our site's backup and update status, and the visitor count. In the sidebar, we can see quick links to our site configuration, pages, plug-ins, themes, etc.

Pages

If we head into pages we can see the default pages that come with GRAV, HOME and TYPOGRAPHY. Here in this section, we can add folders and pages to our site and organize them however we like.

If we click on a page, we will be able to edit it via a WYSIWYG. By default it will look like the following, but you can install other more advanced editors if you so choose.

Plug-ins

Straight forward, installed plug-ins will show up here. You can even search for new plug-ins to install right in this section via the +add button which is super convenient.

Themes

Themes you create or install will show up in this section and can be activated/deactivated, here.

Final Thoughts

So there you have it, in a brief, 5 minute read - that was an intro to the tiny GRAV CMS. A small flat file CMS that can really do a lot! For me, experimenting with GRAV got me interested in other small content management systems such as WonderCMS and OctoberCMS. So far I've played around with WonderCMS, but am very curious to try out October for its Laravel framework. For now, I'll stick to working on my current GRAV install and experiment with the theming.

Nine months as a Jr. Web Developer

Gabe — Sun, 27 Jan 2019 16:44:22 +0000

It's been an extremely rewarding journey so far in my nine months as a jr. developer. I started off in the Summer of 2018 working as a Jr. Front-End contractor for Third & Grove, a web agency that specializes in Drupal located here in Boston. After working there for a few months I moved on to a permanent position as a Creative Technologist at Amp Agency. In my short time as a jr developer, I've been very fortunate to have had great leaders & teachers that I could reach out to for help, without them I would not be where I am today. So with that, I'll be going through some lessons I've learned throughout these nine months.

Third & Grove.

At T&G right off the bat, I really learned how an agency functioned. My days were simple - I arrived at 8:30 AM, opened up JIRA, and booted up my vagrant boxes so I could start tackling tickets (often with the help of other more senior developers). It was fantastic. T&G was extremely aggressive about the quality of the code they engineered. They had beautifully written and strict, best-practices documentation that was closely followed by every single engineer. This was also frightening. As a brand new Jr. Dev, I, at times felt slow or even dumb because I couldn't provide them quality code 24/7. JavaScript and CSS tended to give me the biggest headaches - there were issues or tickets I would need to solve that at first, seemed like it should have been an easy task but as I would later learn, they were very actually pretty tricky. Whenever I encountered problems like these, I would buckle down and try to solve them myself so that I could feel like a 'real developer'. This was my first big mistake. By doing this, I sometimes ran over-allocated project time and caused headaches for the project managers, one of my managers would later confess this to me in my exit interview. She told me that in the future when I get stuck again - don't wait to reach out for help, do it ASAP! I personally didn't like reaching out to other developers "all the time" because it felt like I was bothering them. It felt like they were babysitting me. She assured me that there was nothing wrong with asking other developers for help, in fact, that's what many of them were there for - to help out us Jr devs. So always be willing to reach out for help.

Another great tip I got was from our Director of Engineering, and that was to not let imposter syndrome grip you. I had never heard of the term 'Imposter Syndrome' but after he explained it, it perfectly described how I felt during my summer as a jr. For those that may not know

'Imposter syndrome is a psychological pattern in which an individual doubts their accomplishments and has a persistent internalized fear of being exposed as a fraud'.

Apparently, this is a common phenomenon amongst all developers, from juniors to seniors. During my exit interview he told me he could tell I was at the start of a great career in web development and that as long as I chose to stick with it and kept the same level of passion I was showing them all summer, I would do well. He later went on to post an amazing recommendation on my LinkedIn which, to be completely honest, is maybe the most beautiful piece of literature anyone has ever written about me.

T&G made me feel like a champ after three months of being there. By the time I was done with T&G, I had set up close to 50 local WordPress/Drupal installations on my machine, masted source control via the CLI, and was comfortable using more advanced PHP/HTML/CSS such as TWIG and SCSS. All combined with some solid advice from my peers, which paved the way for the next step in my career, AMP Agency.

AMP Agency

When I arrived at AMP Agency in September, I was excited to take on whatever tasks or projects I would soon be on, but also very nervous. I now had three months of agency experience under my belt and was a little more prepared to deal with agency life. However, unlike T&G, AMP was not a web agency, but rather a full marketing agency with a web team in Boston, and a dedicated web development branch in LA. So what's the difference? From my experience, at Third & Grove, I was just maintaining, theming and overall improving the client sites we were responsible for. At AMP Agency, I felt like more of a 'digital artist' than a 'software engineer'. Yes, technically both positions are considered to be jr. software engineer roles, but at AMP I'm wasn't just improving client sites, I was creating unique digital web experiences for our clients. I would go on to build-out HTML5 OLA banners, micro-sites, UX wire-frames, custom Gutenberg blocks, and even occasionally, leave my developer chair to star in our agency's holiday card! From day one at AMP, I got to constantly experiment with new technologies as I learned about them. It's a really cool experience to find an awesome framework or creative idea on your own time, then turn around and use it for your next client project.

So what have I learned?

Way too much to list out. I'm serious - at AMP I have worn so many hats and have dived headfirst into so many different projects that I thought to myself "I would need to write out a book if I were to go through every little thing I've learned". So my supervisor recommended that I do just that, write out my thoughts. He recommended I start my own blog or even post here to Dev.to, and just catalog my thoughts and experiences throughout my journey as a jr dev. So I did! Using Grav, the flat-file CMS, I set up a blog on my server and began documenting cool finds. More recently, I began porting over my posts to Dev.to in hopes other developers provide feedback or just find something cool like I did. As I progress through my career and work on improving my development skills, it is my hope that my posts will reflect these improvements. My two goals for my blog are to keep track of my developer journey and to inspire others about the wonderful world of web development the same way I've been inspired.

Quick and Easy JS Parallax Effect

Gabe — Sun, 27 Jan 2019 05:34:21 +0000

I was recently tasked with creating a micro-site for one of our clients at work. This particular client wanted a small site that would showcase their new line of chips and dip. This being my first client deliverable at AMP, I was pretty excited to get started and show my team that I'm more than just a pretty face.

So I meet with my project manager and we go over the designs and discuss the functionality that the page would have behind its different sections. It was pretty straight forward, a hero, a featured products grid, a store locator, a product carousel and a footer. The only thing is the hero would feature a parallax effect where some chips would pop out and move up the page as the user scrolls down. While this was going to take a bit of work, a major bonus for me was that most of the other pieces of the site were already built for me thanks to my co-worker Ethan who is a pro at cranking out these microsites for our clients. So I pull down his github repository and setup my local, we're using Zurb's Foundation framework for this client. I start putting together the pieces and building out the page according to the designer's comp. After about 3 - 4 hours I finish what I consider the base of the page. I have all the sections in place and all the components are functioning as expected. It was time to get to the parallax effect.

9 lines of JavaScript

No bullshit. After hours of playing around with different parallax libraries to try and create the effect I wanted, my boss casually slides over in his chair and says "That looks fun. Send this to me, let me give it a shot". So I do. 15 minutes later he sends me over a JavaScript file and tells me that it's all set. I copy his code into my JavaScript file, compile it and open it up in FireFox to test it. It worked. It worked beautifully. I was so amazed, I kept scrolling back and forth making the chips move for what felt like hours. See the code below.

Pretty Cool. And wicked simple too. Granted with this version you need jQuery in order for it to run, but creating the same result in vanilla js is possible.

Selecting Auto-Generated Content with CSS

Gabe — Sat, 26 Jan 2019 21:46:14 +0000

Our agency's website was recently moved from WordPress to Hubspot. As a result, our team has been chipping away at JIRA tickets tackling any bugs that may exist from the migration. With that, I was tasked with building out a new contact page for the site, we currently have a contact modal that opens and overlays on top of whatever page you are on. I've never been a fan of this approach, I've encountered some major preformance issues when opening that modal on top of any video. The contact form would run so sluggishly at times, it was almost unusable. Thankfully, the new contact form was set to live in its own page - solving our preformance issues.

While we were building out the contact form, we ran into an issue with the way HubSpot handles forms. Normally to theme elements on any site I don't build myself, I use a browsers inspector tool to select the element I need, I can then see its styles, class names, IDS, etc. Today while attempting to theme some of the INPUT elements, I realized that HubSpot autogenerates the IDs of each input on what seemed like each page refresh. This made targeting the element difficult, but as I learned, not impossible. Though it was autogenerated, the first few characters seemed to be a machine name of the INPUT field. Which brings us to our CSS selector

 div[class^="foo"]

The selector targets an element, a div in this case, that has a classname that starts with foo. Pretty useful. There's also another selector that does similar

div[class*="foo"]

The difference in this one being the carrot symbol is now an asterisk, what that does is targets a div that has a classname that contains foo.