Css on blog.iankulin.com

CSS for React Components

Fri, 12 Jan 2024 00:00:00 +0000

Subscribe to my UX design course 😉

If you think back to HTML as being a document with headings and paragraphs and other semantic bits, it made a lot of sense to have the styles (expressed as CSS) separate to the document. This allows us to change the styles without touching the document - perhaps the user wanted a dark theme, needed the text bigger for accessibility, or perhaps the document was being consumed in some other way - for example a screen reader - so the styles were superfluous.

In tension to this idea, is the idea that all the code related to a single thing should be encapsulated in one place. This is why we invented object orientated programming - we are creating such huge software systems that for a human to be able to maintain them, they need broken down into chunks that can be fully held in mind while we are working on them. Also, when we are talking about a modern single page application, we’ve come a long way from thinking of a web ‘page’ as being a document to be passively consumed.

Since the point of React is to create reusable ‘components’ where the JS and HTML are written together, it’s reasonable to wonder if perhaps the CSS shouldn’t be in there too.

Let’s look at a few different approaches to managing styles for our components in React.

Old Style Global

Most times when I’m writing vanilla JS, if I’m not leveraging off Pico or Bootstrap I have a single site-wide styles.css file. Obviously this is going to be an option for a React app too. We’d just link it from the index.html in the root of our folder. Job’s a goodun.

The most common downside of this approach, that I come across, is that I change the rest of the HTML through the various iterations, but never clean up the CSS. So I get left with bits of CSS that I’m not sure if they are being used somewhere - so I’m not brave enough to delete them because my UX testing is not good enough, so those fragments just end up sitting around forever.

Old Style local

The first CSS we ever wrote was just stuffed in the HTML in style tags, and of course that’s still an option. We can use variables to help with the readability, and end up with something like this:

