DEV Community: Ellaine Tolentino

Gifts for the dev/s in your life 2021

Ellaine Tolentino — Wed, 22 Dec 2021 01:19:19 +0000

Hello! Since Christmas is coming up, and most of us have made some friends being in the great community of tech, I thought of curating this list of things I think would be a great gift to any of your loved ones or colleagues who is in the tech business.

This list is not the holy grail of lists and might be a little last minute but may help anyone who need any clue what to get for upcoming Christmas or the next occasion that calls for gift-giving! All of the items below can be purchased through Amazon (Affiliate links provided).

Programming Books/ E-books

Whether a new bootcamp grad or a early-career professional, they might need a good refresher book like these;

A Common-Sense Guide to Data Structures and Algorithms Book

Grokking Algorithms: An Illustrated Guide for Programmers and Other Curious People

Monitor Lamp or Screen Light Bar

I have one myself and has been one great addition to my desk setup. This is a great alternative if you have limited desk space and are looking for a light source other than desk lamps or the clamp-on ones.

Most popular one:

BenQ ScreenBar Plus with Desktop Dial

Quntis Computer Monitor Lamp

USB-C hub

Speaking of desk setup gadgets, this USB C hub might also be a great addition! Besides a great protective design, you can also detach the main cable and switch it to a longer one if you need. Tad bit pricey (I also have one myself and it's been great so far.)

USB C Hub, 8 in 1 Hub with Detachable Connector

Desk Mats, Mouse Pads

Now that a lot of individuals are work from home, these are also a very functional gift. This can also be a way to spice up their WFH setup!

Felt Desk Mat - currently @ $15.00

If they're also a gamer, here's a budget-friendly option;

Psitek 32x12 inches XXL Large Gaming Mouse Pad - currently @ $12.00

Bags

A bag is a very useful tool to gift to someone who has to bring their laptop with them whether on their trips or to their office.

I have a similar one like this and has been with me for years. The price might not be as friendly, but it's worth it.

Thule EnRoute Backpack 14L - currently @ $70.00

Here's a budget-friendly option;

Lenovo Legion Recon 15.6 inch Gaming Backpack - currently @ $40.00

Mouse, Mice, Trackpads

If they connect their laptop into a screen or just needs a refresh on their current, a trusty mouse/mice is never a bad gift!

Logitech G305 Wireless Mouse - currently @ $45.00

These are just a couple of things you can gift to friends/family who are in tech or likes gaming! I hope it helped you if you're still looking for last minute gifts for Christmas!

Until the next!

Backdrop-filters!

Ellaine Tolentino — Sun, 03 Oct 2021 23:17:10 +0000

Hi! This blog is just to show recent backdrop-filters I've used!
I am no expert but this is just me sharing what I've encountered in the hopes to help other newbie devs like me that might have an interest testing these effects out!

backdrop-filter:

While filter applies the effect on the entire element including its children, backdrop-filter is more specific since it only applies as a ‘background effect’ or anything behind that element.

It is limited on compatibility, so please bare with me since almost all of these would still need a workaround to apply the same effect.

There are multiple values which backdrop-filter may be:

blur()

Starting of with blur, which values can be of pixels or rem. The length value refers to the length of pixels blurring together hence, longer the length the blurry it is.
I have examples on blur application on my previous blog(Frosted glass on CSS).

Other workarounds for other browser were also discussed on stackoverflow by other fellow devs!

sepia()

backdrop-filter: sepia(90%) 

/* Can be an IE & Firefox fallback: */
/* Not exactly the same but definitely can be altered for a more similar effect*/
background: #715515; 
opacity: 0.6;

Workaround:

grayscale()

Values can be a number or percentage.

backdrop-filter: sepia(100%);
backdrop-filter: sepia(.5); /* 50% of the effect */

hue-rotate()

I think this is my current favorite effect. This effect changes the whole hue of the image or background color depending on the angle values!

backdrop-filter: hue-rotate(220deg); /* same effect as -140deg */
backdrop-filter: hue-rotate(.61turn); /* same effect as 220deg */

If you wanted to take a peek of each's compatibility on browsers, check out caniuse.com and browse around for any css compatibility you wanna know about.

There are more backdrop-filter effects you should try! Check out these CodePens by other creators!

Simon's CodePen

Mahdi's CodePen

CSS Learnings! - Part 2

Ellaine Tolentino — Sun, 26 Sep 2021 06:50:24 +0000

For this weeks’ CSS learning, I recently got to try and play around with gradients! This curiosity for ‘textures’ kicked off after my recent blog!

By the end of this blog, we should have a mock landing page like this with our own interpretation.

Let’s get started!

What are gradients?

The easiest way I can explain it is the way 2 or more colors gradually transition from a point or position. Maybe in other media, it can be called blending or ombré(One hue to another).

Types of gradients

I recently read that gradients can be multiple kinds. Below is the list:

Linear-gradient

Can be adjusted with angle value.

Syntax:

background:linear-gradient(<angle>, <color#1> <breakpoint in % value>, <color#2> <breakpoint in % value>);

Example:
background: linear-gradient(180deg, navy 10%, yellow 90%);
/* If angle is left out default is 180degrees.*/

Result of that would look like this:
See that the navy starts to turn yellow at 10% position

You can definitely use hexcodes, rgba or hsla for specific shades.

background: rgb(238,174,202); /* fallback background-color */
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);

It should come out as this:

If you want to see some good color combos for linear, makeuseof.com has a list of a few you can use!

Radial

Radial can be used for that glow effect since the spread is circular or in radius. Can also be used for vignetting or sunflare-effect.

background: rgb(131,58,180); /* fallback background-color */
background: radial-gradient(circle, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 52%, rgba(252,176,69,1) 100%);

There are more ways to personalize a radial gradient. Like to where each color starts and ends and how many colors you can put.

Tympanus.net explained in their article on how to greatly utilize positions and personalize a radial-gradient.

Repeating

I find this type great when creating custom patterns or textures. Example like checkers, chevron, stripes, 3d stripes and many more!

Repeating Linear Syntax:

/* Simplest way I got to implement repeating-linear */
background: repeating-linear-gradient(<angle> <color1>, <color2> <width of each instance>);

Example:
background: repeating-linear-gradient(215deg, black, yellow 30px);

Repeating Radial With repeating-radial-gradient, you can specify the shape;
- ellipse
- circle

Each ending shape can be specified into positions;

closest-side
closest-corner
farthest-side
farthest-corner

Check out the formal syntax from MDN Web Docs.

A very creative implementation I saw was from Bennett Freely's CodePen!

Check his design out!

Conic-gradient

I’ve seen it use as pie charts, color pickers.
If done this way:

background: conic-gradient(from 90deg, #9c27b0, #ffeb3b);

It would look like this:
A conic gradient at 90degrees starting from '#9c27b0' to '#ffeb3b'

Since I started sharing creative implementations of the ones above, I found one for conic-gradient too!

Check out Lucas Bebber's CodePen using conic-gradient!

There is also a variation of this called repeating-conic-gradient which is the same principle as the repeating ones above, but is currently not compatible with IE browsers.

There are accessibility factors to keep in mind when applying gradients, CSS-Tricks broke it down on their article.

Results!

In our mock landing page, I got to use linear-gradient in a couple of components!

Here's my CodePen for the final results!

A good web app I came across called CSS gradient generator! If you have your colors in mind and wanted to see it before typing all your CSS code, this is the quickest way to test!

I hope you guys enjoy trying this out as much as I do!
Until the next!

References:

Icons used are from Flaticon
Other CodePen examples - Aepicos' Radial Gradient & Tyler Fry's Linear gradient
makeuseof.com - for the list of linear-gradient color combos.
projects.verou.me - More patterns using linear-gradient!
Bennett Freely's CodePen! - repeating-radial-gradient

Frosted glass on CSS

Ellaine Tolentino — Fri, 17 Sep 2021 20:17:03 +0000

Another week of learning something new! In this blog I am going to share with you how to make frosted glass just through CSS! There are a lot of variations you can do and that you can definitely find online. So let's go and explore together!

By the end of this blog, we should have something like Kyle Wetton's frosted glass on CodePen:

Disclaimer: Some are currently not compatible with Firefox, Firefox android and Internet Explorer. Checkout our Glass 4 for a more broad browser compatibility

So first of, let's make an html with all the elements we need. In my case, I wanted to make a mock login screen with that frosted glass design.

Now on our CSS file, we can apply our background-image to our 'body', adjust positioning and indicate the sizes you need then we'll get into the frosted glass.

There's a lot of ways to implement this. Below are what I've tried:

Glass 1

On your 'formDiv', you can apply backdrop-filter and box-shadow. In this case, box-shadow is inset with 200px spread with its shade and color opacity has been set. While backdrop-filter is set to blur at 8px. More of backdrop-filter on my next blog!



-webkit-backdrop-filter: blur(8px);  /* Safari 9+ */
backdrop-filter: blur(8px); /* Chrome and Opera */
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08);

We got our frost! This looks more likely of a frosted film than glass.

Glass 2

In this glass, we're setting the box-shadow darker, outset(the default by removing 'inset'), & less transparent, plus adding a background-color.



-webkit-backdrop-filter: blur(8px);  /* Safari 9+ */
backdrop-filter: blur(8px); /* Chrome and Opera */
box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
background-color: rgb(228 228 228 / 15%);

The shadow gives it a bit more perspective. But still similar to our first one.

Glass 3

Another thing I have tried is using filter! but instead of using blur as the filter, I used drop-shadow with combination of background-color, and box-shadow(inset).



filter: drop-shadow(2px 4px 6px black);
background-color: rgb(152 151 151 / 25%); /* Just adjust the color or opacity to make the text pop! */
box-shadow: inset 0 0 0 200px rgb(255 255 255 / 8%);

In this case, it will look more of a tinted glass than frosted glass.

Glass 4

Compatible with our IE and Firefox browsers!



background: #969899; /* Definitely adjustable to what shade you like */
opacity: 0.6;

Glass 5

If play around with it until you get the blur you want and want to add a little spice, you can also attach another backdrop-filter and some border!



backdrop-filter: grayscale(.8) blur(5px);
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.08);

