Recent & Good Blog Posts on CodePenhttps://codepen.io/posts/
ennospam@codepen.ioCopyright 2019
2019-01-14T20:21:21-07:00
The Danger Crew 2019 Editionhttps://codepen.io/punkydrewster713/post/the-danger-crew-2019-edition
https://codepen.io/punkydrewster713/post/the-danger-crew-2019-editionDrew Conley
I'm kicking off 2019 by putting this out into the world: The Danger Crew is ready to play!

Two of seven chapters are available in the link above. The rest of the chapters are very close but still have a lot of QA and editing to go. Desktop only, for now, but don't worry - mobile is coming! As always, the game has been through a lot of rewrites, redesigns, recoding. It's been a big year. I'm exciting to be back to share what I've learned along the way.

I worked on The Danger Crew almost every single day since my last post in September 2017. I went through some other big and exciting personal things in the meantime, too. I got a new job! My wife and I sold our house and moved to Denver. Then I started contracting full time. Uprooting yourself and making career moves takes a lot of mental energy, but I was able to pipe a lot of inspiration from the experience back in to the game. (Which itself tries to touch on a lot of stuff people go through in tech.)

Here are some behind the scenes insight into making The Danger Crew, motivation behind keeping it going for 3 years, and takeaways that I hope will help you finish and ship your own projects. These lessons apply to anyone trying to bring big ideas to life, whether at work, on the side, technical or non technical. Let's dive in!

The Pitch

The Danger Crew is an adventure RPG in the browser. It’s about being a developer in a world obsessed with programming. Techies roam the streets with their laptops out, ready to prove themselves the most powerful programmers in the scene. Hack Battles are the law of the land... confrontations where you and an opponent type Terminal commands at each other until somebody's laptop explodes in a smoking cloud of defeat. It's serious. Today is your first day of work at a new job... you're going to have one busy day.

Tech Stack

The Game

This is a CodePen post, so let's talk about the code. Danger Crew is written in React. I bootstrapped the project with Create React App... it's a pleasure to use and I haven't needed anything more custom. It uses a little bit of Redux, too, but in a mega simple and abstracted way. If I started over right now, I probably wouldn't need Redux.

The game .js file itself doesn't contain the story content, like what people say when you talk to them or details about the room you're in. That information is loaded into the app from a JSON endpoint. More on that in a bit.

The graphics are a mix of SVGs and <canvas> rendered PNGs with an important CSS rule: image-rendering: pixelated. This rule allows simple images, like pixel art, to scale larger than natural size on a canvas without losing quality. I learned how to do that from this MDN page.

I utilize inline SVGs for icons and certain stateful graphics: like changing the path colors of your laptop when you're getting attacked.

I make the game's artwork in Aesprite. The animation and drawing features in Aesprite are really easy to use. I export PNGs out of there and sometimes convert to SVG depending on the context of the asset. Huge thanks to Shaw for making this Pen which quickly converts simple pixel art into SVG code. I've used this tool hundreds of times over the past year!

Howler is a JavaScript library that plays our music and fires the SFX. Firebase stores user accounts and player progress so you can save/continue whenever you want!

The Editor

I had a big vision for the story of this game. I wanted to provide a full adventure with the same depth, details, and gameplay length of the games I used to play growing up. Lots of content had to be created: everything from character dialogue, battle details, cutscenes, and more. All of this content would be represented in a JSON format - that way I or anybody else could continue to create more content for the game without modifying the game's bundled js file. I had really specific needs of an editor in mind, so I decided to create a custom CMS, Danger Studio:

It's not the prettiest thing in the world, but it has all of the features I need to create and change content, at least way faster than manually editing JSON. It also manages story flag scenarios. If you talk to a person in the world, he might say line A or line B depending if you've completed task A.

Placements and configurations of Battles are handled in here too, so it's easy to iterate on the flow and pacing of how often the player encounters enemies.

Under the hood, Danger Studio is just another React app with a thin Node backend that simply reads and writes JSON files. There's a concept of Projects within it too... I can edit my own version of the game while Glenn, my game design partner, edits his own. This handy mechanism allows anybody to create additional content completely independent from the main seven chapters.