function Card(props: CardProps) { const cardStyles: React.CSSProperties = { width: '120px', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)', textAlign: 'center', backgroundColor: 'cornsilk', margin: '10px', padding: '10px', transform: 'scale(1)', transition: 'transform 0.3s', }; const pictureStyles: React.CSSProperties = { width: '100px', height: '150px', margin: 'auto', borderRadius: '50%', border: '2px solid #000', }; const nameStyles: React.CSSProperties = { color: 'black', fontSize: '18px', }; return ( <div style={cardStyles}> <img style={pictureStyles} src={props.image} alt={props.name} width={100} /> <p style={nameStyles}>{props.name}</p> </div> );}

Initially, this seemed like a good solution, but there’s a few bumps involved. The first is that, or course, this is not real CSS. You can see from the type that TypeScript forced me to use (React.CSSProperties) that these are React types that will get turned into CSS at some distant time in the future. Because of this, there are some oddities - my muscle memory wants to type the CSS property names like box-shadow, but for this they need to be camel case.

The next issue of ‘it’s not actually CSS’ was when I wanted to do my hover effect for the cards. In CSS this is just:

.card:hover { transform: scale(1.05); background-color: lightgoldenrodyellow;}

If I want to do that with inline styles, I need to capture the MouseEnter and MouseLeave events for the card, then swap the inline styles in and out in code. Ain’t nobody got the time for that.

CSS & Component Libraries

A common and appealing answer to inline styles is to use CSS libraries such as BootStrap, TailWind etc. As well as allowing you to add complex styles into JSX with short memorable tags, they often enforce a design aesthetic without the developer having to put much thought into it. Since I have minimal design skills, that’s an appealing option.

Taking this a step further are component are React component libraries such as chakra, Material UI, and Ant. With these systems, you get styled components (that can be modified) that follow a unified design - you’re not really thinking of CSS but at a high level of abstraction.

component.css

I guess the default (since it’s generated like this in the create-app step) way of managing CSS closer to our components is to have a .CSS file for each component. This overcomes the ‘cleaning up’ problem described above. If I’m deleting the NavBar component from this project, I can safely eliminate the NavBar.css file at the same time.

The component CSS file is just imported at the top of the component file.

If you build an app with the CSS in component.css files like this, all the CSS is combined into a single CSS file by the bundler. This raises the possibility of naming conflicts leading the hard to track down problems later. To avoid this I tend to use the component name as a class name and use that to tightly scope the CSS to avoid it bleeding out into other elements.

Modules

A bit fancier approach is to use CSS modules. This is somewhat similar to the component CSS files described above. Our CSS files have to be renamed to end in .module.css, then in the code where you normally insert the class names, you use the class names from the styles library:

import styles from "./Card.module.css";// props for cardinterface CardProps { name: string; image: string;}function Card(props: CardProps) { return ( <div className={styles.card}> <img className={styles.picture} src={props.image} alt={props.name} width={100} /> <p className={styles.name}>{props.name}</p> </div> );}export default Card;

Those class names match the CSS:

.card { width: 120px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; background-color: cornsilk; margin: 10px; padding: 10px; /* tilt and enlarge on mouseover */ transform: scale(1); transition: transform 0.3s;}.card:hover { transform: scale(1.05); background-color: lightgoldenrodyellow;}.name { font-size: 18px; color: black;}.picture { width: 100px; height: 150px; margin: auto; border-radius: 50%; border: 2px solid black;}

The advantage of using modules, is that you now do not have worry about name clashes. If I build the app and have a look in the generated CSS file, you can see how that works:

._card_j2a8o_2 { width: 120px; box-shadow: 0 4px 8px #0003; text-align: center; background-color: #fff8dc; margin: 10px; padding: 10px; transform: scale(1); transition: transform 0.3s;}

All the generated CSS has unique class names created for it! Presumably these match the ones being used in the JSX, and this explains why you need to use the styles. names in your components.

Styled Components

There are several libraries that tackle the issue of what to do about CSS in React. One of the more popular ones is Styled Components. How this works is that you define a base component with some styles in it (with a weird backticky syntax), then build your own components from the styled one. It makes more sense when you see it than my written explanation.

import styled from "styled-components";const StyledDiv = styled.div` width: 120px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; background-color: cornsilk; margin: 10px; padding: 10px; transform: scale(1); transition: transform 0.3s; &:hover { transform: scale(1.05); background-color: lightgoldenrodyellow; }`;const StyledImage = styled.img` width: 100px; height: 150px; margin: auto; border-radius: 50%; border: 2px solid black;`;const StyledP = styled.p` font-size: 18px; color: black;`;// props for cardinterface CardProps { name: string; image: string;}function Card(props: CardProps) { return ( <StyledDiv className="card"> <StyledImage className="picture" src={props.image} alt={props.name} width={100} /> <StyledP className="name">{props.name}</StyledP> </StyledDiv> );}export default Card;

If you don’t mind more dependencies, this is a great solution - I like the clarity of the philosophy of creating styled versions of regular elements as React elements, then using them as the building blocks of our new component. All the CSS attributes you’ve learned are still there.

The only thing I needed to look up was how to deal with my hover. In the CSS this had been:

.card { width: 120px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; background-color: cornsilk; margin: 10px; padding: 10px; transform: scale(1); transition: transform 0.3s;}.card:hover { transform: scale(1.05); background-color: lightgoldenrodyellow;}

Which had to be translated into this with the & syntax:

const StyledDiv = styled.div` width: 120px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; background-color: cornsilk; margin: 10px; padding: 10px; transform: scale(1); transition: transform 0.3s; &:hover { transform: scale(1.05); background-color: lightgoldenrodyellow; }`;

So - lots of options for dealing with CSS in React. I haven’t written much, so I’m not sure what my personal preference is. styled-components is definitely the most elegant of the approaches I’ve looked at here, but I’m a dependency calorie counter so my natural inclination is look elsewhere. The CSS file for each component seems like the next best system - I like that there’s no special hooks in the JSX besides the class names I would have used in ordinary HTML, but then you have the risk of name clashes. They can be avoided with the modules - but I am sort of used to dealing with that anyway.

Calculator

Mon, 16 Jan 2023 00:00:00 +0000

I’ve been doing a bit of driving during the holidays, which means a lot of podcast listening. An episode of JavaScript Jabber about JS features you should never use sparked my interest in [eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). eval() takes whatever you pass it in a string and executes it in the JS engine. This is a crazy concept if you’ve come from complied languages, and has obvious security implications. As with dynamic typing, I’m trying to force myself out of my comfort zone to embrace JS’s unique talents so I was keen to try eval().

lol - challenged accepted.

My first idea for using eval()was to write a calculator. Pressing the buttons would make build a string, this could just be passed off to eval() and the return value displayed. It’s such an obvious idea I’m sure I’m not the first to have it.

To ensure I’m growing my CSS skills, I also decided to steal the design of the iPhone calculator. That’s the first one below. The second is my current web app version.

Since the calculator display is used for two asynchronous purposes - showing the calculation string as it’s being built, and showing a calculation result when we press equals, I’ve kept a state variable inputState which is true when we’re building the string, and false when we’re displaying a result. btnAddClick() is attached to all the buttons used to build the string - 0123456789()-+/*

let inputText = '';
let inputState = true;

function btnAddClick(event) {
 if (!inputState) {
 inputState = true;
 inputText = "";
 }
 inputText = inputText + event.target.innerHTML;
 txtOutput.innerHTML = inputText;
}

The backspace key just slices off the last character in the input string.

function btnBackspaceClick() {
 if (inputState && inputText.length > 0) {
 inputText = inputText.slice(0, -1);
 txtOutput.innerHTML = inputText;
 }
}

Clear just empties the string and updates the display, then equals calls the dreaded eval() and shows the output. To make it a bit fancy, I show the input for the calculation just above the result.

function btnEqualsClick() {
 inputState = false;
 let output = eval(inputText);
 txtPrevious.innerHTML = inputText+"=";
 txtOutput.innerHTML = output;
}

That’s pretty much the entire code. Of course it doesn’t quite work like a conventional calculator, but I also didn’t have to learn anything about Reverse Polish Notation.

The big challenge - and you can see from the screenshots above, still ongoing - is the getting the CSS to work in a way that it looks correct on different devices. My iPhone is an SE, and I had it looking good on that, then sent it to a friend with a newer iPhone and the URL area would not hide. I’ll keep working at it, it has forced me to get a better understanding of grid.

I’m loving a browser developer tools to help with this. Both browsers have a “responsive mode” that allows you to resize the view to simulate phone like sizes without fiddling with your browser size all the time, and to still be able to see the tools. Dock your tools to the side, and look for the little phone/tablet button to get into responsive mode.

One other thing I learned is that in Safari on iOS double clicking on a web page zooms it in a little. That’s a great feature I guess, but a pain if you just want to enter a number like 99 on a web calculator. The solution turned out to be setting the CSS property [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on the buttons to manipulation.

source or try out the current version

99 CSS Layout Feedback

Sun, 25 Dec 2022 00:00:00 +0000

I’ve been in the swing with the #100DaysOfSwiftUI course of having frequent assignments to test my understanding of the course content up to that point, then watching the feedback video and reflecting on it here. So far, in the Complete Web Developer I’ve only had this single CSS assignment, so I was excited to see how I got on.

I was a bit chuffed that one of Andrei’s first actions was to edit the html to make it more semantic - I’d used

for the top bit, he used

which is probably better, and then I could have recycled

for the cover. Although in general, there was a lot of use of classes, where I had just used selectors carefully. I guess my thinking here was that the html should be free of information about how to display it - and we break that if we say add class="sticky" to the nav bar. The argument could be made the other way though - with my system I’m building dependency on a particular page structure into the CSS if I use a selector to pick out the last child in a list to apply a style to it.

Andrei also used an unordered list for his links - I saw this in a CSS video so it might be a common idea. He used a flexbox, and an auto left-margin to move the last link to the right edge of the screen which was neater than the fiddling around I did - but I think that’s down to me as I could probably have done the equivalent trick i grid.

There were a couple of new things introduced in the solution, which felt a bit unfair, although its a valid teaching approach I guess. One was vh units, and the other was using @media queries to change things based on the screen size. It wouldn’t have been possible for me to have used either since I hadn’t been taught them yet, but both were good in this context.

Same with the sticky nav bar, I’d actually considered this in my design, but hadn’t figured out how to do it. It was done with:

nav {
 position: fixed;
 top: 0;
 width: 100%;
}

But when I tried it in my page, I’d lost the vertical centering in the div below, so obviously I needed to do something to that to make it start at the bottom of the newly sticky nav bar which had been happening without any intervention before.

99 CSS Layout challenge

Fri, 23 Dec 2022 00:00:00 +0000

In the Zero To Mastery Complete Web Developer course, I’m up to the first practical challenge - to use CSS to layout a reasonably standard looking web page using flex-box and grid to make it responsive.

Frustratingly, both for writing this, and while I was trying to build the page, I’m unable to screenshot the example of the page I was supposed to be building, and instead had to keep opening the video and seeking the two second flash of the completed project, and eventually being reduced to photographing my laptop screen like a boomer relative sending me a meme:

What you can’t see in that image (because it was never shown for this version) is a foooter bar containing a piece of centred text.

The starting point was some html with a a handful of elements, and some unnecessarily complicated css colours.

<!DOCTYPE html>
<html>
<head>
 <title>Layout Master</title>
 <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
 <div class="zone green">Header</div>
 <div class="zone red">Cover</div>
 <div class="zone blue">Project Grid</div>
 <div class="zone yellow">Footer</div>
</body>
</html>

The hint that was given, was to use a mix of flex-box and grid. Since it was stated in the same breath that everything you can do in flex, you can do in grid, I decided to just do grid. I’m not anticipating having to maintain anyone’s flex code, so I felt I could reduce the amount I need to learn by eliminating flex-box.

I changed up the HTML a bit to make it more semantic, but still ended up with a couple of divs for the cover and projects.

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="style.css" rel="stylesheet">
 <title>Document</title>
</head>

<body>
 <header>
 <ul>
 <li><a href="about.html">About</a></li>
 <li><a href="products.html">Products</a></li>
 <li><a href="ourteam.html">Our Team</a></li>
 <li><a href="contact.html">Contact</a></li>
 </ul>
 </header>

 <main>
 <div class="cover">
 <img src="img/undraw.png">
 </div>

 <div class="projects">
 <img src="img/monitor_coding_2.png">
 <img src="img/desktop_analytics_2.png">
 <img src="img/files_2.png">
 <img src="img/data_storage_2_2.png">
 <img src="img/monitor_settings_2.png">
 <img src="img/server_2_2.png">
 <img src="img/server_3.png">
 <img src="img/server_safe_2.png">
 </div>

 </main>
 <footer>
 Made by IanKulin
 </footer>
</body>
</html>

I’ll work through the CSS piece by piece. The general stuff was importing the font, the reset and setting the body defaults.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 color: white;
 font-family: 'Roboto', sans-serif;
}

The header/nav bar was actually the toughest job here - it needs four links; three left aligned and one right aligned. I have no doubt that this is not the most elegant solution.

header {
 background: #33BCFF;
 height: 3rem;
 display: grid;
 align-content: center;
}

This grid and align was just to get the text vertically centered.

header ul {
 display: grid;
 grid-template-columns: repeat(3, fit-content(150px)) 1fr;
 grid-gap: 10px;
 justify-items: end;
 padding: 20px;
}

The links are in an unordered list, so that’s made to be a grid with three columns closely fitted to the text size, and one more column that takes up the rest of the screen width. There’s a 10 pixel gap between the columns and the content in the grid is aligned to the end. That makes no difference for the first three links since they are the size of their containers, but the right end one is pushed to the edge of the screen minus the padding.

header li {
 list-style-type: none;
}

header a:link, header a:visited {
 color: white;
 text-decoration: none; 
}

header a:hover {
 color: black;
}

Even though it’s convenient to have the links in a list, we don’t want the bullet points, so list-style-type: none; eliminates them. The text-decoration: none; gets rid of the underline, then we add in a hover style so the user gets some feedback that this is, in fact, clickable.

.cover {
 height: 300px;
 display: grid;
 place-items: center;
}

.cover img {
 height: 280px;
}

The cover image was a bit more straightforward. I used a grid to centre it in both axes, and made the image a bit smaller than the div.

.projects {
 /* the grid container */
 background-color: #33BCFF;
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 place-items: center;
}

.projects img {
 /* the grid items */
 height: 200px;
 width: 200px;
 margin: 1rem;
 background-color: #333;
 padding: 2rem;
}

The computer icons are displayed in another grid. This time the columns are auto-fill based on the browser width, but with a minimum width of the icons.

Finally, the footer is yet another grid, just to center the text on both axes.

footer {
 background-color: #F1948A;
 height: 3rem;
 display: grid;
 place-items: center;
}

source

CSS for Beginners

Thu, 15 Dec 2022 00:00:00 +0000

I mentioned a couple of days ago that the ZTM webdev course was skipping forwards too quick and that it would need to be supplemented. For CSS, I think the supplement for me is going to be this series from Dave Gray.

Wordpress Code Blocks

Wed, 21 Sep 2022 00:00:00 +0000

Non-iOS post warning :- )