border-top: 2px solid rgba(225, 225, 225, 0.3);
border-left: 2px solid rgba(225, 225, 225, 0.1);
border-right: 1px solid rgba(225, 225, 225, 0.2);

See that grayscale take effect anything under the glass and the border gives it thickness!

Check out my CodePen for the final results!

I had so much fun making this! I hope you did too!
Until the next!

References/Links:

CSS Tricks - Frosted Glass on CSS using filter()
Background photo - Vector Nature wallpaper
Google Fonts used:
- Raleway
- Fredoka One
Inspiration in designing frosted glass : Lennart Hase's CodePen

Learning MaterializeCSS

Ellaine Tolentino — Sun, 12 Sep 2021 00:03:55 +0000

What is MaterializeCSS?

From what I've seen, it's a CSS framework that's been used by thousands of websites around the world. List from wappalyzer.com. So far, I can see how it has a similar principles with Bootstrap but HTML! While a lot of times compared to Bootstrap, I learned that Bootstrap mainly uses JS-based templates unlike MaterializeCSS that mainly uses HTML & vanilla JS. But like Bootstrap, it's free, is an open-source tool and has a public repo on Github.

So how are we going to try our Materialize today? We'll try to apply some components to one of my projects and see how it works! I'm going to tinker this project with materialize!

