🧑🏼‍💻

Coding Learning Curve

Last edited time
Oct 21, 2024 4:53 PM
/type
Knowledge
/category
Edtech
/content-type
/pitch

A comprehensive guide to coding skills and resources.

/read-time

20 min

/tldr

- The document outlines a learning path for various programming languages and technologies, including JavaScript, Node.js, React, and Python with Selenium. - It emphasizes the importance of understanding the learning curve and provides resources for each language, along with project ideas. - Additional sections include articles, books, and products related to coding and development practices.

/target-persona

1. Aspiring Web Developer 2. Data Science Enthusiast 3. Software Engineer transitioning to Frontend Development

/trendy-?

Learning Curve

Language
Goal
Project
Learning Curve
javascript
when it runs in a browser
improve your webflow understanding / website skill
nodejs
when it runs on your laptop
React
language above javascript, you must know javacript to do react
Pour l'explication complete, le markdown de docusaurus est en fait du mdx, tu markdown avancé qui permet de faire du code dedans: https://docusaurus.io/docs/next/markdown-features/react
Selenium + Python
usually/could be piloted/managed by javascript code
lambda
any event based system is a good candidates for Lambda
when you have APIs and just want to connect/enrich/etc One thing I want to do with lambda is a slack bot to put in Notion all links listed on #watchtower
whats a variable, if/else, for loops, to at least understand code you may find on the Internet. Then the goal is to use notion sdk and slack sdk on your laptop, then when it works you deploy it (lambda or whatever)  https://www.lambdatest.com/pricing

Articles

Awesome #OSS #Monetization

Solving the Traveling Salesman Problem using #Self-Organizing #Maps

The Devastating Decline of a Brilliant Young Coder

The Total Economic Impact™ Of Xray

System Design Primer

Go #Developer Survey 2021 Results

The State of the #Octoverse 2021

How #opensource drives our #strategy

The Devastating Decline of a Brilliant Young Coder

You #Reap What You Code

UBC

Learning Frontend is easy

Books

image

Products

🕸 #browserless

📚 #Gitpod vs. replit - in-browser #IDE to #code

👅 Kodezi - #Grammarly for #programmers

codepen.io - #build, #test, #automate and #discover #frontend #code

#Java tpoint / w3schools

https://axiom.ai/ - Save time - use browser bots to automate website actions and repetitive tasks on any website or web app

https://www.tooljet.com/ - Use our highly customizable open source platform and deliver mission critical internal tools unbelievably fast

https://www.gitbook.com/ - GitBook helps you publish beautiful docs for your users and centralize your teams' knowledge for advanced collaboration.

https://vuepress.vuejs.org/ - Vue-powered Static Site Generator

https://zeroheight.com/ - Create a central hub for designers, engineers, product and marketing teams. Connect everyone working with your design system.

https://www.nuclino.com/ - A modern, simple, and blazingly fast way to collaborate – bring knowledge, docs, and projects together in one place.

🦸 Huginn - system for building agents

😈 Severus Scrape - powerful #webdevelopment #scrapers

💻 Elementary - alternative réfléchie, performante et éthique à #Windows et #macOS

🚀 Gatsby by JS - #CMS faster #frontend

https://howitzer.co/ - Reddit Marketing Made Easy

https://weld.app/ - Weld is an end-to-end data operations platform and a team of expert data analysts. We help companies solve their data problems to make better decisions, faster.

r/place Reddit

https://www.bigcode-project.org/ - BigCode is an open scientific collaboration working on the responsible development of large language models for code

https://www.popplet.com/ - visualize ideas

https://www.flycode.com/ - FlyCode helps product teams work like software engineers - to ship better products, faster with no-code

https://huggingface.co/ - Build, train and deploy state of the art models powered by the reference open source in machine learning.

🖼 LabVIEW - a #graphical #programming environment

☁️ M30 - #Opensource #cloud

🔎 Top2Vec - #algorithm for topic modeling and semantic #search (case)

💡 Radicalbit - Enable #continuousintelligence #visually

📊 Malloy (GitHub) - #Experimental language for describing #data relationships and transformations

📊 Plotly (GitHub) - #Visualize large time-series #data

🚀Nightwatch.js - End-to-end testing, the easy way.

📊 Makie - #data #visualization #ecosystem for the Julia

🔎 Sourcegraph - #Universal #Code #Search

🕸 CodeSandBox - #collaborative sandboxes for rapid #webdevelopment

🖼 CodeSee - #visualize #code

🤖 #Google Workflows

Structure of an web page (big architecture vs. lines of code)

𝗪𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝘁𝘆𝗽𝗲 𝗮 𝗨𝗥𝗟 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗯𝗿𝗼𝘄𝘀𝗲𝗿?

Bible →

Bases HTML (fond) + CSS (forme)

image

HTML

Header (metadata)

Body → Div partout OU balises → SEO

  • Block = div, section, nav, = rectangle
  • In-line = img, span, H1, p
image
image
image
image

JS or CSS = Animations

image

Explain the difference between languages - I am bit lost with all these languages to learn and which language comes above which, etc...

