Category: Thomas Wallace Web

Progressive Enhancement

“Inclusive Web Design For the Future”

Shopify Article

The Graceful Degradation Perspective focuses on building websites for the most advanced/capable browsers and does not worry much on less capable browsers. Older browsers just need to work not look pretty.

The Progressive Enhancement Perspective focuses on the content. Work flow: Content > Presentation > Client-Side Scripting. You start with the HTML, then the CSS style, finally the Script (Javascript, Jquery, extra.)

Progressive Enhancement ensures that a website is functional and presentable on all browsers and devices. It also does not show favoritism to one system or browser improving availability to viewers. MDN Web Docs have a great article on Progressive Enhancement. In general, MDN is a great source for web development information. “Progressive enhancement is a design philosophy that centers around providing a baseline of essential content and functionality to as many users as possible, while at the same time going further and delivering the best possible experience only to users of the most modern browsers that can run all the required code.” (MDN Web Docs)

Site Feedback

https://megan-barnett-it-citrine.meganbarnett.repl.co/segway/index.html

Feedback

  • Maybe change up the banner pictures that break up the sections.
  • I didn’t get much feedback :/

Implemented Improvements

  • Changed banner images between sections rather than having the same image each time.
  • I went in and added a fade in/out to my images.
  • Who was your partner and what was their project?
    • Zack
  • Did you feel that having the sandwich template helped your critiquing efforts?
    • Honestly no. It tended to mess up my train of thought.
  • In which role did you feel the most/least comfortable; being evaluated or in the role of the evaluator?
    • I was fine with both roles.
  • What did you learn from interacting with your partner?
    • We are all on different levels when it comes to web development.
  • What do you feel were your strengths/weaknesses as an evaluator?
    • I was able to help him improve on things he did not understand. Though I am not the best.
  • What would you do differently next time you found yourself in an ethical constructive feedback situation?
    • Ask for a more in-depth analysis of my site.
  • Add in overall reflections you may have of your feedback situation.
    • The feedback for my site was lacking. The sandwich method limited my ability to critic all that needed to be fixed.

Image Optimization

Images account for the majority of data attached to websites. The less a computer has to load the quicker the website will load. It is important to understand what type of image to use and when to use images.

  • Eliminate unnecessary image resources
  • Leverage CSS3 effects where possible
  • Use web fonts instead of encoding text in images
  • CSS effects (gradients, shadows, etc.) and CSS animations can be used to produce resolution-independent assets that always look sharp at every resolution and zoom level, often at a fraction of the bytes required by an image file.
  • Web fonts enable use of beautiful typefaces while preserving the ability to select, search, and resize text – a significant improvement in usability.
  • Vector graphics use lines, points, and polygons to represent an image.
  • Raster graphics represent an image by encoding the individual values of each pixel within a rectangular grid.
  • Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.
  • Minify and compress SVG assets: XML markup produced by most drawing applications often contains unnecessary metadata which can be removed; ensure that your servers are configured to apply GZIP compression for SVG assets.
  • Pick best raster image format: determine your functional requirements and select the one that suits each particular asset.
  • Experiment with optimal quality settings for raster formats: don’t be afraid to dial down the “quality” settings, the results are often very good and byte savings are significant.
  • Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.
  • Serve scaled images: resize images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image. Pay close attention to large images in particular, as they account for largest overhead when resized!
  • Automate, automate, automate: invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.

JavaScript Lesson 3

  • If statement checks a condition and will execute a task if the condition evaluates to true.
    • if (isMailSent) { console.log(‘Mail sent to recipient’};
  • If….Else statements make binary decisions and execute different code blocks based on a provided condition.
    • We can add more conditions using else if statements.if (isTaskCompleted){console.log(‘Task Completed’);} else{console.log(‘Task Incomplete’);}
  • Comparison operators, include <, >, <=, >=, ===, and != can compare two values.
  • The logical and operator &&, or “and”, checks if both provided expressions are truthy.
  • The logical operator ||, or “or”, checks if either provided expressions is truthy.
  • The bang operator ! switches the truthiness and falsiness of a value.
  • The ternary operator is shorthand to simplify concise if… else statements.
    • isNightTime ? console.log(‘Lights on!’) : console.log(‘Lights off!’);
  • A switch statement can be used to simplify the process of writing multiple else if statements. The break keyword stops the remaining cases from being checked and executed in a switch statement.
    • switch(food){ case ‘oyster’ : console.log(‘Enjoy the taste of the sea’); break; case ‘pizza’ : console.log (‘Enjoy a delicious pie’); break; default: console.log(‘Enjoy your meal’);}
  • https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-control-flow/reference

JavaScript Lesson 2

Variables

  • Variable hold reusable data in a program and associate it with a name. Variables are stored in memory.
  • ‘var‘ keyword is used in pre-ES6 versions of JS
  • ‘let‘ is the preferred way to declare a variable. It can be reassigned.
  • ‘const‘ is the preferred way to declare a variable with a constant value.
  • Variables that have not been initialized store the primitive data type undefined.
  • Mathematical assignment operators make it easy to calculate a new value and assign it to the same variable.
  • + operator is used to concatenate strings including string values held in variables.
  • In ES6, template literals use backticks ` and ${} to interpolate values into a string.
  • The typeof keyword returns the data type (as a string) of a value.