summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAbdus <abdus@abdus.net>2020-12-12 23:02:47 +0530
committerAbdus <abdus@abdus.net>2020-12-12 23:02:47 +0530
commitf0d0efd2409907160da463c91be989beb6918e45 (patch)
treeaaad22cb90545a6636c2d0bb396b39498aa160ff
parent83fd62e38301a4ec463657f234d02b035d408e6c (diff)
downloadabdus.net-f0d0efd2409907160da463c91be989beb6918e45.tar.bz2
abdus.net-f0d0efd2409907160da463c91be989beb6918e45.zip
minor
-rw-r--r--content/notes/database.md74
-rw-r--r--content/notes/grep.md29
-rw-r--r--content/posts/server-side-react.md143
-rw-r--r--themes/bronn/static/css/layout.css8
4 files changed, 254 insertions, 0 deletions
diff --git a/content/notes/database.md b/content/notes/database.md
new file mode 100644
index 0000000..c4dc26f
--- /dev/null
+++ b/content/notes/database.md
@@ -0,0 +1,74 @@
+---
+title: "Database"
+date: 2020-12-06T18:59:23+05:30
+draft: false
+tags: []
+categories: []
+sources:
+ - https://academy.zerotomastery.io/courses/1073491/
+---
+
+<!--
+
+::Annotation Guide::
+~~~~~~~~~~~~~~~~~~~~
+
+* `em` is the modifier
+
+1. em (_text_) - blue underline
+2. strong (**text**) - yelow highlight
+3. del (~~text~~) - red strike-through
+
+4. em > em (_*text*_) - blue circle
+5. em > strong (_**text**_) - lawngreen box
+6. em > del (_~~text~~_) - red cross-off
+-->
+
+<!--> Notes are from a course on Zero to Mastery I am currently doing-->
+
+- [SQL](#sql)
+ - [Query](#query)
+ - [Comments](#comments)
+
+## Database
+
+It's a structured set of data which is structured in a certain way so that it
+can be scaled as and when required.
+
+## SQL
+
+SQL is a query language for navigating through a database. SQL is used to
+create, read, modify and delete records from a database.
+
+### Query
+
+A query, in SQL, is a way to make database engines understand user's
+instructions.
+
+Example: `SELECT * FROM Users WHERE role='manager`
+
+breakdown of above example:
+
+- `SELECT`: literal meaning.
+- `*`: identifier (can be any column name from a table). `*` means select all
+ available fields
+- `FROM`: literal meaning
+- `Users`: Name of the table
+- `WHERE`: literal meaning
+- `role='manager`: expression. `role` is a column name. this essentially means,
+ return record only is column `role` matches the value `manager`
+
+### Comments
+
+In SQL, a line prefixed with `==` will be treated as a comment, and won't be
+executed.
+
+> SQL is a _Declarative_ Language.
+
+TODO: Learn more about declarative and imperative language.
+
+Original name of SQL is _*SEQUEL*_.
+
+### SELECT Statement
+
+Used to print/get data from a database.
diff --git a/content/notes/grep.md b/content/notes/grep.md
new file mode 100644
index 0000000..302fefe
--- /dev/null
+++ b/content/notes/grep.md
@@ -0,0 +1,29 @@
+---
+title: "Grep"
+date: 2020-12-06T17:56:04+05:30
+draft: true
+tags: [linux, unix]
+categories: [tools]
+sources: []
+---
+
+<!--
+
+::Annotation Guide::
+~~~~~~~~~~~~~~~~~~~~
+
+* `em` is the modifier
+
+1. em (_text_) - blue underline
+2. strong (**text**) - yelow highlight
+3. del (~~text~~) - red strike-through
+
+4. em > em (_*text*_) - blue circle
+5. em > strong (_**text**_) - lawngreen box
+6. em > del (_~~text~~_) - red cross-off
+-->
+
+grep searches for PATTERNS in each FILE. PATTERNS is one or more
+patterns separated by newline characters, and grep prints each line
+that matches a pattern. Typically PATTERNS should be quoted when grep
+is used in a shell command.
diff --git a/content/posts/server-side-react.md b/content/posts/server-side-react.md
new file mode 100644
index 0000000..df63177
--- /dev/null
+++ b/content/posts/server-side-react.md
@@ -0,0 +1,143 @@
+---
+title: "Server Side React"
+date: 2020-12-07T14:47:54+05:30
+draft: true
+meta:
+ image: # url to image. Important for blog listing and seo
+ description: # overrides .Summary
+tags: []
+categories: []
+---
+
+<!-- Start Typing... -->
+
+I have been using React since a while now. By far, my focus was mostly on
+client-side rendered applications bootstrapped using [Create React App](#TODO).
+I, however, have got my hands dirty at times and [set-up React-based projects
+from scratch](https://github.com/abdus/react-chrome-ext).
+
+Before I go further, let me tell you when I think one should use server-side
+rendered applications. And when to absolutely avoide it.
+
+1. **SEO is Important**: Honestly, this is the only case I think one should
+ choose to render React on server. That's because, Search Engine crawlers
+ can't crawl React yet. A fully functional React app would appear as a blank
+ page to Google Bot. Meaning, Google would have no data to index.
+2. **Low-end Devices**: If most of your target devices are low-end and struggles
+ to execute huge JavaScript bundles, server-side rendering is probably
+ best-suited.
+
+One of the major benefits of rendering React on Server is that the server sends
+back **Static HTML** and **CSS** back to client. This improves the [largest
+contentful paint](https://web.dev/largest-contentful-paint/) duration,
+ultimately resulting in a better User Experience.
+
+**But**, this benefit can be proved as fatal if the end-user got a slow internet
+connection. To understand why this can be fatal, we first understand how
+server-side rendering works. Keep on reading.
+
+A webpage is called _server-side rendered_ if the HTML required to render it was
+generated on the server. This is all-good for traditional server-side template
+engines like [EJS](#TODO), [Handlebars](#TODO) etc.
+
+But for a SPA library like React, things are not that simple. When SSRed, two
+versions of the site would be generated. One, that is completely **static HTML**.
+And another which is a **JavaScript bundle**.
+
+You may ask, what is the need for generating a JavaScript bundle, when the
+required HTML is already available? well, **User Interactions**. The generated HTML
+would work as the way you expect it to work. And the JavaScript bundle would
+create another layer by overwriting those static HTML to make the magic of React
+available to User.
+
+You may wonder, what if both of those versions hold different data that is
+supposed to be rendered? That should not be the case, unless the initial app
+state is passed to React in a wrong way. I will explain how to do it. Hang on.
+
+## What are we building, again?
+
+To demonstrate, I will build a **Quote Machine** using **React** and **Node**.
+I will be building this project side-by-side as I write this blogpost, so that
+I don't miss anything.
+
+The **app flow** would be:
+
+1. Fetch Quotes from an API on Server
+2. Parse the Response
+3. Generate HTML on Server
+4. Send it Back to Client
+
+How would you know if the page was generated on server? There are two ways I
+know of:
+
+- Right click on page and click "View Source" option(not Inspect)
+- Publish your site on web and let Googlebot parse and render it for you to see
+ how it looks like. (as of writing this, googlebot can't render React)
+
+## Project Setup
+
+To understand how to set-up the project, we need to know how things really work.
+If you have set-up a React app from scratch before, you will probably know the
+role of tools like [Webpack](#TODO) and [Babel](#TODO). If you don't know, let
+me summarise it for you.
+
+React is the library that handles the UI of a website. Generally, a React-based
+project is written in ES6+. So chances are, a few of the browsers(_ahmmmm..IE_)
+won't understand it. This is where **Babel** comes into play.
+
+Babel converts ES6+ and JSX codes to a version that most of the
+browsers(if not all) would understand.
+
+**Webpack**? oh, it's just(!) a bundler. React makes it easier for us to group
+components based on business logic. We need someting to aggregate them in a
+single JavaScript file. Webpack does that.
+
+Let us start by creating a `package.json` file. Before that, create a directory
+for our little project to sit inside. Call it `quote-machine`
+
+_BTW, I prefer Yarn over NPM as it is faster. You are free to choose whatever
+you want._
+
+```sh
+cd quote-machine
+yarn inti --yes # choose default value for all of the questions asked
+```
+
+Then, go on and create a directory called `src/`. This is where out app source
+lives. You may divide this directory into further subdirectories as and when
+rquirequired.
+
+### Babel
+
+Inside project root(i.e. `quote-machine`), create a file called `.babelrc`. This
+file is responsible for hosting Babel configigurations. Fill it with following
+configs:
+
+```json
+{
+ "presets": ["@babel/preset-react", "@babel/preset-env"]
+}
+```
+
+The `presets` array holds Babel plug-in. Following is the summary on what these
+tools does:
+
+- [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react):
+ Transforms JSX tags to standard JavaScript. Check
+ [this out to know](https://babeljs.io/en/repl) how it works.
+- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env):
+ Transforms JavaScript to make it compatible with target environments using a
+ standard set of rules. Also, adds polyfills.
+
+Heads Up! We need to convert our server-side codes using Babel, as React will
+be imported in server-side code as well.
+
+Obviously, we need to install them as dependencies.
+
+```sh
+yarn add --dev @babel/preset-react @babel/preset-env
+```
+
+### Webpack
+
+
diff --git a/themes/bronn/static/css/layout.css b/themes/bronn/static/css/layout.css
index 540b2a8..bca1f12 100644
--- a/themes/bronn/static/css/layout.css
+++ b/themes/bronn/static/css/layout.css
@@ -101,6 +101,14 @@ nav.top-nav .icon {
display: none;
}
+@media(max-width: 1100px) {
+ nav.top-nav {
+ flex-wrap: wrap;
+ padding-top: 1rem;
+ }
+
+}
+
@media (max-width: 700px) {
nav.top-nav {
flex-wrap: wrap;