I’m not really happy with the way I’m sharing code in these posts. I started off with the regular Wordpress code blocks:

 func isPossible(word: String) -> Bool {
 var tempWord = rootWord
 for letter in word {
 if let pos = tempWord.firstIndex(of: letter) {
 tempWord.remove(at: pos)
 } else {
 return false
 }
 }
 return true
 }

These seem a bit large to me, but it comes with a font size choice, which I like setting to “Tiny”:

 func isPossible(word: String) -> Bool {
 var tempWord = rootWord
 for letter in word {
 if let pos = tempWord.firstIndex(of: letter) {
 tempWord.remove(at: pos)
 } else {
 return false
 }
 }
 return true
 }

There’s a reason why coloured syntax highlighting exists in IDE’s, so obviously I’d want that for my posts. If you move to a paid tier on Wordpress, as well as eliminating the advertisements from your posts, you get a new coloured code block called “SyntaxHighlighter Code:

func isPossible(word: String) -> Bool {
 var tempWord = rootWord
 for letter in word {
 if let pos = tempWord.firstIndex(of: letter) {
 tempWord.remove(at: pos)
 } else {
 return false
 }
 }
 return true
}

It has a few options, line numbers, making links clickable, and highlighting lines (as I’ve done above), but no size, and no control of the font or colours, which are so dreadful I’ve mostly given up on using them. It does have a number of languages to choose from which is impressive, but the highlighting is not as good as Xcode, here’s how that snippet looks with the theme I’m using.

