Tag: Thomas Wallace

Containing class work assigned by Thomas Wallace

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.

JavaScript Lesson 1

  • console.log();
    • Data is printed, or logged, to the console. Data must be in the ().
  • comments
    • single-line //
    • multi-line /* */
  • data types
    • strings
      • characters wrapped in single or double quotes: “I love pizza” ‘apples are odd’
    • numbers
      • any number without quotes: 23.523
    • booleans
      • true or false
    • null
    • undefined
    • symbol
    • object
      • Objects including instances of data types, can have properties, stored information. The properties are denoted with a . after the name of the object: ‘Hello’.length
      • Objects, including instances of data types, can have methods which perform actions. Methods are called by appending the object or instance with a period, the method name and parentheses. ‘hello’.toUpperCase();
      • Built-in objects, including Math, are collections of methods and properties that JavaScript provides.
  • Operators
    • +, -, *, / , or %

Site Evaluation

Reddit

  • The structure of Reddit is a simple navigation at the top with a search section and links to personal profile. Reddit contains post for multiple forms posted by individuals around the world. Content is sorted into forms such as r/AskReddit, r/IAmA, and r/science. There is a form page for about everything. Reddit has a simple design with article looking sections that can be clicked on to read more information. Each post is displayed by the form location, title, likes, comments, and share button. It has a dark and lite setting. Reddit provides easy navigation and visibility to the user. The main URL for Reddit is reddit.com. I enjoy the easy navigation of Reddit as well as how easily it connects individuals online. I dislike Reddits search engine you will have an easier time finding specific posts or forms by going to google and search with site: reddit.com. I would deffenity change the search engine on Reddit. I would also enjoy the ability to customize the design of my own feed.