Multilanguage Site without CMS

George Ilias — Sat, 12 Dec 2020 10:45:22 +0000

Trying to add a language switch for a site

So I made a simple menu site and I want to add the ability to change language but I'm doing it in a very basic way and it's reseting when changing pages because of reload. Can anyone please help me with this? Any guide that I find is for wordpress and it's not helping because the site is hardcoded.

Browser Developer Tools

George Ilias — Mon, 20 Apr 2020 13:45:51 +0000

I just was curious about whitch browser has the best dev tools Firefox or chromium-based? I've searched the internet but I didn't found any answer that I liked. Firefox is better on the CSS part and Chromium on JS part. It's like that or it isn't that simple?

Manipulating DOM in JavaScript for beginners!

George Ilias — Thu, 02 Apr 2020 17:27:20 +0000

Hey! 👋

~Introduction

JavaScript has many abilities, one of the most useful of them is its ability to manipulate the DOM. Although what exactly is DOM and how we can change it?

~What is the relation between DOM and webpage?

DOM stands for Document Object Model and it's a tree-like representation on a webpage or document. Let's say each node has a relationship with other nodes and that's depending on how they are arranged in the HTML document. Here's some simple HTML code:

<html>
  <head>
    <meta charset = "utf-8">
    <title></title>
  </head>
  <body>
    <p> This is a paragraph </p>
    <ul>
      <li> Item 1 </li>
      <li> Item 2 </li>
    </ul>
  </body>
</html>

Here's what the above HTML looks like as a DOM tree:

We frequently referring to the parts of DOM with family relations, for example on the previous image the <html> tag is the parent of the <head> and the <body>. The <li> elements are the children of the <ul>element. Similarly, the <li>s are sibling elements.

Your HTML it's a template which when a browser reads it, it creates the DOM.

When you are creating a site you might want to play with the DOM and be able to change in response to a user action.Every web framework provides a way to adjust the DOM but for start we'll stick with plain JavaScript or, even better, jQuery!

~STEP 1: Access the elements

Here we have our sample HTML:

<h1 id = "header"> List King </h1>
<h2> Buy groceries </h2>
<ul>
  <li id = "one" class = "hot"> <em> fresh </em> figs </li>
  <li id = "two" class = "hot"> pine nuts </li>
  <li id = "three" class = "hot"> honey </li>
  <li id = "four" class = "hot"> balsamic vinegar </li> 
</ul>

> Select an individual element node

// Select the element and store it in a variable
var el = document.getElementById ("one"); // fresh figs

// querySelector() only returns the first match
var el = document.querySelector ("li.hot"); // fresh figs

> Select multiple elements (nodelists)

var elements = document.getElementsByClassName ("hot"); // find hot items

if (elements.length > 2) {  // If 3 or more are found
   var el = elements [2];   // Select the third one from the NodeList
   el.className = "cool";   // Change the value of its class atribute
}


var elements = document.getElementsByTagName ("li"); // Find li elements

if (elements.length > 0) {  // If 1 or more are found
   var el = elements [0];   // Select the first one using array syntax
   el.className = "cool";   // Change the value of its class attribute
}


// querySelectorAll() returns a NodeList
var els = document.querySelectorAll ("li.hot");
els [1].className = "cool"; // The second matching element is selected and changed

> Traversing between Element Nodes

// PREVIOUS & NEXT SIBLING

// Select the starting point and find its siblings
var startItem = document.getElementById ("two");
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;


// FIRST & LAST CHILD

// Select the starting point and find its children
var startItem = document.getElementById ("two");
var firstItem = startItem.firstChild;
var lastItem = startItem.lastChild;

~STEP 2: Work with those elements

> Access & Update Text Nodes

The text inside any element is stored inside a text node. To access it we use nodeValue property:

var itemTwo = document.getElementById ("two"); // Get second list item
var elText = itemTwo.firstChild.nodeValue;     // Get its text content
elText = elText.replace ("pine nuts", "kale"); // Change pine nuts to kale
itemTwo.firstChild.nodeValue = elText;         // Update the list item

> Work with HTML content

Using the innerHTML property, you can access and amend the contents of an element including any child elements.