So the Wordpress block is picking out keywords and types, but not properties. In the ideal world my code examples here would look exactly like this. I could just use screenshots like this, but there’s a couple of minor issues with that. The first is the problems with scaling on different devices, and the second is that non-Apple viewers don’t have a simple way of selecting text from an image.

The idea solution would be that the SyntaxHighlighter code block had a few more options. Wordpress is known for the large number of plugins available, so there’s possibly a plugin that solves this problem, so a possible solution is for me to learn more about Wordpress which is not a big priority for me at the moment. Related to that is the possibility of using “Additional CSS classes” which is one of the options for the code block.

I do note that when code is copied out from Xcode it includes the font and colour information (I guess as rich text?). If I copy the code above and pasted it into word and change the background colour, it looks like this:

So that raises the prospect of pasting it into a different Wordpress block that displays rich text, but if there is such a thing, I can’t see how to access it.

HTML has evolved in part to solve this sort of problem, and there is an HTML block for Wordpress. If I save the Word doc above into HTML and paste it into the HTML block I get this, which is about 75% of the way towards what I’m after.

func isPossible(word: String) -> Bool {

var tempWord = rootWord

for letter in word {

if let pos = tempWord.firstIndex(of: letter) {

tempWord.remove(at: pos)

} else {

return false

}

return true

}

The HTML source is not pretty, but I can’t see why this couldn’t work if I wrote something to convert the pasted rich text into nicer HTML that looks closer to the Xcode IDE version.

Other people have solved this problem. I notice Paul Hudson has exactly the presentation I’d like on his pages:

His HTML for this (correctly) leaves the work for the CSS. I had a quick look, and other than knowing it was written by BootStrap, it was mostly incomprehensible to me. Better HTML and CSS is on my list of coding goals, but my current level of knowledge is stuck on 1996 HTML. I’d be happy to chuck up a page with some blinking text, a visitor counter and an under construction gif for any clients looking for that.

CSS Intro

Thu, 18 Aug 2022 00:00:00 +0000

When I wrote my last commercial HTML (in 1996 lol) I’m pretty sure there was no CSS. It was the land of textured backgrounds, blinking scrolling text, “under construction” gifs, and links to gopher URLs were not uncommon. So this is an area I need to update my skills a little just to carry on a coherent conversation in the developer world.

I’ve bumped into a couple of Tech With Tim videos recently, and I really liked his CSS intro for “Non-web developers”.