DEV Community: Kishore

Write your own polyfill

Kishore — Sat, 24 Oct 2020 12:50:37 +0000

Write your own polyfill

Photo by Joanna Kosinska / @joannakosinska / Unsplash

In the new era of web development we never think of writing custom polyfill because whatever frameworks we use, those use polyfill under the hood. Libraries like core-js or polyfill.io do the same job. But what is polyfill BTW?

A script that updates/adds new functions is called "polyfill". It "fills in" the gap and adds missing implementations. ~ https://javascript.info/polyfills

In plain language, a polyfill is a piece of code which gives us the flexibility to support specific features in most of the older version of browsers.

Also, there are a lot of JS APIs which got upgraded and thus the newer APIs does not support in older browsers. In that case, users who are using older browsers will get a buggy version of your app.

A couple of years back when I used to work as a front end developer and my job was to just convert PSD to HTML. I used to get a lot of issues when clients ask me to give support of IE8 and upper versions. I always used to add html5shiv for that without knowing what is html5shiv. So html5shiv also a polyfill which gives the support of newer HTML tags in older version and hence html5shiv also called polyfill.

Now we will discuss how to write polyfills with a simple example.

Since .filter is an es6 feature and some of the older browsers still do not support it. We will write a polyfill of the .filter function.



// First it checks if `.filter` is available in browser
if(typeof Array.prototype.filter !== "function") {
  // implementation goes here
  Array.prototype.filter = function(fn, thisp) {
    if (this === null) throw new TypeError;
    if (typeof fn !== "function") throw new TypeError;
    var result = [];
    for (var i = 0; i < this.length; i++) {
      if (i in this) {
        var val = this[i];
        if (fn.call(thisp, val, i, this)) {
          result.push(val);
        }
      }
    }
    return result;
  };
}

// Use of .filter
[1, 2, 3, 4, 5].filter(e => e > 3);

In the above example code, it first checks if the browser has a .filter function if yes then there is no need of writing filter polyfill but if not then the bottom piece of code gets applied when someone call .filter



Array.prototype.filter = function(fn, thisp) {
  if (this === null) throw new TypeError;
  if (typeof fn !== "function") throw new TypeError;
  var result = [];
  for (var i = 0; i < this.length; i++) {
    if (i in this) {
      var val = this[i];
      if (fn.call(thisp, val, i, this)) {
        result.push(val);
      }
    }
  }
  return result;
};

This way we can write a simple example of polyfill.

Conclusion

In our current era of web development, there is no need to write polyfill by yourself since there are transpilers or libraries available. But it is good to have a basic understanding of polyfill. Hope this article gives a basic understanding of the same. You can read out the following articles about polyfills to get some more knowledge

Handle prop drilling at ease

Kishore — Sat, 30 May 2020 11:31:48 +0000

Photo by Edvard Alexander Rølvaag on Unsplash

If you are breaking your component into multiple pieces in react, then you would have gone through a process of passing data into an extreme level to child component through the component tree using props. This process is very painful when the component tree is lengthy because you have to pass down data to every child and same if you want to call props method you have to go through all the parent components.

What is prop drilling?

Prop drilling (also called "threading") refers to the process you have to go through to get data to parts of the React Component tree.

Quoted from Kent C. Dodds's post

I will give you an example first, then we will discuss it further.

Below there is a component where we are showing current minute and second and on update button click it will update the current time state and thus the component will also re-render

App Component -

import React from "react";

export default function App() {
  const [currentTime, updateTime] = React.useState(new Date());

  const updateDate = () => updateTime(new Date());

  return (
    <>
      <button onClick={updateDate}>Update</button>
      <div className="App">
        {`${currentTime.getMinutes()}:${currentTime.getSeconds()}`}
      </div>
    </>
  );
}

Now we will break it down

import React from "react";

export default function App() {
  const [currentTime, updateTime] = React.useState(new Date());

  const updateDate = () => updateTime(new Date());

  return (
    <>
      <SecondsView currentTime={currentTime} updateDate={updateDate} />
    </>
  );
}

function SecondsView({ currentTime, updateDate }) {
  return (
    <>
      <button onClick={updateDate}>Update</button>
      <div className="App">
        {`${currentTime.getMinutes()}:${currentTime.getSeconds()}`}
      </div>
    </>
  )
}

One more break down we can do though

import React from "react";

export default function App() {
  const [currentTime, updateTime] = React.useState(new Date());

  const updateDate = () => updateTime(new Date());

  return (
    <>
      <SecondsView currentTime={currentTime} updateDate={updateDate} />
    </>
  );
}