Lessons

Here are some rapid fire lessons that I've learned from making this game. Some are technical, some are not.

Get your work in front of early testers as soon as possible, even if the styles aren't ready or you have placeholder graphics. I arguably waited too long to get a playable version in front of friends to test which ended up biting me later because many of my assumptions were wrong.

Rewrites take time. If you are considering rewriting part of your project because of reasons X, Y or Z, make sure you double your estimate for how long it will take. Sometimes it's worth the time! In my case, I ended up going through a big rewrite in fall 2018 to fix some major performance problems that added a few months on to the project. (This is only nights and weekends for me, after all). I've also spent weeks chasing rabbit holes that ended up having little to no value, so be mindful how you spend your time.

Have a buddy. For me, it is Glenn, my game design partner. We talk every week and I share progress on what I've gotten done. He always has great feedback and helps me stay focused on the right thing at the right time. Having a person to provide feedback will keep you accountable and motivated to keep going.

Embrace the gap, the painful realization that your work is not yet at the level of quality you desire it to be. Your works gets better the more you pick away at it, so keep showing up. Don't be discouraged if your art doesn't look great or the code is gross. It will get better if you keep trying.

Share your progress, successes, and failures. Even if it's only with a few close friends.

The Danger Crew

It felt wrong to leave this post without an accompanying Pen, so here's a slideshow of some scenes in The Danger Crew. I will continue to update this post as more chapters are released.

Like I mentioned before, the rest of the The Danger Crew is actually pretty close to done... we're entering a period of story editing, QA, play testing the remaining chapters. We also have a nice little CI pipeline set up, so we can easily push enhancements and fixes. As for me, I'm excited to move on with learning Unity and figuring out what's next for me and my career.

]]>
focus-within
2019-01-12T11:42:32-07:00
Top JavaScript Dashboards For Your Web Projecthttps://codepen.io/flexmonster/post/top-dashboards-for-your-project
https://codepen.io/flexmonster/post/top-dashboards-for-your-projectFlexmonster
The power of data visualization cannot be underestimated.

Regardless of the industry you are working in, you should be able to analyze the incoming data and visualize the results immediately.

We’ve picked for you the top pens with analytical dashboards.

These data visualizations help to get deeper into the meaning of your data and communicate it efficiently.

Why not to try playing with demos? They're totally interactive.

Sales analytics 📊

These dashboards reveal the information about highest levels of sales by countries and over time periods. Load the data into a pivot table and spice up your data analytics with the charts - it's as easy as pie!

Space analytics ⭐

Are you interested in everything related to the space industry? Then the following analytics is a great choice.

Learn more

]]>
Top JavaScript Dashboards For Your Web Project
2019-01-11T17:02:53-07:00
Creating vector-like CSS illustrationshttps://codepen.io/ilithya/post/vector-like-css-illustrations
https://codepen.io/ilithya/post/vector-like-css-illustrationsilithya
There are several posts out there around CSS illustrations, but not one I've read so far -correct me if I am wrong-, which talks about the technique I'll share with you today. Creating vector-like CSS illustrations, an approach I use often to create most of my illustrations, making them resizable in a matter of seconds.

The story

I joined CodePen in the year 2015, and the first thing I did was experimenting with CSS illustrations. Four years after, I still enjoy exploring and creating pure HTML and CSS illustrations either completely designed by me, or followed by someone else's design.

The main focus of my CSS illustrations is the ability to build such illustrations in a vector-like style.

Ever since I started with some of my first illustrations, I often wanted to create not only an illustration with pure CSS, but also, if possible, make sure it'll be modular, responsive and/or scalable—easy to maintain in the future.

Now, you might be asking yourself, why bother making an illustration modular, responsive and scalable? Well, because it helps me exercise and improve the way I write CSS and semantic HTML, as well as the way I build components.

The HTML

Beginning with the HTML, I work out my modular and scalable code by creating class names in semantic HTML elements and using a CSS methodology, my favorite is BEM, with a mix of OOCSS and ITCSS for patterns and DRY (Don’t Repeat Yourself).

