Forem: Japheth Ezekiel

CSS Grid vs Flexbox - What is the difference?

Japheth Ezekiel — Thu, 22 Jul 2021 19:07:02 +0000

The internet is made up of over 1.7 Billion web pages with different page layouts. Technology nowadays is responsive to any screen orientation or dimension of the screen in our devices. Making page layout comes in handy with the use of Cascading Style Sheet also refers to as CSS. CSS is one of the cornerstones of the web. More like the flesh covering the bones of the body. It is easy to understand and there are lots of resources available on how to use this amazing piece of technology.

So how is this related to our topic?

CSS is use to design layout and the appearance of those web pages but creating multi-layouts is a huddle for beginners who intend to create project with that feature.
To solve these complications, Devs invented proper responsive layout models available natively in the browser, out of which - Flexbox, CSS Grid and Bootstrap became most popular and are widely supported across all platforms & browsers.
I will try to strike the difference between CSS Grid and Flexbox fundamentals and probably when to use which layout.

CSS Grid: This is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.
To get started you have to define a container element as a grid with display:grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
Flexbox: The CSS Flexbox offers a one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes.
To get started you have to define a container element as a grid with display: flex;

What is the line of divide between these two?

a. CSS Grid Layout is of two-dimensional , that means it can handle columns and rows, not like flexbox that is basically a one-dimensional.
b. A core distinction between CSS Grid and Flexbox is their approach — CSS Grid’s
approach is layout-first whereas Flexbox’ approach is content-first.
c. The Flexbox layout is best suited to application components and small-scale layouts, while the Grid layout is designed for larger-scale layouts that are not linear in design.
d. CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows.

Library VS Framework - What is the difference?

Japheth Ezekiel — Tue, 23 Jun 2020 21:18:38 +0000

The key difference between a library and a framework is "Inversion of Control". When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you. When you using a library, you are in charge of the flow of the application. You choose when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.

Imagine trying to make a car. With a framework, you’re essentially given all the materials to make that car, and it’s up to you in what arrangement you put them in. A framework is just like a factory, it is pre-equipped with code that can help you make your product without you thinking about the small details and configurations.

With a library, on the other hand, you start with essentially nothing. The library’s materials are a limited set in comparison to a framework’s materials, and you can pick/choose when you want to use them and when you want to step outside that and use third-party materials.

A library is just a collection of class definitions. The reason behind is simply code reuse, i.e. get the code that has already been written by other developers. The classes and methods normally define specific operations in a domain specific area. For example, there are some libraries of mathematics which can let developer just call the function without redo the implementation of how an algorithm works.

In framework, all the control flow is already there, and there's a bunch of predefined white spots that you should fill out with your code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework when appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.

Both of them defined API, which is used for programmers to use. To put those together, we can think of a library as a certain function of an application, a framework as the skeleton of the application, and an API is connector to put those together. A typical development process normally starts with a framework, and fill out functions defined in libraries through API.

Basic CSS Animation

Japheth Ezekiel — Tue, 21 Apr 2020 10:59:09 +0000

CSS animation is a proposed module for Cascading Style Sheets that allows designers and developers to add animations by editing the CSS code of their websites, instead of uploading GIF or flash images directly. With CSS animation, you can animate certain HTML elements without having to use processor and memory-hungry JavaScript or Flash.
Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties.
The animation properties applies an animation between styles. The animation property is a shorthand property for:
animation-name, animation-duration, animation-timing-function,animation-delay, animation-iteration-count, animation-direction,animation-fill-mode, and animation-play-state.
There's relationship between animation and @keyframes . Animation is a CSS property and to apply animation on the element which we create, we use @keyframes.
The @keyframes at-rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using @keyframes.
The animation-name property is used to specify one or more names of animations defined by @keyframes at-rules, that are to be applied to the selected element.
A @keyframes at-rule specifies the property values that are to be animated over a sequence of animation keyframes.
You can specify either one animation name in animation-name or a list of comma-separated names. Each name belongs to a @keyframes identifier. If the animation name specified using animation-name does not exist, no animation is applied.
The @keyframes rule specifies the animation code and it describes how the animated element should render at a given time during the animation sequence.
The CSS transform property is also used to alter the original form of an element. To do this, we can scale, rotate, skew, or translate the element. This can be achieved using the 2D or 3D transform property functions. The transform CSS property specifies a handful of transformation functions that can be combined any way you wish: scale(), skew(),translate(),rotate() and matrix().