So this is what we're working with..

Installation

You can download it to you local machine with the link they provided, through npm (npm install materialize-css@next) or through a link that you can add to your html(which we'll be using today).

Copy & paste these inside the <head> tag in your index.html.

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

And viola! Now we can use Materialize to add more components to our mini project!

Navbar

If you saw the page, it seems like it needed more components like a navbar. Application goes so easy like this;

Go to Components, then Navbar
For demo purposes, let's just choose the first one. Copy the html code snippet and paste it on your code.

Once done, our code would look like this;
I had to change some attributes into JSX/JS format, and change the href values
And for our page, now it has a navbar!

Icons

Now you may ask, the examples on the website has icons. Yes! Materialize can also provide icons for your project with easy steps and a lot of options to choose from.

Go to Components, then Icons
Copy & paste the script they have and paste it in the tag of your index.html, just like how we installed Materialize in the beginning.

 <link href="https://fonts.googleapis.com/iconfamily=Material+Icons" rel="stylesheet">

Syntax for usage: (JavaScript)

<i className="[SIZE] material-icons">[NAME OF ICON]</i>
//So, if we want a small sun icon
<i className="small material-icons">wb_sunny</i>

Then after adding it to our code, now we have this cool navbar with some nifty icons!
I chose the icons that were more fitting to our page's style. For demo purposes only.

Color

Now we have our navbar, but I want to change its color? Definitely can do this with CSS, but let's try and utilize more of our framework here. Materialize also provides a range of colors we can apply to our components!

You can use SASS/CSS for this. But the one we're using will be the className method.

To add a specific color to our Navbar, let's add it in it's className:

<div className="nav-wrapper pink lighten-3">
...
</div>

Results using a couple of the color palettes:

Finishing touches & Results

Now that we had a chance to play around with some components, I tried to add more things in our mock website and this is how it turned out!
Added another icon to represent the logo and I adjusted the logo's position using CSS

This is on night mode. Check out my blog on how I implemented the day/night mode.

I added a footer with links for a more complete webpage look.

On night mode

I hope i got you curious on MaterializeCSS's potential and inspire you to use it on your projects!

Will definitely keep this in my arsenal and keep trying it out! What do you guys think of it? Let me know in comments below. Until the next!

CSS learnings!

Ellaine Tolentino — Thu, 02 Sep 2021 22:33:31 +0000

I recently learned CSS things this week! It revolves around CSS due to certification exercises I have been taking. These are just a few but I hope someone can learn from this like how I did! So, here are some CSS attributes I've learned recently that you can try on you projects!

text-overflow

If you're familiar with overflow, this does the same principle but specifically for text elements.

Text-overflow can be set into these values:

ellipsis
- In order for ellipsis to take effect, you need to set the text element's width, white-space: hidden and overflow: hidden.
clip
- This is basically the same way as how the overflow : hidden works. Only thing is, text-overflow would only occur if overflow has been set. Above: Ellipsis - Bottom: Clip

object-fit

I learned how to crop an image! More common solution to this is to use the photo as a background-image and apply adjustments from there but object-fit was said to be something more modern so I gave it a try.

Object-fit values can be as follows:

fill
cover
contain
none
scale-down

Check out this CodePen for examples!

*object-position - Another attribute in line with object-fit. Since using object-fit will crop the image, this will help you adjust to change the point of focus of the element.
Values can be positions (top, bottom, left & right) or length/percentages.

Sample with using position value;

#img1 {
  width: 200px;
  height: 300px;
  object-fit: cover; // Object position will be more evident with object fit set to cover
  object-position: left;
}

