Programming_Resources

An collection of all the amazing programming learning materials and resources online. Aim to create an one-stop station for fantastic onlien resources for coding and fun.

Overview

• Programming Resources
  • Markdown
  • Python
  • Web Development
    • Helpful Readings
    • CSS Animation Guide
    • Set up your web development environment
    • Set Up Your Supabase Backend
    • Deploying Your Website

Markdown

This Document is written in Markdown and it's a super important language and tool to use in programming, so I want to start with Markdown.

Markdown is a plain text formatting syntax aimed at making writing for the internet easier. The philosophy behind Markdown is that plain text documents should be readable without tags mussing everything up, but there should still be ways to add text modifiers like lists, bold, italics, etc. It is an alternative to WYSIWYG (what you see is what you get) editors, which use rich text that later gets converted to proper HTML.

Here are some resources for more info on Markdown, including what is it, why important and how to use it:

• 🌎 What is Markdown, and why should you use it?
• 🌎 Basic Syntax
• Markdown Cheatsheet - 🌟 54.1K - 🍴 10.4K

Python

As the saying goes, the master teaches the trade, but apprenticers skill is self-made.With Python's popularity, more and more people want to learn Python, and want to learn it systematically. Here we will share the experience of several free learning materials on Github for students to learn.

• Learn-python3 - 🌟 4.5K - 🍴 1.3K
  Resources for learning and teaching beginner to intermediate-level Python 3.

  • The contents of this repo are very well structured and in Jupyter Notebooks.
  • The beginner folder inside the notebooks folder contains 19 introductory topics such as strings, conditionals, classes, exceptions, and so, to get you started. We recommend taking a look at the repo for the full list.
  • The rest of the advanced topics are provided in the intermediate folder, such as writing idiomatic Python, a few other general topics, and some best practices to help you avoid writing disastrous and inefficient code.
• Learn-python - 🌟 11.7K - 🍴 1.9K
  Similar to learn-python3, learn-python repository also serves as a handy collection of Python resources for beginners and intermediate learners.

  • The repository uses a collection of Python scripts to cover individual topics in Python, such as operators, data types, classes, modules, and much more, with precise explanations and accompanying examples.
  • There’s also a small section explaining how to use this repository to help you make the most out of this repo.
  • Oleksii calls the repo a playground and a cheat sheet as during the learning phase, learners will often return to the repo to experiment with the code examples for a closer hands-on feel. Once you feel comfortable writing your own Python code, you can use the mentioned linting tools, like pylint, to clean the code while the necessary testing is handled by pytest.
• Awesome-python - 🌟 113K - 🍴 20.5K
  A thoughtful yet enormous collection of Python frameworks, libraries, tools, and other handy resources.

  • The repo has listed over 90 different categories for individual projects or topics including admin panels, data validations, computer vision, algorithms and design patterns, ChatOps tools, and so much more.
  • Provides links to useful books, newsletters, podcasts, and web series dedicated to making Python easier for everyone.
• Project-Based Learning - 🌟 61.3K - 🍴 9.3K
  Packed with tutorials for various programming languages with a specific focus on being project-oriented.

  • A huge list of over 20 programming languages, we’ll be focussing only on Python for this write-up but feel free to check the projects from other programming languages.
  • Includes tons of tutorials for building a host of projects from web scrapers, bots, and web applications to building Data Science, Machine Learning, and Deep Learning solutions.
• Python-programming-exercises - 🌟 18.3K - 🍴 6.1K
  Has more than 100 Python programming challenges that cater to new developers, intermediate developers, as well as veteran professionals.

  • Jeffrey also has a website that teaches you foundational Python in the form of comics, which you can also use, but unless you know Chinese, you would be hard-pressed to understand it.
  • It comes with the required hints and the solution, but try not to scroll too far down, or else you’ll stumble upon the answer.
• full-speed-python - 🌟 3.5K - 🍴 541
  Essentially a book that covers the fundamentals of Python along with more advanced topics with a significant emphasis on practical learning.

  • After explaining each topic, João tries to solidify the understanding of the concepts by presenting his readers with sufficient exercises. These exercises play a crucial role in bringing Python learners up to speed with Python’s syntax in a short period.
  • Once you start following this approach, you’ll be able to cover the entirety of this Python book within a month or two, tops. The repo contains the files you will need to build the book for yourself, or you can simply download the book from his repo, the download links are available there.