scale(width, height): the scale function is used to alter the size of the element. The default value is 1. Values below 1 scales element down and values above 1 scales element up. Specifying only one value means that both width and height will be proportionately scaled.
skew(x, y): the skew function is used to distort an element along the horizontal axis(x-value). Or along the vertical axis(y-value), or on both axis.
translate(x, y): the translate function is used to move an element along the x-axis or the y-axis. It works like a relatively positioned element.
rotate(deg): the rotate function is used to rotate an element either clockwise or anti-clockwise. Element rotates clockwise between 0-360 degrees or anti-clockwise if the rotate value is negative.
matrix(): the matrix function is used to combine all the 2D transform functions together.

CSS Animations are great for animations that are relatively simple, because of the way@keyframesis structured. If you want to create a more complex animation, I will recommend you use Javascript to create your animation instead.
That’s it! With those basic properties, the possible animations you can create are endless.

Here is a resource file to get you started:

CodePen-The flying birds

Not Understanding the User Experience.

Japheth Ezekiel — Thu, 20 Feb 2020 07:47:09 +0000

In software development, having a deep understanding of users is a priority.
The users may have opinions about how a product should work, what they value, their abilities, and also their limitations. These opinions may differ from those of your development team. But it’s often difficult for new developers to understand what their users want, since they rarely get to interact with them directly.

Sure, project management techniques like Agile/Scrum make it easier for development teams to update the software as user demands change throughout the development cycle, but it can be challenging for developers who are still learning the ropes to balance the needs of the user with the lack of access to them.

Ultimately, the people who will use your product will be the end users.

However, users might know what task they want the product to accomplish, but not the features. It’s your job to figure that out. As Henry Ford once famously said, “If I’d asked my customers what they wanted, they would have said a faster horse.”

Talk to the people who have direct access to the users: (No, not the project managers.) If you really want to know what your users expect, go to the user experience experts or designers. They are required to approach each product with a human-centered design approach and are given direct access to the people who will actually be using the end product. Their insight will give direction to your code.
Test your product: If you really want to know what your users think about your product, test it. Successful companies like Apple often release beta versions of their products to see how users will react to them before they are officially launched. This helps them fix any bugs and any issues users might point out.

Adding patterns and designs to your pages without using Scalable Vector Graphics.

Japheth Ezekiel — Wed, 19 Feb 2020 12:11:58 +0000

As Front-end web developers, pixels can be both our friends and worst enemies. Making everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty way to go about handling patterns and designs on web pages — Css-doodle.
CSS-doodle is a library of tools that create art using CSS. CSS-doodle is a web component, just like any other HTML tag css-doodle. The component will generate a grid of divs by the CSS rules inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph on your web pages. CSS-doodle can be use to create some awesome repeated patterns.

How to use CSS-doodle:

First, you need to download the latest version or include it directly from a CDN src="https://unpkg.com/css-doodle@0.7.7/css-doodle.min.js">. Alternatively, you can also install CSS-doodle from npm and import the module in JavaScript npm install css-doodle.
Secondly, We don’t actually need to write any JavaScript, or any CSS for that matter, everything we do will take place in the HTML. In the body section of your HTML you add the syntax css-doodle. This element is targeted by the library and the contents we add will determine the pattern generated which can also be wrap within a

element.
The syntax of css-doodle is based on CSS and provided several extra utility functions and shorthand properties for:

Grid
Selectors
Properties
Functions
JS API.

