Click for how to use...

  • Items lights up on mouse-over
  • Click highlighted items to expand
  • Click item again to collapse
  • Currently, only 'About' and 'Thanksgiving' buttons function
  • 'Home', 'Add Items' and 'Contact' currently do not function
  • 'Thanksgiving' button is available during the Thanksgiving weekend and will be removed next week

How to Phrase it Without Saying "You're Wrong!"

Expressing alternative ideas, processes, and methods assertively without making others feel like they're wrong requires careful communication. Here are some tips:
  1. Use "I" Statements: Instead of saying "you should do this", say "I suggest" or "I believe". This shifts the focus from what the other person is doing wrong to what you believe could be done differently.
  2. Acknowledge Other Views: Before presenting your alternative, acknowledge the current method or idea. You might say something like, "I understand that currently we are doing X, and it has been effective in these ways...".
  3. Present Alternatives as Options: Introduce your alternative as another option to consider, rather than the only correct way. For example, you could say, "One option we might consider is...".
  4. Use Positive Language: Frame your alternative in a positive light. For example, instead of saying "This process is too slow", you could say "We might speed up the process by...".
  5. Explain the Benefits: Clearly outline the benefits of your alternative idea, process, or method. If possible, provide evidence or examples to support your points.
  6. Be Open to Discussion: Make it clear that you're open to discussion and feedback about your alternative. Encourage others to ask questions and share their thoughts.
  7. Avoid Absolute Terms: Avoid using words like "always", "never", "best", or "worst". These words can make your alternative seem like the only correct option, which can be off-putting.
REMINDER: the goal is to communicate your ideas in a way that is respectful of others' opinions and open to collaboration.

Agreement vs Alignment

  1. Strong relationships don't need agreement. They need alignment.
  2. Agreement is having identical opinions. Alignment is having shared values.
  3. Agreement is taking the same path. Alignment is heading in the same direction
  4. Closeness is a matter of commitment, not consensus.
    5. from Adam Grant on LinkedIn

HTML Notes

  1. Notes about HTML go here!

CSS Notes

  1. Selectors

    CSS selectors determine which HTML elements on the web page is selected for styling. There are three primary types of selectors: TagName, ClassName, and ID. TagNames are the same as the names of the html tags that appear in opening tags, such as <p>, <h1>, <a>, <ul>, or <main>, to name a few. The three primary selectors are:

      - Tag Name Selector
      - Class Name Selector
      - ID Selector

      - TagName
        - Example: This h1 CSS Rule will be applied to every <h1> tag on the web page.
          h1 {
              color: 'blue';

            }
      - Class Name
        - Example: CSS class names are arbitrary names placed in the opening HTML tags, for example, given this HTML:

          HTML: <h1 class="heading">My Page Header</h1>

        This CSS rule will be applied to every element on the web page that has a class of ".heading"

          .heading {
              border: 2px solid purple;
           }
      - ID
        - Example: CSS id names are arbitrary names, and similar to class names are placed in the opening HTML tags, for example, given this HTML:

          HTML: <article id="article-02">Agreement vs Alignment</h1>

        ID's need to be unique to the web page. This CSS Rule will apply the styling only to the specific HTML element with the '#article-02' id.

         #article-02 {
              background-color: lightblue;
         }


  2. Selecting nested elements using CSS styling:
        article h3:hover {
            cursor: pointer;
            background-color: black;
            color:antiquewhite;
         }
     This will select all the level 3 header elements (<h3>) within <article> elements and set these rules for their :hover properties. The CSS declaration shown above is the one actually used to style the section headers (with the black background and white lettering) as shown within this document


  3. Selecting nested elements using CSS styling:
         div div p {
            color: blue;
             }
         This will select all the paragraph (<p>) elements within a <div>, within a <div>

  4. Adjacent Sibling Selector -- h1 + p - selects the first <p> element directly following an <h1> tag.

  5. Child Selector -- ul > li - selects all the <li> elements the are direct children of a <ul> elements.

  6. Attribute Selector --
         input[required] {
           color: blue;
          }
     -- selects all the <input> elements with a 'required' attribute.

  7. Pseudo Class Selector
        a:hover {
             color: blue;
             text-decoration: underline;
        }
    -- When the mouse hovers over the selected <at> tag element the blue color and underline styling will be applied.

  8. Pseudo Element Selector
         p::before {
            content: ">> ";
         }
     -- selects part of an element to be styled. For example this adds content (two greater than symbols and a space) before each element.

  9. Grouping Selector
        h1, h2, h3 {
          font-family: Gill Sans", sans-serif;
        }
    -- Separated by commas, selectors target multiple elements to be styled. For example this styles the font for each <h1>, <h2>, and <h3> element.

  10. Universal Selector
        * {
           margin: 0;
           padding: 0;
        }
    -- Allows us to select all elements on in the DOM. This example sets the margins and padding for all element to zero.

