DEV Community: Berra

Tiny css separator

Berra — Tue, 30 May 2023 10:23:10 +0000

Ever had a case where you want to separate some test with a special character. But maybe some content is dynamic. And if not the first is visible - then the separator would be out of place - right?

This is a little solution I came up with in css using data attributes, empty selector and sibling selectors.

*:not(:empty) + [data-before]:before {
  content: " " attr(data-before) " ";
}

Use like this

Use it like this with some conditional JSX syntax.

<p>
  {tags && <span>{tags}</span>}
  {date && <span data-before="-">{date}</span>}
</p>

This would output Tagname - May 4:th 2023 if tags is available. And May 4:th 2023 when no tags are available.

How it works

From left to right top to bottom. The star * selector looks at every element. And then the :not(:empty) will take any element that has content inside. That is not empty! Then we have the + that will select the very next element after that. That element must have a data-before attribute. And then we add the :before pseudo element. In that before element we add content with spaces before and after and the content from the data attribute data-before.

Hope this was useful or educational or something like that.

Until next time, Cheers!

Highlight heading levels

Berra — Wed, 26 Oct 2022 13:27:25 +0000

Headings in HTML are important for many reasons. For SEO, accessibility and overall information structure.

The hierarchy is very important as well. First you must have the h1. And if you need another heading the following must be h2 and so on.

This is an example structure of heading levels.

h1 - Main title  
  h2 - Section title A.
  h2 - Section title B. 
    h3 - Subtitle for Section title B. 
      h4 - Subtitle for the previous h3. 
    h3 - Subtitle for Section title B
  h2 Section title C. 
  h2 Section title D.

How you style the headings are of course up to you. There's nothing to say that the h4 can't be the biggest heading. Or the h1 the smallest. Or that different h2 headings can have different design.

And that is why the following CSS can be used to highlight in your development code what level every heading has.

h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
  color: red;
  opacity: 1;
  background-color: white;
  z-index: 1;
  position: relative;
  top: -2px;
  left: -2px;
  border: 1px solid red;
  font-size: small;
  padding: 0 1px;
  line-height: 1;
  margin-right: 0;
}
h1:before { content: 'H1'; }
h2:before { content: 'H2'; }
h3:before { content: 'H3'; }
h4:before { content: 'H4'; }
h5:before { content: 'H5'; }
h6:before { content: 'H6'; }

The idea is to add an element before every heading and spell out the heading level to make it visible on the page without checking the source code or dev-tools.

Hope you find this useful.

Until next time!

Debugging with console.log

Berra — Tue, 25 Oct 2022 07:07:20 +0000

A 🔥-tip when debugging with console.log. I find this very useful in react/jsx code.

You can use parentheses pretty much anywhere in javascript to evaluate expressions. The “returned” value is the last one evaluated. So for example:

console.log( ("a", "b", "c") )

Will only log "c" to the console.

This is very useful in JSX since we usually do not wan’t to put javascript expressions everywhere.

Consider this example:

<InputElement 
  options={items.map(item => item?.attributes?.title)} 
  value={myValue} 
/>

If I wanted to log out the item element inside my options map function. Must I really refactor it with curly braces and explicit return? No - you don’t.

<InputElement 
  options={items.map(
    item => (console.log(item), item?.attributes?.title),
  )} 
  value={value} 
/>

Let’s do it with the value as well!

<InputElement 
  options={items.map(
    item => (console.log(item), item?.attributes?.title),
  )} 
  value={(console.log({value}), value)} 
/>

Notice the curly braces inside the console.log function. This will print out the following to the console. Making it easier to read.

{ value: "<the value>" }

So, what is going on?

This is actually the comma operator we're using. Read more about the details about that here: mdn web docs

Hope you found this useful.

Until next time!

I'm clicking on a checkbox label and another checkbox is selected! I have the solution.

Berra — Mon, 11 Jan 2021 13:33:02 +0000

You're workin' the checkboxes doing a fancy layout with your label element like this:

<label for="input-id">
<input type="checkbox" id="input-id" />

Now when you're clicking the label the input is selected.

Really nice! And very accessible.

BUT! Remember. If you add more checkboxes. Maybe with complicated names and ids. Make sure you don't have the same id on multiple checkboxes.

In that case the first checkbox with that ID will be selected.

That can be very confusing and lead you to question how React.useState works and other stuff.

Now you know!

Create a custom toString method.

Berra — Wed, 02 Sep 2020 07:26:56 +0000

Do you get really angry if you see [object Object] in your browser. Well, this is the fix you might not need.

If an object has a toString method on itself that method will be called whenever javascript is trying to make the object to a string. Cool, right?

For example to output the name in a cool way at all times create a function that returns an object with your custom toString method.

