Skip to content

Instantly share code, notes, and snippets.

View kevnk's full-sized avatar

Kevin K kevnk

View GitHub Profile
@lennardv2
lennardv2 / 1. Building PHP-MAMP on Apple Silicon M1.md
Last active February 29, 2024 07:57
Native PHP development / MAMP stack on Apple silicon M1

Building the MAMP stack (php, apache & mysql) on Apple Silicon ARM (native)

Update! This tutorial is outdated. Nowadays brew installes m1 binaries just fine. Also use valet: https://laravel.com/docs/9.x/valet. It's 10x easier.

In this tutorial, we'll build the the nescessary packages for ARM via homebrew. After that we'll configure apache2 for using virtual hosts. The native php is ofcourse way faster, see the results of this benchmark below.

TEST NAME SECONDS OP/SEC
@argyleink
argyleink / easings.css
Created February 26, 2018 22:34
Handy CSS properties for easing functions
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@don1138
don1138 / font-stacks.css
Last active April 25, 2024 15:41
CSS Modern Font Stacks
/* Modern Font Stacks */
/* System */
font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
/* System (Bootstrap 5.2.0) */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active April 26, 2024 11:06
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

@basham
basham / css-units-best-practices.md
Last active April 29, 2024 10:40
CSS Units Best Practices

CSS units

Recommendations of unit types per media type:

Media Recommended Occasional use Infrequent use Not recommended
Screen em, rem, % px ch, ex, vw, vh, vmin, vmax cm, mm, in, pt, pc
Print em, rem, % cm, mm, in, pt, pc ch, ex px, vw, vh, vmin, vmax

Relative units

Relative units

@cobyism
cobyism / gh-pages-deploy.md
Last active May 6, 2024 08:07
Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](http://yeoman.io).

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).