Programming language = JS → browser, OS

image

HTML, CSS, JS

Markdown language = HTML

image
image

Framework (librairie) → Node.JS + React (DOM (arbre)) → speed

JS = conditions, boucles, types

image

Team

  • Front-end = user facing
  • Back-end = API
  • Back-office = Admin to change → ForestAdmin
image

Hardware vs. Software

Hardware = Physics

Software = Programmed (language)

image

User → Application → Infra → Cloud

  • Application: SiteWeb SaaS
  • Infra: Supply Chain software of Entreprise

https://www.codesee.io/ → application

image
image
image
image
image
image

Git = source de truth = PROTOCOL

VCS Version Control System repository → https://en.wikipedia.org/wiki/Version_control

TYPES

DEFINITION

Code source stock → GitHub+Microsoft (SaaS) or GitLab (Self-hosted)

image
image
image
image

Git → production (CI/CD) = automatisations (to create workflows)

image
image
image
image

Merge conflict = when team working on same LINE

image

Qovery vs. GitLab CI

Mini-brainboard copy MR = speed

Developer want to write code and push it as fast as possible

= Kubernetes Managed

image
image

Kubernetes

= Workflow de docker

image

Docker

= container (security + packaging) = environment pour travailler sans intervenir sur le code source = mini-serveur = fragmenter usage

image

Histoire

Big room of servers → servers → VM → Container (docker) (partage ressources) → Automations (Kubernetes)

GitOps

Efficace materials → support accelerate deployment

image

Starting with + React (links you think are relevant / experts I can follow on twitter / nice projects etc...)

HTML + CSS = Site (statique)

Javascript = dynamic

→ Site

  • Scripting - scrapping = Python + JS (Node.JS = browser / back-end = API, script)
  • CSS query / xpath query → find the component you want to scrape/interact with
  • React = webApp or website

PHP / GoLang = back-end

Provider Pattern

image

React's provider pattern is a powerful concept 🚀✨. React uses provider pattern in Context API to share data across the tree descendant nodes.

API

image
image

AzurePartner

image

Flexbox vs. Grid = when to use each?

#Mobile = flex = #elements after each other

vs. Grid = #structured

#MaterialUI (Design from Google)

React (Language #framework by Facebook)

or done yourself

Open-sourced repo

= Access to code source #publicly

→ Call people to help

→ Maintain

  • #Linux (#kernel = #hardware <> #Operatedsystem) → Android
  • License = What am I allowed to do? Limit? Conditions?
  • eg. #Terraform, #Ansible by RedHat, #Ubuntu by Canonical, #OpenStack (OVH)

→ License

Data structure

Structure of data earlier on

image
image
image

How automatic QA front works?

QA Quality Assurance

Test automatique of #frontend of product - Webdriver.io

Scrapping intense = (cucumber EN <> Code)

Infrastructure basic principles: Smallest infra and biggest infra

image

Website

1 server

1 install #serverweb

1 #database

Netlify → Git → Web Prod

vs. Qovery

→ Website

#MediaQuery → CSS → Mobile Friendly

restAPI

image

#angular#MangoDB#Rust

Web 3.0

image
image

Payment

image

A quick introduction to clean architecture

image
image

System administrator

system administrator, or sysadmin, or admin is a person who is responsible for the upkeep, configuration, and reliable operation of computer systems, especially multi-user computers, such as servers.

#Yaml

image

human-readable data-serialization language Extensible Markup Language

refactoring

image

Terraformation

#groovy A #multi-faceted-language for the #Java platform

SSH vs. SSL

image
image

Code-generating systems

like DeepMind’s AlphaCode, Amazon’s CodeWhisperer and OpenAI’s Codex

image

Resources

Assignments

#javascript

when it runs in a browser

improve your #webflow understanding / website skill

https://www. #freecodecamp .org/

https://www.programiz.com/javascript

#nodejs

when it runs on your laptop

#Scrapping #Meetup with Node.js

https://medium.com/@christoferchan/scraping-meetup-com-with-node-js-f9443025a5e9

https://nodejs.dev/learn

#React

#language above javascript, you must know javacript to do react

Pour l'explication complete, le #markdown de #docusaurus est en fait du mdx, tu markdown avancé qui permet de faire du code dedans:

https://docusaurus.io/docs/next/markdown-features/react

https://www. #codecademy .com/learn/react-101

#Selenium + #Python

usually/could be piloted/managed by javascript code

Use Selenium & Python to scrape #LinkedInprofiles

https://www.linkedin.com/pulse/how-easy-scraping-data-from-linkedin-profiles-david-craven/

#lambda

any #eventbasedsystem is a good candidate for Lambda

when you have #APIs and just want to #connect/enrich/etc

One thing I want to do with lambda is a slack bot to put in Notion all links listed on #watchtower

whats a variable, if/else, for #loops, to at least understand code you may find on the Internet. Then the goal is to use #notion #sdk and slack sdk on your laptop, then when it works you deploy it (lambda or whatever)

https://www.lambdatest.com/pricing

#Frontend Developer Roadmap: Learn to become a modern frontend developer

image