Forem: Kelliann Lafferty

Differences between client-side storage solutions

Kelliann Lafferty — Tue, 02 Jun 2020 19:30:46 +0000

Question:

What are cookies, local storage and session storage and what are some differences?

Answer:

All three of these are client-side storage solutions (i.e. a cookie is both client and server-side) that can be used to store data that is needed within client scripts between pages.

Type	Description	Differences	Uses
Cookies	Small piece of data that a server sends to the user's browser that is then stored and sent back with future requests to the same server	4KB Storage - Server and client side reading - Supported by older browsers - Expiration varies	Logins, shopping carts, game scores, user preferences, tracking user behavior
LocalStorage	Window property (window.localStorage) that is saved across browser sessions. The data stored is not sent back to the server with each HTTP request, reducing traffic between client and server	5MB/10MB storage - Not as supported by older browsers - Never expires or removed, unless explicitly done so	Login forms remembering username, user preferences, custom settings
SessionStorage	Similar to LocalStorage, however, data does not persist across browsers. Data is only available during the page session.	5MB - Data will be deleted after session (browser) closed - Not as supported by older browsers	Use in cases where you do not want the data to persist over time

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#:~:text=An%20HTTP%20cookie%20(web%20cookie,logged%2Din%2C%20for%20example.

https://www.w3schools.com/jsref/prop_win_sessionstorage.asp

https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

Comparing variables in Javascript

Kelliann Lafferty — Thu, 14 May 2020 21:52:04 +0000

As I go through the job search process, I like to keep track of questions that I've been asked that I don't exactly know the answer to but feel like I should. To alleviate these feelings, I'm making an effort to keep track of these questions and then write short posts on them to hopefully:

Solidify these concepts for myself, so I'll be more prepared in the next interview
Help another developer understand these concepts so they may be more prepared if they are asked these questions in the future

Question

What is the difference between '==' and '==='?

Answer

These are known as comparison operators and Javascript has both type-converting and strict comparisons.

Type-converting comparisons (e.g. ==) will first convert the elements to the same type (if they aren't already) and then make the comparison.

1 == 1 // true
'1' == 1 // true
1 == '1' // true
0 == false // true
0 == null // false
0 == undefined // false

var object1 = {'key' : 'value'}, object2 = {'key': 'value'}
object1 === object2 // false

null == undefined // true

Strict comparisons (e.g. ===) will only return true if the elements on both sides are of the same type.

3 === 3 // true
3 === '3' // false

var object1 = {'key' : 'value'}, object2 = {'key': 'value'}
object1 == object2 // false

null === undefined // false

Follow-up Question

What would be the output of "null == undefined" and "null === undefined" in Javascript and why?

Answer

As you can see from the code above, based on the comparison operator, one of these is true, whereas the other one is false.

console.log(typeof null) // object
console.log(typeof undefined) // undefined

Null == Undefined, with a type-converting equality operator, returns true because Null and Undefined are two different data types in Javascript. Null is considered an object, and Undefined is considered a type of undefined. Since these are two separate data types, the '==' converts null and undefined to the same type and then compares them and since they both represent an empty value, they are considered equal in the abstract sense.

As for Null === Undefined, this is a false statement, because they are inherently not the the same data type (object vs. undefined) and thus, this is strictly false.

Happy coding! :)

More resources:

https://developer.mozilla.org/en/US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

https://levelup.gitconnected.com/javascript-null-vs-undefined-2acda986f79f

How to add headers to DrawerNavigator screens in React Native

Kelliann Lafferty — Wed, 04 Mar 2020 05:34:23 +0000

While working on a current project, I came across the issue on how exactly to add headers to screens within my DrawerNavigator (createDrawerNavigator). Here is a visual of what I was trying to accomplish:

Menu screen:

Without Header screen:

With Header screen:

As you can see from the above images, I wanted the screens within the DrawerNavigator to have header titles that matched the component name. So, in this example, I wanted the 'Notifications' screen to have the header actually show 'Notifications' (or whatever the screen title was).

After digging around the React Native docs and some forums, I found two resources that actually helped me solve this issue (sources at bottom). It appeared that I needed to make each screen within the DrawerNavigator have its own StackNavigator and then set the navigationOptions to the component screen. I'll outline my example code below for you to see this in action:

We will want to start with creating the DrawerNavigator:

import React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Notifications from '../menu/Notifications'; // this is the Notifications screen component

