2 posts tagged with "javascript"

How to use the Position and Display CSS Attributes

November 3, 2020 · 4 min read

KrishnaKanth

Developer

Display and Position are two of the most used CSS properties, each accepting a variety of arguments. Below are some of the most common applications of these properties.

Display Property

The two main options here to understand are block and inline.

Block elements

An element with display: block will take up the entire width of the container or page. These elements will always take up their own line by default, even if they have sibling elements.

Inline elements

An element with display: inline will be as wide as it's content by default, and can fit on the same line with many other elements that share this property. For an inline element, margin and padding values will only be respected if they are left or right. Since this element is "in line", any styles such as margin-top or padding-bottom styles will not be applied.

Inline-block elements

An alternative option is display: inline-block, which is the same as display: inline except that left and right margins and paddings are also applied.

Each element on the page defaults to a certain display value depending on the browser.

Element	Typical Default Value
`<div>`	block
`<h1>`	block
`<p>`	block
`<input />`	inline-block
`<image />`	inline-block
`<a>`	inline

Flexbox and Grid

These properties were introduced to CSS more recently to solve layout problems and arrive at current best practices.

Flex

An element with display: flex applied to it will be a flexbox container. This means that it's children elements will be lined out horizontally in a row as flexbox defaults to flex-direction: row. If this value is changed to flex-direction: column, its children will be lined out vertically in a column.

This property is particularly useful if you want to have more than one element on a line, anywhere in the page.

More details about Flexbox can be found

Grid

This property is similar to flex, as applying display: grid to an element will make it a grid container. With CSS Grid, we can specify the number and size of the columns and rows in our grid. We can also specify the row and column gaps, along with numerous other options to making complex grid structures.

Position Property

The position property is useful if you plan to take an element out of the standard document flow, or make it an anchor for another element that is.

Static

By default, html elements are included in the document according to box-model rules. The default position value for every element is static.

Relative

An element with position: relative behaves the same as a static element, except that it's children may use it as a reference anchor. In order to use position absolute or fixed it is necessary that one of their parent (or ancestor) elements are position: relative.

Absolute

An element with position: absolute is removed from the normal document flow. By applying at least one of the properties: top, right, bottom, or left with a certain length amount, the element will be placed relative to the first parent element having position: relative.

This property is particularly useful for elements that are offset or "out of place", but still a certain distance away from a parent element.

Fixed

An element with position: fixed leaves the document flow like absolute, except that a fixed element will not moved when the user scrolls. This is especially useful for Navbar or Sidebar elements that should always be on the screen.

Sticky

This is a hybrid element behaving like a position: relative element until the viewport reaches a certain specified top height where the element will become position: fixed. This position value can cause issues, however it is useful when you have content in the middle of your page that you would like to become fixed. position: sticky can be seen in the sidebar of many websites where content such as a newsletter signup or ad sticks to the screen.

Conclusion

There are still numerous other values for display and position which have not been covered here, however this combination of property values will be used in the vast majority of cases in web development.

Node File System Basics

August 25, 2019 · 4 min read

KrishnaKanth

Developer

Node.js comes with a built-in File System (fs) module that has all the features needed to perform CRUD operators on local files and folders. First install NodeJS if you haven't already.

If you want to follow along in the editor, create a index.js file to to run each of the examples. Import the fs module at the top

const fs = require('fs');

We can run this file for each example using

node index

The file system has a variety of methods available such as opening, editing, deleting files, etc that we can use. Each method has an asynchronous and synchronous version available to use. The shorter method name is always asychronous, while the synchronous one has Sync at the end.

fs.appendFile() is asynchronous
fs.appendFileSync() is synchronous

Both methods generally achieve the same thing so choose the one that makes the most sense for your situation

Here are some of the methods you can call using the fs module

File system Method	What it does
appendFile	Appends text to a file
mkdir	Creates a directory (or multiple)
readDir	Reads the contents of a directory
readFile	Reads a file
writeFile	Writes text to a file
unlink	Deletes a file

Each method generally accepts a path or file string as the first argument.

Create Files and Folders

Create Files

To create a new file, use the writeFile method to write a blank string. This will create a new file if the file doesn't already exist

fs.writeFile('new.txt', '', (err) => {
  if (err) throw err;
});

Create folders

Create one or multiple nested folders using the filesystem like so

fs.mkdir('./folder/subfolder', {recursive: true}, (err) => {
  if (err) throw err;
});

Write to a File

There are two methods to write to a file, depending on if you want to add text or overwrite text. The first method, writeFile will overwrite whatever text is in a file

fs.writeFile('list.txt', 'apples, oranges, lemons', (err) => {
  if (err) throw err;
  console.log('File saved!');
});

The other method, appendFile will create a new file if it doesn't exist, and append text to the end if it does

fs.appendFile('list.txt', 'apples, oranges, lemons', (err) => {
  if (err) throw err;
  console.log('Text was appended to file!');
});

Read Files and Folders

Read a file

We can read our list.txt file from above with the readFile method

fs.readFile('list.txt', function (err, data) {
  if (err) {
    return console.error(err);
  }
  console.log('Asynchronous read: ' + data.toString());
});

Synchronous methods are sometimes easy to code for example we could shorten the above code to

var data = fs.readFileSync('list.txt');
console.log('Synchronous read: ' + data.toString());

Read a folder

We can also read folders with the following readdir method

fs.readdir('./folder', function (err, files) {
  if (err) {
    return console.error(err);
  }
  files.forEach(function (file) {
    console.log(file);
  });
});

This method will return the names of the contents of the folder, whether they are files or folders.

Delete Files

Lastly, we can delete files with the unlink method

fs.unlink('list.txt', function (err) {
  if (err) {
    return console.error(err);
  }
  console.log('File deleted!');
});

Making HTML and JS Files

The fs module is great for working with any types of text files including .txt, .js, and even .html. For example we can include whatever file type we need like so

fs.appendFile(
  'index.html',
  `<!DOCTYPE html><html>
  <head>
  <title>Page Title</title>
  </head>
  <body>
  <h1>Page Heading</h1>
  </body>
  </html>`,
  (err) => {
    if (err) throw err;
    console.log('Text appended to the file!');
  },
);

There are plenty of cool features in the file system you can use to build out interesting applications such as editors, note-taking apps, and more.

2 posts tagged with "javascript"

Display Property#

Block elements#

Inline elements#

Inline-block elements#

Flexbox and Grid#

Flex#

Grid#

Position Property#

Static#

Relative#

Absolute#

Fixed#

Sticky#

Conclusion#

Create Files and Folders#

Create Files#

Create folders#

Write to a File#

Read Files and Folders#

Read a file#

Read a folder#

Delete Files#

Making HTML and JS Files#