function createPerson(firstName, lastName) {
  function toString() {
    return `${this.lastName}, ${this.firstName} ${this.lastName}`;
  }

  return {
    firstName,
    lastName,
    toString
  }
}

Now

JD = createPerson("John", "Doe");
let html = `<q>My name is: ${JD}.</q>`;
document.body.innerHTML = html;

Of course you could also do this if you feel like it:

Object.prototype.toString = function toString() {
  throw new Error("Do not parse ME as a string!");
}

I hope you find this useful or interesting.

Optional length?.

Berra — Tue, 01 Sep 2020 11:43:25 +0000

Imagine you have an array of news item. And if that array is empty you do not want to render your news list. Of course!

And maybe. Your api in that case does not give you the "news" key at all. And you have to write code like this:

if(!news || news.length === 0) return null;

Then I have news for you!

Use the new optional chaining syntax.

if(news?.lenght === 0) return null;

So clean!

And remember how to spell length.

Until next time!

Hyphenate anything

Berra — Fri, 14 Aug 2020 10:34:25 +0000

If you're like me and keep running low on horizontal space in web design nowadays. Don't worry - I have a nice solution.

Hyphenate!

If you do not care at all about language and words and breaking them in the "correct" way this is the way to do it.

function addSoftHyphensToWord(word) {
    return word.split('').join(String.fromCharCode(173));
}

function addSoftHyphens(text) {
    return text.split(' ').map(addSoftHyphensToWord).join(' ');
}

And in your CSS you add these rules.

.break-with-manual-hyphens {
    word-break: break-all;
    hyphens: manual;
}

Now your text will break anywhere. This is great.

Until next time.

Recursion recipe

Berra — Fri, 14 Aug 2020 10:33:20 +0000

I think recursion is really hard. It’s not like it's really hard. It’s just that I kind of always has to redo my functions many times before I get it right.

So I will try to make a small recipe for doing recursion on a nested data structure.

Say we have this data:

[{
  label: "i am root",
  href: "/",
  children: [{
    label: "i am a leaf",
    value: "/leafnode-1",
    children: null
  }]
}]

And maybe we want to turn this into a navigation or something like this:

<ul>
  <li>
    <a href="/">i am root</a>
    <ul>
      <li><a href="/leafnode-1">i am a leaf</a></li>
    </ul>
  </li>
</ul>

And this is our output functions. First the outer function that will render the <ul> element in our example. It will take a node and a function to render the list.

function renderList(node, innerFn) {
  return `<ul>${innerFn(node).join("")}</ul>`;
}

The inner function (innerFn) will return an array with the output of our next function.

And so. This is the function to render the list. It will take an item as argument and the outer function to render a sublist. And so on.

function renderItems(item, outerFn) {
  return `
    <li><a href="${item.href}">${item.label}</a>
      ${outerFn(item.children)}
    </li>
  `;
}

And this is the "behind the scenes" function that connects the functions and does the mapping.

function createRecursionFunction({ 
  innerFn,
  outerFn,
  renderLeaf,
  isLeafNode 
}) {
  function _outerFn(node) {
    if (isLeafNode(node)) {
      return renderLeaf(node);
    }
    return outerFn(node, _innerFn);
  }
  function _innerFn(node) {
    return node.map(function mapper(i) {
      return innerFn(i, _outerFn)
    });
  }
  return function(data) {
    return _outerFn(data);
  };
}

Now we can use our factory to create a brand new function. But first let's make a function to check if we’re in a leafnode and render an empty string if that is the case.

function isLeafNode(node) {
  return node === null;
}

function renderLeaf() {
  return '';
}

const createMenu = createRecursionFunction({
  outerFn: renderList,
  innerFn: renderItems,
  renderLeaf: renderLeaf,
  isLeafNode: isLeafNode,
});

const htmlMenu = createMenu(data);

Now we have a flexible recursion function factory that will take your data an inner and an outer function as arguments.

I haven't used this in production myself. But I imagine it could be handy.

Until next time.

Javascript Arrays

Berra — Fri, 14 Aug 2020 10:31:29 +0000

Remember how to spell ~~lentgh~~ ~~lenght~~ length. It is very good when working with arrays in javascript.

You could also create a small helper function like this:

function size(arr) {
  return array.length;
}

Size is much easier to spell than length. This will also work for strings.

Would like to know the size of an object? You could use our nice function to do this:

const obj = {
  keyA: "A",
  keyB: "B",
}

size(Object.keys(obj)); // 2

That is sweet.

Hope you find this useful or funny. Until next time.

Hello world

Berra — Fri, 14 Aug 2020 10:29:45 +0000

Hi! This is my blog. I wish I had all the time in the world to do fun stuff like blogging, fermenting cabbage, panning for gold and things like that. I might share some stuff here. I know I will try.

Welcome!