-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
399 lines (374 loc) · 23.4 KB
/
blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<!DOCTYPE HTML>
<html>
<head>
<title>Del Monte | Blog</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta property="og:title" content="Del Monte | Portfolio" />
<meta property="og:url"content="https://wo1vin.github.io/Portfolio/" />
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="assets/css/main.css" />
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap" rel="stylesheet">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">Del Monte</a>
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li><a href="index.html">Project Gallery</a></li>
<li><a href="services.html">Specialties</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="blog.html">Blog</a></li>
</ul>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/wo1vin/" target="_blank" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/wo1vin" target="_blank" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
</ul>
</nav>
<!-- Main -->
<div id="main" class="blog">
<!-- Header -->
<section class="post">
<header class="major">
<h1>I said that?</h1>
<p>Some things I wrote<p>
</header>
</section>
<!-- Posts -->
<article class="blog post featured">
<header class="major">
<h2>How to Rest</h2>
<p>July 15th, 2024</p>
</header>
<p>It was a struggle to maintain a healthy work-life balance for a long time. The self-imposed demands of coding, networking, and learning, combined with the challenges of managing health symptoms, often left me overwhelmed and exhausted. But that is because I didn't know how to rest. In the past, idle time meant there was something I wasn't doing, and what I thought was rest equated to bed-rotting and doom-scrolling. I knew there was more to the problem, so I started researching different kinds of rest. I learned that rest isn't just a luxury, but a necessity, and it’s equally important to match up the recharge activity with the activity you are resting from. Over the course of this week, I will post more specifically about which activities would help mitigate burnout and brain fog.
</p>
<span class="tags">#health</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Fetch API</h2>
<p>June 28th, 2024</p>
</header>
<p>The Fetch API is a more modern and powerful alternative to the XMLHttpRequest API for making HTTP requests in JavaScript. It provides a simpler and cleaner syntax, better error handling with Promises, and support for advanced features like Request and Response objects. However, the choice between the two APIs depends on the specific requirements of your project and the browsers you need to support. Here are some key differences between them.
</p>
<ol>
<li><strong>Promises vs Callbacks:</strong> One of the main differences is the way they handle asynchronous operations. The XMLHttpRequest API uses callbacks, which can sometimes lead to callback hell and make the code harder to read and maintain. On the other hand, the Fetch API uses Promises, which provide a more elegant and intuitive way to handle asynchronous operations. Promises allow for better error handling and chaining of multiple requests.</li>
<li><strong>Simplicity and Cleanliness:</strong>The Fetch API offers a simpler and cleaner API compared to the XMLHttpRequest API. It eliminates the need for complex methods like `open()` and `send()` and provides a more intuitive and declarative syntax. This makes the code easier to understand and reduces the amount of boilerplate code required.</li>
<li><strong>Support for Request and Response Objects:</strong>The Fetch API introduces the concepts of Request and Response objects, which provide more flexibility and control over the request and response. These objects can be easily manipulated and accessed, allowing for advanced features like caching, modifying requests and responses, and handling different types of data.</li>
<li><strong>Browser Support:</strong>The Fetch API is supported by most modern browsers, while the XMLHttpRequest API is supported by both modern and older browsers. However, if you need to support older browsers, you may need to use a polyfill or fallback to the XMLHttpRequest API.</li>
</ol>
<span class="tags">#API</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>XMLHttpRequest API</h2>
<p>June 27th, 2024</p>
</header>
<p>The XMLHttpRequest API is a JavaScript API that allows web developers to send HTTP requests to a server and receive data in response without having to reload the entire page.
It is commonly used in the development of dynamic web applications as a versatile tool because it allows you to interact with servers and fetch data from URLs in the background without having to do a full page refresh.
With this method, the webpage can be updated without disrupting the user experience.
</p>
<span class="tags">#API</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>host objects</h2>
<p>June 26th, 2024</p>
</header>
<h3>Host Objects</h3>
<p>
Host JavaScript objects vary because some that may be available in one environment may or may not be present in another, hence the name "host" objects. For example, most browsers offer window objects and navigator objects, but these objects are not in the server running node.js. Some objects, however, are available in both browsers and the node.js servers, like the console object. Therefore, we can say that the host objects are host-specific and may differ from one host (environment) to another.
</p>
<div>
<div>
<h4>Native Objects</h4>
<ul>
<li>String()</li>
<li>Array()</li>
<li>true / false</li>
</ul>
</div>
<div>
<h4>Host Objects</h4>
<ul>
<li>window</li>
<li>console</li>
<li>NodeList</li>
</ul>
</div>
</div>
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>native objects</h2>
<p>June 25th, 2024</p>
</header>
<h3>Native Objects</h3>
<p>
Native JavaScript objects are objects original to the JavaScript language. These objects can be used regardless of the environment you are building in, and their behavior stays consistent across machines. They are also known as built-in objects, pre-defined objects, or global objects. Native objects can be constructors, which allow you to create new objects with the same underlying functionalities, and native objects can also be used as primitive values, which are not considered "objects" in the regular sense because they have no methods or properties and instead function as data.
</p>
<div>
<div>
<h4>Constructors</h4>
<ul>
<li>String()</li>
<li>Array()</li>
<li>Object()</li>
</ul>
</div>
<div>
<h4>Primitive Values</h4>
<ul>
<li>true / false</li>
<li>8</li>
<li>"apple"</li>
</ul>
</div>
</div>
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Dequeue</h2>
<p>June 24th, 2024</p>
</header>
<p>A dequeue is also known as a double-ended queue. It is a data structure where the collection of elements can be added or removed from both ends. The ends of the queue are refered to as the FRONT and the REAR.</p>
<p>One use case for a dequeue is a ticket purchasing line, where people can queue up for a ticket and continue with their purchase or decide to cancel before it is their turn in the queue. </p>
<img src="./images/basicdeque.png" width="600px" alt="visual diagram representing a dequeue">
<span class="tags">#datastructures</span>
</article>
<!-- <article class="blog post featured">
<header class="major">
<h2>look at how ugly you are, you beautiful being</h2>
<p>June 7th, 2024</p>
</header>
<p>Accept that you are a flawed individual, making mistakes past and future.
Make peace with this. You have hurt and will continue to hurt those you love.
Understand that despite this, you are deserving of love and respect.
Most of all, from yourself. Your body, personality, social standing—none are perfect.
They can't be. Everything comes and goes, but the love and self-compassion you have for yourself remains.
Look at all your ugly parts. It's hard. Love them as they are, for they are part of you,
And you are lovely as you are.
</p>
<p>Author's note: I left this intentionally unpolished. I wrote this as it came out of my mind.</p>
<span class="tags">#health</span>
</article> -->
<article class="blog post featured">
<header class="major">
<h2>JSONP</h2>
<p>June 5th, 2024</p>
</header>
<p>JSONP can be unsafe and has some security implications.
As JSONP is really JavaScript, it can do everything else JavaScript can do, so you need to trust the provider of the JSONP data.
These days, CORS is the recommended approach and JSONP is seen as a hack.
</p>
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>destructuring</h2>
<p>June 4th, 2024</p>
</header>
<p>Destructuring is a way of extracting values of Objects or Arrays and placing them into distinct variables.
</p>
</br>
<h4>array destructuring</h4>
</br>
<img src="./images/arr-destructuring.png" width="400px" alt="code example of destructuring an array">
</br>
<h4>Object destructuring</h4>
</br>
<img src="./images/obj-destructuring.png" width="400px" alt="code example of destructuring an object">
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Rendering Retina Graphics</h2>
<p>May 31st, 2024</p>
</header>
<p>The word <strong>retina</strong> is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1.
It means these displays are emulating a lower resolution screen in order to show elements with the same size.
All mobile devices have retina-defacto displays.
By default, browsers render DOM elements according to the device resolution, except for images.
In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible.
However, using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.
To overcome this problem, we can use responsive images, as specified in HTML5.
Making available different resolution files of the same image to the browser will let it decide which image is best. To do this, we can use the html attribute <code>srcset</code> and optionally, <code>sizes</code>. For instance:</p>
<img src="./images/srcset.png" width="400px" alt="code example depicting use of srcset and sizes in an html document">
<span class="tags">#HTML</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Why use the arrow syntax for a method in a constructor?</h2>
<p>May 30th, 2024</p>
</header>
<p>The value of <strong>this</strong> gets set at the time of the function creation and can't change after that.
Because of that, when the constructor is used to create a new object, <strong>this</strong> will always refer to that object.
In normal functions the value of this can be changed, but in arrow functions the context always stays the same.
So you don't have to worry about the context changing, even if you use your arrow function in different parts of your application.
</p>
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>What is the same-origin policy?</h2>
<p>May 26th, 2024</p>
</header>
<p>The same-origin policy prevents JavaScript from making requests across domain boundaries.
An origin is defined as a combination of URI scheme, hostname, and port number.
This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's DOM (Document Object M).
To get around this, you should use CORS (Cross-origin resource sharing) to allow cross-origin access. CORS is a part of HTTP that lets servers specify any other hosts from which a browser should permit the loading of content.
</p>
<img src="./images/same-origin-policy.png" alt="table depicting different URLs, outcome, and reasons for each outcome." width="500px">
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>What is the difference between <code>let</code>,<code>var</code>, and <code>const</code></h2>
<p>May 24th, 2024</p>
</header>
<p>Variables declared using the <code>var</code> keyword are scoped to the function in which they are created. If the variable is created outside of any function, it is scoped to the global object.
<code>let</code> and <code>const</code> are block scoped, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
<code>var</code> allows variables to be hoisted, meaning they can be referenced in code before they are declared. <code>let</code> and <code>const</code> will not allow this, instead throwing an error.
Re-declaring a variable with <code>var</code> will not throw an error, but <code>let</code> and <code>const</code> will.
<code>let</code> and <code>const</code> differ in that <code>let</code> allows reassigning the variable's value while <code>const</code> does not.</p>
<span class="tags">#JavaScript</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>What is an event loop? </h2>
<p>April 26th, 2024</p>
</header>
<p>The event loop is a single-threaded loop that monitors the call stack of a project as the code is read and checks if there is any work to be done in the task queue. On each cycle of the event loop, it takes on whatever is on the top of the call stack, and whatever is next on the task queue gets pushed into the event loop in order to execute.</p>
<span class="tags">#Node</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>What is a linear data type?</h2>
<p>April 23rd, 2024</p>
</header>
<p>As the name suggests, data types using a linear structure arrange a collection of elements in a line, where individual elements can be accessed based on where they are in comparison to the rest of the elements. Think of a book, where the page number is the index, and the content of the page doesn't necessarily have to correspond to the next, but they are still organized in a sequence.</p>
<!-- <p>The most widely used linear data structures include:</p>
<dt>Queues:</dt><dd>The first element added is the first one removed, like a lunch line.</dd>
<dt>Stacks</dt> -->
<span class="tags">#data structures</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Vulnerable</h2>
<p>April 22nd, 2024</p>
</header>
<p>If you are experiencing neurotic patterns as a result of an emotionally deprived and traumatic childhood, you should understand that it's not your fault. They're survival strategies you developed to cope with difficult situations. It's important to be kind to yourself and recognize that many others have been through similar struggles.</p>
<p>You're not alone in this, and you're definitely not flawed or unworthy because of it. It's all about understanding where these patterns come from and giving yourself the support you need to heal. Consider seeking professional help or talking to someone you trust about what you're going through. Healing takes time, but with self-reflection, support, and nurturing relationships, you can overcome these challenges and emerge stronger than ever. You've got this!</p>
<span class="tags">#health</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Crumbs</h2>
<p>April 21st, 2024</p>
</header>
<p>
You led me on a dance, a waltz of false affection,</br>
Each step we took together, fueled my deep connection.</br>
But behind your words lay an avoidant's reflection.</br></p>
<p>
Your breadcrumbs led me on a journey of delusion,</br>
A maze of false hope, a twisted, cruel illusion.</br>
<p>I watered those seeds with tears of devotion,</br>
But you, like a drought, withheld your emotion.</br>
Your avoidance a shield, protecting your heart's core,</br>
Leaving me stranded, longing for more.</br></p>
<p>I built castles in the air, with bricks of expectation,</br>
Dreaming of a future, built on our foundation.</br>
But you were a ghost, haunting my desires,</br>
Leaving me stranded amidst my burning fires.</br></p>
<p>I'm tired of your games, your manipulative art,</br>
Of being the puppet, dancing to your heart.</br>
<p>So now I stand here, weary and worn,</br>
A heart once tender, now battered and torn.</br>
I release the thought of you, and set you free to roam,</br>
I deserve a love that’s real, a love that calls me home.</br>
No longer entangled in your web of deceit,</br>
I walk away, whole again, in my own beat.</br>
And though you may linger, in the shadows, still,</br>
I have found my light, my strength, my will.</br>
</p>
<span class="tags">#art</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Feeling Down? Have you...</h2>
<p>April 20th, 2024</p>
</header>
<ul>
<li>Exercised</li>
<li>Gone outside</li>
<li>Talked to someone</li>
<li>Eaten well</li>
<li>Limited your scrolling time</li>
<li>Gotten enough sleep</li>
<li>Drank enough water</li>
</ul>
<span class="tags">#health</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>What is a stack?</h2>
<p>April 19th, 2024</p>
</header>
<p>A stack is a collection of elements that can only be accessed from the beginning or end of the collection. Picture a stack of pancakes, where you can either add a pancake (push), or take a pancake (pop). This method of accessing elements is called LIFO, and stands for Last In, First Out.</p>
<img src="./images/Lifo_stack.svg" alt="diagram visualizing the concept of LIFO, adding and removing elements from a stack.">
<p>A stack is an abstract and linear data type. Abstract data type (ADT) means you don't need to know how the data type keeps track of the elements. In these cases, the inner workings are <strong>abstracted</strong> from your knowledge. This is the same across different languages when it comes to ADT. Whether you use arrays in JavaScript or lists in C#, they both store elements and have methods that you can use to access them.</p>
<p>A stack can perform three fundamental operations:</p>
<dl>
<dt>PUSH:</dt><dd>The push action inserts a new element into the stack. First, verify if <code>TOP=MAX–1</code> to check if the stack is filled and no more insertions are possible. An <code>OVERFLOW</code> message is printed if an attempt is made to put a value into an existing stack.</dd>
<dt>POP:</dt> <dd>The pop operation is performed to remove the stack's topmost element. First verify if <code>TOP=NULL</code>to check if the stack is empty and no further deletions are permitted. An <code>UNDERFLOW</code> notice is produced if an attempt is made to erase a value from a stack that is already empty.</dd>
<dt>PEEK:</dt><dd>peek action returns the value of the stack's topmost element without removing it from the stack. It first checks if the stack is empty, i.e., if <code>TOP = NULL</code>, then an appropriate message is written. Otherwise, a value is returned.</dd>
</dl>
<span class="tags">#datastructures</span>
</article>
<article class="blog post featured">
<header class="major">
<h2>Lyrid Meteor Shower</h2>
<p>April 18th, 2024</p>
</header>
<p>Named for the nearby constellation Lyra, the Lyrid meteor shower is composed of pieces of debris from the Comet C/1861 G1 Thatcher. A.E. Thatcher was an amateur astronomer living in New York when he discovered the comet in 1861. The meteor shower itself has been observed for 2,700 years ever since the first recorded sighting was made by the Chinese in 687 BC. </p>
<p>This year, the peak of this meteor shower falls on April 21-22. If you are in the northern hemisphere and want to catch it, head away from the city lights and find a section of dark skies. The best visibility will be after moonset and before dawn. Lie flat on your back with your feet facing East and looking up. Wait for your eyes to adjust to the dark (30 minutes) and you should begin to see meteors.</p>
<span class="tags">#astronomy</span>
</article>
</div>
<!-- Nav -->
<nav id="nav" class="bottomNav">
<ul class="links">
<li><a href="index.html">Project Gallery</a></li>
<li><a href="services.html">Specialties</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="blog.html">Blog</a></li>
</ul>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/wo1vin/" target="_blank" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/Wo1vin" target="_blank" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
</ul>
</nav>
<!-- Copyright -->
<div id="copyright">
<ul><li>© 2024 Del Monte</li></ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>