today-i-learned

Repo of stuff I picked up

---

Nov 7

indexOf()

Learned from: Codewars
Lang: JavaScript
Purpose: Finds the index/position of definted item(s) from an array
Example use:

function findNeedle(haystack) {
  return "found the needle at position " + haystack.indexOf("needle");
}
//or
const findNeedle = haystack => `found the needle at position ${haystack.indexOf('needle')}`;

Nov 9

. operator

Learned from: RegexOne
Type: Regular Expression
Purpose: Wildcard - matches any digit, letter, or whitespace
Example use:

function replaceAny(a) {
  return a.replace(/./g, ' '); //finds any character in the object and replaces it with a space.
}

@supports

Learned from: Aerolab
Lang: CSS
Purpose: Like a media query, but determines if the browser supports a certain feature.
Example use:

@supports (display: grid) { //checks if broswer supports Grids
  //grid css
}

Nov 14

<inputs> cannot have :after/:before pseudo elements

Learned from: scottohara.me
Lang: CSS

Nov 15

How to fix the WYSIWYG editor (aka TinyMCE) on Wordpress; hosting permissions

Learned from: Stack Overflow
Type: Hosting
Scenario: TinyMCE stopped working; visual/text tab stopped responding. Console shows errors associated with TinyMCE's JavaScript. Turns out TinyMCE's php file (wp-includes/js/tinymce/wp-tinymce.php) had the wrong permissions. To fix, access host's CPanel and change file's permission to 655.

Nov 16

CSS Grid

Lang: CSS
Purpose: Layout, templating
Resources:

• Basics - Mozilla
• References - Learn CSS Grid
• Use cases
  • Grid by Example
  • CSS-Tricks
• Use case with Flexbox - Aerolab

Nov 17

object-fit: fill | contain | cover | none | scale-down

Lang: CSS
Purpose: Determines how a media item fits inside a box.
Learned from: CSS-Tricks

Nov 27

<?php get_locale() ?>

Lang: PHP (Wordpress)
Purpose: Detects and prints string of current language.

Nov 28

filter: drop-shadow()

Lang: CSS
Purpose: Adds a true-to-form drop shadow to objects
Learned from: CSS-Tricks

:lang()

Lang: CSS
Purpose: A selector that allows for locale-specific styles.
Learned from: W3Schools
Example use:

//Make paragraphs red if locale/language is Chinese
p:lang(cn) {
  color: red;
}

Dec 5

dir | Rename-Item -NewName {$((get-random).tostring()) + " - " + $_.Name}

Type: Powershell Script
Purpose: Prepends a random number to the original filenames of all files in the directory

Dec 12

@include ('file.structure' . $variable->thing)

Lang: Laravel @ PHP
Purpose: Allows for variables to be passed into an @include function
Example use:

    <div class="icon">
        @include ('services.partials.icons.' . $service->slug )
    </div>
    <h3>{{ $service->name }}</h3>
    <p>{{ $service->description }}</p>

Jan 11

:first-letter

Lang: CSS
Purpose: Selects the first letter of an element.
Example use:

//simulates those big first letters in storybooks and magazines
  p:first-letter {
    font-weight: bold;
    font-size: 8em;
    float: left
  }

Learn more: CSS-Tricks
Demo: Dive into HTML

localStorage

Lang: JavaScript
Purpose: Handles objects stored in the browser for later use.
Learn More: StackOverflow