DEV Community: dagpan

CSS Pseudo Elements

dagpan — Wed, 14 Oct 2020 18:29:49 +0000

Let's talk about …

Pseudo Elements

CSS Pseudo Elements is a versatile tool that delivers dynamic and powerful results without the need for JavaScript code.
Let me introduce you to the before and after tags.

  ::before   ::after

These two tags allow you to incorporate a pseudo html element either before or after an html element in your code.
Three things to note about these two tags.
a. Before CSS3 there was only one semicolon used when writing before or after tags. You might see it like this,

  :before   :after

After CSS3 specifications were introduced and became standard, it was decided to use two semicolons with before and after.
b. You can only add a before and/or after tag to an element that has content, because the before and after pseudo elements attach themselves to the content of an element.
c. You can only add one before and one after pseudo elements to an element on your page.

Let's see the tags in action. Here we have our simple page with a label "Name", a text input field and a submit button.

Renders

We are going to add some attributes to the pseudo before element and see how it renders on our page.

Result is

And now let's add an after one also.

Result

So as we can see at the examples above, it seems that there was a pseudo element added before and after the label element. In actuality that happened to the content of the label element with class name "required" we selected.

That is very interesting, let's check a common real world use.

Renders

So here we selected the "required" class name element, our "Name" label, to add a pseudo element with content "*" after it's content, "Name". This is a way to display the required field asterisk when filling a form, without the need for JavaScript code.

Results in this when we hover over the button

And this when we don't

Here we are making the position of the data-tooltip attr element relative and we are adding a pseudo element, displayed on hover only, after it's content "Submit Form", with content the attr data-tooltip's data "Tooltip". Also make it's position absolute relatively to the relative position of the button, place it underneath, separate with a small margin and have it be light grey. And we get this dynamic effect on our page without writing any extra code.

Although a 'pseudo' tool, it has very real and useful results!
I apologize for the above line, it was a failed attempt at a pseudo joke!

That's all for today folks,
Thank you!

See you next time.

CSS Positioning - Sticky

dagpan — Fri, 09 Oct 2020 14:08:49 +0000

Let's talk a bit more about sticky positioning today.

Sticky Positioning

We'll examine how best to use it two examples that will show us the situations we might need to use it also. We have our simple Html document with a navigation bar "main-nav" and some text as content .

Results in

We have our content displayed in the correct order and all, but there is an issue here. When you'll try to scroll the page you'll notice the header scrolls with the rest of the content. Let's try and fix it by using fixed positioning.

Page rendered

Now our header will stick at the top of the screen when we scroll but there is an issue with space between the header and the rest of the content. Let's make another change.

And the rendering

This is a perfect example for fixed position usage. But what if we had another section in our page above our header, how would that look like?

It results in

As you can see we removed the positioning and we added the new section above our header, but our header doesn't stick to the top when we scroll the page and all is not well with the content on our page. Let's use sticky and see what happens.

Renders

So now we have our picture above the header and while scrolling the page we can see the header sticking to the top as soon as it reaches it. This creates the desired effect for us.

Let's take a look at a move involved example now.

It renders

Here we have 4 groups with a header and a list-content for each of the groups. How can we use sticky position here?

Resulting in

Let's check how sticky position behaves here. All our headers were told to stick to the top of the screen once they reached it. So A header reaches the top, sticks there and once all content from A header's list-content is off the screen, A transfers the sticky to B header because it reached the top. And it will behave like that all the way till the end of our page.
This is all in the way we structured our elements in our document and the parent-child relationships between the headers - list content and their groups.

This is exactly why sticky position was created, for such situations as our example. And is where we can enjoy the way our content gets displayed on the browser dynamically.

There is still an issue with sticky position though and it has to do with browser compatibility. Only an estimated 90% of operational browsers actually fully support sticky right now. Other browsers might support it only partially and some not at all.

We are going to have to make some changes in our styling to get through those problems, either with prefixes for individual browsers or with the second example to ensure our page will function even if the browser does not support sticky position.

Thank you for your time.
That's all for today,
Stay safe and Zen.

