Tag: scripting

[#Script #Coding] Flutter Course – Build Full Stack Google Docs Clone

Posted on by Eric Brooks

Flutter Course – Build Full Stack Google Docs Clone

By freeCodeCamp.org
Published: Oct 20, 2022

“
freeCodeCamp.org Build a responsive cross-platform Google Docs Clone using Flutter & Node.js. This tutorial is designed for beginners in Node.js and no prior knowledge of Javascript is required. This course will go through Google Authentication WITHOUT Firebase, keeping the users logged in, creating new documents, viewing the list of documents created by the user, updating the title of the document, sharing the link of the document, adding a rich text editor, collaboratively editing with as many users as you want and creating responsive design. We will be using Flutter, Node, Express, Socket, MongoDB and Riverpod.

Course created by Rivaan Ranawat. Check out his channel: https://www.youtube.com/c/RivaanRanawat

Source Code: https://github.com/RivaanRanawat/flutter-google-docs-clone
Special Thanks: @Aadhi Arun

Prerequisites: Flutter & Dart Basics
Flutter Version: 3.3

    CONTENTS:

  • (0:00:00) Intro
  • (0:00:57) Creating Flutter Project
  • (0:02:56) Designing Login Screen
  • (0:09:24) Google Cloud Platform oAuth Client ID
  • (0:13:00) Google Auth Android Setup
  • (0:15:30) Google Auth iOS Setup
  • (0:17:25) Google Auth Web Setup
  • (0:19:17) Important Note on Auth
  • (0:20:39) Running on Web on specific port
  • (0:21:19) Google Sign In using Node.js
  • (0:32:45) What is Node.js?
  • (0:35:53) Creating & setting up Node Server
  • (0:54:00) MongoDB Setup
  • (1:01:01) Creating Signup API
  • (1:32:16) Calling Signup API – Client Side
  • (2:00:04) Persisting the State – Explanation
  • (2:03:52) Generating JWT
  • (2:07:31) Auth Middleware
  • (2:22:50) Local Storage
  • (2:41:15) Testing on Android
  • (2:42:23) Routing
  • (2:51:28) Creating NavBar
  • (2:53:44) Signing Out
  • (2:59:52) Creating New Document
  • (3:23:32) Displaying all documents created by Me
  • (3:37:57) Designing Document Screen
  • (3:55:39) Updating Document Title
  • (4:10:20) Socket Introduction & Connection
  • (4:29:23) Collaborative Editing
  • (4:49:26) Auto-Save
  • (4:58:01) Routing Back to Main Page
  • (4:59:45) Sharing Link
  • (5:01:42) Conclusion

Resources:
SHA-1 Key: https://stackoverflow.com/questions/15727912/sha-1-fingerprint-of-keystore-certificate
Node Website: http://nodejs.org
NPM Website: https://www.npmjs.com
MongoDB: http://mongodb.com/
More about Status Codes: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

”

[#Script #Coding] Create a Design System with Figma – Full Course

Posted on by Eric Brooks

Create a Design System with Figma – Full Course

By freeCodeCamp.org
Published: Jun 28, 2021

“
freeCodeCamp.org Learn how to build a design system in Figma. By the end of this course, you will become a master of building design systems in Figma and understanding master components.

Course developed by Tim Sullivan. Check out his channel: https://www.youtube.com/channel…

    Course Contents

  • (0:00:00) Introduction
  • (0:03:03) Creating a Color System
  • (0:22:23) Building a Type System in Figma
  • (0:35:16) Elevation
  • (0:57:33) Product & System Icons
  • (1:11:26) Text Legibility
  • (1:30:58) States
  • (1:50:53) Selection (Interaction)
  • (1:55:02) Understanding Layout
  • (2:04:15) Pixel Density
  • (2:12:05) Spacing Methods
  • (2:24:19) Responsive Grid Layout
  • (2:48:59) App Bar – Bottom
  • (3:07:55) App Bar – Top
  • (3:22:37) Backdrop
  • (3:41:58) Banners
  • (4:06:45) Bottom Navigation
  • (4:19:15) Buttons – Floating Action Button
  • (4:38:54) Buttons
  • (5:06:04) Cards
  • (5:41:10) Chips
  • (5:58:15) Dialogs
  • (6:28:56) Date Pickers
  • (7:32:22) Dividers

”

[#Script #Coding] STOP!! Know Before You Buy or Sell! Is Your NFT Rare? – NFT Rarity Calculator

Posted on by Eric Brooks

STOP!! Know Before You Buy or Sell! Is Your NFT Rare? – NFT Rarity Calculator

By codeSTACKr
Published: Mar 01, 2022

“
codeSTACKr Check out the collection I made:
https://codecats.xyz

Join my Discord community: https://discord.gg/A9CnsVzzkZ

Do you want to figure out the rarities of each NFT in your collection?
How about that NFT you bought the other day, do you want to know how rare it might be?
Before you buy an NFT, you should know how rare it is.

Stop wasting money and let me show you how to find the rarity of NFTs in any collection with my NFT Rarity Calculator!

Become A VS Code SuperHero Today: https://vsCodeHero.com

    Timestamps

  • 00:00 – Intro
  • 00:56 – The Rarity Calculation Formula
  • 02:03 – Using the Rarity Calculator
  • 02:36 – Integrated in 10K NFT Collection Repo
  • 06:07 – Use Rarity Calculator for any NFT Collection
  • 10:18 – SPECIAL ANNOUNCEMENT!!

Show support!
PayPal: https://paypal.me/codeSTACKr

Watch Next:
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

[READ MORE]

”

[#Script #Coding] Top 30 React Interview Questions and Concepts

Posted on by Eric Brooks

Top 30 React Interview Questions and Concepts

By freeCodeCamp.org
Published: Sep 12, 2022

“
freeCodeCamp.org Prepare for a React interview or improve your React skills by learning about 30 common React JS interview questions and concepts.

Nishant Singh developed this course. Check out his channel: https://www.youtube.com/c/Cybernatico…

    Course Contents

  • (0:00:00) Introduction
  • (0:00:43) Map and Filter
  • (0:20:06) States in React
  • (0:33:33) Props in React
  • (0:40:34) Inline Conditional Expressions
  • (0:52:04) Event Handling in React
  • (0:57:41) Keys in React
  • (1:03:25) Forms in React
  • (1:18:04) Dynamic Inputs in React
  • (1:26:02) CSS Styling in React
  • (1:36:47) Uncontrolled v/s Controlled Components
  • (1:44:10) Virtual DOM
  • (1:46:05) InnerHTML in React
  • (1:55:23) React Fragments
  • (2:00:02) Stateless v/s Stateful Components
  • (2:01:57) REST API Requests
  • (2:27:05) Debouncing in React
  • (2:38:43) Context API in React
  • (2:49:33) Class v/s ClassNames in React
  • (2:52:59) Higher Order Components
  • (3:06:18) Lazy Loading in React
  • (3:14:34) Helper Functions in React
  • (3:24:21) Implementing Recursion in React
  • (3:27:10) Running Arrays of Functions
  • (3:33:08) Custom Hooks in React
  • (3:37:22) Promises and Async/Await
  • (3:51:52) Code Splitting in React(Dynamic Imports)
  • (3:58:18) Creating a Search Filter in React
  • (4:13:10) Adding TypeScript to React
  • (4:16:36) React Testing Library
  • (4:30:41) Caching an API Response

”

[#Script #Coding] Jenkins Tutorial – How to Deploy a Test Server with Docker + Linux (Full Course)

Posted on by Eric Brooks


Jenkins Tutorial – How to Deploy a Test Server with Docker + Linux (Full Course)

By freeCodeCamp.org
Published: Sep 16, 2022

“
freeCodeCamp.org Learn about Jenkins by building a CI/CD pipeline for a web application. Jenkins is an open source automation server which makes it easier to build, test, and deploy software. In this course, you will learn how to build a full dev-ops pipeline using Jenkins, Linode Servers, and other tools.

Course Readme: https://github.com/gwenf/jenkins-fcc-…
Sign up for Linode with a $100 credit: https://www.linode.com/students

Gwendolyn Faraday developed this course. Check out her channel: https://www.youtube.com/c/FaradayAcademy

? Linode provided a grant that made this course possible.

    Contents

  • (00:00:00) Video Intro
  • (00:01:33) Course Overview
  • (00:02:36) What is Jenkins?
  • (00:08:47) Terms & Definitions
  • (00:11:58) Project Architecture
  • (00:13:28) Linode Intro
  • (00:20:18) Setting Up Jenkins
  • (00:24:11) Tour of Jenkins Interface
  • (00:30:33) Installing Plugins
  • (00:33:39) Blue Ocean
  • (00:34:55) Creating a Pipeline
  • (00:42:37) Installing Git
  • (00:45:15) Jenkinsfile
  • (00:46:27) Updating a Pipeline
  • (00:52:05) Jenkins with nom
  • (00:56:36) Docker & Dockerhub
  • (01:02:14) Closing Remarks

”

[#Script #Coding] Python Programming for Beginners – Full Course

Posted on by Eric Brooks

Python Programming for Beginners – Full Course

By freeCodeCamp.org
Published: Aug 09, 2022

“
freeCodeCamp.org Learn the Python programming language in this full course for beginners! You will learn the fundamentals of Python and code two Python programs line-by-line. No previous programming experience is necessary before watching this course.

Start using Replit: https://join.replit.com/python-students

Beau Carnes developed this course. Check out one of his other channels: https://youtube.com/zizyo

    Course Contents

  • (0:00:00) Introduction
    Rock, Paper, Scissors Intro Project

  • (0:03:11) RPS – Variables and Functions
  • (0:09:07) RPS – Calling Functions
  • (0:12:31) RPS – Dictionaries
  • (0:15:28) RPS – User Input
  • (0:16:55) RPS – Libraries, Lists, Methods
  • (0:20:45) RPS – Function Arguments
  • (0:22:33) RPS – If Statements
  • (0:25:40) RPS – Concatenating Strings
  • (0:27:13) RPS – f-strings
  • (0:30:26) RPS – Else and Elif Statements
  • (0:33:37) RPS – Refactoring and Nested If
  • (0:38:37) RPS – Accessing Dictionary Values
  • (0:41:55) RPS – Testing Game
    Fundamentals of Python

  • (0:43:52) Setup Python Locally
  • (0:47:47) Creating New Repl
  • (0:48:45) Variables
  • (0:51:21) Expressions and Statements
  • (0:52:38) Comments
  • (0:54:23) Data Types
  • (1:00:16) Operators
  • (1:00:44) Arithmetic Operators
  • (1:03:52) Comparison Operators
  • (1:05:13) Boolean Operators
  • (1:07:26) Bitwise Operators
  • (1:07:42) is & in Operators
  • (1:08:21) Ternary Operator
  • (1:09:40) Strings
  • (1:12:36) String Methods
  • (1:16:41) Escaping Characters
  • (1:19:23) String Characters & Slicing
  • (1:21:45) Booleans
  • (1:26:07) Number Data Types
  • (1:28:19) Built-in Functions
  • (1:29:50) Enums
  • (1:32:51) User Input
  • (1:34:39) Control Statements
  • (1:36:48) Lists
  • (1:46:21) Sorting Lists
  • (1:49:57) Tuples
  • (1:53:49) Dictionaries
  • (2:01:45) Sets
  • (2:06:10) Functions
  • (2:16:57) Variable Scope
  • (2:18:35) Nested Functions
  • (2:21:37) Closures
  • (2:22:59) Objects
  • (2:26:27) Loops
  • (2:32:01) Break and Continue
  • (2:33:02) Classes
  • (2:39:12) Modules
  • (2:45:55) Arguments from Command Line
  • (2:52:42) Lambda Functions
  • (2:54:51) Map, Filter, Reduce
  • (3:02:41) Recursion
  • (3:04:42) Decorators
  • (3:06:45) Docstrings
  • (3:09:54) Annotations
  • (3:11:30) Exceptions
  • (3:17:09) With
  • (3:18:26) Installing Packages with pip
  • (3:21:39) List Compression
  • (3:23:09) Polymorphism
  • (3:24:23) Operator Overloading
    Blackjack Card Game Project

  • (3:26:58) Blackjack – Beginning
  • (3:50:13) Blackjack – Deck Class
  • (3:58:45) Blackjack – Card Class
  • (4:03:25) Blackjack – Hand Class
  • (4:21:13) Blackjack – Game Class
  • (4:37:04) Blackjack – Testing
  • (4:39:36) conclusion
[READ MORE]
”

[#Script #Coding] What is JavaScript? Click to watch more…

Posted on by Eric Brooks

What is JavaScript? Click to watch more…

By codeSTACKr
Published: Aug 19, 2022

“
codeSTACKr Become A VS Code SuperHero Today: https://vsCodeHero.com

Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

JavaScript explained quickly!

”

[#Script #Coding] Great Design With User Research – Design a Mobile App Using Figma

Posted on by Eric Brooks

Great Design With User Research – Design a Mobile App Using Figma

By freeCodeCamp.org
Published: Feb 02, 2022

“
freeCodeCamp.org Improve your UI / UX design skills by designing a real-world app using Figma. You will learn how to use the d.school design thinking process and self-process management to come up with design solutions.

Course created by Dev and Design. Check out his channel: https://www.youtube.com/channel…

    Course Contents

  • (0:00:00) Introduction
  • (0:04:53) Outline Breakdown
  • (0:07:01) Workflow Breakdown In FigJam
  • (0:22:50) User Empathy ( Empathize )
  • (0:23:21) Creating User Experience Survey With Google Forms
  • (0:38:21) Creating User Personas
  • (0:43:08) Creating Problem Statement
  • (0:44:31) Ideate
  • (0:47:49) Prototype Analysis
  • (0:48:16) User Goals & User Tasks
  • (0:50:11) Information Architecture
  • (0:55:38) Low Fidelity Prototyping
  • (1:19:59) High Fidelity Prototyping
  • (1:20:11) Creating Style Library
  • (1:37:21) Creating Component Library
  • (3:32:11) Prototype Presentation & Assignments

”

[#Script #Coding] Build an Instagram Clone with React Native, Firebase Firestore, Redux, Expo – Full Course

Posted on by Eric Brooks

Build an Instagram Clone with React Native, Firebase Firestore, Redux, Expo – Full Course

By freeCodeCamp.org
Published: Dec 22, 2020

“
freeCodeCamp.org Learn how to build an Instagram clone using React Native, Firebase Firestore, Firebase storage, Redux, and Expo. The app includes an authentication system, database, storage, and more.

Code: https://github.com/SimCoderYoutube/InstagramClone

Course from SimCoder. Check out their channel: https://www.youtube.com/channel/UCQ5xY26cw5Noh6poIE-VBog

    Course Contents

  • (0:00:00) Introduction
  • (0:02:28) Setting up React Native Expo
  • (0:16:34) Auth System With Firebase and React Native
  • (0:56:33) Save Data Using Firebase And Redux
  • (1:29:05) Handling Navigation on React Native
  • (1:49:43) Using Camera And Image Gallery With React Native
  • (2:12:57) Saving An Image Post Using Firebase Firestore and Firebase storage
  • (2:42:38) Displaying User Profile With Firebase Firestore
  • (3:11:57) Search User By Similar Name with Firebase Firestore
  • (3:36:00) Follow System Using Firestore And React Native
  • (3:55:42) Post Feed System With Firebase and React Native
  • (4:27:48) Logout Firebase Auth And Redux React Native
  • (4:35:24) Adding User Comments To Posts W/ Firebase Firestore
  • (5:14:00) Like System Using Firestore
  • (5:47:25) Redesign Release

”

[#Script #Coding] Instant Preview for Image Upload Applications JavaScript Tutorial

Posted on by Eric Brooks

Instant Preview for Image Upload Applications JavaScript Tutorial

By Adam Khoury
Published: Jan 20, 2022

“
Adam Khoury In this video Adam demonstrates how to provide instant image preview that you can give your users in any upload applications. There may be an occasion where you want to allow the user to see or manipulate the object before it is uploaded to your server.

”

Proudly powered by WordPress
Creative Commons License
EricBrooks.Com® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.

Connect