Ones and Zeros

PICO CSS    4/5 stars from EBW picocss.com   Only 67k minified if classless OVERALL: Much better than Bootstrap with lots of classes to remember           or Tailwind CSS forces too many classes. Has terrible documentation though. 1) For my website, I downloaded the classless file from their download area on Github: pico.classless.min.css in my newly created "PicoCss" folder under the website. 2) then I added 2 links in the head tag at the bottom:     < head >         < meta charset = "UTF-8" >         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title > Eric Wood </ title >                 < link rel = "stylesheet" href = "global.css" >         < link rel = "canonical" href = "https://picocss.com/examples/classle...

 NEXT JS - 4 stars from EBW https://github.com/LinkedInLearning/learning-nextjs-2491193   b  = begin   e  = end lipsum.com reactjs.org    Client-side rendering CSR Jamstack    1) Pre-rendering 2) decoupled        NEW FEATURE in Next.JS - "Fast refresh" - Example: say counter=5 will change the style. So keeps state so no need to refresh if was 5 and change style. Example 2: Would help auth and other types of state. nextjs.org - by Vercel - subset of Jamstack    Server-side rendering SSR  (a.k.a. hydration)    benefit: fast development, flexible and responsive, zero config, rich user experience, SEO, site performance nodejs.org/en/ - dependency on 12.20 or later React developer tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en npm or yarn to create npx pages/index.js  (say Route: http://localhost:3000/ ) pages/hello.js  (say Route:...

 CHOOSING A FORM LIBRARY (for custom hooks) formik.org react-hook-form.com usehooks.com

 Creating a Roku channel involves two programming languages: SceneGraph and BrightScript. SceneGraph is Roku's proprietary object-oriented XML framework. It is used to design the channel UI. BrightScript is Roku's scripting language that is used to define the channel behavior. Roku provides developers with a suite of tools to make developing a channel fast and easy. This includes a layout editor to help design the channel UI, resource monitoring and profiling tools to help improve channel performance, and a test framework for automating UI tests. The Roku developer community also provides a number of popular tools that streamline Roku development, including the BrightScript extension for the Visual Studio Code IDE. This IDE features direct client-side validation, interactive debug sessions, automatic code formatting, in-editor telnet log, symbol navigation, and many other features that make Roku development easier. Roku is an over-the-top (OTT) streaming device. Stream video co...

 https://newsapi.org/   click on get API key Json web tokens (JWT) - security features for APIs - good example is Twitter or Facebook https://www.linkedin.com/learning/react-working-with-apis-22613064/initialize-a-react-project?autoSkip=true&resume=false CALLING APIS WITH REACT Chrome or Firefox developer tools - Ctrl + Shift + I React developer tools Postman is great for testing. (Postman.com) materializecss.com  for cards ------------------------------------------------ class News extends Component {   constructor(props) {      super(props);      this.state = { news : [], };   }   componentDidMount() {      const url = 'xxxxxxxxxxxxx=${process.env.REACT_APP_API}'      fetch(url)          .then ((response) => {              return response.json();    ...

 Browser parse first HTML DOM (script or head tags) and CSS Object Model at same time (mashed into render tree) (not 1 to 1), and JS later. Browser 1) Browser sends an HTTP request for page 2) Web server sends a response 3) Browser converts response data (bytes) into tokens, via tokenization 4) Browser turns tokens into nodes 5) Browser turns nodes into the DOM tree 6) Awaits CSSOM tree construction I) Construct render tree: 1) Starting at the root of the DOM tree, traverse each visible node. 2) Omit non visible nodes. 3) For each visible node find the appropriate matching CSSOM rules and apply them. 4) Emit visible nodes with content and their computed styles. 5) Finally, output a render tree that contains both the content and style information of all visible content on the screen. II) Actual painting of the screen:    CSS:      1) Layout (recursive process triggered on entire render tree from global style change, or incrementally where only dirty lai...

 ARROW FUNCTIONS old JS: function DoXXX() { } React: const DoXXXX = () => { } ------------------------------- old JS: export default function DoXXX() { } React: export const DoXXXX = () => { } =========================== ANONYMOUS FUNCTIONS <button onClick={() => {      console.log("hello world");     }}> </button> =========================== TERNARY OPERATORS let age = 16; let name = age > 10 ? "Pedro" : "Jack"; const Component = () => {    return age > 10 ? <div> Pedro </div> ? <div> Jack </div>; }; ====================================================== OBJECTS/DICTIONARIES/HASH MAPS (Short-hand 1) Deconstructor: const person = { name: "Pedro", age: 20, isMarried: False }; const { name, age, isMarried } = person; (Short-hand 2) Assigns if field is the same: const name: "Pedro"; const person = { name, age: 20, isMarried: False }; (Short-hand 3) Assigns all except specific overrides ...

 SOLID JS LIBRARIES For UI kits, there's Kobalte ( https://kobalte.dev/ ) , SUID ( https://suid.io/ ), Bootstrap ( https://solid-libs.github.io/solid-bootstrap/ ), For forms there's Felte ( https://felte.dev/ ) and Modular Forms ( https://modularforms.dev/ ), For animations there's Motion One ( https://motion.dev/solid/quick-start ) and Solid Transition Group ( https://github.com/solidjs-community/solid-transition-group ) For tables there's AG-Grid ( Javascript Grid - https://www.ag-grid.com/react-data-grid/solidjs/ ) and TanStack Table ( https://tanstack.com/table/v8/ ), For hooks/utilities/Browser API wrappers there's Solid Primitives ( https://primitives.solidjs.community/ ). ===================================== SolidJS and CRUD (with Tailwind CSS): https://www.youtube.com/watch?v=aXpTR60AMQc ===================================== The tech stack is Solid JS on the frontend and Rust (Actix Web) and Postgres on the backend: https://www.thebarterbee.com/ ===========...

SOLID JS Eric Rating: 5/5 Stars done by Ryan Carniato in 2018.  This is a competitor to ReactJs, and in my option is better. overall it is fast function components that return JSX uses compiled JS instead of React's Virtual DOM like Svelt Compiles to vanilla JS only weighes 7k (Vue 20k, React 40k, Angular 110k) only calls function component once so it is truly reactive best comparision vs. other frameworks is: https://www.solidjs.com/guides/comparison Solid does NOT support IE Solid focuses on the data flow by deliberately embracing CQRS and immutable interface React uses Virtual DOM.  SolidJs does not. React.Children and React.cloneElement have no equivalent in Solid. React and SolidJS use component-driven architecture and reactive programming paradigms Solid uses its fine-grained Reactive Graph to only update what has changed and   only shares this info for its initial render. SolidJS does use JSX like React, but it is not mandatory. Also SolidJS has a “template syntax”...