CSS Pseudo Selectors

CSS pseudo selectors image

JavaScript Basics

  1. Variables - containers for storing data
    JavaScript Variables can be declared in 4 ways:
    - Automatically
    - Using var
    - Using let
    - Using const

    As a practice, the 'automatic' and 'var' declaration methods are not recommended, because they open the code up to errors: Automatic assignment, var and let all allow the value of the variable to be reassigned later in the same scope. However, automatic and var allow the variable to be reassigned, which increases the possibility of coding errors. Use of 'let' and 'const' is recommended because once declared, variables with let and const cannot be re-declared in the same scope. In addition, the values of variables declared with 'let' can be reassigned, while variables declared with 'const' remain constant.

  2. Examples
      a = 5; (automatic declaration)
      var b = 5; (declaration using var)
      c = a + b; (automatic declaration)

       const c = a + b; (automatic declaration)
      x = a + b; (automatic declaration)

JavaScript Notes

  1. How to show/hide toggling of the body of the articles was achieved
    Image of code
    The primary effect provided by this code snippet is the show/hide toggle effect, which is achieved with the if statement starting on line #12. When a given heading is clicked, if the value of the variable hidden is falsey, this means the text associated with the clicked heading is currently hidden, and the first part of the if statement is then true and that code is executed, setting the class attribute of the text to show, which applies CSS to set visibility: visible. If the value of the variable hidden is truthy, this means the text associated with the clicked heading is currently visible, and the else clauseof the if statement is executed.

JavaScript Cheatsheet

  1. Found this JS Cheatsheet with a few helpful tips...

