Skip to content

Instantly share code, notes, and snippets.

View kingluddite's full-sized avatar
🎯
Focusing

Pip kingluddite

🎯
Focusing
91 followers · 7 following
View GitHub Profile
@kingluddite
kingluddite / bootstrap-using-data-attributes.md
Created May 11, 2024 11:30
How does BS5 use data-attributes?

Bootstrap 5, like its predecessors, uses data attributes extensively to enhance the functionality and behavior of its components. Data attributes in Bootstrap serve as hooks for JavaScript plugins and provide configuration options for various components. Here are some common ways Bootstrap 5 utilizes data attributes:

  1. Data Toggle Attributes: Bootstrap components often use data attributes to toggle the visibility or behavior of certain elements. For example, the data-bs-toggle attribute is commonly used to toggle the visibility of dropdowns, modals, tooltips, and collapsible elements.

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>
@kingluddite
kingluddite / data-attributes.md
Created May 11, 2024 11:27

The HTML5 data-* attribute provides a way to store custom data directly within HTML elements. Before its introduction, developers often resorted to using non-standard attributes or JavaScript hacks to achieve similar functionality. Let's explore an example to illustrate the difference:

Before HTML5 data-* attribute: Suppose you have a list of products displayed on a web page, and you want to associate additional information, such as a product ID or category, with each product element. Before HTML5, developers might have used non-standard attributes like class or id to store this information:

<ul>
  <li class="product" data-product-id="123">Product A</li>
  <li class="product" data-product-id="456">Product B</li>
  <li class="product" data-product-id="789">Product C</li>
@kingluddite
kingluddite / sample.html
Created April 27, 2024 16:59
this is a sample gist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fur-tastic Grooming</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
@kingluddite
kingluddite / box-sizing.md
Created April 27, 2024 11:26
using box sizing can save you time in CSS

That's correct! In CSS, the width and height properties of an element refer only to the content area of the element, excluding padding, border, and margin. If you want to set the total width and height of an element including padding and border, you would typically use the box-sizing property.

The box-sizing property can have two values:

  1. content-box (default): This is the standard box model where the width and height properties only apply to the content area of the element, and padding, border, and margin are added on top of that.

  2. border-box: In this model, the width and height properties include padding and border, but not margin. This is often preferred as it simplifies layout calculations.

Here's an example of how you can use box-sizing:

@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>