// Store the first item in a variable
var firstItem = document.getElementById ("one");
// Get the content of the first list item
var itemContent = firstItem.innerHTML;
// Update the content of the first list item so it is a link 
firstItem.innerHTML = '<a href="http://example.org">' + itemContent + '</a>';

The textContent property allows you to collect or update just the text that is in the containing element (and its children).

var firstItem = document.getElementById ("one"); // Find the first item
var  showTextContent = firstItem.textContent;    // Get value of textContent
var showInnerText = firstItem.innerText;         // Get value of innerText

// Show the content of these two properties at the end of the list
var msg = "<p>textContent: " + showTextContent + "</p>";
    msg += "<p>innerText: " + showInnerText + "</p>";
var el = document.getElementById ("scriptResults");
el.innerHTML = msg;

firstItem.textContent = "sourdough bread";      // Update the first list item

Adding elements to the DOM tree.

// Create a new element and store it in a variable.
var newEl = document.createElement ("li");

// Create a text node and store it in a variable.
var newText = document.createTextNode ("tea");

// Attach the new text node to the new element.
newEl.appendChild (newText);

// Find the position where the new element should be added.
var position = document.getElementsByTagName ("ul")[0];

// Insert the new element into its position.
position.appendChild (newEl);

Access or Update attribute values

// Check and get value
var firstItem = document.getElementById ("one"); // Get first list item

if (firstItem.hasAttribute ("class")) {
  var attr = firstItem.getAttribute("class");

  // Add the value of attribute after the list
  var el = document.getElementById ("scriptResults");
  el.innerHTML = "<p> The first item has a class name: " + attr + "</p>";
}

// Create and change 
var fourthItem = document.getElementByTagName ("li").item (3); // Get the fourth item
el2.setAttribute ("class", "cool");                            // Add an attribute to it

// Remove
if (firstItem.hasAttribute ("class")) {
  firstItem.removeAttribute ("class");
}

So you can create animations or effects just by adding or removing a class from an element. You can also add inline style:

// Adds the indicated style rule
div.style.color = "blue";

// Adds several style rules
div.style.cssText = "color: blue; background: white";

// Adds several style rules
div.setAttribute = ("style", "color: blue; background: white");

Work with classes

// Adds class "new" to your new div
div.classList.add ("new");

// Remove "new" class from div
div.classList.remove ("new");

// If div doesn't have class "active" then add it, or if
// it does, then remove it 
div.classList.toggle ("active");

Important note: Usually your JavaScript, is run when the JS file is run, or when the script tag is encountered in the HTML. So if you are including your script tag at the top of your file, many of your methods will not work because the JS code will run before the elements you want to manipulate are created. A simple way to fix this problem is to include your script tags at the bottom of your html, so that it gets run after the elements/nodes are created.

That's it for now! I'll write another post about events too.

Thank you for your time reading this.

Career

George Ilias — Sun, 27 Oct 2019 11:05:41 +0000

Hi everyone, I'm currently in army and my problem is that I'm worried about what should I do after that. I would say that I know about Front-End development well enough though I have the time to learn about Back-End before I'm done with army, but I don't know what exactly should I learn about it because there are so many technologies and I'm a bit lost. Can anyone help me a little?

Fonts across browsers

George Ilias — Thu, 24 Oct 2019 04:19:13 +0000

So many times I have come across with an issue. The problem is that when am writing css and specify the font that I want to use on my site it displays different in Firefox. Im having the issue only with Firefox because all the other browsers are chrome-based. Is there any way to fix this? Thank you in advance.

Domain name

George Ilias — Wed, 23 Oct 2019 05:30:49 +0000

Hi everyone, I want to buy a .dev domain for my site and i want to know if yay.com is good because its giving ssl with domain.

React Course

George Ilias — Tue, 22 Oct 2019 14:38:43 +0000

Hi everyone, anyone have any suggestions about which is the best course on udemy for react that I xbcan buy?

Should I use Javascript or Css for creating animations?

George Ilias — Thu, 10 Oct 2019 16:11:35 +0000

Hi everyone, I was wondering if it's better to use Javascript or CSS Or both for different occasions?

Firefox web site problem

George Ilias — Sat, 31 Aug 2019 07:23:00 +0000

I need help with css animations in Firefox. Can anybody help me please?

DEV Community: George Ilias