• Coding-problems - 🌟 2.3K - 🍴 469
  Contains an updated collection of solutions to numerous coding and algorithmic problems that new programmers face while learning data structures and algorithms.

  • Meto has covered the solutions for problems from various topics and has categorized them into arrays, linked lists, dynamic programming, math, and a few more categories.
  • The author has structured the problems perfectly to make it easier for individuals to analyze the problem and its solution. But of course, that’s not the only thing you’ll find in his repo. You’ll also find some valuable resources like online courses(MOOCs), books, training websites, YouTube channels, and a bunch of other resources that cover Python and solutions to a host of problems developers encounter while working with Python.
• The Algorithms - 🌟 128K - 🍴 33.9K
  The Algorithms/Python repo is one of the most starred and forked Python GitHub repo on and there’s a good reason behind its popularity.

  • Their repo contains algorithms and their implementation for over 35 categories of topics in Python, such as data structures, computer vision, linear algebra, neural networks, sorts, strings, to name a few. Do keep in mind that understanding these algorithms requires at least a beginner-level knowledge of Python, making this repo more suited to intermediate and advanced developers.
  • Not only Python, but their repo is also home to a similarly vast collection of algorithms for Java, C, C++, JavaScript, Ruby, and a few other programming languages. Regardless of your experience with Python, we recommend starring this repo to have all those algorithms readily available for when you need them. Being open-sourced also gives you the freedom to contribute to the repo in expanding its collection if you wish to.
• python_reference - 🌟 3.1K - 🍴 847
  A collection of various Python topics for intermediate developers.

  • If you have already mastered the basics of Python, then this repo might be suitable for you to help you understand a host of advanced topics. The repo provides Jupyter Notebooks for various topics, such as useful regular expressions, Cython with and without IPython, and many more like it, while giving you the flexibility to edit and run the code as you wish.
• Practical Python - 🌟 7.7K - 🍴 4.2K
  The material you see here is the heart of an instructor-led Python training course used for corporate training and professional development. It has been in continual development since 2007 and battle tested in real-world classrooms.This includes the completion of approximately 130 hands-on coding exercises.

  • The goal of this course is to cover foundational aspects of Python programming with an emphasis on script writing, data manipulation, and program organization. By the end of this course, students should be able to start writing useful Python programs on their own or be able to understand and modify Python code written by their coworkers.
• Useful Python Snippets - 🌟 7K - 🍴 1K
  Pysheeet was created with intention of collecting python code snippets for reducing coding hours and making life easier and faster.

Web_Development

Helpful_Readings

• 📖[HTML] Web accessibility with HTML
• 📖[HTML] Including metadata in the head tag
• 📖[HTML] Semantic tag for structuring a page by function
• 📖[HTML] Embedding images into HTML
• 📖[HTML] Using SVGs
• 📖[HTML] Overview of Developer Tools
• 📖[CSS] Overview of CSS Concepts
• 📖[CSS] The Box Model
• 📖[CSS] Guide to Flexbox
• 📖[CSS] Creating a Complex Layout with CSS Grid
• 📖[CSS] CSS Common Layout Cookbook
• 📖[REACT] Hello World
• 📖[REACT] Intro to JSX
• 📖[REACT] Rendering Elements
• 📖[REACT] Components and Props
• 📖[REACT] State and Lifecycle
• 📖[REACT] Introducing Hooks
• 📖[REACT] useState Hook
• 📖[REACT] Handling Events
• 📖[REACT] Conditional Rendering
• 📖[REACT] Lists and Keys
• 📖[REACT] useEffect Hook
• 📖[BACKEND] Row Level Security
• 📖[BACKEND] Supabase + Next.js Demo Tutorial
• 📖[BACKEND] Data Fetching in NextJS
• 📖[BACKEND] Async/Await Syntax

CSS_Animation_Guide