Using the CSS Grid layout, the number of rows and columns in the grid is defined by the grid attribute on the element, ranged from 1 to 32. It's default to be 1x1 when no value or 0 is given.
The CSS-doodle component accepts any valid CSS rules. There are special selectors, properties and functions that that you can use to create pretty much any pattern imaginable.
To get started with CSS Doodle head over to https://css-doodle.com There you’ll find code examples and inspiring demos of things you can create with it.

Have fun playing with Css-doodle.

Creating a Hamburger Menu with pure CSS

Japheth Ezekiel — Fri, 08 Nov 2019 16:27:16 +0000

In Web Development, animating and adding interactivity on certain events creates a much better user interaction if done correctly. JavaScript is a full-fledged dynamic programming language that when applied to an HTML document, can provide that dynamic interactivity on websites. However, some interactivity can be done without the use of JavaScript. In this post, we’re going to create a "Hamburger Menu" with just HTML and CSS.
Lets kick it off with crafting a simple HTML file.
The page have two sections, the menu and the showcase. In the menu section, I created a div element with a class menu-wrap, in which I have an input element with type checkbox and class .toggler which is to add specific styles to the checked state, a div with a class hamburger, an empty div and another div with class menu. The last div element with class menu have an unordered list which is the content of the hamburger menu (Home, About, Services, and Contact).
I have two CSS files for this project, style.css and menu.css.
Style.css is just basic styling on the HTML. It add styling for the content of the header with classes; .showcase, .container, .showcase-inner, and .btn. There's a :before pseudo element on the .showcase class that gives the shade of the background-color in .showcase to the image in the pseudo element.
In my menu.css I set the menu-wrap to a fixed position because I want the menu to stay at the top even when scrolling the page. The class toggler have an opacity of zero so that the element input with type checkbox doesn't show the checkbox on the page. In creating the horizontal bars, I started with creating the middle bar i.e On the class hamburger, I used the empty div element to create the middle horizontal bar. Using the same .hamburger class and the empty div I use the :before and :after pseudo selector. Top position of the :after selector will be positive value of the value used before so it make the three horizontal, bars.
The :before and :after pseudo selector act as the 1st and the 3rd bar respectively, and the empty div acts as the 2nd bar. I’ve given all these elements ease-in-out transition so that all the transformation will be smoothly. The 1st bar and the 3rd bar transform (rotate) in 90 degrees to create an X on click.
Since .toggler is a checkedbox, the visibility property on the .menu-wrap class and .toggler: checked will be "visible" i.e the visibility from the .menu-wrap and .menu which was hidden initially is now visible in .toggler:checked.
The first div in the class menu will have the transform (scale) property and the second div with the opacity property so that when the bars are clicked (checked), it display the menu (the unordered list).
You can get the files from this GitHub repo:
https://github.com/iamdejean/Hamburger-Menu
Thanks for the read.

What is the difference between section and div in HTML? Are they not defining sections in both cases?

Japheth Ezekiel — Wed, 23 Oct 2019 07:28:00 +0000

Creating a "fill text with image" effect using HTML and CSS.

Japheth Ezekiel — Thu, 12 Sep 2019 19:41:27 +0000

Adding text on images can make your website look amazing. It is great for gaining the attention of readers. This is a popular technique and a classic effect in Adobe Photoshop/Illustrator, thanks to the power of clipping masks. It clips the image to the text, meaning that only the area of the image that sits directly above the actual text remains visible, creating the illusion that the image is inside the text. The rest of the image is now hidden from view which create a solid Fill layer. This same effect can be make using CSS. And here's how I created it.
First, I created an index.html file, markup have a h1 tag with an ID "title".
Secondly, I created a style.css file which I linked it to my index.html. The CSS has tags, classes and id's from my index.html giving them some basic properties.
Since the ID title is where my h1 is, I add a background-clip properties to it.
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.


background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image).

codepen: https://codepen.io/iamdejean/pen/wvwjjer
github: https://github.com/iamdejean/Fill-text-with-image-using-CSS