const MenuNavigator = createDrawerNavigator(
  {
    Notifications: {
      name: 'notificationHeader',
      screen: notificationHeader,
    },
  //...add any other drawer screens you'd like to see here in the menu (i.e. Home, Settings)
  }
);

Once the DrawerNavigator is created, we will want to add a StackNavigator to each one of the drawer screens, as such:

import React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Notifications from '../menu/Notifications'; // this is the Notifications screen component

const notificationHeader = createStackNavigator(
  {
    Notifications: {
      screen: Notifications,
    },
  },
  {
    navigationOptions: {
      headerMode: 'screen',
    },
  }
)

With these StackNavigator(s) within the DrawerNavigator, you should now see the 'Notifications' screen have the header 'Notifications' once you refresh your screen!

Based on my understanding, the DrawerNavigator does not have an headerMode option, since the DrawerNavigator is typically just a means to give you a visual hierarchy of screens. To create a header for the screens within DrawerNavigator, you need to create a StackNavigator for each individual screen and then this will then allow the screen to have a visible header.

This seemed to be the only option that helped me resolve this issue. If you have ever dealt with this in a different or more efficient way, let me know in the comments!

Happy coding :)

Sources:

https://github.com/react-navigation/react-navigation/issues/1632

https://itnext.io/the-intricacies-of-nesting-navigators-in-react-native-using-react-navigation-fef52ca72964

Learning about CSS architecture

Kelliann Lafferty — Sun, 22 Dec 2019 05:27:12 +0000

As I dive deeper into Javascript and its accompanying libraries and frameworks, I’m learning more about CSS and the many ways that I can structure my styling that both makes sense for the project and deliver cleaner code. Since I was not aware of CSS architecture outside of CSS stylesheets and inline styling, I thought I’d share some additional ways on how to use CSS in your project and when some methods may be more useful than others.

Stylesheet

Probably the most well-known and (usually) simplest is the CSS stylesheet. This is what many of us have used when first being introduced to import stylesheets and injecting styling into our applications.

index.html
<link rel="stylesheet" href="style.css">

Stylesheets definitely serve their purpose in smaller applications or ones that do not call for much styling at all. They can be very useful for beginners to understand the magic of CSS and how basic web application files work together to make a fully-fledged webpage. Another benefit is that a single CSS stylesheet can be cached by the browser only once, which will remove the need for returning users' browsers to download the file again. However, if we have larger applications or applications that can be built to scale, stylesheets can quickly become very large and incomprehensible. Thankfully, there are other options for these cases!

CSS Modules

As in most software systems, the risk of regression is something also to consider when deciding upon your CSS architecture. The risk of regression is the idea that as a system or application ages and expands, the likelihood that any updates made having unforeseen consequences increases. However, to minimize the risk of regression in terms of CSS architecture, CSS modules are a useful resource.

Put simply, CSS modules are "CSS files in which all class names and animation names are scoped locally by default". This means that all components will have automatically-generated unique class names that are specific to that individual component. To use CSS modules, you will write your markup within your .js file as such:

index.js
import classes from "./App.css"

`<div class="${classes.App}">`</div>

If we were to open our generated HTML file, we would see that our

class name would be given a randomized name such as:

<div class="App__App__2NQx7"></div>

whereas, our generated CSS file would have this related class name:

.App__App__2NQx7 {
    text-align: center;
}

CSS Modules allow you to have multiple components that all have unique, specific class names to avoid duplication and confusion. These are especially useful for larger applications and ones where scoped styling could be especially useful.

CSS-in-JS

There are quite a few frameworks out there that make using CSS in your Javascript as simple as possible. Here are a few listed for 2019. In CSS-in-JSS packages, the styles are scoped and class names are hashed, quite similarly to CSS Modules.

In CSS-in-JS packages, you write CSS as you normally would for each component and the CSS framework then compiles the application and creates unique classnames. A major difference between CSS Modules and CSS-in-JS packages is that the CSS styling will only be returned for the components that are rendered on the page at that time. This allows more overall quicker load times and does not block rendering.

To learn more about CSS-in-JSS or any of the other methods mentioned in this article, I'd highly suggest checking out the articles linked below and the CSS Tricks site. It has a ton of useful information and new and innovative ways to use CSS in your applications!

Forem: Kelliann Lafferty

Differences between client-side storage solutions

Comparing variables in Javascript

Question

Answer

Follow-up Question

Answer

How to add headers to DrawerNavigator screens in React Native

Learning about CSS architecture

Stylesheet

CSS Modules

CSS-in-JS

Useful Resources