CSS animations are a relatively simple way to add polish and delight to your web apps. Animation is becoming increasingly common as a way to signify that elements are interactive, and they can also be used to create games or interactive experiences. Through this guide we'll learn some of the tools we can use to add animations to our site. While following along with the material, I encourage you to tinker with real code in the animation sandbox.

→ Sandbox Code: [https://codesandbox.io/s/suspicious-matan-342yy?file=/index.html]

Hover States

It's common to add an animation when a user hovers over an interactive element like a button or link. You can do this by using the :hover pseudo selector.

	.box {
	  color: blue;
	}

	.box:hover {
	  /* Change the box color when mouse hovers over element */
	  color: red;
	}

Hover Flicker

If you're animating any transform properties (as we'll do below) you can sometimes see what's called a hover "death flicker" because the element transforms out from under the mouse area, stopping the hover animation. You can fix this by wrapping the element you want to transform in a containing element and using that containing element to detect hover, while still applying the styles to the child element.

.wrapper:hover .box {
  /* 
			Transform box only when wrapper is hovered,
			so hover area won't rotate out from under the mouse 
  */
  transform: rotate(20deg);
}

/* HTML for this approach */
<div class="wrapper">
	<div class="box"></div>
</div>

CSS Transforms

Allow you to reposition elements without triggering a re-render. Values are relative to the elements original expected position and do not affect the layout or other elements. Most commonly used values are translate(xValue, yValue) scale() and rotate()

.box { 
  transform: translate(10px) rotate(20deg) scale(1.5);
}

Transition

Changing something on hover is great, but it's not really animated if it's instantaneous. We want our property to gradually change into the desired new value, like things do in nature, not just teleport there. CSS handles this automatically with the transition property.

*A note about performance: Transition works best with properties like transform and opacity and these values should be used whenever possible. Other properties that affect layout like width, padding, etc will cause multiple re-renders of the element and could result in a laggy performance.

It requires two values: the property (or properties) to transition, and the duration of the transition.

The transition property added on the hover state controls the beginning transition, or the transition from the default value to the hover value. The transition property on the normal element controls the exit transition, or the transition from the hover state back to the default.

Many times you'll want these two transitions to be different when implementing action driven animation. This is a great blog post to learn more about motion design.

.box {
  /* hover -> default */
  transition: transform 400ms;
}

.wrapper:hover .box {
  /* default -> hover */
  transition: transform 200ms;
  transform: rotate(20deg);
}

Transition Timing Functions

The default transition timing function is ease . This controls the rate at which the change from one value to the next occurs. You can specify a different timing function in the short-hand for transition.

.wrapper:hover .box {
  transition: transform 200ms ease-in;
  transform: rotate(20deg);
}

Play around with the other timing functions linear ease-in ease-out and ease-in-out You can also define your own timing function with cubic-bezier() which is often used to create spring-like animations. This is outside of the scope of this class but you can learn more in this blog post about CSS Bezier Functions.

Custom Keyframe Animations

Sometimes you want a multi-step animation or for something to happen on the page load or with a dynamically added class name in React. For that you can define your own animations with CSS @keyframes.

This allows you to define a series of steps, give them a name, and then apply that animation wherever you want in your CSS. The following code creates a custom animation called fade-in that starts with an elements opacity at 0 and ends with an element's opacity at 1.

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Try adding as many steps at different % times and as many other animated properties as you want.

You can apply this animation to an element with the animation property. Again, it requires the name of our keyframe animation and a duration.

.box {
  animation: fade-in 100ms;
}

Animation Delay

You can specify the amount of time you want an animation to wait before running.

.box {
  animation: fade-in 100ms;
  /* Wait 2 seconds before triggering the animation */
  animation-delay: 2s; 
}

(You can do the same thing on transitions with transition-delay )

Animation Fill Modes

When there's a delay on an animation, most of the time you want the animation to be in it's starting state until the animation, then remain in its ending state. For some weird asf reason, this is not the default behavior. You can change this by using animation-fill-mode which has a lot of different values, but both is the most commonly used one that preserves the starting and ending visual state.

/* Slap this on whenever you use an animation */
animation-fill-mode: both;