Sample using percentage value;

#img2 {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 100%;
}

Same photo different results! Neat right?

vertical-align

For this one to work, the elements we need aligned need to be set as display: inline or display: inline-block. Then we align the elements altogether with vertical-align.

Common values can be as follows:

middle
baseline/bottom
top
length - length from it's parent's baseline. Middle Top Baseline or Bottom Length (10px)

There are also, text-top, text-bottom, super & sub but it's quite similar to the ones above it just follows it's parent's text element's alignment.

I hope this blog got you curious to use these CSS attributes on your next project!

Until the next!!

Reference:

SVGs & Shapes!

Ellaine Tolentino — Mon, 30 Aug 2021 00:07:32 +0000

Another week of learning again thanks to an opportunity in line with my job search.

So what is this blog about? Well, I recently encountered a take home exercise where we have to use pure HTML/CSS. A figma design was given and there was a good chunk of elements that are indicated as polygon, rectangle, & ellipse. Never got use them beforehand, and if you haven't either, here's us trying it out together!

SVG

SVG or Scalable Vector Graphics is a unique type of element that shares some attributes with CSS. My favorite about SVGs is that you don't lose quality whether zoomed in or resized. I got to see its potential when I helped built Makegotchi during bootcamp.
We utilized SVG for the egg that is our login window

Another good thing about SVGs is you can customize each point reference to make a shape! You can check out Boxy SVG and try to play around with SVG shapes and designs!

Further info on shared CSS attributes, check out CSS Tricks for a detailed list!

Polygon

Polygon on html is made out of pairs of points that makes a shape. Try and play around with the code below.

Attributes:

stroke - is the line color of the polygon
stroke-width - corresponds to the line-weight
fill - for background-color
points - are the pair of points that make up each side of the shape.

Rectangle

Similar with the polygon, but simpler. You can definitely use polygon to make a rectangle or a square, you can also use <rect> to make a rectangle. All you need is width and the height! Check out my CodePen below to try it out!

I had used a different color for the svg to distinguish the nesting.

You can definitely just also use a div to create this square/rectangle, but for learning purposes I used <rect> for more specificity.

Ellipse