The CSS

The fun part, from illustrating with code, comes when writing the CSS.

To make sure the illustration would be maintainable, I thought not only using global or local variables would be enough. What if in the future whenever one wanted to change the size of the illustration proportionally, one could modify it in a blink of an eye, instead of tweaking each section of the illustration during several minutes or hours. And what if that magic could be achieved by simply updating just 1 variable in the whole CSS styles.

This is when resizable components came to my mind. I was sure, back in 2015, I wasn't the first person thinking of this, as matter of fact, maybe someone else had already applied this method on real production components, and I had no idea.

Then I googled it, and after months of exploring this idea sporadically, I found this amazing article, in 2016, by Ahmad Schadeed: Building Resizeable Components with Relative CSS Units, which pretty much approaches a similar idea, call it technique, to resize all the UI in components, including text, after detailed code examples following an SCSS function that converts px to em proportionally after a given SCSS global size variable.

The SCSS variable

My very first attempt in creating vector-like CSS illustrations started likewise by declaring one size global variable via SCSS, that would be called in later from several selectors. For example, as I drew the Sugar Skull presented below, I declared the following SCSS variable: $calavera-size.

Then, anytime I'd like to resize the finished illustration, I could always come back to that single SCSS variable and place any desired size in pixels: $calavera-size: 500px;.

Needless to say, my code back then could be improved a lot! My patterns, mixins, code organization... Oh well, this is a good opportunity to highlight that practice makes perfect. Ok, maybe not perfect, but better!
If I take a look at my CSS illustrations over the years, it is a good sign to see that my code has progressed -i am sure it's the same for you-, and also the time invested into drawing with code.

Media queries vs. SCSS variables

In the past, I was a bit frustrated with this vector-like technique explored so far, because of course I also dreamed of making that illustration responsive, but without adding more work to it.

I wanted to be able to simply resize that SCSS variable inside a media query and say voilà.

Sadly, redefining an SCSS variable, on its own, inside a media query didn't and still won't work. Instead one needs to do something like the following:

And I did explore further this method, of course. But wasn't satisfied completely with the responsive code for the CSS illustrations. It was still too much work!

Next, you'll find two examples I drew back in 2016 while experimenting with resizing SCSS variables inside media queries. Drunken Watermelon and Matryoshka:

CSS variables

I believe at some point in the year of 2016 -correct me if I am wrong again, please-, CSS variables became native. And of course, yet again, I had to test them with my vector-like CSS illustration style.

Since at the beginning CSS variables browser support wasn't particularly amazing, I started testing only using them for color variables in my illustrations. For size variables, I still declared them via SCSS. However, the code structure and defining dependent SCSS sizing variables from the resizable SCSS variable was improving in this vector-like technique.

Media queries vs. CSS variables

By 2018 browser support for CSS native variables only got better and better, until today -2019-.

I noticed, over those years, more CSS variables experiments were done by other people in CodePen, including complex calculations with calc working pretty decently, that I thought, now it's the time to test further CSS variables for sizing variables. But life happened, and it took me a long time to catch up with it, and update my vector-like CSS illustration style.

Earlier this year, I finally closed the annoying gap that was frustrating me with the responsiveness of my CSS illustrations.

I am happy to announce that my dream finally came true -I am late, I know-. My vector-like CSS illustrations can now be modular, responsive and scalable! They might not be flawless yet. It's a work-in-progress.

CSS variables are pure magic. By declaring one main global CSS size variable, one can easily create dependent CSS size variables to work proportionally, and -the best!- one can resize that CSS variable inside a media query.

This means, creating a responsive vector-like illustration is no longer a hassle. And also achievable in a matter of seconds, just like its maintenance in the future, in case it needs resizing or new illustration elements.

Down here you'll find two of the latest vector-like CSS illustrations I created recently in 2019, where CSS variables are used to make the illustrations not only responsive, but also resizable by editing only 1 CSS sizing variable. New Years Balloons and Daria MTV:

In a recent article tables and beers I explained how browsers correctly represent table semantics of simple tables with either a row or column of headers. Thus alleviating the need to use the scope attribute to identify a th as a row or column header. In this article I take it a little further, with tequila and beer.

Table with header cells in the top row and first column

The WAI advice meets reality

In this table, the row header cells are in the second rather than in the first column. The approach is similar to the examples above: The scope of the header cells in the top row is set to col. By using the row value for scope assigns the header cells in the second column to the data cells on the left and the right of the individual header cell.

The advice and common expert opinion is that in the case of the example table, scope is required on th elements to provide appropriate semantics. When looking at the information exposed in the accessibility tree in modern browsers it becomes clear that scope is not needed.

Well almost:

Chrome has a bug, hopefully fixed soon..., that results in the th in column 2 being incorrectly exposed as rowheader if the preceding element is a td

There are 3 methods to work around this bug, thankfully none of them involve adding scope to every th in the table.

Method 1

Add scope="col" to the first th in the column header row.

...
<tr>
<td></td>
<th scope="col">Monday</th>
...

Method 2

Change the td to a th leaving the th empty.

...
<tr>
<th></th>
<th>Monday</th>
...

Method 3

Change the td to a th and adding some useful information about the column it is acting as a header for.

...
<tr>
<th>Times</th>
<th>Monday</th>
...

Conclusion

Modern browsers expose the correct semantics for th elements in both column and row headers in simple data tables. This information is used by screen readers to convey correct header and data cell relationships to users.

]]>
Tables, Tequila and Beer
2018-12-29T11:38:46-07:00
Playing with the CSS Gridhttps://codepen.io/metamn/post/playing-with-the-css-grid
https://codepen.io/metamn/post/playing-with-the-css-gridmetamn
The need

Learning CSS Grid with a prior extensive CSS Flexbox knowledge.

Grid was skipped until now since it had no use case in my practice. Flexbox was good enough to set up any layout. Now it seems there is a complicated layout which might need Grid. This case will be presented at the end of the article.

TLDR;

to be done ....

display: grid

Displays grid items in a single column.

Each grid item is displayed in full width

It's like display: flex; flex-direction: column.

display: inline-grid

Displays grid items in a single column.

Each grid item has the width of the lengthiest item.

grid-template-columns and grid-template-rows

Displays grid items in multiple columns and rows.

The fr unit is very handy like % or vw

It seems rows are optional.

The auto unit sizes the grid cell according to its content.

grid-column, grid-row, ...-start, ...-end

They place individual grid items on the grid.

grid-column and grid-row are shorthands for grid-column-start + grid-column-end and grid-row-start + grid-row-end.

Time again for another "My year on CodePen" blog post. I like to write them because it forces me to think through what I made and realize I have reasons to be proud. So it is mainly for myself but please read on.

I've made 59 public Pens during the year, here I've gathered my favorites. There are three distinct themes/topics: three.js, noise and Codevember.

To ease the burden on your computer I've made some of the heavy Pens to be displayed in preview which means you have to first click Run Pen to see it. You are welcome 😉.

Meetups

Particles

I hosted Örebro CodePen Meetup no 3 when I talked about Particles (yay!).

three.js

I hosted Örebro CodePen Meetup no 4 when I talked about three.js.

Creative Coding

During the music festival Live at Heart there's a smaller, digital conference called Live at Heart Creative. "Live at Heart Creative is a hub for entrepreneurship and tech within the creative industries and a part of the Live at Heart Conference". I organized yet another CodePen meetup based on the theme creative coding.

Themes

three.js

I have been doing 2D canvas stuff on CodePen since March 15, 2015. I've seen lots of cool Pens made with three.js over the years, I've thought "maybe one day, I bet it is difficult". I came to a point where I decided that it was time to make the plunge. I love learning new things, but I dread the starting moment when I don't know what's up or down, the initial frustration. But by setting yourself up for success by having many small goals it gets easy. Make a cube spin (every three.js tutorial starts there it seems!).

Make several cubes spin.

Make several cubes change their height, in sync to create a circular wave shape.

Use noise to make a wave shapes with cubes.