Set_Up_Your_Web_Development_Environment

Software Pre-Requisites

1. Download and install Visual Studio Code (text editor like Atom, with terminal built in)
2. Create a GitHub Account
3. Create a Netlify Account (this is a free, automated CI/CD deploy and hosting platform - it’s phenomenal)
4. Create a CodeSandbox Account (It is a browser based Javascript/HTML/CSS development environment)
5. Download and Install Node.js (a javascript framework for backend code, comes with package manager npm CLI utility)

If creating a static site, just create a new directory and an HTML and CSS file.

mkdir PROJECT_NAME
touch index.html
touch styles.css

I'd recommend using Josh Comeau's HTML Starter Template and CSS Reset. Just copy and paste from the links into your newly made index.html and styles.css respectively.

If creating an application, set up your project with NextJS boilerplate.

// with styled-components
npx create-next-app --example with-styled-components NAME_OF_PROJECT

// with tailwindcss
npx create-next-app -e with-tailwindcss NAME_OF_PROJECT

// just plain ol' nextjs
npx create-next-app NAME_OF_PROJECT

Follow documentation on getting set up with a plain NextJS app and with an app with TailwindCSS.

Then change into your project directory and start your server

cd ./NAME_OF_PROJECT
npm run dev

Set_Up_Your_Supabase_Backend

To add a backend to our application, we will be using Supabase. This is an open source alternative to Google's firebase that provides a lot of backend features out of the box for free. In this application, we will be using their database and authentication.

Take a deep breath, this might seem overwhelming at first. It will all be ok! 🙏

Environment Variables

You'll need to store two environment variables for reference in your project, your supabase url and your anon key. Both of these are designed to be public, so it's ok that they'll appear in your client. Adding row level security to our table (more on this below) will prevent people from accessing restricted data.

1. Find the url & keys inside your Supabase Settings > API
2. Create a .env.local file in the root of your project directory and add these two variables.

NEXT_PUBLIC_SUPABASE_URL=https://SOME_URL.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=SOME_STRING_OF_CHARS

3. Go to your Netlify project > Deployment > Deploy Settings and add the above variables as deployment environment variables as well. Make sure the names match.

Now both your local and production environments should be able to access these variables and use them to make requests to Supabase.

Supabase Client Object

Our front-end needs to authenticate to Supabase to make any API calls. To do this, we will create a utility supabase client object that we can then import into any components that need to make API calls. We'll create a new directory called utils and put a new supabaseClient.js file in it to store our client object.

// utils/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

This takes the environment variables we set up earlier and injects them into our client code so that we can use the object subabase to make API requests to our backend. You can now import it into any component that needs it.

import { supabase } from '../utils/supabaseClient'

// fetch data function example
const fetchDataFromSupabase = async () => {
    let { data, error } = await supabase
        .from('TABLE_NAME')
        .select('COLUMN, ANOTHER_COLUMN')
    if (error) setError(error.message)
    else {
        setData(data)
        setLoading(false)
    }
  }

The above data fetching code could be run on the client, or in getStaticProps or getServerSideProps depending on the use case. Since we will have row level security (more on this below) and want to limit the data that people can see, we need to run it on the client so it only runs after a user is authenticated (again, more on this below).

Authentication

If you want to, you can build out your own UI and Authentication logic for your app. If you want to save a lot of time, you can use Supabase's pre-built solution and sacrifice some customization.

To use this, you'll need to install the SupabaseUI library

npm install @supabase/ui

and then import it into your _app.js and index.jsfiles.

import { Auth } from '@supabase/ui'

The Auth package not only gives you a pre-built UI and functions for logging in and out, but also a User Context Component that allows you to access the current user from anywhere in your application. We will learn more about Context later in this course, for now just wrap your code in _app.js like this.

// _app.js
import 'tailwindcss/tailwind.css'
import { supabase } from '../utils/supabaseClient'
import { Auth } from '@supabase/ui'

function MyApp({ Component, pageProps }) {
  return (
		{/* I'm the new part! I send a user object to all components */}
	  <Auth.UserContextProvider supabaseClient={supabase}>
	    <Component {...pageProps} />
	  </Auth.UserContextProvider>
  )
}