Yes! Ellipse like a circle! In this case, we can make ovals, egg shapes, teardrops, and other round-like shapes! Ellipse is also an SVG element and has a few attributes.

As per W3 schools here are each attr's roles:

cx - the x coordinate of the center of the ellipse.
cy - the y coordinate of the center of the ellipse.
rx - horizontal radius.
ry - vertical radius.

There are so much more potential shapes to make using SVGs /polygons! There are elements like polyline, path and/or elements that are parallelogram in shape that used CSS & SVG element attributes.

If you ask me, what else can you make using these elements? Check out this gallery of SVG, see their original file and inspect using your console.

And that's a few I've learned to use as of recent! I hope I get to help you learn something new today!

Until the next!

References:

String & Array methods I recently learned - PART 2

Ellaine Tolentino — Thu, 19 Aug 2021 06:24:14 +0000

Hi fellow code newbies! Yes! This is a 2nd part of my recent learnings of JavaScript methods! Mostly for this blog are Array methods! I didn't realize how much more methods I could've used in algorithms until I saw these!

.lastIndexOf()

Returns the index/position of the element that meets the condition. In the example below, it returns the beginning index where the string "name" last occured.

.match()

Returns an array with key-value pairs if function call has a string as an argument and query.

You can also use regular expression to filter out what you need to be matched from a string, and it will return an array of matched elements.

.flat()

If you've heard of flattening the array, this is the method for it. Simple way to explain it, is that it concise a nested array into one. Sets the argument by default of 1.

Takes in an integer argument as the depth on how much into the array it will flatten.

.some()

A boolean and returns true if any of the element from the array makes the function passed in true. This doesn't manipulate the array and may best work for validations.

.every()

A boolean and will return true if ALL of the elements in the array meets the function passed in as the argument. If the array is empty, it will still return true no matter the condition.

.copyWithin()

This is an interesting one. It takes in 1-3 arguments depending on what you need.
copyWithin(target)
copyWithin(target, start)
copyWithin(target, start, end)
It copies part of the array and returns an array with all the copied parts you need & keeps its length same with the original array.

Default value of end if left out is array.length

IDE themes used for code examples:

Dracula
Winter is Coming - Dark Blue
Sorcerer
Kabukichō
Firefly Pro
Hopscotch Mono
MDN - Array - for further examples if you need

String & Array Methods I recently learned!

Ellaine Tolentino — Wed, 11 Aug 2021 04:34:18 +0000

Hi y'all! Below are my most recent discovery of some string and array manipulation methods! I stumbled upon these methods while I was working through my daily algos. I can't pass up the chance to share what I learned! So, here it goes!

fill()

It fills up an array of undefined elements.

repeat()

Takes a non-negative argument to determine the times of repetition and concats everything into one string. It is non-destructive and only makes a copy of the original string argument.

Using string literals or template literals

Float number arguments will be considered as integers.

fromCodePoint()

Static string method. Can't be used for a string object you created. Can be used for symbol matching

Syntax:

