alexch / codelikethis Goto Github PK

We may want to include a lesson and or a project on animating HTML elements with CSS.

Inspiration and Resources:

• MDN CSS Animations
• CSS Tricks Animation
• Shay Howe CSS Transitions and Animations
• MDN Using CSS Animations
• Smashing Magazine CSS Animations
• A List Apart Understanding CSS Animations
• Bezier Curve Builder

Pre-processors are an important part of the CSS landscape.

Inspiration and resources:

• Sass Guide
• Mixins and Loops
• CSS Tricks Sass

Lessons and labs for understanding HTML and HTML5 forms are needed.

Cover the following:

• Input types
• Labels
• Validation warnings using HTML
• Submitting
  • POST
  • PUT
  • PATCH
  • DELETE
• Receiving form input on the server
  • HTTP Form Encoding
  • HTTP Params
  • POST Body
  • XML

Inspirational material:

• MDN Forms Guide
• MDN Your first form
• W3 Forms

Inspiration and Resources:

• Bootstrap Documentation

Describe the clearfix technique as applied to Float based layouts

Inspiration and Resources:

• CSS Tricks Clearfix
• LearnLayout The clearfix hack

http://codelikethis.com/lessons/javascript/cypress#anchor/multiple_matches

Contains a section talking about the .contains() operator for Cypress. The "result" column in the table there is correct, but I think the wording here.