CSS Positioning

dagpan — Wed, 30 Sep 2020 19:11:14 +0000

Let's talk about positioning today.

Positioning

We'll examine four position attributes we can use to manipulate the positioning of any HTML element. We have our simple Html document with a parent element and three child elements, One, Two and Three.

Our Styles document is straightforward and right now it contains no custom styling.

Static

The first position we'll check is the Static one. We have not defined any position attribute yet but if we check the document rendered

We can inspect the document and see the position set to static.
That is because static, is the default value given to all HTML elements' position attribute when rendered on the page.

Relative

Relative positioning works almost the same as static with a simple difference. Relative will allow you to define 4 position attributes top, bottom, left and right.

And the rendering

We have the same result, but if we change any of the four attributes, top, bottom, left or right

It results in

As you can see the element changed it's positioning relative to it's static position on the page rendering flow.
So the relative position element is taken out of it's default - static - position on the document render and repositioned relatively to it's parent element without affecting any other sibling elements on the page.

Absolute

Next let's check the absolute position. This one will completely remove the element from the page render flow, as if that element never existed.

Renders

This creates a unique situation when we manipulate the 4 attributes with an absolute positioned element.

Renders

In the above example, the absolute element repositioned itself relative to the document, because it's parent is positioned static and ended up at the top of the page. This creates a perfect way to couple relative and absolute positioning, let's change the parents' position to relative.

It renders

We can see above the absolute element repositioning itself relatively to it's parent relative position and ended up on the parent's top edge.

Fixed

Fixed positioning works differently as it "fixes" the position of the element relatively to the rendered html page and it doesn't bother with parent elements. A very important thing to remember with fixed elements, is that they will stay where you place them even when the page scrolls.

Renders

Sticky

Lastly we'll check the sticky position. It's a combination of both relative and fixed, as we can see at the examples bellow the sticky element behaves like a relative one when the page is rendered, but if the page scrolls down and that element reaches the top of the page, it will change behavior to fixed and stay at the top as the page scrolls.

Renders

And as the page scrolls

Thank you for your time.
That's all for today,
Stay safe and Zen.

Starting with CSS, part 2

dagpan — Wed, 23 Sep 2020 18:23:23 +0000

Let's continue with ...

Loading our styles

There are 3 basic ways to achieve this.
The first is by adding our CSS on the same lines as the HTML elements we are trying to style in the HTML file and it's called Inline.

<h1 style="color: blue;">
     Title 
</h1>}

It is not recommended though, as it is considered not good practice to include the styling in the HTML file, it should include the structure and the content. It's not very efficient, we would have to add our styling to every single element we mean to manipulate, we cannot use the styling anywhere else. Lastly this method might add to the page's loading time on the browser.

The second method is called Style Element.
It's slightly similar to Inline, we have to again include the styling in the HTML file, but this time we are creating all the CSS in the head section of the file.

<head>
   <style>
       h3 {
          color: blue;
       }
   </style>
</head>

This is also not recommended because we would have to include a style section in every HTML file, styling is applied only to the page it is included in and not re-usable across our pages, something not efficient or practical.

The third method, External CSS
requires as to create separate CSS file or files that will include all our styling and be linked to the HTML pages, through the pages themselves.

<head>
   <link rel="stylesheet" href="style.css" />
</head>

We use the above syntax to link an external file to our HTML.
It requires adding two attributes, first the rel one - we define the relation between the files - rel="stylesheet" will tell HTML this is a stylesheet file. The other one is href - we point to the location of the file - href="style.css" will let HTML know where to look for the file, we can use a relevant (to the location of the HTML) path or a URL as the location.

This is the recommended method of loading our styles and the one most widely used. It will keep the content/general structure and the presentation/style of that content separate, it allows us to re-use styles through our application and is considered good practice.

Thank you for your time,

In the next part we'll start with some detailed examples and see how we can combine all the concepts we discussed.

Starting with CSS

dagpan — Fri, 11 Sep 2020 17:39:47 +0000

Let's start with ...

Definition