Express Coding for Backend Servers

  1. Express Server Setyp The server is the backend of your app
    Craate a git repo
    create the files: server.js, app.js, .env, and .gitignore. And for PostgreSQL, create a folder for the database config files (name the folder 'db', and inside create files named dbConfig.js, schema.sql, and seed.sql.


SQL Cheatsheet

  1. Creates Database Schema adding one or more tables:
    psql -U postgres -f db/schema.sql

  2. Seeds the tables with some data:
    psql -U postgres -f db/seed.sql
    ** note that both “schema.sql” and “seed.sql” are files files that were created with the parameters necessary to create the schema and seed data, respectively.

  3. Example contents of schema.sql:
    CREATE TABLE songs ( // <— creates a table called “songs”
    id SERIAL PRIMARY KEY, // <— creates a column labeled “id” which is an automatically generated number, and set it as primary key
    name TEXT NOT NULL, // <— creates a column for TEXT labeled “name” and require that the column be filled in for each row or record
    artist TEXT NOT NULL, // <— ibid for a column labeled “artist”
    album TEXT, // <— creates a column labeled “album”, optionally filled in
    time TEXT, // <— creates a column labeled “time”, optionally filled in
    is_favorite BOOLEAN // <— creates a column labeled “is_favorite”, must be of type BOOLEAN and optionally filled in
    );

    Contents of seed.sql:
    INSERT INTO songs (name, artist, album, time, is_favorite) VALUES // <— assigns the order of the column headers
    // data below must appear in the order of the column headers above, must match the data types and must include values where they are required
    // Note that the “id” is automatically generated (due to the use of the SERIAL keyword) and is not included in the data rovided below:
    // Each row (record) is enclosed in parentheses, and separated by commas.
    // The value for each column is enclosed in single quotes and separated by commas within the parentheses.

    ('Like A Virgin', 'Madonna', 'Like A Virgin', '3:38', true),
    ('While My Guitar Gently Weeps', 'Beatles', 'The Beatles - White Album', '4:46', true),
    ('Fool In The Rain', 'Led Zeppelin', 'In Through The Out Door', '6:08', true),
    ('Penny Lane', 'Beatles', ' Magical Mystery Tour', '3:03', true),
    ('Stairway To Heaven', 'Led Zeppelin','The Song Remains The Same', '3:03', true),
    ('Crazy For You', 'Madonna','Vision Quest', '4:04', true),
    ('All Too Well', 'Taylor Swift','Red', '4:04', true),
    ('We Are Never Ever Getting Back Together', 'Taylor Swift','Red', '3:12', true),
    ('Flowers', 'Miley Cyrus','Endless Summer Vacation', '3:21', true),
    ('Lose Yourself', 'Eminem','8 Mile', '5:20', true),
    ('New York State of Mind', 'Billy Joel','Turnstiles', '6:00', true)%


React Cheatshet

  1. Express notes go here!

PERN Concepts

  1. Wireframe diagram
  2. PERN is an acronymn for PostgreSQL, Express, React and Node

Data Structures

  1. Six types of data structures Array

Web Development Roles

  1. Front-End Web Developer - A front-end web developer primarily uses HTML & CSS and JavaScript coding languages to build websites that are responsive, user-friendly, and interactive. Front-End Web Developer average salary: $72,117.
  2. Web Designer - A web designer is responsible for a website’s appearance. This role requires proficiency in graphic design software (i.e. Adobe Illustrator and Photoshop) in order to design website layouts. These designs are then handed off to a web developer to be built - though some web designers may have front-end skills (i.e. HTML, CSS, and JavaScript) so they can also develop and implement their designs. Web Designer average salary: $56,280.
  3. Full-Stack Developer - A full-stack developer is proficient in working with both front-end and back-end coding languages. With their diverse skill set, they are able to work on every step of the web development process, including prototyping and programming browsers, servers, and databases. Full-Stack Developer average salary: $75,970.
  4. WordPress or Shopify Developer - A WordPress or Shopify developer specializes exclusively in developing custom themes for clients using WordPress or Shopify, two of the world’s most popular Content Management Systems (CMS). Clients can range from a big-time marketing agency revamping their website, to an independent clothing store trying e-commerce for the first time as a result of COVID-19, to a travel blogger looking to spruce up their personal website. WordPress Developer average salary: $63,790. Shopify Software Developer average salary: $106,457.
  5. Web Analyst - A web analyst works on the web development team, and uses data analytics to track and identify trends in website user behavior and interaction. Their primary goal is to draw conclusions from this data in order to strategize and improve a website’s design, user experience, and conversions. Web Analyst average salary: $81,279.
  6. UX Designer/Developer - A UX designer is in charge of a product or service's user experience. It is their job to ensure that the functionality is smooth, accessible, and intuitive to the user's needs and behaviors. This involves conducting research and proposing strategies, designing wireframes and prototypes, and testing a product. UX designers often work closely with developers and designers, and/or have development/design knowledge, themselves. UX Designer average salary: $80,720.
  7. Technical Consultant - A technical consultant works with a company or client to strategize how to optimize their technological processes while also reducing costs. They often use their technical expertise to troubleshoot and resolve technical issues, test applications, and make recommendations for long-term security and maintenance strategies based on best practices in the industry. Technical Consultant average salary: $78,706.

How to Build An Image Carousel

  • If images are arranged in an accessible folder with names that include an index, we can dynamically build an array of the filenames and display those images in some fashion on the document.
  • The way images are displayed in this example uses an un-ordered list (<ul>) where each list item contains an image tag. Use of an un-ordered list is arbitrary; it could have been done using just an image tag, or an ordered list, paragraphs, div, etc.

Example of an Image Carousel

Wayne Dyer Orange Juice Metaphor...

Great idea doesn't always translate into a great product ...

About
×
Contact
X

Happy Thanksgiving

Happy Thanksgiving img