I've done some bouncing animations in 2D in the past, for some reason I enjoy making them and looking at them and they're pretty easy to do, so I decided to make one in 3D. To prepare I first made one bare bones in 2D. Then I made a ping-pong ball simulation in 3D.

I use the web cam and three.js in "Pin Screen". A normal web cam can't detect depth so I am using the brightness to simulate depth: the brighter image that the camera detects, the brighter and longer box is drawn. I made Pixelator as a pre-study to get that blocky look and feel. If you look closely you will see that pixelate() and getAverage() are very similar in both Pens. This is my 2018 favourite Pen!

I've seen several of these spinning rainbow boxes before and wanted to try it myself.

To celebrate 800 CodePen followers I did "❤️ 800 Followers - a Cube of 800 Web Cam Cubes 📹". I use THREE.VideoTexture to stream video from the web cam onto the faces of the cubes.

After making a whole bunch of 3D Pens it struck me: hey, I know trigonometry and geometry in 2D, I just need to take another dimension into consideration. No big deal. =)

Noise

I love noise! And it just so happens that I am not alone... During Örebro CodePen Meetup no 3, Jonatan asked me if I could mentor him in creative coding for an evening, well Yes off course I can! We decided to work with noise. So we sat down a week later and I helped him get a grasp of simplex noise. Small steps, tight feedback loops is my mantra. So his first step was to create a basic static 1D simplex noise line, then a static monochrome noise image
...
After that evening I got inspired to make a few new noise based Pens myself.
First I made noise(noise(noise())).

Then I made Noisy Lines. It is somewhat inspired by Anders Hof in that there is a grid with similar patterns.

Then I made "Noisy Circles". I'm happy with the calcPoint() function that seamlessly wraps the noise around a circle.

This is "Make Your Own Noise Image". Using QuickSettings by Keith Peters.

This is "Dancing Noise".

Both Noise and three.js!

Time to apply some noise in 3D, Noisy Sphere. I generate a texture (2D image) with noise and apply some 2D to 3D conversion to get a nice looking bump map. Notice that the surface is flat, but looks bumpy due to the lightning effect applied through the bump map.

In "Infinite Terrain" I use noise to generate real 3D "bumps".

In "Noisy Cube" there are a lot of particles arranged in a cube with 4D noise applied to their position. 3 dimension for x, y and z, 4th dimension for animating it over time.

Web Expo

I attended the Web Expo conference in Prague and made some fan art of their logo. Here's two of them:

Try drag-dropping one of the vertices and see it wobble! This Pen uses spring physics: Hooke's law.

Codevember

I've participated before in Codevember and enjoyed it a lot so I decided to go for it again. This time I got nine days in and then life happened...❤️😘

These are my faves:

Infinity

Web

Green (a green screen). Try putting a green blanket behind you, or just find a green object and hold it to the camera. Notice that you can change the background image.

I made one CodePen project for Codevember: codevember - 5 - Music. I had already made an implementation of a ADSR envelope, and I built a check box drum sequencer back in 2016 in Angular that I could borrow a lot of stuff from. So this is re-using some old code and creating something new with it: a synth sequencer.
It is made with Vue.js and Web Audio API. The knobs are Copyright (c) 2018 by Kyle Shanks, his Pen.

Try it, it's fun!

Misc, no special theme

One of the 2018 Pens I like the most: "Repellers". It uses physics principles, gravity is a force proportional to the distance between two bodies, the closer they are the stronger force pulls them together. Instead of the bodies gravitating towards eachother I made them repell eachother. If you look at the code you will see that I use my vector library to do the math.

I was so happy when Repellers ended up on 79:th place on The Most Hearted of 2018. I've been wanting to make it to the list since I first saw it in 2015, this year I did! 😁

Mentions

I saw three of my Pens in a list called Awesome Demos from 2018 | Codrops. The bare title makes me proud, but seeing all the other amazing demos makes me think somebody made a mistake and put my stuff on that list.

Thank you! ❤️

