Learning Curve

• Learning Curve
• Articles
• Books
• Products
• Structure of an web page (big architecture vs. lines of code)
• 𝗪𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 𝘁𝘆𝗽𝗲 𝗮 𝗨𝗥𝗟 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗯𝗿𝗼𝘄𝘀𝗲𝗿?
• Bible →
• Bases HTML (fond) + CSS (forme)
• HTML
• JS or CSS = Animations
• 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
• Framework (librairie) → Node.JS + React (DOM (arbre)) → speed
• Team
• Hardware vs. Software
• User → Application → Infra → Cloud
• Git = source de truth = PROTOCOL
• Merge conflict = when team working on same LINE
• Qovery vs. GitLab CI
• Kubernetes
• Docker
• Histoire
• Starting with ‣ + React (links you think are relevant / experts I can follow on twitter / nice projects etc...)
• Provider Pattern
• API
• AzurePartner
• Flexbox vs. Grid = when to use each?
• Open-sourced repo
• Data structure
• How automatic QA front works?
• Infrastructure basic principles: Smallest infra and biggest infra
• restAPI
• Web 3.0
• Payment
• A quick introduction to clean architecture
• System administrator
• refactoring
• Terraformation
• SSH vs. SSL
• Code-generating systems
• Resources
• Assignments
• #javascript
• #nodejs
• #React
• #Selenium + #Python
• #lambda

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

Products

🕸 #browserless

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

👅 Kodezi - #Grammarly for #programmers

Tools for better thinking

Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

untools.co

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

The Unlikely Journey of GraphQL

GraphQL will become the operational database counterpart, built for cloud native environments operating with microservices, where the need for simple, quick answers requires complexity that is buried under the hood.

thenewstack.io

☁️ 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 →

Document and website structure - Learn web development | MDN

In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").

developer.mozilla.org

Bases HTML (fond) + CSS (forme)

Web Development Project - How to Make a Landing Page with HTML, CSS, and JavaScript

Having a good landing page for your website is important. It can help drive customers to your site where they'll find your products and services and hopefully take action. In this text-based tutorial, I'm going to take you through how to make a landing page for a boxing TV

www.freecodecamp.org

HTML

Header (metadata)

Body → Div partout OU balises → SEO

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

JS or CSS = Animations

Create a Netflix Clone with Django and Tailwind CSS

Have you heard of "Netflix and Chill"? Instead, try "Netflix and Code". Code your own Netflix clone! We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create a Netflix clone using Django and Tailwind CSS. Django is a Python-based free and open-source

www.freecodecamp.org

Defensive CSS - Ahmad Shadeed

Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or a weird behavior.

ishadeed.com

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

HTML, CSS, JS

Markdown language = HTML

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

JS = conditions, boucles, types

Team

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

Hardware vs. Software

Hardware = Physics

Software = Programmed (language)

User → Application → Infra → Cloud

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

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

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)

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

Merge conflict = when team working on same LINE

Qovery vs. GitLab CI

Mini-brainboard copy MR = speed

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

= Kubernetes Managed

Kubernetes

= Workflow de docker

Docker

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

Histoire

Efficace materials → support accelerate deployment

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

Get Started with Next.js - The React Library Your Project Needs

I've composed this guide to give you a practical overview of perhaps the most important React library you will use to build 90% of your projects: Next.js. The goal of this tutorial is to get you started using Next.js as easily as possible. This is not a complete

www.freecodecamp.org

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

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

Younes AGABI 🚀✨ on LinkedIn: Provider Pattern in React

𝙒𝙝𝙖𝙩 𝙞𝙨 𝙥𝙧𝙤𝙫𝙞𝙙𝙚𝙧 𝙥𝙖𝙩𝙩𝙚𝙧𝙣 𝙞𝙣 𝙍𝙚𝙖𝙘𝙩 ? 🤔 React's provider pattern is a powerful concept 🚀✨. React uses provider pattern in...

lk.linkedin.com

API

AzurePartner

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

The Rise Of Data Culture

Companies use data. This resounding truism is of course not news in and of itself, this has always been the case; even before the dawn of computers, we know that bookkeepers used ledgers and files to record business transactions.

www.forbes.com

How automatic QA front works?

Let's talk about Front-End QA

When you're an experienced front-end developer, it takes just one look and few mouse clicks to judge whether or not the site in your browser is correctly implemented. By working on these problems day after day, you'll write dozens of lines of HTML/CSS, checking the outcome each time.

www.monterail.com

QA Quality Assurance

Test automatique of #frontend of product - Webdriver.io

Scrapping intense = (cucumber EN <> Code)

Infrastructure basic principles: Smallest infra and biggest infra

Website

1 server

1 install #serverweb

1 #database

Netlify → Git → Web Prod

vs. Qovery

→ Website

#MediaQuery → CSS → Mobile Friendly

restAPI

#angular#MangoDB#Rust

Web 3.0

Payment

A quick introduction to clean architecture

Cloud‑Native Application Development at Domino's | VMware RADIUS

Five years ago, a group of Google employees turned an internal technology into an open source project. Their goal was to help businesses adopt containers, which they believed was the future of computing. Over a relatively short timeframe, Kubernetes grew from version 1.0 to a major enterprise technology.

news.vmware.com

System administrator

A 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

human-readable data-serialization language Extensible Markup Language

refactoring

Terraformation

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

How Terraform Works: A Visual Intro

Understand Terraform through illustrations As a way to refresh my terraform knowledge, I keep a stash of some diagrams. In any topic, I always find the exercise of creating illustrations very helpful for learning. They also tend to be helpful when I have to explain some terraform concepts to my peers.

betterprogramming.pub

SSH vs. SSL

Code-generating systems

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

Hugging Face and ServiceNow launch BigCode, a project to open source code-generating AI systems

Hugging Face is teaming up with ServiceNow to launch BigCode, an effort to develop and release a code-generating AI system akin to OpenAI's Codex.

techcrunch.com

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