.contains( checks each individual element and succeeds if any contain the text

is confusing .contains() is not an assertion, it's actually a sub-selector based on text. You can use it as a puesdo-assertion from the standpoint that cypress will flip out if it can't find an element, but generally you would never end a call chain with .contains() because you should be using it to skinny down the collection of dom elements. I think the text should mention something about the behavior of the subject that the .contains() call returns. I think it returns a cypress style collection of elements each of which matched the .contains() predicate, but I'd have to go check to make sure.

Maybe something like this.
.contains( checks each individual element and returns the (first?) element if any contain the text

We should explain how and why mobile performance is important and how the size of the files included in a web page make a difference in the loading times and user experience.

Include information about:

• Package sizes impact on load times
• Image size / quality and compression
• Webfonts and included font sizes
• HTML/ CSS/ JS file compression
• Uglification
• Caching
• Content Delivery Networks
• Blocking vs. Parallel requests
• Asynchronous package downloading
• Using the browser 2G/3G/LTE network speed simulator

Look at the documentation at the Lighthouse Project for inspiration:

• Lighthouse Project - Google

There needs to be a dedicated lesson to CSS Float and Clear properties and how they are used to design layouts in browsers which do not support Flexbox and Grid.

Inspiration and Resources:

• Visual explanation of Float and Clear as an 3D volume of water
• DevTips Float and Clear examples
• MDN Float and Layout Guide
• LearnLayouts Float Example
• CSS Tricks All About Floats

Some of the content in the slides was found to be incorrectly written as it relates to creating a nav bar that is 100% on a mobile layout and 25% on a desktop layout.

Content to correct: https://github.com/alexch/codelikethis/blob/master/public/lessons/www/bootstrap_development.md#example

@media screen and (min-width:768px){
  .sidebar{
    width:100%;
  }
}
@media screen and (min-width:992px){
  .nav{
    width:25%;
  }
}

Create lesson and lab/project for CSS Grid layout as alternative to Float and CSS Flexbox.

Inspiration and resources:

• Jen Simmons Grid Labs
• Grid by Example
• Layout Land CSS Grid Into
• MDN CSS Grid Basic Concepts
• Lean CSS Grid in 5 minutes
• CSS Grid Scrimba Guide

There needs to be a separate lesson on using Flexbox for layout in the horizontal or vertical dimension.

Inspirational materials:

• Animated Guide to Flexbox
• Even more about how Flexbox works
• Understanding Flexbox, Everything you need to know
• How to create a responsive NavBar with Flexbox
• The ultimate guide to Flexbox using examples
• Learn CSS Flexbox in 5 minutes
• Interactive course on Flexbox, Scrimba

Lesson content here:
https://github.com/alexch/codelikethis/blob/master/public/lessons/www/bootstrap_webpage.md#building-a-simple-web-page-with-bootstrap

the link element document.querySelector("#links > ul > li:nth-child(6) > span > a") with text "You Don't Know JS: Input & Output" appears to be broken

Within the lesson on https://github.com/alexch/codelikethis/blob/master/public/lessons/www/css_layout.md#positioning we should have examples and slide descriptions for the four different kinds of positioning.

• Relative
• Absolute
• Fixed
• Static

Create a repo and file for using Bootstrap libraries for HTML/CSS layout so that students can simply:
git clone git@some_bootstrap_template_repo

Create the file within the BurlingtonCodeAcademy Github org.

Description

When attempting to run single tests/specs from the command line or an IDE testing harness the spec fails due to NameError related to Wrong::Date

An error occurred while loading ./spec/thing_spec.rb.
Failure/Error: require "wrong"

NameError:
  uninitialized constant Wrong::Date
  Did you mean?  Data

However running all the specs with:

bundle exec rspec

Succeeds and runs the specs without a NameError occurring.

Affected Spec Files

1. lesson_spec.rb
2. link_spec.rb
3. thing_spec.rb
4. track_spec.rb

Unaffected Spec Files

1. app_helpers_spec.rb

The app_helpers_spec.rb includes the lines:

require 'date'
require "wrong"

Errors after Require Date

However adding those lines above to the spec files with the issue allows the spec to run, but causes different errors including:

# From lesson_spec.rb

An error occurred while loading ./spec/lesson_spec.rb.
Failure/Error: args + {track: object}

NoMethodError:
  undefined method `+' for {:name=>"credits"}:Hash

# From link_spec.rb

An error occurred while loading ./spec/link_spec.rb.
Failure/Error:
    class View < Erector::Widget
      needs :target
  
      # proxy readers to the target (model) object
      [
          :display_name, :href, :description
      ].each do |method|
        define_method method do
          @target.send method
        end

NameError:
  uninitialized constant Link::Erector
# ./lib/link.rb:25:in `<class:Link>'

# From thing_spec.rb

An error occurred while loading ./spec/thing_spec.rb.
Failure/Error:
    class View < Erector::Widget
      needs :target
  
      # proxy readers to the target (model) object
      [
          :display_name, :href, :description
      ].each do |method|
        define_method method do
          @target.send method
        end

NameError:
  uninitialized constant Link::Erector

# From track_spec.rb

  1) Track takes a list of lesson names
     Failure/Error: args + {track: object}
     
     NoMethodError:
       undefined method `+' for {:name=>"foo"}:Hash

Reproduction Steps

Single Spec File

~/Dev/burlington-code-academy/codelikethis
-> % bundle exec rspec --format documentation spec/thing_spec.rb
n
An error occurred while loading ./spec/thing_spec.rb.
Failure/Error: require "wrong"

NameError:
  uninitialized constant Wrong::Date
  Did you mean?  Data
# ./spec/thing_spec.rb:1:in `require'
# ./spec/thing_spec.rb:1:in `<top (required)>'
No examples found.

Finished in 0.00028 seconds (files took 0.3491 seconds to load)
0 examples, 0 failures, 1 error occurred outside of examples

Single Spec Line

~/Dev/burlington-code-academy/codelikethis
-> % bundle exec rspec --format documentation spec/thing_spec.rb:30


An error occurred while loading ./spec/thing_spec.rb.
Failure/Error: require "wrong"

NameError:
  uninitialized constant Wrong::Date
  Did you mean?  Data
# ./spec/thing_spec.rb:1:in `require'
# ./spec/thing_spec.rb:1:in `<top (required)>'
Run options: include {:locations=>{"./spec/thing_spec.rb"=>[30]}}

All examples were filtered out

Finished in 0.0003 seconds (files took 0.36338 seconds to load)
0 examples, 0 failures, 1 error occurred outside of examples

Curriculum needs a lab or demo showing how to use the Chrome / Firefox browser inspector for investigating the state of the DOM and the propagated CSS applied to the DOM.

Source article here:
https://medium.freecodecamp.org/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33

Create a lab/project for students to complete in order to solidify understanding of the Bootstrap 4 CSS framework.

There should be a lesson about how to embed media beyond images into an HTML page.

• Video
• Audio
• iFrames
• Maps (Google, OpenStreetMap, Mapbox)

Create a lesson which gives a quick and general overview of CSS frameworks other than Bootstrap

Examples:

• Foundation
• Skeleton
• Milligram
• Tailwind
• SemanticUI
• PostCSS

We may want to create a lesson and project about using SVG content within HTML pages

Inspiration and Guides:

• MDN SVG Guide
• CSS Tricks Using SVG
• MDN SVG Tutorial
• Snap SVG JS Library
• Animating SVG with CSS
• CSS Tricks Compendium of SVG Links

Problem

On MacOS El Capitan 10.11.+ and above running bundle install will fail due to Apple replacing OpenSSL due to security CVE's.

NOTE: This might have something to do with the Ruby version being pegged to 2.2.4.

Explanation and example on StackOverflow

Proposed Solution

Change the README to notify users to follow the instructions below to allow EventMachine gem to build using a third party OpenSSL library installed using HomeBrew or other dependency manager.

Instructions

1. Install HomeBrew
2. Install OpenSSL
   brew install openssl
3. Install the EventMachine gem v1.0.8 separately with compile flags

$ gem install eventmachine -- --with-cppflags=-I/usr/local/opt/openssl/include                                                                                                              
Building native extensions with: '--with-cppflags=-I/usr/local/opt/openssl/include'
This could take a while...
Successfully installed eventmachine-1.0.8 1 gem installed

4. Alternatively configure bundler to use Brew OpenSSL

bundle config build.eventmachine --with-cppflags=-I$(brew --prefix openssl)/include
bundle install