DEV Community: Gary Siladi

Becoming a Storyblok ambassador

Gary Siladi — Wed, 20 May 2020 10:59:10 +0000

It's official. I've become a Storyblok ambassador. The announcement was made with an article which I'm super proud of. It's about Dynamic forms using Storyblok and Vuelidate. It is impressive that such a solution is possible. You don't need to worry about form validation when using this approach.

Feel free to check out the article. It explains in detail the setup of the Storyblok components and the Vue component code as well.

To see the end result of the solution available, I made a showcase video of the Storyblok solution preview. You can check it out here below.

Stay tuned as many great articles and videos are coming up from me in the topic of Storyblok and Jamstack. We are on the path of making the web faster and safer. 🚀

My name is Storage, Local Storage 😎

Gary Siladi — Mon, 30 Mar 2020 20:20:09 +0000

All kidding aside 😅, sometimes you need a place to save your website's data. A place where user choices, website configurations can sit, even if you refresh your page, or reopen your browser. .localStorage is a good place for this use-case.

.localStorage is a storage of key-value pairs linked to a site through its URL. Its API is pretty straightforward.

window.localStorage.setItem("myData", "2");
// ^ Its .setItem() accepts two parameters: key, value. We can drop the window. prefix.
localStorage.getItem("myData");
// ^ returns "2"

You can inspect the storage in Chrome's Application tab under the Local Storage item.

We can store non-primitive data types in .localStorage as well. Let's say we would put an object there.

localStorage
  .setItem("userData", { name: "David", surName: "Programmer"});
localStorage.getItem("userData");
// it's returning "[object Object]"

Why is the previous code snippet returning our object upon calling .getItem("userData")? Because the .localStorage stringifies the value given to it before saving it. The default conversion from an object to string is "[object Object]". That means that in order to preserve the true content of our data, we need to convert it before saving to the storage.

The preferred way is to use JSON.stringify() and JSON.parse() which functions stringify and de-stringify their inputs.

const data = { name: "David", surName: "Programmer" };
const stringifiedData = JSON.stringify(data);
localStorage.setItem("userData", stringifiedData);
JSON.parse(localStorage.getItem("userData"));
// it's returning now our original object
// {name: "David", surName: "Programmer"}

localStorage can store up from 5 MB up to 10MB of data depending on your browser for a given domain. It is not accessible on the server, only the client's browser. It can come in handy for saving persisting data on your website.

HTML magic through DOM functions

Gary Siladi — Mon, 23 Mar 2020 21:00:12 +0000

Working with modern JS frameworks most of the time, most of us haven't had the need to work with the DOM directly. What even is the DOM? 🤷🏻‍♀️🤷🏽‍♂️

The DOM is the programming interface for communicating with your HTML document. In short it can edit your HTML's structure, content and style.

How do we communicate with this interface? Through JS. It is written in Javascript. Every element on your web can be accessed through the DOM.

const myHtmlBody = document.querySelector('body');
// the variable now has a reference to our <body> tag

We are calling the document object for the DOM. Every modern browser has this object directly accessible in its developer tools.
For accessing your elements you can call the following functions:

document.getElementById('customElementID');
document.getElementsByClassName('customCSSClass');
document.getElementsByTagName('tagnames like: 'a', 'div', 'span'');

Or the most universal ones; the .querySelector() and the .querySelectorAll()

document.querySelectorAll('any type of CSS selector')
const divsWithClassMenu = document.querySelectorAll('div.menu')
// ^ this returns an array of all the <div class="menu" /> elements present on the site
const divWithClassMenu = document.querySelector('div.menu')
// ^ this returns a single element, the first occurrence of the <div class="menu" /> elements present on the site

There are more functions for selecting elements, you can found them here.

Getting the content 📝

Now when we know how to select elements, we could work with their content. To do this we could use the .innerText value.

<div class="sentence">I'm just a simple div.</div>

const simpleDiv = document.querySelector('.sentence');
console.log(simpleDiv.innerText);
// "I'm just a simple div."

The .innerText isn't just a getter, but a setter as well. By rewriting its value you rewrite the element itself.

Changing looks 🎨

We have a few different ways to access and change our element's look. We could inspect and set the .style attribute. As a getter it returns the whole inline style string of the element.

There is a possibility to look into the active classnames of the element through the classname simple getter or the classList attribute.

The classname getter returns the full class in a string. Most of the time we want to work with the separate classnames on a given element. To achieve this we can benefit from using the classList attribute, which returns a 'quasi-array' of the separate classnames, and comes with its own functions to work with those classnames.

These include the functions:

document.getElementById('x').classList.contains('some-classname');
// ^ return `true` or `false` depending of the existence of such classname on the element
document.getElementById('y').classList.add('a-new-classname');
// ^ adds the new classname
document.getElementById('z').classList.remove('existing-classname');
// ^ removes the given classname

These provide a great way to replace some of your jQuery logic, if you're using jQuery.

Creating stuff 💡

With the help of the document object we can create whole new elements for our web as well. For this we would use the function createElement():

const newSentence = document.createElement('div');
newSentence.innerText = 'It feels good to exist. But I want to be pink!'
newSentence.style = 'color: pink;'

But this element is not yet visible. Why? Because it wasn't actually added to the DOM. We can add it by calling the appendChild() function on an already mounted element. The next example does this on the button click.

Some thoughts

Sometimes we use over-engineered solutions for small problems. With these examples I wanted to showcase that even simple DOM operations can change how your web looks, behaves. There is no need to import a heavy dependency for every small task. Sometimes a nice mixture of simple DOM functions will do the trick. There is much more into it, I know. But that's for next time. Give me your thoughts. What's your most-used low-level DOM function?