Thank you to the CodePen community for the inspiration and encouragement! ❤️

]]>
My 2018 on CodePen
2019-01-13T18:28:47-07:00
Fun CodePen Trickshttps://codepen.io/finnhvman/post/fun-codepen-tricks
https://codepen.io/finnhvman/post/fun-codepen-tricksBen SzaboThere are some great features on CodePen that are not widely known. This post explains some of them and these are for every user (no PRO subscription needed)!

So I figured it's time for me to customize my profile. It only took two steps to do that: first I created a pen with some CSS, then I specified which pen to use for my profile. This latter setting is found at Settings | Customize | Customize Profile.

It's a bit confusing, but this field is not only for PRO users

My Customized Profile Pen contains a few rules that affect the cover, the Follow button and the profile links.

Cover image

With the snippet below, you can override the default CodePen cover image. What I did was creating a new image with https://trianglify.io/. I went with a grayscale triangle pattern, kind of similar to the default cover. Harnessing the power of SVG I added some slow pulsing color animations that resemble the accent colors of Pens, Projects, Posts and Collections of CodePen.

.profile-header {
background-image: url("<your-image-url>");
}

Follow button

Next, I wanted to highlight the Follow button to have it stand out more and make it a Call To Action. I am quite satisfied with the default layout of the profile page so I didn't make the button larger. Instead I added a fancy animated gradient background with the help of the ::before and ::after pseudo elements. Here's a dead simple snippet for making the button caption red:

.follow-user-button {
color: red;
}

Profile links

Then, I upgraded my profile links. You can add up to three links to your profile, I use two of them to link to my Twitter and LinkedIn. It's much more common to use icons for social links rather than the hostnames (twitter.com, linkedin.com) of the sites. I used a little known feature of the content property, called Element replacement: I specified an image for the content of the anchor element which replaced the text content.

More advanced Profile links 🤓

Lastly, I figured it would be a waste not using the third slot for profile links. I wanted something where I can promote my latest work, whether if it's a Pen, Project, Post, or Collection. Well, this is more meaningful for the latter three, because the profile page defaults to the pens showcase. Anyways, I kind of redid the icons of the four entities, then used clever selectors to add the corresponding icon:

Furthermore, I (ab)used the :visited pseudo-class to add a little notification badge. Be aware, that a very limited number of properties can be modified with this selector because of privacy reasons. background-color is one of them, so I created a black background-image with a little transparent hole in it using the radial-gradient() function. This background-image overlays the background-color, so I made the background-colorred in normal state and black in visited state.

The percieved result is a little red dot appearing when the user haven't visited the link, thus making it an actual working notification badge. On the developer side, changing the link automatically updates the corresponding icon and badge, no CSS update needed.

Related Official CodePen Blog Posts

Pens as Dependencies

If you have a lot of pens you might end up copying code from one to another. Avoiding duplications is a fundamental practice in programming, and CodePen provides a way to do it. You can use the CSS or JavaScript of another pen just like if it was a .css or .js file. The place to set this is under Pen Settings | CSS | Add External Stylesheets/Pens and Pen Settings | JavaScript | Add External Scripts/Pens respectively. Furthermore, you can include the HTML of another pen. See picture and snippet below:

Adding CSS and/or JavaScript of other Pens is done under Pen Settings[[[https://codepen.io/finnhvman/pen/MQyJxV]]]Including HTML of other Pens is done by triple brackets

I mainly use such dependencies for sharing CSS among pens. I made some utility pens where a lot CSS felt like they didn't belong there. These were the stylings of the low level components like buttons, text fields, etc. Trying to be a good programmer I started extracting them and eventually ended up creating a collection: Pure CSS Material Components. The pen below relies on CSS of other pens:

Of course be careful about your dependencies, there is no versioning. Whenever you update a dependency pen, the changes on the dependents will be reflected immediately.

Related Official CodePen Documentation and Blog Posts

Customize your Posts

If you happen to write posts on CodePen, you might have wanted to add some stylings on top of the default. There is a Custom CSS field in the post editor. It's not apparent at first, but whatever CSS is put there is applied to the whole page. Taking advantage of this, I added a little thingy just below the publish date of my posts:

Have you noticed the indicator in the header?

Read Time Indicator

I'm kind of used to seeing how much time it takes to read an article thanks to Medium. Such read time indicator comes very handy letting you know the length of the read beforehand. To measure the reading time of my post(s), I used this online tool, then I added the CSS below:

The .meta-line class is used on the container of the publish date. I had to use the pseudo element ::after to add content below that. This means that the reading time has to be manually updated and maintained in the CSS of the post, but worth the price!

HTML in Posts

Initially, the post editor made me assume that I can only use Markdown for marking the text. I was writing this exact post, when I found out that I can use HTML as well (so meta!). This made the markup so much better: I used semantic elements and added arbitrary classes for CSS, unlike in my previous writing where I used ugly hacks. See how mixingworks in the source of this line:

See how <strong>mixing</strong> **works** in the source of this line:

Customize all Posts

One last tip for those who write more: you can extract redundant CSS of your posts to a pen, then apply it to all of them. You can specify the pen defining the style under Settings | Customize | Customize Blog:

The helper text is pretty straightforward

Related Official CodePen Blog Post

]]>
Fun CodePen Tricks
2018-12-23T14:28:29-07:00
Pseudoelements don't really work with inline elements... or do they?https://codepen.io/tonkec/post/pseudoelements-don-t-really-work-with-inline-elements-or-do-they
https://codepen.io/tonkec/post/pseudoelements-don-t-really-work-with-inline-elements-or-do-theyAntonija Šimić
The title sounds like an obvious and well-known CSS fact, but I have seen experienced developers struggling with this topic, advising me to create overlays on images with pseudoelements. I was confident that pseudoelements do not work with inline elements, but then I played with the code, and it turned out, that statement is not entirely true. Let's see what is going on.

In pen above, you can see that after pseudoelement was added to img, input and div. But it only works with div element. Although after is visible in the inspector for both input and img element, it doesn't show on the screen. We can't see it nor select it.

But what if we set the display property to block for input and img elements?

The pseudoelement after still did not show up. Let's look at more what-ifs. What if we add after to a span element, which is an inline element by default?

Finally, the after pseudo-element is rendered. Can we say that it doesn't make a difference if we set the display property to block or inline? Let's play with some other elements to find an answer. Feel free to change the display property for every element.

It looks like that only textarea, br and select can't handle pseudoelements. Changing the value of the display property did not make a difference.

Let's look now at the table and all its children elements. How are they going to render after pseudoelement?

The after pseudoelement was rendered for all elements in the table: <table>, <thead>, <tbody>, <tr>, <th>, <td>. Those elements have various values of the display property: table-row, table-cell, table-header and others.

What we can conclude now is that display property of the element that contains pseudoelement does not affect the appearance of the after pseudoelement. What matters is to which element are we adding the after or before pseudoelement. Whether the after is going to appear or not depends on the HTML element itself, not its CSS properties. In other words, HTML elements have built-in preferences for displaying pseudoelements.

We can also say that all block level elements can always have pseudoelements, but some inline or inline-block elements, like <img> or <textarea>, may not render such pseudoelements.

]]>
Pseudoelements don't really work with inline elements... or do they?
2018-12-14T13:17:02-07:00
Fitting a div to the screen size AND an aspect ratio.https://codepen.io/EightArmsHQ/post/fitting-a-div-to-the-screen-and-an-aspect-ratio
https://codepen.io/EightArmsHQ/post/fitting-a-div-to-the-screen-and-an-aspect-ratioeightarmshq
We often create games at work which need a fixed aspect ratio, to suit the art style and game mechanics.

TLDR; set the max-width to a viewport height unit

You can fill a screen relatively easily. In our case, lets create a div with a class of content.

Great. But on really shallow (screens with a small height, or iframes like this one above) that div is going to overflow (you can't scroll as the body has overflow: hidden on it). We could give it a max-height... but the height is based on the width of the div.

Oh boy, this is confusing. If the height is based on the width, and its too high, perhaps there is a way to give the div a max-width, based on the height.

There is! Lets give the wrapper a max-width of a viewport height unit. What should that unit be? The aspect width divided by the aspect height: