Skip to content

Commit fced9f8

Browse files
author
Jacob Krol
committed
2 parents cf3fd4e + 8113276 commit fced9f8

File tree

1 file changed

+134
-0
lines changed

1 file changed

+134
-0
lines changed

‎README.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# Jacob Krol: The Web Development Journey
2+
3+
Welcome to my GitHub! This is the host repository of my main webpage, [jacobkrol.github.io](https://jacobkrol.github.io/). This isn't my profile, but I'd like to share how my webpage got to be what it is today.
4+
5+
### Learning JavaScript
6+
7+
Tasked with creating a physics engine to manipulate disks in a plane for my [Efficiency of Planar Disk Packings](https://github.com/jacobkrol/Planar-Disk-Packing/) project in Spring 2018, I turned to canvas objects using JavaScript. I learned they could be a way to quickly make visuals for my code, and I took off. Using YouTube, Lynda.com, and print references, I was able to turn lots of trial-and-error into a new coding language for my repertoire. By the end of the project, I had created an array of [fun, interactive tools](https://github.com/jacobkrol/Planar-Disk-Packing/Spring%202018/JS%20Tools) to visualize parts of our problem.
8+
9+
Sure, there were plenty of mistakes. I needed to learn ES 6 notation for `let` and `const` declarations, and more importantly, why to avoid keeping so many variables in the global scope.
10+
11+
<details><summary>Expand if you dare</summary>
12+
13+
Actual copy-paste from the global scope of my `GPE for Data Collection 1.js` program...
14+
15+
```javascript
16+
var circles = [];
17+
var points = [];
18+
var density;
19+
var loops = 0;
20+
var densityWait = 50;
21+
var slider1, slider2;
22+
var generating = false;
23+
var radius;
24+
var altRadius = 0;
25+
var showCircles = true;
26+
var overShow, clickingShow, overHide, clickingHide, overClear, clickingClear = false;
27+
var overFix, overSettle, overNatural, overFreeze, overAll, overIntersect = false;
28+
var overPendFreeze, overRelease, clickingRelease, pendFreeze = false;
29+
var airSetting = "natural";
30+
var updateSetting = "all";
31+
var circleSize1 = 0; var circleSize2 = 0;
32+
var numIntersections = 0;
33+
var apxNumIntersections = 0;
34+
var palette = new function() {
35+
this.width = 775;
36+
this.height = 775;
37+
this.area = this.width * this.height;
38+
}
39+
var t0, t1, time, sum;
40+
var timerUpdate = 100;
41+
var ticks;
42+
var timeEstimate;
43+
44+
//MAKE ALL NEW BUTTONS HERE **************************
45+
var buttons = []
46+
```
47+
</details>
48+
49+
The only direction left was upwards.
50+
51+
### Adding HTML and CSS
52+
53+
Once I was on my way with JavaScript, I added lessons from similar sources as JS to my schedule in order to pick up HTML and CSS. These, just like JavaScript and any language, have seen a great improvement over time as I have solified the foundation I set with them. I will cover those self-critiques and improvements in later sections.
54+
55+
### First Design
56+
57+
With basic HTML, CSS, and JavaScript, I was able to create my very first resume website, coded from the very bottom.
58+
59+
![Screenshot unable to load](https://raw.githubusercontent.com/jacobkrol/jacobkrol.github.io/master/non-webpage/first-design.png)
60+
61+
While revising my code, my skills improved, and I was able to better and better notice glaring mistakes like missing cross-browser compatibility, mobile-support, and misalignment galore.
62+
63+
<details><summary>Expand if you dare</summary>
64+
65+
```css
66+
.content-indent {
67+
margin-left: 20px;
68+
margin-right: -20px;
69+
}
70+
71+
/* ... */
72+
73+
#MCL-Description {
74+
margin: 0 -30px 0 30px;
75+
}
76+
```
77+
</details>
78+
79+
### First Redesign
80+
81+
The problems in the first design inspired me to start all over again. I created blank files and got to work on a more modern, responsive, and responsible design. I may very well redesign my webpage more times, but this was a crucial step in the process of understanding that sometimes coding with an older version of yourself is slower than coding all alone with your new skillset.
82+
83+
<details><summary>Not to brag but...</summary>
84+
85+
My CSS improved a bit.
86+
```css
87+
.skill-box:not(.skill-text) > *:nth-child(2) {
88+
margin-left: 20px;
89+
}
90+
```
91+
</details>
92+
93+
And after I read that older version of Internet Explorer would struggle with `display: table` I learned `flex-box` inside-out and even learned the importance of pre-fixes.
94+
95+
<details><summary>Example from my stylesheet</summary>
96+
97+
```css
98+
.vert-align {
99+
display: -webkit-box;
100+
display: -ms-flexbox;
101+
display: flex;
102+
103+
-webkit-box-orient: horizontal;
104+
-webkit-box-direction: normal;
105+
-ms-flex-direction: row;
106+
flex-direction: row;
107+
108+
-webkit-box-align: center;
109+
-ms-flex-align: center;
110+
align-items: center;
111+
}
112+
```
113+
</details>
114+
115+
\* All of this said, I have improved, but have a long way to go. If there are still coding conventions broken here, or better ways to handle my webpage's code, please contact me at [email protected] so I can learn and modify appropriately.
116+
117+
### The Big Realization
118+
119+
There was a crucial moment in my web development career when I came across a random comment on a programming message board. In generic terms, it stated that a strictly-HTML webpage, like those used way back when, is never broken. Here, "broken" refers to a webpage which does not format, appear, or load correctly in particular environments. This is to say, a bare bones HTML page is cross-browser compatible, requires no dependencies, and flows on any sized screen. It's only when CSS and JS are added that suddenly issues arise. Essentially...
120+
121+
> Browsers don't break webpages. Developers break webpages.
122+
123+
Although I was upset that I couldn't blame all of my problems on old versions of Internet Explorer anymore, it helped my web development career massively. I began...
124+
125+
- writing out my entire HTML structure before introducing CSS and `<div>` elements
126+
- checking the effect my CSS had on my projects one line at a time
127+
- taking ownership of misaligned content
128+
- reducing my dependency on JavaScript and jQuery to style my sheets when CSS seemed too complicated
129+
130+
I cannot trace the source of this message - even though I know it isn't a one-of-a-kind thought - but whoever and wherever you are out there, thank you.
131+
132+
### Sense of Pride
133+
134+
Now that I've completed my latest redesign, I will without a doubt continue to work on my webpage. I will update content, formatting, and may even perform an entire redesign in the future from the ground-up again. However, in August of 2019, I was able to carry a sense of pride in the work I had created from blank files on my laptop and a litte bit of inspiration just 18 months later.

0 commit comments

Comments
 (0)