Skip to content

🧑🏽‍🎓 Life's Student

all i know is that i know nothing at all

📖 How to become an Expert
1. Remember (Memorize)
2. Understand (Why & Explain to Comprehend)
3. Apply (Do the Thing)
4. Analyze (What each thing is doing via breakdown & why it is necessary) **Critical Thinking**
5. Evaluate (Critiquing, Methodology-Flow, Why they did it this way versus alternative)
6. Create (Use the skills above to Create)

Improvements via Reps & Iteration

Seek the Truth

Coding, Programming, Software Development, Algorithms, Database & Data Structures, Networks & Systems

Frontend

what is frontend?

the frontend refers to the user interface and user experience (UI/UX) aspects of a website, web application, or mobile application. It is the part of the application that users interact with directly, using a web browser, mobile device, or desktop application.

what is frontend responsible for?
  1. User Interface (UI): The visual elements that users interact with, such as buttons, forms, menus, and other graphical elements.
  2. User Experience (UX): The way users interact with the application, including the layout, navigation, and overall usability.
  3. Client-side logic: The code that runs on the user's web browser or device, responding to user interactions and updating the UI accordingly.
  4. Data visualization: The presentation of data in a meaningful and visually appealing way, such as charts, graphs, and tables.
what are some programming languages, frameworks & tools to build frontend?
  1. HTML (Hypertext Markup Language): For structuring and organizing content on the web.
  2. CSS (Cascading Style Sheets): For styling and layout.
  3. JavaScript (JS): For adding interactivity and dynamic effects to the UI.
  4. Frontend frameworks: Such as React, Angular, and Vue.js, which provide pre-built components and tools to speed up development.
  5. Libraries and tools: Like jQuery, Lodash, Gulp and Webpack, which provide additional functionality, automation (of repetitive tasks), optimization (images, minifying code) and compiling preprocessor languages (eg., Sass to CSS)
  6. Package Managers (ie., npm, Yarn): These tools help manage project dependencies and libraries, making it easier to install, update, and configure them.
what are some software & technologies to develop/build frontend?
  1. Version Control Systems (eg., Git, GitHub): These systems help manage changes to the codebase, allowing developers to collaborate and maintain a history of their work.
  2. Code Editors and IDEs (eg., Visual Studio Code, Sublime Text): These software/technologies provide an environment for writing and editing code, with features like syntax highlighting, code completion, and debugging support.
why is it important?

The frontend is often contrasted with the backend, which refers to the server-side logic, database integration, and API connectivity that powers the application. While the frontend focuses on user interaction and UI, the backend handles data storage, processing, retrieval & functionalities of it

The frontend is a critical aspect of software development, web design, and technology, as it directly impacts the user's experience and interaction with an application.

what learning frontend will do for me?

Frontend development is a dynamic field that requires the skills, the understanding and knowledge of various programming languages, frameworks, tools, and best practices to create effective, responsive-interactive and engaging web experiences. It tests your creativity, the understanding & psychology of the user (their full experience-holistically, top-down/bottom-up), your thinking/approach to mitigate/solving problems, how you communicate/write and articulate/explain complex issues/ideas

  1. Learn:
    • You will understand the connectivity of its framework, the layers & flows;
    • The integrations and functionality of responsive-interactive to create/maximize engaging experiences;
    • Capable of thinking of various approaches/methodologies to solve complex problems/issues through simplifying and breaking it out step-by-step and into smaller-manageable-tasks;
    • To be resourceful through research, reading, understanding, practicing, experiencing, doing - no problem is too big and there is a way (majority of the time) through effort, passion and the will
  2. Skills:
    • Creativity: designing/building/implementing/integrating-connecting-frameworks (layers-flows, activity, optimizations) & processes, best experiences for & to maximize users & their engagement, scalable (how-to)
    • Analytical & Problem-Solving: debugging, testing, improve-optimize quality & efficiencies of processes/code, forsee potential problems/issues (the why), how to mitigate (how) and its compromises (from all perspectives-users, development, implementation, integration, hosting/deployment, data, etc.)
    • Communication & Writing: clearly write and/or articulate/verbalize/explain complex ideas-its technicalities, concepts, problems-that-may-arise (how), mitigation (your approach and why)
    • Prioritization: understanding the value-level of effort to decide what focus/prioritize and iterate correctly (features, bugs, add-ons, etc.)
    • Fearlessness, Confidence & Grit: with your strong grasp of foundational knowledge and understanding, you have the confidence, fearless & grit to solve any & all problems - no problem is too big and there is a way (if you have the will)
    • Teach: through reps and iteration, you can pass on your experience & knowledge via explaining-simplifying and breaking down the complexities of it intricately, layer-by-layer

