Skip to content

Instantly share code, notes, and snippets.

View kingluddite's full-sized avatar
🎯
Focusing

Pip kingluddite

🎯
Focusing
90 followers · 7 following
View GitHub Profile
@kingluddite
kingluddite / git-github-tutorial.md
Created April 26, 2024 14:14
Simple step by step instructions for working with Git and GitHub

Certainly! Here's a step-by-step guide on setting up a GitHub repository, cloning it to your computer, and updating files locally:

Setting up a GitHub Repository:

  1. Create a GitHub Account: If you don't already have one, go to GitHub and sign up for a free account.

  2. Create a New Repository:

    • Click on the "+" icon in the top-right corner of the GitHub interface and select "New repository."
    • Give your repository a name, add an optional description, choose whether it should be public or private, and initialize it with a README file if desired.
@kingluddite
kingluddite / netlify-diff-build-commands-per-branch.md
Created April 17, 2024 19:27
How to create different build commands per branch

Yes, in Netlify, you can indeed have different build commands per branch. This capability is particularly useful when you want to run different build processes or deploy different versions of your site depending on the branch you're working on.

Here's how you can set up different build commands per branch in Netlify:

  1. Navigate to your site settings: Log in to your Netlify account and select the site you want to configure.

  2. Go to Build & deploy settings: Once you're in the site dashboard, find the "Settings" option and click on "Build & deploy" settings.

  3. Configure build settings for each branch: Scroll down until you find the section titled "Branches". Here, you'll see a list of your branches. Click on the branch for which you want to set a custom build command.

@kingluddite
kingluddite / fed-skills.md
Created March 2, 2024 16:24
What skills do I need to be a great front end developer?

Becoming a great front-end developer requires a combination of technical skills, soft skills, and a mindset for continuous learning and improvement. Here's a breakdown of key skills:

  1. HTML (Hypertext Markup Language): Fundamental for structuring web pages. Understand semantics, accessibility principles, and best practices.

  2. CSS (Cascading Style Sheets): Mastery of CSS for styling web pages. Knowledge of CSS frameworks (e.g., Bootstrap, Foundation) and preprocessors (e.g., SASS, LESS) can be beneficial.

  3. JavaScript: Essential for adding interactivity and dynamic behavior to web pages. Proficiency in modern JavaScript frameworks/libraries such as React, Angular, or Vue.js is crucial.

  4. Responsive Design: Ability to create web pages that work well on various devices and screen sizes. Understanding CSS media queries and responsive design principles is key.

@kingluddite
kingluddite / id-vs-class.md
Created February 17, 2024 12:27
id vs class and why you should use class when possible

Let's demonstrate the difference between using IDs and classes and why classes should generally be preferred over IDs when styling elements.

Suppose we have a simple HTML structure with a title and two paragraphs, and we want to style them differently:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
@kingluddite
kingluddite / center-element-in-container.md
Created February 13, 2024 18:48
margin: auto, centering and the parent container

margin: auto, centering and the parent container

margin: auto; with respect to horizontal margin values (margin-left and margin-right) will center an element within its parent container if the parent container has a defined width.

Here's how it works:

  1. Block-level elements: By default, block-level elements like <div> occupy the full width of their parent container, so setting margin: auto; will center them horizontally within that parent container.

  2. Inline elements: Inline elements, by default, only occupy the space necessary for their content. To center them horizontally with margin: auto;, you typically need to change their display property to block or inline-block.

  3. Parent container's width: For margin: auto; to work and center an element, the parent container must have a defined width. If the parent container's width is not defined, the margin will not have any effect, and the element will appear as if it's aligned to the left.

@kingluddite
kingluddite / about.md
Last active February 10, 2024 13:43
HTML Boilerplate

Certainly! Here's an "About" HTML page for the deli using only semantic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Corner Deli</title>
</head>
@kingluddite
kingluddite / useful-links.md
Created February 9, 2024 19:20
Useful links from class
@kingluddite
kingluddite / ub-slides-schedule.md
Last active February 9, 2024 19:17

Course Schedule

Week 1

  • Day 1 (24.10.2024)
  • Day 2 (25.10.2024)
    • Git’n Pro with HTML and CSS
    • Slides
  • Day 3 (26.10.2024)
@kingluddite
kingluddite / README.md
Created February 8, 2024 17:09
Practical use of Reacts props.children

Practical use of Reacts props.children

In React, props.children is a special prop that allows you to pass components or elements as children to another component. This is particularly useful when you want to create flexible and reusable components that can contain arbitrary content.

Here's a simple example to illustrate its use and purpose:

// ParentComponent.js
import React from 'react';

const ParentComponent = (props) => {
@kingluddite
kingluddite / what-is-transpiling.md
Created February 8, 2024 14:41
What is transpiling?

What is transpiling?

Transpiling is a process in computer programming where the source code written in one programming language is converted into equivalent source code in another programming language. This transformation typically occurs before the code is executed or interpreted.

The term "transpiling" is a combination of "transforming" and "compiling." It differs from traditional compiling in that the source code is not translated into machine code directly executable by the computer's hardware, but rather into a higher-level language that can be further processed or interpreted by another tool.

One common use case for transpiling is in web development, where developers write code in modern languages such as TypeScript or newer versions of JavaScript (like ES6 or ES7), which may not be fully supported by all browsers. Transpilers like Babel are used to convert this code into older versions of JavaScript that are compatible with a wider range of browsers.

Transpiling can also be used for various other