CSS is a styling language used to modify the appearance of the content of web-pages, so it helps us change the presentation and design of web-page content, lets us express our creativity and gives us freedom in the way we accomplish that.

Syntax

CSS' syntax is straightforward and easy to understand

selector {
   property1: value;
   property2: value;
}

First part is the selector -we are selecting HTML elements-, next we need to have opening and closing brackets -we will define styles that will apply to the selected HTML element-, here we'll provide property-value pairs that will manipulate those styles for us, like color, font-size, for the HTML element that matches the selector. Example:

h3 {
  color: blue;
}

Selectors

There are many type of selectors, but the three most commonly used are: Element, Class and ID selectors.

Element

html element {
  property: value;
}

You can use an HTML element as selector.

<h3> Title </h3>

h3 {
  color: blue;
}

This will select all h3 elements in the web-page.

Class

.classname {
  property: value;
}

Class selector is the most commonly used and versatile one, it lets you select HTML elements by their class attribute.

<h1 class="big-header"> Title </h1>

.big-header {
  color: purple;
}

The period tells CSS that whatever follows is a class-name and not an HTML element name. It provides the easiest way to create reusable components, for example:

If your site has 3 kinds of buttons that share basic styling but have something unique to each, like background color, you can have one class for all three with the basic common styling and then three different classes for each with the unique styling.

<button class="btn btn-1"> Button 1 </button>
<button class="btn btn-2"> Button 2 </button>
<button class="btn btn-3"> Button 3 </button>

.btn {
    padding: 10px;
    color: white;
}
.btn-1 {
    background-color: blue;
}
.btn-2 {
    background-color: purple;
}
.btn-3 {
    background-color: red;
}

We created 3 for the unique styles and one for the common styles and in the class attribute of the HTML elements, we have to include both class names and separate them by space.

#element-ID {
  property: value;
}

Another commonly used selector is the ID one. It also has to do with selecting using an HTML element's attribute, the id attribute. Difference here is an element can have only one id and it has to be unique through your HTML page.

<h1 id="main-header"> Title </h1>

#main-header {
      color: white;
}

For this selector you simply have to use a pound sign followed by the id-name, much like the period we used before the class-name.
You can see why the class selectors are the most commonly used, take the above buttons example, we wouldn't be able to use that with the id selector, because they are unique through the HTML page.

Combining selectors

.selector-1.selector-2 {
          property1:value;
          property2:value;
}

You can also combine multiple selectors to define an HTML element. You only have to name all the selectors you are using, with no spaces. For example:
<h1 class="large-header">Title </h1>

h1.large-header {
         font-size: 200%;
}

<h2 id="big-blue" class="large-blue"> Title </h2>

#big-blue.large-blue {
         font-size: 200%;
}

We can also combine selectors with a method that uses
ancestor-child element relationships in the HTML page.

.ancestor .child {
         property: value;
}

Here we have to use a comma between the ancestor and child selectors. For example:

 <div>
   <p> Selection </p>
   <p> Selection </p>
   <p> Selection </p>
   <span>
      <p> Selection </p>
   </span>
 </div>

div p {
    color: red;
}

This will select all p elements in a div element even if they might have another parent.

Another way to combine selectors is using a comma to define elements we want to style the same way.

.big {
    font-size: 200%;
    color: purple;
}
.large {
    font-size: 200%;
    color: purple;
}

.big, .large {
    font-size: 200%;
    color: purple;
}

That's all for today folks,
Thank you!

Starting with CSS, will comeback with another installment.

Setting up a Coding Environment in Windows

dagpan — Tue, 03 Mar 2020 15:11:25 +0000

Hi folks, let’s talk Operating Systems!
I guess introductions are in order, so let’s introduce the Operating System.
Operating System or OS is installed on a computer and acts as the manager of the computer’s resources. Its main functions include managing those resources, allocating them to specific programs whenever necessary to perform a particular task, and establishing a user interface.

Some Operating System History