function SecondsView({ currentTime, updateDate }) {
  return (
    <>
      <UpdateBtn updateDate={updateDate} />
      <Time currentTime={currentTime} />
    </>
  );
}

function UpdateBtn({ updateDate }) {
  return <button onClick={updateDate}>Update</button>;
}

function Time({ currentTime }) {
  return (
    <div className="App">
      {`${currentTime.getMinutes()}:${currentTime.getSeconds()}`}
    </div>
  );
}

Problems

In the last example, we have broken down the App component into an extreme level. Though it's a good practice but a lot of problems has arisen since we have broken it

The first and most painful problem is we are passing props in every component tree level.
Hypothetically if anything gets changed related to state variable or even function name in the topmost parent level we have to update each and every child of that parent.
If you follow the SecondsView - component you will see currentTime and updateDate - props have no use in that component but to pass further down to the child component. And it creates an unnecessary props passing.

Good practices

Now a few of the good practices we can follow to get rid of those above-mentioned problems

Context API would be the first choice if I would try to solve this specific problem.
We can use render props though.
Don't do extreme levels of component break down where it's not necessary. It creates complexity and nothing else.
Try to keep the state as close as to the render component.

Conclusion

There are many pros and cons of prop drilling. But I would suggest you to use anything to react in an effective way. React is already fast and doesn't need much optimization. Just validate your code in terms of necessity, whether it is required to do or no and then proceed.

This post is quite inspired by Kent C. Dodds's props drilling post. You can check out that as well.

Let me know what your thought on this post by messaging me on twitter or linkedin

Mutate object or arrays without changing original source in javascript

Kishore — Sun, 17 May 2020 15:11:10 +0000

Photo by Luca Micheli on Unsplash

If you are building javascript application irrespective of any framework, you would have faced a specific issue where you want to modify an Object or Array, but with modification, the original value also updating, but you don't want to update the original value.

That's where an immutability helpers libraries help us. I personally prefer Immutability Helper library to handle this but there are others like Immutable JS, which is also a great library.

In this post, I will be discussing the Immutability Helper library and will try to cover most of the features like push, splice, merge, etc.

Prerequisites

Before starting I would like you to go through MDN specification regarding data types and data structures which will give you a fair idea on various kinds of data types and data structures in JS.

The problem

const originalObj = {
  name: 'Volkswagen',
  color: 'red'
}

const newObj = originalObj;

newObj.color = 'green';

console.log(newObj.color); // green
console.log(originalObj.color); // green

The above example looks strange because I have changed newObj color value but originalObj color value also got the changes. This weird thing is happening because in Javascript Object and Array are reference types, that means if you are creating an object or array in one place and then assigning that value to another variable it takes only one memory allocation. So if you are changing any property value of newObj which has a reference value of originalObj, that means you are changing in only one place. This happens the same for Arrays as well.

$push

push() all the items in array on the target

Example:

const initialArray = [1, 2, 3];
const newArray = update(initialArray, {$push: [4]});

console.log(initialArray); // [ 1, 2, 3 ]
console.log(newArray); // [ 1, 2, 3, 4 ]

$splice

For each item in arrays call splice() on the target with the parameters provided by the item

Nested array push example:

const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});

console.log(collection); // [ 1, 2, { a: [ 12, 17, 15 ] } ]
console.log(newCollection); // [ 1, 2, { a: [ 12, 13, 14, 15 ] } ]

Remove array element example:

const obj = {items: [1, 2, 3, 4]};
const index = 2;
const newObj = update(obj, { items: { $splice: [[index, 1]] } });

console.log(obj); // { items: [ 1, 2, 3, 4 ] }
console.log(newObj); // { items: [ 1, 2, 4 ] }

$apply

Passes in the current value to the function and updates it with the new returned value

const obj = {a: 5, b: 3};
const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});

console.log(obj); // { a: 5, b: 3 }
console.log(newObj); // { a: 5, b: 6 }

$set

Replace the target entirely

Simple example:

const obj = {a: 5, b: 3};
const newObj = update(obj, {b: {$set: obj.b * 2}});

console.log(obj); // { a: 5, b: 3 }
console.log(newObj); // { a: 5, b: 6 }

Example with computed property names:

const collection = {children: ['zero', 'one', 'two']};
const index = 1;
const newCollection = update(collection, {children: {[index]: {$set: 1}}});

console.log(collection); // { children: [ 'zero', 'one', 'two' ] }
console.log(newCollection); // { children: [ 'zero', 1, 'two' ] }

$merge

Merge the keys of an object with the target

const obj = {a: 5, b: 3};
const newObj = update(obj, {$merge: {b: 6, c: 7}});

console.log(obj); // { a: 5, b: 3 }
console.log(newObj); // { a: 5, b: 6, c: 7 }

There are other 2 advanced features. One is Autovivification and another one is Adding your own commands. You can check out those from their respective docs.

Conclusion

There are other libraries that solve immutability in a great way. I personally know about immutable-js, which is great in its own way. You can try both and find which suits your project best. I personally used Immutability Helper multiple times and thus I'm comfortable with this library. You can try whatever you want.

Thanks for reading!

Deep dive into CSS variable

Kishore — Sun, 10 May 2020 13:19:37 +0000

Do you remember the day when you got the first introduction of variable. Yes, I remember properly. I got introduced to variables like others that variable is a bucket where we store any kind of values.

Most of us generally started coding using any functional programming language like Java, Python, C, C++, or even Javascript (Nowadays).

Now coming to the CSS. As of my understanding CSS is technically a programming language because we write CSS programs to accomplish styling for our websites. But a lot of programming concepts were not there in CSS when it was first developed. That's why SASS / SCSS / LESS had come to the picture. One of those missing thing in CSS was variable. But now CSS also supports variable. But syntactically it's a bit different than traditional variable. Let's jump to how variables behave in CSS without much reading.

Declaring variable

This is how a CSS variable declaration looks like

:root {
  --body-bg-color: #f1f1f1;
}

In the above code --body-bg-color is the variable name where #f1f1f1 is the value of it.

Call variable

You have to call a variable like the way below

body {
  background-color: var(--body-bg-color);
}

That's cool.

Rule of thumb

The Variable should be declared inside the root selector like :root scope or inside body selector or even inside any selector.
Variable name should start with a double hyphen and it's case sensitive.
The Variable should call inside var().

Inheritance

You can modify the value of the variable at a later stage when you want to. like the following

:root {
  --text-color: #000;
}
p {
  color: var(--text-color);
}
p.error {
  --text-color: #f00;
  color: var(--text-color);
}

In the above piece of code, we have declared --text-color variable inside :root scope but later when we wanted to modify error style. And then we modified the value inside p.error selector.

Fallback values

You can set some value as a fallback when the variable is not declared.

.cell {
  width: var(--cell-width, 25%);
}

Invalid variable

If the variable value is invalid for the property in that case browser will do 2 things

Check if the property color is inheritable. Yes, but doesn't have any parent with the color property. So move on to the next step.
Set the value to its default initial value, i.e., black.

Example:

HTML

<p>This paragraph is initial black.</p>

CSS

:root { --text-color: 16px; } 
p { color: blue; } 
p { color: var(--text-color); }

In the above example paragraph text color will not be changed to blue because initially paragraph color is set to color: var(--text-color) but --text-color value is 16px which is not correct for color property.

Example with media queries

Modify variable value inside media queries

:root {
  --cell-width: 25%;
}
.cell {
  width: var(--cell-width);
}
@media only screen and (max-width: 600px) {
  --cell-width: 50%;
  .cell {
    width: var(--cell-width);
  }
}

Conclusion

CSS has evolved a lot now for the past few years. There are a lot of other features that have been introduced to CSS. Stay tuned, will cover all those features in my upcoming posts. Thanks for reading!!

Basics of package.json

Kishore — Sun, 03 May 2020 13:20:16 +0000

Photo by Alfons Morales / @alfonsmc10 / Unsplash

If you have worked with any front-end applications which are related to node or npm there should be a file called package.json where we generally keep all the configurations related to our project. When I started working with Angular and React I was not much bothered about that particular file because that does not have direct intervention in my project. As a front-end developer, your main task is to make the look and feel as good as possible with high-performance keeping in mind. So why would I bother about package.json file?

But there are many cases where you have to modify some of the lines in that file. On that note, you have to have that knowledge so that you can play around with it.

I will be discussing some of the generic configurations which generally resides in package.json file. There could be any kind of information you can keep like testing related or your project-specific anything but we can't cover all of them because in that case list will never end.

Below is a sample example of package.json file

{
  "name": "sample-package",
  "version": "1.0.0",
  "description": "Sample example of package.json",
  "repository": "github_user/some_repo",
  "author": "reachtokish <patra.kishore65@gmail.com>",
  "license": "MIT",
  "private": false,
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "homepage": "Some repo example url",
  "bugs": {
    "url": "Some repo issues url"
  },
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "start": "parcel example/public/index.html",
    "build": "npm run clean && rollup -c",
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "peerDependencies": {
    ...
  },
  "files": [
    ...
  ],
  "alias": {
    ...
  },
  "jest": {
    ...
  },
  "keywords": [
    ...
  ]
}

Without much reading will directly jump to the list of options

name - Name of the project. Very useful when you are building a library. In that case the package name will inherit this name.
version - Useful to manage version of your project.
description - Specify the description related to your project.
repository - Which repository this project belongs to.
author - Author or the maintainer of the project.
license - There are various types of licenses like MIT, Apache, MPL, and many more. Based on your project you can specify licenses here.
private - If you are building an enterprise application which should not be open for public in that case you can make this value to true or else if you are building a library which will act as an open-source project in that case you can make it as false. Npm will prevent to publishing package if the private value is true.
main - The main field is a module ID that is the primary entry point to your package.
module - This is used by bundler tools for ESM (ECMAScript Module) detection.
jsnext:main - Module bundlers that utilize tree shaking to reduce bundle sizes, like Rollup and Webpack 2, require packages to expose ES Modules with import and export.
homepage- If you see any npm package page you will see a homepage section on the right of that page. Whatever link you will see there it takes from this homepage property.
bugs - Same like homepage there is an issue section. It takes this URL.
engines - You can specify the version of node that your stuff works on.
- Useful link - https://docs.npmjs.com/files/package.json#engines
scripts - You can specify various commands like build, start, etc.
dependencies - To specify packages that your project is dependent on.
devDependencies - To specify development packages which your project is dependent on.
peerDependencies - This comes especially when you are developing a library where your package needs exact versions of packages mentioned in peerDependencies.
- Useful link - https://nodejs.org/es/blog/npm/peer-dependencies/
files - This is used to give information to npm that allows it to identify the project as well as handle the project's dependencies.
- Useful link - https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/
keywords - A collection of keywords to identify a package.

Conclusion

This is very much important to know the basics when you are building something. And package.json holds a lot of basic configuration which has a potential value for our project. There are a lot of other options you can configure using package.json which I could not cover as the list will never end so whenever you are getting a new term just do google it.

Setup a basic react application with webpack and babel

Kishore — Tue, 21 Apr 2020 18:58:08 +0000

Photo by Chris Henry / @chrishenryphoto / Unsplash

We generally use create-react-app (CRA) CLI to generate a basic react application with zero configuration. That's cool because you don't have to know about how bundler or compiler can be setup or even what's going on under the hood of CRA. But what if you also want to setup your own configuration in your own way? Here comes how to setup a basic react app without CRA and explore the hidden part of that tool.

So we will be using webpack as the bundler, babel for compilation and obviously react and react-dom for the react part broadly.

Prerequisites

Before jump to the further reading I want to let you know that I assume you have a basic understanding of React, Webpack and Babel. Because these are the core tools which we are going to explore. If you really don't have then I would suggest you to go through their official website first and then move forward with this content.

So without any further readings we will dive into the course of content

Course of content

Setup of basic webpack configuration for a basic react application
Setup of basic babel configuration for a basic react application
Creation of basic folder structure for a react project
Creation of basic react application

First we will create a folder called my-react-app and navigate inside that folder in our command line tool like cmd or Terminal.

Then from there we will run the below command to generate a basic package.json file

npm init -y

npm int

and follow the installation instruction.

Then you will see a package.json file has been created inside the my-react-app folder.

Now we will install required packages for webpack first by running the following command

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin

You can check out what individual plugin does exactly from the official webpack website .

Now you can see above packages has been added as devDependencies inside package.json file. Cool!

Now we will install required packages for babel by running the following command

npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader

You can check out what individual plugin does exactly from the official babel website .

To run a basic react application we need 2 packages. One is react which has the core react library and another one is react-dom which is responsible for the rendering of our application to the DOM.

So now to install those 2 libraries we need to run the following command

npm install -D react react-dom

We are done with installation part. Now is the time to setup our webpack. To do so we have to create a file called webpack.config.js in the root of the my-react-app directory and paste the following code inside that file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

Coming to the setup of entry and output point of our application. To do so paste the following code after the imports

...
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'inline-source-map'
}

mode - defines stage of our application. For development purpose it should be development and for deployment purpose we can use production
entry - defines entry point of our application which is ./src/index.js in our case.
output - defines where our bundled file should be placed.
devtool - helps us to identify where exactly the error happened.

So now we need to let webpack know that we are going to use babel to compile our code so that it can support most of the browsers. To do so we have to add the below code in webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

Now we need few plugin setup for webpack. Paste the following code below the babel configuration mentioned above

