Browse Source

Updated blog posts to look better with the new pandocs parser which creates a index list at the top of the blog post.

pull/3/head
jrtechs 6 years ago
parent
commit
a0bb869642
7 changed files with 80 additions and 84 deletions
  1. +12
    -12
      blogContent/posts/java/gremlin-in-10-minutes.md
  2. +8
    -8
      blogContent/posts/java/top-three-recommended-java-ides.md
  3. +9
    -10
      blogContent/posts/other/why-do-i-blog.md
  4. +16
    -16
      blogContent/posts/programming/c-to-c++-tutorial.md
  5. +7
    -7
      blogContent/posts/projects/steam-friends-graph.md
  6. +5
    -8
      blogContent/posts/web-development/history-of-jrtechs.md
  7. +23
    -23
      blogContent/posts/web-development/node-website-optimization.md

+ 12
- 12
blogContent/posts/java/gremlin-in-10-minutes.md View File

@ -1,4 +1,4 @@
## What is Gremlin?
# What is Gremlin?
Gremlin is a graph traversal language: think of Gremlin as the SQL for graph databases. Gremlin is not Gremlin is a graph traversal language: think of Gremlin as the SQL for graph databases. Gremlin is not
a graph database server, it is a language; but, there is a Gremlin Server and a Gremlin Console available for a graph database server, it is a language; but, there is a Gremlin Server and a Gremlin Console available for
@ -7,7 +7,7 @@ like [Titan](https://www.digitalocean.com/community/tutorials/how-to-set-up-the-
and [HBase](https://docs.janusgraph.org/latest/hbase.html). and [HBase](https://docs.janusgraph.org/latest/hbase.html).
## Graph Data Base Basics
# Graph Data Base Basics
A graph database is based on graph theory. A graph is composed of nodes, edges, and properties. A key A graph database is based on graph theory. A graph is composed of nodes, edges, and properties. A key
object/component in a graph database is stored as a node. Nodes are connected via edges representing object/component in a graph database is stored as a node. Nodes are connected via edges representing
@ -54,11 +54,11 @@ gremlin> g = graph.traversal().withRemote(DriverRemoteConnection.using(cluster,
``` ```
## Gremlin Syntax
# Gremlin Syntax
Now that you have your gremlin server and console set up, you are ready to start executing Gremlin queries. Now that you have your gremlin server and console set up, you are ready to start executing Gremlin queries.
### Adding a Vertex
## Adding a Vertex
In Gremlin nodes are referred to as "Vertexes". To add a node/vertex to the graph, you simply use the In Gremlin nodes are referred to as "Vertexes". To add a node/vertex to the graph, you simply use the
command addV() on your graph traversal source. For consistency, most people command addV() on your graph traversal source. For consistency, most people
@ -70,7 +70,7 @@ EX:
g.addV('student').property('name', 'Jeffery').property('GPA', 4.0); g.addV('student').property('name', 'Jeffery').property('GPA', 4.0);
``` ```
### Updating a Property
## Updating a Property
Unlike SQL, you are not limited to a specific schema in a graph database. If you want to add or change Unlike SQL, you are not limited to a specific schema in a graph database. If you want to add or change
a property on a vertex or edge, you simply use the property command again. a property on a vertex or edge, you simply use the property command again.
@ -81,7 +81,7 @@ You can replace "g.V(1)" with a command to select a specific vertex or edge.
g.V(1).property('name', 'Jeffery R'); g.V(1).property('name', 'Jeffery R');
``` ```
### Selection
## Selection
Selecting nodes and edges is the most complicated part of Gremlin. The concept is not particularly hard, but, there Selecting nodes and edges is the most complicated part of Gremlin. The concept is not particularly hard, but, there
are dozens of ways to do graph traversals and selections. I will cover the most common aways to traverse a graph. are dozens of ways to do graph traversals and selections. I will cover the most common aways to traverse a graph.
@ -111,7 +111,7 @@ g.V().hasLabel('student').order().by('gpa', decr).value('name')
``` ```
### Adding Edges
## Adding Edges
The easiest way (my opinion) to add edges in Gremlin is by The easiest way (my opinion) to add edges in Gremlin is by
using aliasing. In this example we select two nodes and assign them a name: in this case it is "a", and "b". using aliasing. In this example we select two nodes and assign them a name: in this case it is "a", and "b".
@ -124,14 +124,14 @@ g.V(0).as('a').V(1).as('b').addE('knows')
``` ```
## Using Gremlin with Java
# Using Gremlin with Java
Now that you know the basic syntax of Gremlin, you are ready to use it somewhere other than the Gremlin console. If you Now that you know the basic syntax of Gremlin, you are ready to use it somewhere other than the Gremlin console. If you
are trying to use Gremlin with Java, there is a great Maven dependency for TinkerPop and Gremlin. If you want to quickly are trying to use Gremlin with Java, there is a great Maven dependency for TinkerPop and Gremlin. If you want to quickly
connect to your Gremlin server with Java, make sure your server is set up exactly as it was before this tutorial started discussing connect to your Gremlin server with Java, make sure your server is set up exactly as it was before this tutorial started discussing
Gremlin syntax. Gremlin syntax.
#### Maven dependency for Java:
## Maven dependency for Java:
```html ```html
<!-- https://mvnrepository.com/artifact/com.tinkerpop/gremlin-core --> <!-- https://mvnrepository.com/artifact/com.tinkerpop/gremlin-core -->
<dependency> <dependency>
@ -187,7 +187,7 @@ public class GraphConnection
} }
``` ```
#### Basic GraphConnection.java Usage:
## Basic GraphConnection.java Usage:
```java ```java
RemoteConnection con = new RemoteConnection() RemoteConnection con = new RemoteConnection()
String query = "g.V().hasLabel('player')" + String query = "g.V().hasLabel('player')" +
@ -201,7 +201,7 @@ String query = "g.V().hasLabel('player')" +
this.con.queryGraph(query); this.con.queryGraph(query);
``` ```
#### Overly complex usage with a lambda statement
## Overly complex usage with a lambda statement
```java ```java
/** /**
* Fetches the list of a player's friends. * Fetches the list of a player's friends.
@ -255,7 +255,7 @@ I highly suggest that you look at the tutorial [SQL 2 Gremlin](http://sql2gremli
If you plan on deploying this to production, it is recommended that you use HBase for a persistent back end storage If you plan on deploying this to production, it is recommended that you use HBase for a persistent back end storage
server. server.
## Resources
# Resources
- [SQL 2 Gremlin](http://sql2gremlin.com/) - [SQL 2 Gremlin](http://sql2gremlin.com/)
- [Practical Gremlin](http://kelvinlawrence.net/book/Gremlin-Graph-Guide.html) - [Practical Gremlin](http://kelvinlawrence.net/book/Gremlin-Graph-Guide.html)

+ 8
- 8
blogContent/posts/java/top-three-recommended-java-ides.md View File

@ -7,8 +7,8 @@ highlighting which makes the code easier to read and error highlighting which
makes finding that missing semi colon easier. Here is a list of three IDEs that makes finding that missing semi colon easier. Here is a list of three IDEs that
work well for me. work well for me.
NetBeans
--------
# NetBeans
NetBeans is the most productive IDE for large java projects. NetBeans is great NetBeans is the most productive IDE for large java projects. NetBeans is great
at detecting errors in your code. You can also have multiple projects open in at detecting errors in your code. You can also have multiple projects open in
@ -19,8 +19,8 @@ JavaScript and C/C++.
![NetBeans IDE](media/2a20326e77c3f67aa3753401ba4bc612.png) ![NetBeans IDE](media/2a20326e77c3f67aa3753401ba4bc612.png)
Eclipse
-------
# Eclipse
Eclipse is a very popular programming IDE; however, it is harder to use than Eclipse is a very popular programming IDE; however, it is harder to use than
NetBeans. The largest benefit of Eclipse is that it has tons of templates for NetBeans. The largest benefit of Eclipse is that it has tons of templates for
@ -28,8 +28,8 @@ you to use. Eclipse also has a better GUI creation tool than NetBeans has.
![Eclipse](media/f5cb2682e219549cb07acd1d01c2ccb1.png) ![Eclipse](media/f5cb2682e219549cb07acd1d01c2ccb1.png)
JCreator
--------
# JCreator
I want to warn you that this is a old IDE. You hate yourself if you decide to I want to warn you that this is a old IDE. You hate yourself if you decide to
use this program. The only reason I am putting this on my list is because I use this program. The only reason I am putting this on my list is because I
@ -43,8 +43,8 @@ Science students who have to memorize/learn what certain errors mean.
![JCreator](media/c1e712bdead908ebd72921ec2d1cbd5e.png) ![JCreator](media/c1e712bdead908ebd72921ec2d1cbd5e.png)
Intellij
--------
# Intellij
\*Update 2018 \*Update 2018

+ 9
- 10
blogContent/posts/other/why-do-i-blog.md View File

@ -5,8 +5,8 @@ Different people may have different takes on this. There is an incentive to
start a website in the hopes that it will become popular and make add revenue. start a website in the hopes that it will become popular and make add revenue.
However, I argue that there is a intrinsic value to a personal blog. However, I argue that there is a intrinsic value to a personal blog.
Organize Your thoughts
----------------------
# Organize Your thoughts
Being able to clearly articulate your ideas is beneficial. Having time to brew Being able to clearly articulate your ideas is beneficial. Having time to brew
over topics in a blog posts helps that process. Even though I worked with both over topics in a blog posts helps that process. Even though I worked with both
@ -14,22 +14,22 @@ Nodejs and PHP, I might not be able to a convincingly debate with somebody why
one is the better platform. Writing a blog posts allows me to fully flesh out my one is the better platform. Writing a blog posts allows me to fully flesh out my
own ideas. own ideas.
Learn
-----
# Learn
When writing a blog post, you want to be complete. If there are any gaps in my When writing a blog post, you want to be complete. If there are any gaps in my
knowledge, I will look that information up. This is a great learning knowledge, I will look that information up. This is a great learning
opportunity; like taking notes in a class. opportunity; like taking notes in a class.
Stand Out
---------
# Stand Out
Out of everyone who uses the internet, only 1% of them contributes additional Out of everyone who uses the internet, only 1% of them contributes additional
content. Blogging can make you stand out in a competitive economy when looking content. Blogging can make you stand out in a competitive economy when looking
for jobs. for jobs.
Relax
-----
# Relax
This may not be true of some bigger blogs, but, writing blog posts is very This may not be true of some bigger blogs, but, writing blog posts is very
relaxing. It gives you time to slow down relax and reflect. There are dozens of relaxing. It gives you time to slow down relax and reflect. There are dozens of
@ -39,8 +39,7 @@ There are already millions of tutorials on the internet, I just want to share my
experience on topics that interest me. In this way writing blogs are relaxing experience on topics that interest me. In this way writing blogs are relaxing
and don’t feel like work. and don’t feel like work.
Become A Better Blogger
-----------------------
# Become A Better Blogger
There is no way to become better at something other than doing it a lot. Since There is no way to become better at something other than doing it a lot. Since
starting this website when I was middle school, my writing skills have increased starting this website when I was middle school, my writing skills have increased

+ 16
- 16
blogContent/posts/programming/c-to-c++-tutorial.md View File

@ -4,7 +4,7 @@ enable people to use this as a quick reference to quickly jump into C++. This po
that you have prior knowledge of both C and object oriented-programming concepts. Each topic that you have prior knowledge of both C and object oriented-programming concepts. Each topic
is quickly covered in a code snippet and some additional explanation is provided if necessary. is quickly covered in a code snippet and some additional explanation is provided if necessary.
## Input/Output
# Input/Output
Input and output in C++ is easy, you use "cout" and "cin". When printing with Input and output in C++ is easy, you use "cout" and "cin". When printing with
"cout", you separate what your printing with "<<"; "endl" prints a new line. "cout", you separate what your printing with "<<"; "endl" prints a new line.
@ -39,7 +39,7 @@ g++ helloWorld.cpp -o hello
``` ```
## Namespaces
# Namespaces
Name spaces are used to enable you to have multiple functions/methods called the Name spaces are used to enable you to have multiple functions/methods called the
same thing and not conflict with one another. You use "namespacename::function/variable" same thing and not conflict with one another. You use "namespacename::function/variable"
@ -90,7 +90,7 @@ int main()
``` ```
## Global Variable
# Global Variable
Global variables are similar to C, however, you can now reference a global members with the "::" Global variables are similar to C, however, you can now reference a global members with the "::"
accessor. accessor.
@ -112,7 +112,7 @@ int main ()
} }
``` ```
## Multiple Names for a Variable/Aliasing
# Multiple Names for a Variable/Aliasing
This is NOT simply a pointer. In the following example pi, and x now are treated as This is NOT simply a pointer. In the following example pi, and x now are treated as
the same exact variable. You cannot later change the pointer destination for x. the same exact variable. You cannot later change the pointer destination for x.
@ -128,7 +128,7 @@ cout << "pi: " << pi << " x: " << x << endl; // prints pi: 2.1 x: 2.1
``` ```
## Passing Variables by Reference
# Passing Variables by Reference
In C, everything was passed by value; C++ allows us to pass variables by reference. This is very powerful, in In C, everything was passed by value; C++ allows us to pass variables by reference. This is very powerful, in
languages like Java, only Objects are passed by reference. C++ lets you decide exactly languages like Java, only Objects are passed by reference. C++ lets you decide exactly
@ -178,7 +178,7 @@ int main()
``` ```
## Functions Returning Variables References
# Functions Returning Variables References
A function can return a value reference which can be treated as a variable. In the following example, a function A function can return a value reference which can be treated as a variable. In the following example, a function
returns the reference to the variable which is the smallest. returns the reference to the variable which is the smallest.
@ -211,7 +211,7 @@ int main ()
``` ```
## Inline
# Inline
Inline can be used to replace a function which contains very simple logic -- no Inline can be used to replace a function which contains very simple logic -- no
for loops, etc. Like a macro, this will be inserted everywhere the code is used; a for loops, etc. Like a macro, this will be inserted everywhere the code is used; a
@ -237,7 +237,7 @@ int main()
} }
``` ```
## Exceptions
# Exceptions
Exceptions might help you stop segmentation faulting. The important thing to notice Exceptions might help you stop segmentation faulting. The important thing to notice
is that you can throw about any type in a try block. is that you can throw about any type in a try block.
@ -263,7 +263,7 @@ catch(int result)
``` ```
## Default Parameters for Functions
# Default Parameters for Functions
This is exactly like default parameters in Python. If a function is called without This is exactly like default parameters in Python. If a function is called without
the parameter, it is assumed to be that value. the parameter, it is assumed to be that value.
@ -284,7 +284,7 @@ int main()
``` ```
## Function Overloading
# Function Overloading
Like Java and Python, you can overload methods in C++. Not only can you overload the Like Java and Python, you can overload methods in C++. Not only can you overload the
methods, but, the return type of the methods which are overloaded don't have to match. methods, but, the return type of the methods which are overloaded don't have to match.
@ -315,7 +315,7 @@ int main()
``` ```
## Operator Overloading
# Operator Overloading
You can redefine basic operators like (+,/,-,<<,>>, +=) for certain data types by using You can redefine basic operators like (+,/,-,<<,>>, +=) for certain data types by using
operator overloading. operator overloading.
@ -367,7 +367,7 @@ int main ()
} }
``` ```
## Functions with Generic Parameter Types
# Functions with Generic Parameter Types
In C++ you can use a template class to create a method which has generic In C++ you can use a template class to create a method which has generic
return and parameter types. return and parameter types.
@ -400,7 +400,7 @@ type1 maximum (type1 a, type2 b)
``` ```
## Replacement for malloc and free
# Replacement for malloc and free
Malloc and free still exists in C++, however, people typically Malloc and free still exists in C++, however, people typically
use "new" and "delete" instead because it is cleaner. use "new" and "delete" instead because it is cleaner.
@ -416,7 +416,7 @@ delete i;
``` ```
## Struct Functions
# Struct Functions
You can now add functions to structs. You can now add functions to structs.
@ -655,7 +655,7 @@ int Cat::fly()
} }
``` ```
## Strings
# Strings
Since C++ has classes, you can work with strings in a pleasant way. Since C++ has classes, you can work with strings in a pleasant way.
@ -806,7 +806,7 @@ int main()
} }
``` ```
## Resources
# Resources
You now know enough C++ to start programming with it. If you want to take your You now know enough C++ to start programming with it. If you want to take your
skills to the next level, I would recommend start working on a few projects in C++ and get skills to the next level, I would recommend start working on a few projects in C++ and get

+ 7
- 7
blogContent/posts/projects/steam-friends-graph.md View File

@ -1,11 +1,11 @@
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DoDaHmyIPvQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> <iframe width="100%" height="315" src="https://www.youtube.com/embed/DoDaHmyIPvQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
### Links
# Links
- [GitHub](https://github.com/jrtechs/SteamFriendsGraph) - [GitHub](https://github.com/jrtechs/SteamFriendsGraph)
- [Live Site](http://steam.jrtechs.net/) - [Live Site](http://steam.jrtechs.net/)
### Project Description
# Project Description
This project utilizes the steam API and graph databases to create friend graphs for clients in a This project utilizes the steam API and graph databases to create friend graphs for clients in a
web browser. Currently there are two types of graphs available: web browser. Currently there are two types of graphs available:
@ -15,7 +15,7 @@ web browser. Currently there are two types of graphs available:
This graph will only display your friends; however, it will draw edges between your friends’ if This graph will only display your friends; however, it will draw edges between your friends’ if
they are friends with each other. they are friends with each other.
### Motivation
# Motivation
While learning about graph databases I thought that it would be awesome to create a massive graph While learning about graph databases I thought that it would be awesome to create a massive graph
database with steam friends in it. After a quick google search, I realized that some other people have database with steam friends in it. After a quick google search, I realized that some other people have
@ -29,7 +29,7 @@ in the future.
![Lucid chart diagram](media/steam/diagram.png) ![Lucid chart diagram](media/steam/diagram.png)
### Technical Details
# Technical Details
At the core of this project there is a java backend and a JavaScript frontend. I needed a backend for At the core of this project there is a java backend and a JavaScript frontend. I needed a backend for
this project because you cannot distribute your steam API key, plus, this allows me to cache everything this project because you cannot distribute your steam API key, plus, this allows me to cache everything
@ -47,7 +47,7 @@ start applying a force to shake the graph until all the nodes are added to the g
![Steam friends graph](media/steam/jrtechs1.png) ![Steam friends graph](media/steam/jrtechs1.png)
### Uses of Friends Graph Data Base
# Uses of Friends Graph Data Base
There are tons of [academic papers](http://infolab.stanford.edu/~ullman/mmds/ch10.pdf) There are tons of [academic papers](http://infolab.stanford.edu/~ullman/mmds/ch10.pdf)
written on the usages of friends’ graphs. What you may be able to do with friends written on the usages of friends’ graphs. What you may be able to do with friends
@ -67,7 +67,7 @@ already does this to a certain extent when they recommend you games that are pop
![Steam friends graph](media/steam/ben2.png) ![Steam friends graph](media/steam/ben2.png)
### Hosting the Project
# Hosting the Project
Hosting the front end of this project is easy, it is just thrown on an apache server. The backend Hosting the front end of this project is easy, it is just thrown on an apache server. The backend
is trickier since it needs to run both a java app and a gremlin server. Currently I am hosting this is trickier since it needs to run both a java app and a gremlin server. Currently I am hosting this
@ -76,7 +76,7 @@ loads it uses around 2 GB of ram and saturates my CPU.
![Steam friends graph](media/steam/jrtechs2.png) ![Steam friends graph](media/steam/jrtechs2.png)
### Future Plans for the Project
# Future Plans for the Project
In the future I would love to add more graphs to this website. Instead of just displaying graphs it would In the future I would love to add more graphs to this website. Instead of just displaying graphs it would
also be cool to create pages which tries to identify friends’ groups, people you may know, and best also be cool to create pages which tries to identify friends’ groups, people you may know, and best

+ 5
- 8
blogContent/posts/web-development/history-of-jrtechs.md View File

@ -1,5 +1,4 @@
Original Site
-------------
# Original Site
Jrtechs initially started as a static HTML site that I created early 2014 to Jrtechs initially started as a static HTML site that I created early 2014 to
build my HTML skills. I initially chose the name Jrtech, but that name was taken build my HTML skills. I initially chose the name Jrtech, but that name was taken
@ -13,21 +12,19 @@ was working on.
![Original edgy site](media/fbd5a1128549b4feb5bafe3595ac1989.png) ![Original edgy site](media/fbd5a1128549b4feb5bafe3595ac1989.png)
Move to WordPress
-----------------
# Move to WordPress
In 2015 I moved my website to the cloud and started a WordPress site. The In 2015 I moved my website to the cloud and started a WordPress site. The
website was focused on turorial like blog posts. website was focused on turorial like blog posts.
![Initial wordpress theme](media/4fcc3a9fe52f7b2e8bc1bfb164846073.png) ![Initial wordpress theme](media/4fcc3a9fe52f7b2e8bc1bfb164846073.png)
New Theme
---------
# New Theme
![Second wordpress theme](media/55ad5b49fe28c6374968b0f8a5b3e48b.png) ![Second wordpress theme](media/55ad5b49fe28c6374968b0f8a5b3e48b.png)
Rebirth in Nodejs
-----------------
# Rebirth in Nodejs
If you want to read about why I created a new content management system and left If you want to read about why I created a new content management system and left
WordPress read WordPress read

+ 23
- 23
blogContent/posts/web-development/node-website-optimization.md View File

@ -5,7 +5,7 @@ done automatically. If you like to build stuff from scratch like me, there is a
ton of work required to optimize a website. This post will cover the 8 things that ton of work required to optimize a website. This post will cover the 8 things that
I did to decrease the load time of this blog written in node by two seconds. I did to decrease the load time of this blog written in node by two seconds.
#### Final Results
# Final Results
![Final Website Speed Test](media/websiteOptimization/finalResults.png) ![Final Website Speed Test](media/websiteOptimization/finalResults.png)
@ -17,8 +17,8 @@ waterfall for my home page, most of the time is a result of the youtube embedded
videos loading. videos loading.
1: Optimize Images
------------------
# Optimize Images
Since images are the largest portion of a website's size, optimizing and Since images are the largest portion of a website's size, optimizing and
reducing the size of images will decrease load time. In a perfect web reducing the size of images will decrease load time. In a perfect web
@ -72,8 +72,8 @@ The goal of this script is to make most of the images under 100kb for the web.
It is ok to have a few images above 100kb; however, you should really avoid It is ok to have a few images above 100kb; however, you should really avoid
having images above 200kb. having images above 200kb.
2: Take advantage of Async calls
--------------------------------
# Take advantage of Async calls
One of the largest benefits of Node is its Async abilities: code is One of the largest benefits of Node is its Async abilities: code is
executed in a multi-threaded fashion. This can become a "callback hell" if not executed in a multi-threaded fashion. This can become a "callback hell" if not
@ -152,8 +152,8 @@ main: function(requestURL)
} }
``` ```
3: Client-Side Caching
----------------------
# Client-Side Caching
Client-side caching is where the client's web browser stores static content they Client-side caching is where the client's web browser stores static content they
download from your website. For example, if a client caches a CSS style sheet, download from your website. For example, if a client caches a CSS style sheet,
@ -175,7 +175,7 @@ fast and I'm not worried about hash collisions for this application.
You can do this in NGINX if you use it to serve static files, but, you can also You can do this in NGINX if you use it to serve static files, but, you can also
do it directly in Node. do it directly in Node.
#### Caching CSS
## Caching CSS
```javascript ```javascript
var eTag = crypto.createHash('md5').update(content).digest('hex'); var eTag = crypto.createHash('md5').update(content).digest('hex');
@ -186,7 +186,7 @@ result.write(content);
result.end(); result.end();
``` ```
#### Caching Images
## Caching Images
```javascript ```javascript
var eTag = crypto.createHash('md5').update(content).digest('hex'); var eTag = crypto.createHash('md5').update(content).digest('hex');
@ -197,15 +197,15 @@ result.write(content);
result.end(); result.end();
``` ```
4: Server-Side Caching
----------------------
# Server-Side Caching
Even with the best async server, there are still ways to improve performance. If Even with the best async server, there are still ways to improve performance. If
you cache all the static pages that you generate in a HashMap, you can quickly you cache all the static pages that you generate in a HashMap, you can quickly
access it for the next web user without ever having to query the database or access it for the next web user without ever having to query the database or
do file IO. do file IO.
#### Ex:
## Ex:
```javascript ```javascript
const cache = require('memory-cache'); const cache = require('memory-cache');
@ -247,8 +247,8 @@ server's cache.
![Server Cache Example](media/websiteOptimization/serverCache.png) ![Server Cache Example](media/websiteOptimization/serverCache.png)
5: Enable Compression
---------------------
# Enable Compression
Compressing content before it is transferred over the internet can significantly Compressing content before it is transferred over the internet can significantly
decrease the loading time of your website. The only trade off from this approach decrease the loading time of your website. The only trade off from this approach
@ -258,7 +258,7 @@ performance gains. Using Gzip on CSS and HTML can reduce the size by 60-70%.
If you are running an NGINX server, you can enable Gzip there. There is also a If you are running an NGINX server, you can enable Gzip there. There is also a
simple node module which will use Gzip compression on an Express app. simple node module which will use Gzip compression on an Express app.
#### Gzip on Express App
## Gzip on Express App
```bash ```bash
npm install compression npm install compression
@ -269,8 +269,8 @@ var compression = require('compression')
app.use(compression()); app.use(compression());
``` ```
6: Remove Unused CSS Definitions
--------------------------------
# Remove Unused CSS Definitions
If you use a CSS library like Bootstrap or W3-CSS, you will have a ton of css If you use a CSS library like Bootstrap or W3-CSS, you will have a ton of css
classes which go unused. The standard BootStrap CSS file is around 210kb. After classes which go unused. The standard BootStrap CSS file is around 210kb. After
@ -316,8 +316,8 @@ You don't have to use this through the command line, you can run this directly
in your node app to make it automated. Check out their in your node app to make it automated. Check out their
[documentation](https://www.purgecss.com/) to learn more. [documentation](https://www.purgecss.com/) to learn more.
7: Minify CSS and Javascript
----------------------------
# Minify CSS and Javascript
This is the easiest thing you can do to reduce the size of your website. You This is the easiest thing you can do to reduce the size of your website. You
just run your CSS and JavaScript through a program which strips out all just run your CSS and JavaScript through a program which strips out all
@ -332,8 +332,8 @@ Ex of Minified CSS:
There are Node libraries which can minify CSS and Javascript, however, if you There are Node libraries which can minify CSS and Javascript, however, if you
are lazy, just use a website like [this](https://cssminifier.com/). are lazy, just use a website like [this](https://cssminifier.com/).
8: Keep Minimal JavaScript
--------------------------
# Keep Minimal JavaScript
Ignoring the gross amount of Node dependencies you have, it is critical to Ignoring the gross amount of Node dependencies you have, it is critical to
minimize the amount of dependencies the client needs. I completely removed minimize the amount of dependencies the client needs. I completely removed
@ -364,8 +364,8 @@ most cases people don't full take advantage of Google Analytics, a simple
backend analytics service would work just as good while saving the client load backend analytics service would work just as good while saving the client load
time. time.
Resources
---------
# Resources
- [Pingdom Speed Test](https://tools.pingdom.com/) - [Pingdom Speed Test](https://tools.pingdom.com/)

Loading…
Cancel
Save