1950s - General Motors Research Lab implemented the first OS for their IBM 701.
1969 - Unix was developed at Bell Labs by Dennis Ritchie and Ken Thompson.
1981 - Microsoft markets DOS after it purchased 86-DOS software from a Seattle company.
1984 - Apple creates a Graphical User Interface paired with a Unix-type OS.
1985 - Microsoft launched Windows when a GUI was created and paired with MS-DOS.

Both macOS — the operating system used on Apple desktop and notebook computers — and Linux are based on the Unix operating system.
Like all major Linux distributions, such as Ubuntu, Red Hat, and SuSE Linux, macOS offers a desktop environment that provides a graphical user interface to application programs and system settings. This desktop environment is built on top of a Unix-type OS just as the desktop environments of Linux distros are built on top of the core Linux OS.

The practical aspect of the common roots of Linux and macOS is that both follow the Standard created for all Unix-like Operating Systems. This compatibility makes it possible to compile applications developed on Linux, on macOS systems. Like Linux distros, macOS includes a Terminal application, which provides a text window in which you can run Linux commands. This terminal is also often referred to as command line, shell, or shell window. It's the text-based environment that people used to operate computers before the graphical user interface became available. The popular Bash shell is available in macOS as it is in most Linux distributions.

That is why a macOS’s terminal app, integrated with github and a text editor of your choice, will provide an easier to setup, environment for us to start coding with.
Recently I had to setup such an environment for coding, when I joined a rather dysfunctional assortment of characters, calling themselves ‘CodeBenders’, but more on them later.

As a user with 85% Windows - 12% Unix-Linux and 3% macOS experience, having to do that on unfamiliar territory proved to not be as pleasant as I had hoped.

Analytics data for 2019 show that about 88% of Desktop/Laptop computers worldwide, run Windows, about 10% run macOS, the other 2% run Linux or some other kind of OS. If you like me, are part of that 88 percent and you prefer the OS you are most familiar with, stay tuned and we’ll walk through some of the most important steps you need to pay attention to, together.

WSL

Windows's Command Prompt tool works on its host file system and its not compatible with what we will be running on it. We need another Terminal Application that will be compatible, like a Terminal that will point to a Linux kernel.
Windows has a feature installed but not enabled by default, Windows Subsystem for Linux or WSL, it acts as a virtual temporary environment in which Windows 10 installs a Linux distribution, or ‘distro’ for you. So all we have to do is enable it, in Windows features options for your system.
You visit the Microsoft Store and from a selection of Linux distributions you pick the one you want, download free of charge and install. Windows will guide you through the process and when it’s done you’ll have access to a fully functional terminal of a Linux kernel!

Setting up everything else is exactly the same as the macOS environment setup. Install the editor of your choice and integrate it with your wsl terminal, integrate your sql adapter, github, learn accounts and you are all set. Manipulating the .profile or .bashrc files depending on the Linux distro you chose, for customization of the terminal or to have an authenticated ssh agent running as soon as you open your terminal, is a breeze.

Some things to keep in mind

Windows and Linux file systems are not compatible, WSL will save some important files in your Windows with the installation files of the Linux distro, but your projects will be stored in your Windows file system.

A very good alternative to using git commands in the terminal, is the Desktop Application Git provides for its users, Windows and macOS versions are available. The App itself is very light in resource usage, it has a delightful Graphical Interface and is very user friendly.

Look, CodeBenders mostly are thoughtful folk, so I will not leave you without some great news!

Microsoft recently made WSL 2 available

Main upgrades from WSL include the usage of a Virtual Hardware Disk (VHD) to store your files, Linux system can dynamically allocate Disk space as needed, it will also allow you to place files that your Linux apps will access, in your Linux root file system for faster file performance speed. Because of the new features when starting, WSL 2 will now use a small proportion of memory, so lesser impact on you system's resources.

A few important notes here are

WSL 2 is only available in Windows 10 builds 18917 or higher.
You will need to make sure that you have both the Windows Subsystem for Linux and the Virtual Machine Platform optional components installed.

I Will be testing WSL 2 first chance I get, so stay tuned for any updates and news from CodeBenders!
Have a Great Day folks!