...
module.exports = {
  ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

CleanWebpackPlugin - This plugin first cleans the /dist folder and then put the bundled files inside that.
HtmlWebpackPlugin - This plugin generates the html file which helps to serve the webpack bundles.

So the full webpack.config.js file should look like the following code now

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

Now we are done with the webpack setup. We have to make a very small babel setup. Create a .babelrc file in the root of our folder and paste the below code inside that

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Babel presets are array of babel plugins where we don't need to assemble our own set of plugins.

Before jump to the react setup we need to create 2 folders in the root. One is src and another one is public. And inside public folder create a file called index.html. Also you need to create 2 files inside src folder which are app.js and index.js. So now your folder structure should look like the following

my-react-app
└───node_modules
│   
└───public
|   │---index.html
|
└───src
|   │---app.js
|   |---index.js
|
│---.babelrc
│---package.json
|---webpack.config.js

Now open the index.html file in you editor which is present inside public directory and paste the following code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

div with id root in the above html code is where we will render our whole application. Next we will come to that part.

Now open the index.js file inside src folder and paste the following piece of code

import React from 'react';
import ReactDom from 'react-dom';
import App from './app';

ReactDom.render(<App />, document.getElementById("root"))

To create the app component paste the following code inside your app.js in src folder

import React from 'react';

function App() {
  return (
    <div>
      <div>Hello world!!</div>
    </div>
  )
}

export default App;

Now we are almost there to run our newly created react project in the browser. Before doing that we need to add following piece of code inside our package.json scripts field.

{
  ...
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  }
}

start - command is to start our application in development mode.
build - command is for the production build which we can deploy in any live server.

Now the time is to run the application. To do so open your Terminal or cmd and run npm start and it should forcefully open http://localhost:8080/ in your browser and you should see the page look like the following.

Screenshot

You can also use npm run build - command to build your application. Built file should be generated inside the /dist directory.

Conclusion

This is a very basic react project we have setup using webpack and babel. There are other configurations which you might need while building an enterprise application. In that note I would suggest you to explore more options from webpack and babel official website.

I hope the above content helped you to get a basic understanding of how to setup react app with webpack and babel. Thanks for reading!!

Customize browser Context-menu in your next React app

Kishore — Sun, 19 Apr 2020 04:57:23 +0000

Photo by Ivan Bandura / @unstable_affliction / Unsplash

Have you ever thought of customizing native Browser Context-menu like whenever a user will right-click on any specific element you want some more options to be visible in the Context-menu? OK, that's not possible to add options or even remove options from Browser's native Context-menu. In that case, you have to use Javascript to customize the Context-menu. But that's a lot of tasks. Because you have to achieve the exact look and feel also with the Context-menu feature. Below are the things which you might need to take care if you want to use your JS code to handle the Context-menu

Should appear on right-click
Should appear in the mouse position of right-clicking
Should hide on outside click of the trigger area
Should have an option to show sub-menus
And lastly styling part

Don't you think it's huge task for you to take care of all these things when there is a tide deadline?

Here comes react rctx-contextmenu plugin in the place. So we will see how we can achieve all these things without much headache in our React application.

So there is an npm package called rctx-contextmenu which solves Context-menu pain very easily. You have to just follow a few steps and you are in.

https://www.npmjs.com/package/rctx-contextmenu

Installation

Run the below command to install the package first.

npm install rctx-contextmenu

Usage

As the plugin says, in the following, there is a very basic usage code which we can use to get started

There is a lot of other APIs which this plugin offers. So I will try to explain the above code first and then will dig deep.

First of all, we are importing required packages like React and rctx-contextmenu

Then, we are creating the App component and inside the App component there is two main components that are actually performing the Context-menu logic. One is <ContextMenuTrigger /> and another one is <ContextMenu />.

There is a very essential option we will talk about is id. So the <ContextMenu /> and <ContextMenuTrigger /> component's id should match to work the plugin as we want.

Will come to the individual component explanation now.

`<ContextMenuTrigger />`

This component actually holds the trigger area or the right-click area. We can put any kind of element inside this component as per your requirement.

`<ContextMenu />`

This component is responsible for Context-menu items.

`<ContextMenuItem />`

This component is responsible for each option of Context-menu. We can put any element as a child of this component.

Now coming to Sub-menus. rctx-contextmenu Also supports sub-menus. For that, there is another component we have to use that is <Submenu />. Following is the code which includes sub-menus. To add <Submenu /> we have to import Submenu component from rctx-contextmenu first. Then we can use it as the following piece of code shows.

There is a lot of other APIs which we can use. I would suggest go the official package page or the GitHub repo and explore all the options.

https://github.com/reachtokish/rctx-contextmenu

Conclusion

I think we have covered pretty much very basic features but there is a lot of other features that you can explore from the official plugin page.

I hope you have liked my first ever blog. If you have really liked it please do like and share it publicly. Thanks for reading, it means a lot to me!