export default MyApp

Then, you can access the current user from another component like this:

// gets the user object from Context 
const { user } = Auth.useUser()

Database Setup

1. Go to the SQL Editor in your Supabase project and run the following query to create your database.

create table public.gratitudes (
  id uuid references auth.users not null,
  entry text,
  date_insert_ts timestamp default now(),

  primary key (id, date_insert_ts) -- each row unique to user and time inserted
);

2. Then for this application, we want to only allow users to query data that corresponds to their user id. There are a lot of different ways to implement this, but PostgresQL gives us a pretty simple way: row-level security roles. This allows us to write some SQL roles that will automatically filter out data that does not include the user's ID.

alter table public.gratitudes enable row level security;

create policy "Gratitudes are viewable by users who created them."
  on gratitudes for select
  using ( auth.uid() = id );

create policy "Users can insert their own gratitudes."
  on gratitudes for insert
  with check ( auth.uid() = id );

The actual functionality behind SQL policies is outside of the scope of this course, but you can read more in the Supabase documentation on row level security.

Deploying_Your_Website

We'll be deploying our sites on Netlify, a wonderful tool that offers free hosting, continuous integration and continuous deployment, and a whole host of other perks.

Since your apps are built with NextJS, Netlify will automatically detect this when you add a new project and should set up most of the integrations for you via the next-on-netlify essential build plug-in. You shouldn't need to do anything to get this set up with a new site.

You can read more about the detailed features of NextJS on Netlify in the official documentation.

However, you will need to set up ENV variables for all of your API keys if you're using Supabase or a third party API. Follow the instructions below.

1. Upload your entire root directory to GitHub. This includes everything created automatically when you ran create-next-app to start developing. It should've created a .gitignore file for you, so you don't need to change anything there. The node_modules and .next directories should be ignored and not uploaded.
2. Log in to your Netlify account and click the "New Site from Git" button. Find your repository and step through the connection process. This will attempt to create an initial deploy from your repository. Use the default settings created by Netlify after you select your repository, you should only change something if you've deliberately done something different.
3. Your first build will probably fail, because you haven't added your ENV variables to a production environment. Click on your added site and navigate to Site settings > Build & deploy > Enivronment Add any environment variables you use in your project, and make sure the names are consistent with what you reference in your code. (if you're not using any variables, you can skip this step)
4. If using Supabase Auth, go to your Supabase Console and navigate to Settings > Auth settings > General > Site URL and add whatever your URL through Netlify is. This will allow links emailed out to users to redirect to the appropriate domain name for your site.
5. Navigate to Deploys and click Trigger deploy > Deploy site to force a re-deploy, and you should be good to go! 🤞
6. Verify that your site is working correctly by clicking on the netlify link in your site details. If something goes wrong, it has probably happened to other people, so don't fret. Check the deploy log, search for your errors, and see how other people solved it. I'll add to the troubleshooting section below as other students run into errors, so check that first!
7. If you want to get ✨ fancy ✨, Netlify provides a bunch of additional useful features out of the box like automatic form submission collection, asset optimization, build plug-ins, and even things like split testing!

Troubleshooting

My site deploys, but I get a 404 error when trying to route to the home page.

• This typically happens because you don't have an `index.js` file in the `pages` directory of your app. (or if it is just a static site, no `index.html` page)
• If you do have an index.js , make sure something is rendered in all cases.
• If you're using the next/link package, make sure you have a lowercase "link" in your import statement.

My site deploys, but my login doesn't work or gives a 404 error.

• You probably did not complete step #4. Make sure your deployed netlify domain is listed as the site URL and everything is spelled correctly.

"Waiting for other deploys from your team to complete" in the deploy log

• This just means you have another deploy that's currently running. Once that deploy finishes, it will attempt to run your most recent deploy. You can check the status of deploys by navigating to Deploys and looking at the list of deploys + their status code.

My build has been running for basically 10,000 hours

• Make sure you are using the default settings created by Netlify, as mentioned in step 2. Your build command should be next build (not npm run dev , that is the command to start the local development server, not the build command, so it will run continuously)