Backend

what is backend?

the backend refers to the server-side of an application, responsible for managing data, performing logic, and providing services to the frontend (client-side). It's the unseen, behind-the-scenes infrastructure & the magic juice that powers the user interface, handling tasks/requests and is the foundation of a web application, providing the necessary functionalities for frontend

what is backend responsible for?
  1. Databases (DB): designing, implementing, querying managing, storing, & retrieving data
  2. Application Programming Interfaces (APIs): connecting with third-party services and APIs to retrieve information and/or utilize
  3. Service-side logic: executing business logic, calculations, and algorithms
  4. Architecture:
  5. Authentication & Authorization: handling user authentication and authorization, roles, permissions, security, accessibility to features
  6. User requests: processing requests from the frontend (user clicks on login and inputs information & validates) and returning responses.
  7. Functionality, Testing & Debugging: writing tests, debugging, & logging to ensure its utility is working & the reliability & stability
  8. Server: the computer or virtual machine hosting & deploying the application, performance optimization, handling traffic, scaling high loads, stability
  9. Testing & Debugging: writing tests, debugging, & logging to ensure reliability & stability
what are some programming languages, frameworks, tools/software & technologies to develop & build the backend?

Frameworks: 1. Node.js (Express, Hono, Nextjs) 2. Django (Python) 3. Flask (Python) 4. Spring Boot (Java) 5. Ruby on Rails (Ruby) 6. Laravel (PHP) Database Management Systems: 1. Relational: Supabase (PostgreSQL), MySQL, PostgreSQL, Microsoft SQL Server 2. NoSQL: MongoDB, Cassandra, Redis 3. Supabase: PostgreSQL, Database, Auth 4. Drizzle ORM (JS & TS): PostgreSQL, MySQL, SQLite, GraphQL 5. Prisma ORM 6. Turso (SQLite) 7. Neon (Serverless Postgres) Hosting & Deployment: 1. Yolo 2. Yolo2 Testing, Monitoring & Debugging: 1. Jest (JavaScript): A popular testing framework for building robust applications. 2. Pytest (Python): A popular testing framework for building robust applications. 3. Postman: A tool for testing and debugging APIs. Hosting & Deployment:

why is it important?
what learning backend will do for me?

Database

🤖 AI/ML, LLM & Agents

📚 Learning: Web Design

Framer: Framer, is a React-based design tool that focuses on creating interactive prototypes and animations. It allows designers to design, code, and collaborate on projects seamlessly. Framer’s strength lies in its ability to bridge the gap between design and development, enabling designers to create high-fidelity prototypes that can be easily handed off to developers.

Webflow: Webflow is a no-code platform that allows users to design, build, and launch responsive websites without the need for extensive coding knowledge. With its intuitive visual editor and a wide range of customization options, Webflow empowers users to create professional-looking websites with ease. The platform also offers e-commerce functionality, CMS capabilities, and a robust hosting service, making it a one-stop-shop for web development.

🧑🏾‍💻 Web Development: HTML, JS, CSS, React, Typescript, Nextjs, ++