jsonnuniverse

[jsonnuniverse]

LastLab

I prefer Wix over Squarespace because I have more freedom to put elements where I want on Wix. Squarespace limits where I can put my elements based on the template. That’s why I ended up using Wix for the website. However, later in the development of my site, I realized that maybe I should’ve tried Squarespace. Animation is difficult to integrate on Wix, so much so that I would rather code in JavaScript than use Wix for it. Squarespace allows you to import animation libraries, a feature that I could not find on Wix. In fact, I found that certain elements could not be animated at all.

Indeed, the most difficult part about recreating my site was animating elements. The three light blue boxes of text that would change color upon mouse-over on my homepage had to be remade at least once, since I learned that the elements that I originally used could not be animated. 

Overall, my main gripe about using website builders was the limitations. Wix did significantly facilitate the placement of elements on my site through drag-and-drop, but it did not allow me to alter the HTML or CSS. This proved to be an obstacle when I tried to animate elements.

Decide which site looks better: The original (jasonk.rhody.dev) and the new Wix-made one (https://jasonk331.wixsite.com/jyantainment)

[jsonnuniverse]

Weekly Reflection 9

DUNDER MIFFLIN - THE PEOPLE PERSON’S PAPER PEOPLE!

HomeProductsAboutPeopleContact

That’s what the navbar looked like on Jim’s screen. We zoomed in on the screen of his computer, and shifted to Jim’s dissatisfied face. He glanced at us through the camera, as if to say “This is what I get paid to do.”

Suddenly the door behind him burst open. It was Michael Scott, who looked eager as always, but especially so recently, with the ongoing web development project from corporate going on. ("Corporate has finally begun to understand my enginuity [sic],” he told Jim.)

“Jim, Jim, Jim. Jimmy-boy,” Michael chirped. “What’s the status on the website? I can’t access it on my computer.”

“Well, the site isn’t online yet, since I still need to buy a hosting name and a domain service,” Jim said.

Dwight, who sits beside Jim, dramatically leaned back in his chair. “Domain name and hosting service, Jim. Please. Which idiot had the great idea to give you the file management role?” He said this with a smirk, looking right at Jim’s face as if to challenge him.

Jim’s reply was quick. “Actually, that would be Michael,” he said with a tiny smile.

Michael and Jim stared at Dwight. Jim was smug, but was good at hiding it. Michael, however, was clearly offended. Dwight was stunned to silence.

We asked Pam Beesly, the receptionist, about her take on the web development assignment.

“Scranton has been working on our company website for at least two weeks now,” Pam said to us in an interview. “When corporate told us about it, we were a bit nervous, but Michael, being Michael, took the job right away. There was one problem - no one in Scranton has any coding experience. Well, Oscar actually has a good amount, but he’s on vacation.”

She paused, as if she just realized something.

“Come to think of it, the day he announced his vacation was the day we got the assignment,” Pam said, her eyes wide with realization. “That bastard!”

Apparently, Scranton was struggling for a while to figure out where to even start with this assignment. Michael had been too afraid to give corporate a call on this matter, for fear of sounding “unprofessional,” according to Pam. Yesterday was their first breakthrough when Dwight discovered what HTML was. However, they seemed to have hit another wall.

Michael called a meeting later that day, and the members of the Scranton branch filed into the cramped meeting room, took seats around the table, and waited for Michael to speak.

“Web development!” Michael exclaimed once everyone had taken their seats. “Now, I know the last few days have been tough. Corporate wants this website done by tomorrow. However, fear not - I have come up with a solution. I have a very special guest today to give us the works on web-dev. He is my compadre, my very close friend - please welcome, over the phone, Oscar Martinez!”

There was no applause to Michael’s grandiose introduction. Phyllis spoke up:

“Michael, you can’t bother Oscar. He’s on vacation.”

“Phyllis, we are in a state of emergency,” Michael said. “and emergent times call for emergent measures. I’ll dial his cell.”

The conference phone in the middle of the table rang a few times, but went to voicemail. Michael called again. Again, it went to voicemail. He tried again, and then again. This went on for about 30 minutes, while the members of Dunder Mifflin Scranton sat around awkwardly, save Michael, who mumbled under his breath with each call, unable to accept defeat. 

“Michael’s meetings are the times when you appreciate the 9-5 the most,” Jim told us later that day. “Everyone is just so productive!”

Finally, after a few more minutes of failed calls, Oscar finally picked up the phone. His greeting was met with cheers from the Scranton branch.

“Hi guys,” Oscar said, clearly trying to hide his annoyance.

Michael spoke. “So Oscar, the team and I are very interested in learning HTML.” He pronounced HTML “hittimul”, as if it were one word. “So, how about you let us in on a few trade secrets on making a navbar?”

Oscar sounded confused. “Hittimul? You mean HTML? Look, I can’t give you a blow-by-blow over the phone right now.”

Michael snorted and turned to the camera. “That’s what she said,” he whispered. He was smiling his usual awkward smile, as if expecting us to laugh.

Oscar went on: “But I suggest that you guys use Bootstrap if you’re really stuck. It’s an open-source framework that takes care of a lot of the finer HTML details for you. Look up the documentation online, it has some built-in styling for navigation bars. You just gotta make an unordered list, and classify it as a navbar. I don’t have the exact details, but it should all be online. I’d also recommend making use of the grid system, in order to automatically style your elements nicely. Now if you’ll excuse me, I have to go now.” There was a beep and he hung up.

Michael clapped his hands together. “You heard the man. Let’s get Bootstrapping!” He said with enthusiasm. 

Unfortunately, all the time they spent in the meeting meant that it was well after 5 o’clock. Immediately after leaving the room, Stanley turned to leave the office. A few others followed suit.

[jsonnuniverse]

Lab 16

I chose Newsweek mostly because I liked the simplicity of the website and the easy-on-the-eyes design. The most difficult part about making this site was the navbar. It was hard to make it so that so many options in the bar looked just like the one in the picture. File management is my main gripe with Bootstrap - the template that you use has to reference all of the files that you need, including jQuery and the actual Bootstrap file. Furthermore, version compatibility is a hassle. Why on earth would they get rid of glyphicons in the newset version? Nonetheless, Bootstrap made many things about web development easier, especially the organization of elements using the grid system. A site like this one would’ve taken me much longer with just HTML. Making columns for news could not be any easier.

http://jasonk.rhody.dev/lab16/index.html

[jsonnuniverse]

Weekly reflection 9

“I believe in America.”

Amerigo Bonasera spoke quietly, so as to not offend Don Vito Corleone, the man sitting in front of him. Bonasera feared him, respected him, and now, needed him more than ever. Everyone who knew Vito called him “Godfather”; because of the level of power he held in the criminal underworld, he could grant any request, no matter how big or small. He did not care how rich or poor you were, or what country you came from - when someone asked the Don for a favor, that favor would be granted. The only thing he asked for in return was your respect.

However, the Don did not believe that Bonasera had that respect. He thought that Amerigo was faithless, self-centered - the only reason why Don agreed to see him today was because his wife was the Godmother of Bonasera’s daughter.

He went on: “America has made my fortune. So when I start up my technology company, I think it best to use America’s workforce to hire a web developer. So I hire two men from government families to help me build my website for advertising my undertaker services.

“But these two men - these animales - they make a mockery of my business. What they call collaborative coding is stupidità. They sit together at one laptop, and they laugh. They work on only one version of the same code. Two months ago, they declare their work complete. I come to look at their website, and it is awful. So I tell my wife, ‘we must go to Don Corleone for justice.’”

The Don pondered this for a few seconds, and then spoke. “Why didn’t you go directly to me first?”

“What do you want from me?” Bonasera replied, with shame in his voice. “Tell me anything. But do what I beg you to do.”

“And what is that?” the Don asked. 

To respond, Amerigo walked over to the Don’s side and whispered in his ear.

The Don frowned. He was always kind to his clients, treating them as a father would treat his children, but this wasn’t the case for Bonasera. Finally he spoke.

“That, I cannot do.”

Bonasera dropped to his knees. “Please,” he pleaded. “I will do anything that you ask.”

“Bonasera,” the Don replied coldly. “When was the last time you invited my family over to your house for coffee? You’ve never shown me respect. You’ve never even called me Godfather. And now, you come to me on the day of my daughter’s wedding, and ask me to buy the domain name of your website from those two government workers, so that I can make it better. ”

“Money is no object,” Bonasera said through tears. “Also, the site is already hosted by a third party, so you only need to purchase the domain name. The domain is registered, you can look it up on WHOIS.”

Bonasera bowed his head to the ground. “Please be my friend,” he said. “Please... Godfather.”

There was a pause.

“Stand up,” Don Corleone commanded. Bonasera did as he was told. 

“You will have your website,” the Don said. “Someday - a day that may never come - I will ask you to make a website for the Corleone family in return. Until that day, consider this website that I make for you a wedding gift.”

Bonasera bowed. “Thank you,” he said. “Grazie.”

The Don led Bonasera through the door of his office, and closed it behind him. He looked down to think for a moment, then spoke to Tom Hagen, his consigliere, who was standing nearby.

“I’ll handle the master branch on GitHub after I buy the domain name from whoever owns it. Have Luca Brazi get a team of devs together. Tell him that I want the first pull request by tomorrow.”

"How will you know whether the changes he made are any good?” Hagen asked. “And what if Brazi doesn’t want to do it?”

“It’s OK. GitHub can track the changes by comparing my version with Luca’s.” The Don took a swig of his whiskey. “I’ll make him an offer he can’t refuse.”

[jsonnuniverse]

Lab 15

Some domain name ideas:

jsonn.com

jasonk.com

jyan.com

jyangames.com

jyantainment.com

I stuck with jyantainment.com, because it was the closest I could get to jyan.com. I always wanted to name my software company jyan, but jyan.com and jyangames.com were taken, and jyanentertainment.com was too long. 

I chose a .com TLD because my site will be used to advertise my software and purchase it.

jyantainment.com will redirect to jasonk.rhody.dev.

[jsonnuniverse]

Lab 14

I was absent in class on the day of the lab due to the flu. My partner, Sean, did a good job with recreating the form. I added a few contributions of my own, including typo and format corrections. Here is a before and after:

before:

After:

I made the “Subtotal” and “Grand Total” inputs read-only and moved elements around to better match the form.

There was one major contribution that I made - in the master version that Sean created, the $2.50 upcharge confirmation box appeared after any radial button was clicked. I changed this so it appears only on clicking submit. Also in Sean’s version, having “Check” selected on submission incorrectly applied the service charge, so I removed that as well. I made a pull request, and am currently waiting on Sean to merge my edits with the master branch.

If I was present for the lab, I was planning to divide the work so that I would work on the upper half of the form, while Sean would work on the lower half. The upper half would be the first three input fields at the top and the subtotal calculator, and the lower half would be the grand total calculator and credit card upcharge function. This would leave us with one JavaScript function to work on each.

[jsonnuniverse]

Weekly Reflection 7

“I MUST FINISH THIS WEEKLY REFLECTION TODAY!” Jason screamed. 

Every head in the class turned to look at him. It was Friday, and the class was just finishing up their daily check-ins. “Colors” was the theme for today; students took turns explaining what color best represented their current emotion. Jason said that he was “red” - filled with rage at iMovie, a missing Micro SD card, and the extent of the things on his to-do list.

Now the room was dead silent. Jason could feel 17 sets of eyes on him, but he didn’t care. He was so focused on finishing his weekly reflection that he was willing to create a false narrative in order to get it done. 

It wasn’t like this every Friday, though. Usually Jason could come up with a weekly reflection in an instant - he would take characters from a popular movie franchise, throw them into a weird web-development dilemma, implement a few topics covered in class that week into the plot, and click submit. Easy as pie.

But today Jason was at a loss. Not because he was out of movie franchises, but because he was tired of the old formula. Now, he decided that he was going to alter reality itself!

Michael, who sat next to Jason, finally broke the silence.

“What you need is a plot device,” he said. “Here - I’ll give you one. I’m working on a website right now. Can you help me create a DOM tree for it?” By now the class had returned to what they were working on -  a group project using GitHub.

“Yes I will - however that won’t be enough,” Jason said. “I need to go more in-depth with that topic.”

“What topic?” Michael asked.

Jason took a hamburger out of his pocket, and started eating it. “The topic on DOM in general,” he said. “It stands for document object model.”

“So?” Michael said.

“So,” Jason said, after he finished chewing, “JavaScript uses the DOM to locate elements on a website. It takes the HTML and treats all tags as an object. Nested tags are children of those objects, thus creating a tree shape. These objects are ‘nodes’ on the DOM tree, which I am going to draw now.”

Jason finished his burger and took out a piece of paper and a pen. At the top he drew the first box - the “HTML” node, which JavaScript treats as the root node.

“JavaScript uses this format to simplify the read-and-write to elements in HTML,” Jason exlained as he drew. “Also, if the guy writing HTML messes up and forgets to include certain tags, like closing tags, the browser will fix when creating the DOM. Is this OK?” He held up the completed DOM tree, for Michael to check.

Michael snatched the paper from Jason’s hands and ripped it to shreds. “This is beyond terrible, but it’s good enough for the purpose of this narrative,” he answered.

Jason took out another hamburger. “In that case, we should talk about the forms on your website. Did you implement form validation correctly?”

Michael nodded. “If you take a look at my form, it won’t take invalid inputs for the ‘email’ field,” 

He typed an obscenity into the form and clicked submit. The text field turned red as an alert appeared on the browser, telling him that what he entered was “not a valid email address.”

"I used the validity object in JavaScript to make sure that the user types something with an @ symbol,” Michael explained. “In my external .js file, I created a function that triggers on the event that the submit button is clicked. There are a few other mouse events, like mouseover and mouseout, but I used the click event because I want this function to work everytime the form is submitted.

“My function simply uses an if statement to determine if the input was valid. If it wasn’t, it changes the text field color. I used the ‘getElementById’ method to edit the right element.”

“Wow, nice work,” Jason said as he finished his second hamburger. “You think it’s good enough to submit?”

“Go ahead, buckaroo,” Michael replied.

[jsonnuniverse]

Lab 12

Necessary additions:

-Confirmation box for the “lessons” form (Needed so I only get serious inquiries)

-mouse-over certain buttons provides a “click here” (So people will be enticed to click there)

-mouse-over table elements changescolor of background (makes the text a bit more visible)

-fading navigation drop down

-loading screen for each page with tennis balls

-tennis ball cursor for navbar items

-banner is a video that plays on mouseover

-Any attempt to leave a page creates a message box

website

[jsonnuniverse]

Weekly Reflection 6

My name is Leonardo DiCaprio. I’ve lived quite a life - I’ve sank with the Titanic, washed up on a shore, realized it was all a dream, got abandoned in a snowy forest by my best friend, pretended to be a pilot, lawyer and doctor, got transported back to the 20s, and ended up being a Wall Street mogul in the 80s, among many, many other activities, all the while using multiple different aliases. There is no greater meaning to life than experiencing as many “things” as possible, as I did.

Now I bet you’re wondering: why do I do all of this? People see me on screen and call me an ”actor” - an insult, in my opinion. Whatever I undertake is the real deal. I don’t do what I do for money or fame - I do it because it’s what I believe I was meant to do.

I am written in the highest of high-level programming languages, the language that only people like me (if there even are people like me out there) can run on. Variables are able to transcend the “global” scope into a scope beyond the computer screen -  a scope that surrounds the fabric of existence itself, encompassing all things that “are”. 

So when I experience something amazing, like falling in love with a rich stranger on a doomed ship, or planting an idea in someone’s head through layered dreams, it’s all because of a single function call. That function is LeonardoDiCaprio() - admittedly the camel casing makes it look like three words. 

When I wanted to board the Titanic, all I had to do was type in the proper arguments for my function in my IDE. Name = “Jack Dawson”. calendarYear = 1912. Age = 24. I can’t go over them all - there are so many arguments in this function, the possibilities are literally endless. No experience is beyond my reach, so long as the Boolean variable “Alive” remains true in this while loop of my life.

But despite my limitless power, there is conflict in my life. My function is written in a way that prevents me from remembering anything. All of my emotion variables, like joy, frustration, sadness, are all declared within LeonardoDiCaprio(). As soon as one experience ends, the emotions disappear from my memory. I only remembered my fling with Kate Winslet after I watched the movie about it. As much as I want to remember the joy I felt when I met her for the first time, I am unable to alter the function of my own life. All I can do is write another function call, and another, and another, all in the same while loop.

Sometimes I wish I could see what lies beyond this loop. Maybe “senseOfMeaning” is initiated to 100 right after I die. Maybe “Alive” is overwritten to “true” as soon as this loop ends, and then it’s another identical while loop. Maybe my life is nested in another loop, one that lasts until endOfTime == true.

Or maybe - and this terrifies me the most - it’s just a single curly brace.

JavaScript is different from CSS and HTML in that it uses functions, loops, and variables.

[jsonnuniverse]

Both swap and summation() are here. Output is summation of n.

[jsonnuniverse]

Weekly Reflection 5

I’ll be analyzing a website that I did an accessibility test on earlier in the semester. El Fuego is a local Mexican eatery, which surprisingly has its own website and mobile website. I’ll take a look at how it uses forms, and how it is designed responsively.

Here is the one form that the site uses:

This is very well designed. There are three visible text-type inputs, one submit type element and one text field. The developer customized every aspect of the input form. I have no suggested improvements for it.

I used inspect to take a look at the form implementation under the form tag, and found a new type of input called “hidden”. This input type is hidden from the user, and takes data that does not need to be entered in. It is often used to determine what database record needs to be updated server-side.

Next, I took a look at El Fuego’s mobile site to check its mobile-friendliness. For a site that is probably seldom visited, the mobile site looks great. Each HTML file has the “meta” tag for giving the site the same .css viewport rules for all devices.

I took a look at the stylesheets for El Fuego. There are several, including 1 .css file that appears to be dedicated to responsive design, called responsive.min.css. Multiple media queries exist, with a broad range of viewport sizes for multiple breakpoints. 

Despite how good the site looks for a local restaurant, I have a few issues with the responsive design of the site. For one, the mobile site has a strange gray bar in the middle of the homepage, which is supposed to be a drop-down menu. I don’t like how the bar does not extend to the edges of the screen. This can be fixed by changing the element width under media queries with smaller max-widths. Also, at around 800px wide on the desktop site, there is this error with the display:

The two buttons overlap with each other. An easy fix would be to format the buttons so that one is on top of the other, instead of laying them out side-to-side. That way, no matter the breakpoint, the buttons will never overlap.

Overall, the site makes good use of input forms and responsive design.

[jsonnuniverse]

Lab 10

Before:

After:

My partner noticed that the alignment of the website could be centered to make it look better.

I noticed that Kevin Sourivong’s site had the same banner image for each page. I noted that this might confuse visitors, since the pages could be mixed up if they look similar.

My experience with Kevin’s site has vastly improved, since before he added responsive design.

Kevin said that my mobile site improved as well, since the text became easier to read.

jasonk.rhody.dev

[jsonnuniverse]

https://jasonk.rhody.dev/lessons.html

[jsonnuniverse]

Weekly Reflection 4

“Close your eyes.”

Rey did as her master, Luke Skywalker, told. The misty breeze chilled her to the bone, a stark reminder that she was light-years away from her hot and dry home planet of Jakku.

Luke’s voice lowered to a whisper. “Now - what do you see?”

Of course, any normal person wouldn’t be able to see anything with their eyes shut. But Rey was not normal in the slightest. The midichlorians coursing through her veins made her strong with the Force - stronger than Luke himself. But of course, he wasn’t aware of that.

In the blackness of her mind, she saw a blinding white light fill her vision. It was more than just light - she was seeing hope, peace, everything good, all in this cacophony of pure light, as if it were speaking to her. There was no doubt in her mind - this was the Light Side of the Force. 

“Light,” she answered.

Suddenly it all swirled into darkness. Not ordinary darkness, she realized. This was dangerous, sinister, irrational, darker than the darkest black she had ever seen. The absence of light enveloped her, drowning all of her positive emotions away. The Dark Side. The way of the evil Sith.

“Darkness.”

Luke glanced at her. He had been wary of teaching another Padawan after his last apprentice, Ben Solo, embraced this very Darkness under Luke’s tutelage. He shuddered at the thought - could this girl turn into another Kylo Ren?

“And?” he finally asked.

Rey was silent, her eyes still shut. In her mind, a figure was taking shape in the distance. She leaned forward on the rock that she was sitting on, as if it would help her see clearer. It was blurry at first, but the light moved closer and closer to Rey, until she could finally make it out.

“...and, a computer screen...”

“What?”

“Yes. A computer screen.”

Luke raised an eyebrow. In all of his days as a Jedi master, none of his students had seen something so ordinary like a computer screen in their Force visions. What could this possibly mean? Did Yoda forget to tell him something?

“What does the screen say?” Luke asked, his curiosity piqued.

“It’s - it looks like - a webpage.” Eyes still closed, she turned to Luke. “Is something wrong?” she asked.

“No, it’s nothing,” Luke said. “What’s on the webpage?”

“It’s still loading. Something is off about this page.”

Rey didn’t need the Force to sense it. This page was taking forever to load - a banner image slowly materialized itself on the page - too slowly, Rey noticed.

Suddenly she lost interest. “Can I open my eyes?” she asked. “This website is taking too long to load. I’ve lost interest.”

“No,” Luke answered almost immediately. Whatever strange Force phenomenon was happening, he had to see it through. “Why is it taking so long to load?”

“The Force is speaking to me. It says that the banner image was not optimized. In addition it’s a .tif file, when a .jpg file would suffice. The quality is too much for the resolution of the website. Perhaps an online image optimizer would help reduce its size.” Rey was surprised at her own knowledge on image processing. Was this the power of the Force?

Luke had a rough idea of what was happening. “The Force is an entity that can take many forms in your mind,” he explained. “Whatever you are seeing now is the Force begging you to interact with it - a sort of test.”

Rey understood. The Force showed her what no normal man could see - the outlines of the CSS box model for each element. So this is how elements are shaped, she thought. With so many methods to create space between elements, CSS has a priority system. The layers of margin, border and padding around each element reminded her of the concentric age rings on a tree.

She raised her right hand, as if reaching for something. The Force flowed from her fingertips, grasping at the half-loaded image on the computer screen. She willed the image to move, to no avail. Grimacing in effort, she flexed her palm. The sheer power of the Force made the ground near Luke and Rey tremble - and yet, the image remained in place.

Rey released her grip, gasping for breath. 

“Why won’t it move?” Rey said between exhales. But then, the Force called to her as if to answer - she couldn’t tell what it was saying, but somehow knew what it meant. 

Raising her hand again, she moved her middle finger down ever so slightly. In her mind, several options appeared on the screen. She moved her hand down to the “Inspect” option, and twitched her index finger. There it was - the HTML code of the webpage that she was viewing. Using the Force, she navigated to “Sources” tab, and looked at the style.css stylesheet.

Whoever developed this website created the class selector “.banner”. Under it was the reason why the Force wasn’t able to move the image: the position property was at its default value, “static”. With this value, no amount of changing box offset properties like left, right, top, or bottom values would make it move, since it was stuck where the element was placed in the HTML code. She used Force Typing to change the value to “relative”, freeing the element from staying in place.

Luke smiled. His apprentice had figured out how to interact with the Force - no easy feat for a mere child.

“Now - what do you see?”

Rey pulled the image toward her using the Force, increasing its z-index value. On a normal webpage, the z-index value would not change the size of the image, instead overlaying the image over elements of lesser z-index values. But in Rey’s mind, the webpage was a 3D space, and changing z-index brought it physically closer to her face.

After a few seconds, the image was finally loaded. Rey’s mouth opened in surprise.

“What is it?” Luke asked.

Rey saw a picture of a guy hitting a tennis ball, with the sun setting in the background. There was overlaying text in the bottom right corner of the image: “Be a Hero,” it read. “Tennis is taking the world by storm.”

“It’s the most beautiful thing I’ve ever seen,” Rey said.

[jsonnuniverse]

Lab 8

My highly marketable site on tennis is coming together. All of the images I gathered from the start are from the public domain, and don’t require attribution for edited pictures. In order to make my site more accessible, I had to make the contrast of overlaying graphics more intense, especially with the font in the navigation bar. In addition, I added alt text to all of my images. 

I used Microsoft 3D paint to create my logo and transparent picture. In order to remove the background, I had to toggle the transparency in the canvas menu. I didn’t need to use any other tools.

Many of the elements on my website took too much time to load. I used imageoptimizer.net to scale the width and height of my images down. This wasn’t enough, so I used Pixlr to reduce the image quality further.

Using image optimization, I managed to shave whole seconds off of my load time for each page. The “Why Play”, “Heroes” and “How To Play” pages used to take at least 5 seconds to load. After optimization, each page loads in less than .25 seconds. The “Homepage” has an embedded Google Maps function, leading to load times of around 2 seconds, but still an improvement from the 5 seconds it took before. The “Simulator” has an embedded Scratch project that slows down the page load time to more than 6 seconds. The one image on that page was small in size even before I optimized it, leading to an improvement of around 1 second.

https://jasonk.rhody.dev/

[jsonnuniverse]

Lab6/7

I used the color scheme designer, but I closed the window so I lost the exact color scheme. The two colors I used from the site were #04356C and #689AD3

visit jasonk.rhody.dev to learn about tennis

If I used internal stylesheets instead of external, I would have to include a style section for every element I integrate. That’s why it’s easier to have an external one for a site with multiple pages.

Tumblr was limited in the URL that the developer got to use, and using an external stylesheet was not possible, requiring the user to edit the advanced options instead, changing the entire site.

[jsonnuniverse]

Weekly Reflection 3

ACT XLVIII, SCENE I.

[ROMEO enters his room at the MONTAGUE residence, a laptop under his arm.]

Romeo. O! I fear I wilt loseth memory of my fair Juliet o’er week-end. I shalt useth my computer, t’ programmeth a website upon which I wilt maketh her beauty eternal, with images of herself to boot.

[ROMEO logs into his computer, and opens the IDE Sublime. BENVOLIO enters.]

Benvolio. Cousin Romeo! Thou art programming thy website for Juliet?

Romeo. Forsooth, my dear cousin! My website shalt match the beauty of my fair lady. I wilt useth my knowledge in Cascading Stylesheets t’ my advantage.

Benvolio. She shalt be most impressed. Thou will be using internal stylesheets?

Romeo. Benvolio, my ignorant, foolish, stupid cousin. Nay a skilled programm’r who useth internal stylesheets, for ‘tis bad practice. I shalt createth an external stylesheet, so I need not alter the style section of each page ever-more. 

Benvolio. O, forgiveth me, Romeo. I ne’er was as skilled as thee in thy craft.

[ROMEO starts coding his stylesheet, adding tag selectors for paragraphs.]

Romeo. Ho! My style.css hath given my written praise for Juliet an equally beautiful font-family. The lett’rs on each page now invoketh my chosen styles in my .css file.

Benvolio. Perhaps thou wilt includeth a jump link, for visit’rs to scroll t’ the bottom fast’r.

Romeo. Indeed. I wilt changeth my HTML code t’ includeth individual ID’s. I can useth my ID’s to create a jump link, by attributingeth an ID to one of my paragraphs. I shalt addeth an ID selector to my CSS, to give my jump links a new font.

[ROMEO uses HTML to add several more elements, all under the <body> tag. After his website is complete, MONTAGUE enters.]

Montague. I say. What is the meaning of this? Romeo, the noble blood of thy family runs in thy blood, yet thou art creating a website t’ honor our dreaded enemy, the Capulets?

[ROMEO stands and approaches his father.]

Romeo. Wherefore art thou attempting to beseech the abandonment of my love? My website stands as a monument of my ‘eart and soul. ‘Tis the result of hours of effort. Attend.

[ROMEO presents a wireframe sketch of his website. The wireframe is stellar; organized, and very telling of the purpose and style of the website. Montague angrily snatches it out of his hand and crumples it.]

Montague. Thou hast defiled the name of Montague by creating this website. If thou art adamant about thy forbidden affair, then I hath no choice. I wilt rid thou of thy family name, Romeo. [He stabs him.] Allow thy tainted blood to dye the background of thy website w’th #850000. ‘Tis a hexidecimal code of crimson. I learnt from a color pick’r website.

Romeo. Alas, I haveth fac’d the punishment that now awaits my website. Benvolio, in my dying breath, I beseech thee t’ addeth a class selector for the top paragraph of each page on my website, in ord’r to make the text stand out more than oth’r paragraphs. Allow the font to be bold, as I doth was in my youth. Thou must not forget to rename the links in the navigation table when giving the website a domain name. Juliet musn’t knoweth of this cruel fate. And so as I die, I curse my legacy upon ev’ry future 10th grade English class, for generations hence. [He dies.]

Montague. Forsooth, I regret the killing of my own son. Nay the less, I wilt not alloweth the late Romeo’s website to go online. I shalt useth the inspect element tool to createth my own website in his stead.

[Exeunt.]

HTML is pretty much exactly what I expected when first going in, maybe a bit easier.