#WebDev @northeasternu.bsky.social Web accessibility ensures digital content is usable by people with disabilities/situational disabilities: Perceivable content: Alternative text for images; Operable interfaces: Keyboard navigation, sufficient time to read content;Consistent navigation.

#WebDev @northeasternu.bsky.social Web security focuses on protecting applications and data from exploitation. Key concepts: 1)prevent SQL injection by validating inputs; 2) implement (TLS) to encrypt data in transit; 3)secure password storage; 4) prevent Cross-Site Scripting and Request Forgery.

#WebDev @northeasternu.bsky.social Selecting fonts in web dev 1) project's scope (long-term projects: versatile font families with multiple weights) 2)amount of text (decorative fonts for headlines, serifs for long text) 3) sizes (sans serifs for small text).4) language support for global audience.

#WebDev @northeasternu.bsky.social React: Context API is a system to pass data without manually passing props down the tree. Provider gives child components access to value. Value is what we want to make available (state & functions). Consumers are all components that read the provided context value

#WebDev @northeasternu.bsky.social React component life cycle is shown in below image. Event handlers or useEffect can be used for "side effect" ( any interaction between a component and the world outside the component). Using useEffect executes side effect when component mounts/ after re-renders.

#WebDev @northeasternu.bsky.social React: useReducer is ideal for multiple related pieces of state and complex state (e.g. object or arrays). The logic to update state lives in one central place, decoupled from components: the reducer. State is updated by dispatching an action to a reducer.

#WebDev @northeasternu.bsky.social React key concepts: Props are used to pass data from parent components to child components. Props can only be updated by the parent component (immutable). If to mutate props, what is actually needed is state (internal data to be updated by the component’s logic)

#WebDev @northeasternu.bsky.social Here is what I have learned during the first half semester for the web development course youtu.be/mI-ou0xEbEI

#WebDev @northeasternu.bsky.social server-side code is run on a web server and that its main role is to control *what* information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).

#WebDev @northeasternu.bsky.social A form is created using the element. It contains input fields, buttons, and other elements for user interaction. The action attribute specifies where the form data is sent when submitted. The method attribute defines how the data is sent (GET or POST).

#WebDev @northeasternu.bsky.social MongoDB is a NoSQL database solution for storing and managing data. Note: when selecting and returning an item from MongoDB, it's an Mongoose documents which can be converted to a plain JavaScript object using .toObject() or JSON.parse(JSON.stringify(document))

#WebDev @northeasternu.bsky.social JavaScript functions can be created using function declaration, function expression and arrow functions. The concept of "callback" is important in JavaScript. A callback function is a function passed as an argument to another function, often used in async coding.

#WebDev @northeasternu.bsky.social check out on my personal website zhengyicoding.github.io/zhengyiwebsi... and hover over or click on the profile pic to see a happy laughing face :D
First project on Web Dev is fun!

#WebDev@northeasternu.bsky.social
Bootstrap is a css framework. It has an intuitive grid system that divide the page into 12 equal-sized columns and enable organizing HTML elements using preconfigured columns. It also has some pre-built components such as navbar and card that users can use.

#WebDev @northeasternu.bsky.social
CSS is a style sheet language to style web contents using rulesets each composed of selector {property: property value}. Selector is key to style HTML contents and can be used on elements, .class, #id, [attribute],and pseudo class. it uses box model

#WebDev
@northeasternu.bsky.social
I really like the MDN introduction to your first website because it provides an overview about what each of HTML, CSS and JavaScript does before diving in.
My note: HTML is a way to structure content on the web like a skeleton of a webpage to structure elements.