String.fromCodePoint(9731) - '☃' (_Yes I think it's a snowman too_)

codePointAt()

You're maybe wondering how would you know which code point to use on the method beforehand. This is it!
This method returns a integer(non-negative) that is UTF-16 code point value. Takes in the index/position of the character from the string you want to know the code point value of.

Syntax:

let a = '★♲☃'
console.log(a.codePointAt(0))
//9733

I think this can work really well in validations or comparison if needed.

padEnd()

Yes! It pads the end of the string to reach the length you indicated in the argument.

Syntax:

let str = "Yup"
console.log(str.padEnd(8)+ "*")
// Yup     *

It can also take in a 2nd argument if you have a specific character or string to repeatedly pad your object.

Syntax:

let str = "Yup"
console.log(str.padEnd(8, ".")+ "!")
// Yup.....!

Same principle goes for padStart()

trim(), trimEnd(), trimStart()

Removes whitespaces from both ends of the string. While trimEnd and trimStart removes whitespaces from a specific side of the string.

trimEnd() & trimStart() are also known as trimLeft() & trimRight().

You maybe wondering in what algorithm was I able to use some of these methods?

Try and see if you can solve this Codewars Credit card mask challenge using some of the methods above!

Another one you can try is from CodeSignal, called Frame Generator. The goal is to write a function that takes in a number and returns an array of strings that would look like frame of asterisks.
Check out how I utilized some methods above to solve this! - Github.com/tolentinoel

Hope this is trivial! Until the next!

Pagination navigation

Ellaine Tolentino — Sun, 08 Aug 2021 00:56:54 +0000

What is Pagination in web development?

Best way I can explain it is by splitting your website's content by using pages. Just like pages in a book, where it's a series of pages that contains the whole story.

Pagination vs. Lazy-loading vs. Infinite scrolling?

That really depends on what your website needs and what are your UX goals are. There is an article written by Christian Holst for Smash magazine that compares the three and what is the most common practice as per the studies in the eCommerce world.

Since we're currently curious about pagination, I will try and implement it in a mock project and I'll take you in the learning journey with me!

So for this blog, I tried to apply pagination in a mock gallery with around 80 photos. But what are we trying to solve right now? Current flaw I notice is loading the elements in the DOM flawlessly and there is less user interaction on the page. For sure there are more ways to utilize pagination in your advantage, but we're gonna focus on those 2 for now.

Here is the mock photo gallery I built to imitate the case we're trying to test with pagination. I added different types of image sources.
( 1. Via url , 2. Photos saved in public folder )

See how upon refresh, our gallery doesn't load as quick as we want since it's all in one big dump of photos needed to be displayed.

Using pagination, users would have more interaction and control in our mock photo gallery and will help with loading time since it only had to load part of the whole gallery. Pros and Cons of using pagination have also been discussed in a blog from UXPlanet.

Application

Quickest way to apply pagination are libraries!

In this one I have used, React-Bootstrap Tab component to apply the pagination principle. Splitting the gallery into 4 pages. Also checkout Pagination component in React- Bootstrap too!

My code using the Tab component looks like this;

Other ways to do this is manipulating the state, or using a global variable for the pool of photos to manipulate, or manipulating through your database query (See this example). In this method I did, I had a global variable(links) & a folder of photos in my public folder. Hence, the different methods to slice them.

Options for pagination:

Standard pagination: Numbers, arrows, dots/icons, tabs
Load more/Click for more button
Infinite Scroll

Besides the options for pagination, you can also make your own and style it in many ways! In CSS, there are more pagination styles to choose from! Check this article from Geeks for Geeks about it!

I hope this blog helped anyone looking into applying pagination into your projects!

Tada! The finish product!

Page 1

Page 2

Page 3

Page 4

References:

Github Repo - repo I built for this blog and more.
Smash Magazine article
Infinite Scrolling vs. Pagination
Hipstew web app- Load more button example
Icons from IconFinder - Fantasy
Pagination in Vue from CSS tricks
Charter Photos from Sucia Charters

Git commands that you might not have used before.

Ellaine Tolentino — Thu, 29 Jul 2021 01:04:50 +0000

Hello! This blog is for my fellow codenewbies out there that are trying to know more about Git/ Git workflow!

I've recently encountered these commands and I thought might as well share it to everyone who is new in using git and are trying to learn more how to maneuver in it. There are so many git commands that needs to be learned, but these are the ones I recently have been able to use!

git log

Lists out your commits starting from the most recent one. It includes the commit reference & the commit message you've attached with it. This is a good tool to utilize when you need to track down your commits. Looks like this;
(To see further, press Enter/Return key, to exit git log, press q)

git log --all --decorate --oneline --graph

If you're like me you like visuals. I didn't know that there is a way to show a graph of your branches, merges & commits in the command line! Once you ran the command, it should show something like this;

(To see further, press Enter/Return key, to exit git log, press q)

git shortlog

Sorts out each commit by author. Good way to see who's working on what. Base on mine, since I am working alone on this repo, it showed my Github username for the commits, and Github public name for the merges.

git cherry-pick

Yes! As the name suggests, you get to cherry-pick through your commits and move one commit from a branch to another! You might think of using git merge that is another way to it if you wanted to keep the history of change in Git. Good example of cherry-picking is for example you have 2 branches called devBranch & branch2a and you had your commit in devBrancg but supposedly need to be in branch2a.
To use it,

take a note of the commit reference(Ex.227aaf1) using git log,
then checkout to branch2a. Once there,
run git cherry-pick [227aaf1] and it will show you the conflicts;
Once resolved, run add and commit the changes.

Visual examples for cherry-picking in Git can be found in GitKraken.

git commit --amend

Seeing your git log, what if you thought of updating the most recent commit, whether to add more detail on the commit message or alter a little of the code?
Example usage of git commit --amend, let say you got your changes saved and you do your regular git add . & commit but your commit message was short like this(according to git log);

-See our most recent commit has a very short message and if we want to change that, we run git commit --amend.

This will come up, then you have the chance to alter the first line and as you see I changed the git message into "whitespace removed from FlipCard.js" instead of just "space".
To save the changes you did, press Ctrl + C then type :wq and press Enter

-You can confirm it through git log again if it went through matching the new commit reference as well.

Other Vim commands are here and further details or examples about git commit --amend from Git tutorials

git push --force-with-lease

This command is ran after commands like git rebase or git commit --amend. This is a safer option on pushing commits and offers a bit of protection. Here is one source on further explanation for --force-with-lease.

git checkout -

Brings you back to previous branch you were in. (My new current go-to command everytime I forget my branch names.) This command helped me alot while going through the branches for this blog!

There are definitely tons of commands I want to learn and use, like git rebase, git reflog, even be more familiar with git remote. I hope this blog helped you in a way if you are new to git.

If you have any resource visual learning of Git commands, or if I have missed anything, please let me know in the comments below! Thank you! Until the next!

References:
Atlassian
Header icons
GitKraken

Cards that flip!

Ellaine Tolentino — Sat, 24 Jul 2021 01:46:43 +0000

Hi all! This blog is me sharing how I applied CSS to make the cards flip on my memory game web-app called Flip!

Browser view

Mobile view

The game was built for a project submission while I was in the bootcamp. Main requirement is to utilize vanilla JavaScript.

Besides the themes and APIs I’ve used, I am pretty proud that I was able to pull through the card flip effect using CSS!

The animation we’re trying to breakdown looks like this:

I'm just going to breakdown how I did it with vanilla JavaScript. (You may definitely apply the similar principles with a library like React!)

So where do we begin?

Making the container/deck for our cards:

Here, we add the eventListener for a click, and use a built-in function called toggle to switch the class.

Don't forget to append it to the body! (Ex. body.appendChild(container))

Inside our container are the cards. There are 4 parts of the card.

The card container - I utilized this for size, shape and positioning of the 'cards' in the deck and also where we toggle class every click.
Flip-card - A div that contains our Front and Back divs and will have the animation
Front - A div that will remain empty as if the card is facing down
Back - A div where the icon or image will be in.
- Don't forget to append them and nest them correctly! It will look like this;

Okay now we have our cards set and our class toggle is in code, let's work our CSS.

.card-container {
  width: 180px;
  height: 200px;
  perspective: 1000px;
  border-radius: 20px;
}

Something new here is the perspective attribute. The higher the pixel, the tighter the turn as our card flips. Setting it lower will make it look like a big door swing.(Try to set it at 200px and you'll see what I mean.)

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
}

2 important things here, the transition and transform-style. For transition, there can be 4 attributes values you can declare. CSS tricks explains it in detail. But all we need is the transition-property of transform with a duration of 1s or 1 second. Definitely can adjust slower or faster based on your preference. While for transform-style, we need it in preserve-3d value to have our elements stack up together in 3d dimension. Codrops explains other subcategories of transform-style.

.card-container.flip .flip-card {
  transform: rotateY(180deg); 
}

In here, we're setting our flip-card div to transform rotate in Y-axis at 180 degrees. In line with transform-style, CSS-tricks also explained how perspective transform works and has examples here.

.flip-card-front, .flip-card-back {
  padding: 30px;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; 
  border-radius: 20px
}

So here we set the size for both front and back divs. You probably notice the backface-visibility set as hidden. It's literally doing what it says. Hiding the backface of the element since we have them set in 3d dimension. Here's a link for a better breakdown of what it does.

.flip-card-front {
  background-color: #333;
  color: #fff;
}

.flip-card-back {
  background-color: #05486b;
  color: #fff;
  transform: rotateY(180deg);
}

Of course! Colors! Just to differentiate the front and back, and see it flip better, I set it into 2 different background colors. But one div has also a transform rotate. We want the empty side to show first.

Now you should have something like this!!

In game, I have a function that collects the event target, compares them, flips them back if it's not a match and adds 1 to the number of moves.

I hope this is helpful for anyone wanting to build an app with this effect! Until the next!

References:
My CodePen: Card flip
CSS tricks: link
RickMorty API: Characters
Flip! memory game: App