Skip to content

Commit 6246116

Browse files
jacobkroljacobkrol
authored
Inherit README from v1.0.0
1 parent ea8072d commit 6246116

File tree

1 file changed

+103
-37
lines changed

1 file changed

+103
-37
lines changed

‎README.md‎

Lines changed: 103 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,134 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
# Jacob Krol: The Web Development Journey
22

3-
## Available Scripts
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 page, but I'd like to share how my webpage got to be what it is today.
44

5-
In the project directory, you can run:
5+
### Learning JavaScript
66

7-
### `yarn start`
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/tree/master/Spring%202018/JS%20Tools) to visualize parts of our problem.
88

9-
Runs the app in the development mode.<br />
10-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
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.
1110

12-
The page will reload if you make edits.<br />
13-
You will also see any lint errors in the console.
11+
<details><summary>Expand if you dare</summary>
1412

15-
### `yarn test`
13+
Actual copy-paste from the global scope of my `GPE for Data Collection 1.js` program...
1614

17-
Launches the test runner in the interactive watch mode.<br />
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
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;
1943

20-
### `yarn build`
44+
//MAKE ALL NEW BUTTONS HERE **************************
45+
var buttons = []
46+
```
47+
</details>
2148

22-
Builds the app for production to the `build` folder.<br />
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
49+
The only direction left was upwards.
2450

25-
The build is minified and the filenames include the hashes.<br />
26-
Your app is ready to be deployed!
51+
### Adding HTML and CSS
2752

28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
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.
2954

30-
### `yarn eject`
55+
### First Design
3156

32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
57+
With basic HTML, CSS, and JavaScript, I was able to create my very first resume website, coded from the very bottom.
3358

34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
59+
![Screenshot unable to load](https://raw.githubusercontent.com/jacobkrol/jacobkrol.github.io/master/graphics/first-design.png)
3560

36-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
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.
3762

38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
63+
<details><summary>Expand if you dare</summary>
3964

40-
## Learn More
65+
```css
66+
.content-indent {
67+
margin-left: 20px;
68+
margin-right: -20px;
69+
}
4170

42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
71+
/* ... */
4372

44-
To learn React, check out the [React documentation](https://reactjs.org/).
73+
#MCL-Description {
74+
margin: 0 -30px 0 30px;
75+
}
76+
```
77+
</details>
4578

46-
### Code Splitting
79+
### First Redesign
4780

48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
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.
4982

50-
### Analyzing the Bundle Size
83+
<details><summary>Not to brag but...</summary>
5184

52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
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>
5392

54-
### Making a Progressive Web App
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 prefixes.
5594

56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
95+
<details><summary>Example from my stylesheet</summary>
5796

58-
### Advanced Configuration
97+
```css
98+
.vert-align {
99+
display: -webkit-box;
100+
display: -ms-flexbox;
101+
display: flex;
59102

60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
103+
-webkit-box-orient: horizontal;
104+
-webkit-box-direction: normal;
105+
-ms-flex-direction: row;
106+
flex-direction: row;
61107

62-
### Deployment
108+
-webkit-box-align: center;
109+
-ms-flex-align: center;
110+
align-items: center;
111+
}
112+
```
113+
</details>
63114

64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
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 JacobSKrol@gmail.com so I can learn and modify appropriately.
65116

66-
### `yarn build` fails to minify
117+
### The Big Realization
67118

68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
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)