Skip to content

Instantly share code, notes, and snippets.

@razwan
razwan / kmp.js
Last active August 5, 2020 23:07
Implementation of the KMP pattern-matching alghoritm in JavaScript
// processing time O(m)
// added space O(m)
// time complexity: O(n+m)
function errorTable (p, m, f) {
for (var j = 1; j <= m-1; j++) {
k = f[j-1];
while (k!=-1 && p[j-1] != p[k]) {
k = f[k];
}
@razwan
razwan / _baseline.scss
Created April 14, 2014 16:20
Aligning type to baseline the right way with SASS
$base-font-size: 16px;
$base-line-height: 1.5;
// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;
@mixin baseline($font-size, $scale: 2) {
@razwan
razwan / _wp-offset.scss
Last active September 14, 2016 12:03
WordPress admin-bar offsets
// WP Offset Mixin
//
// this is a mixin used to increase the value of a specific property with
// the height of the .admin-bar added by WordPress
//
// @params
// $property - the property that depends on the .admin-bar height
// $value - initial value of the property above [px]
// $fixed - tells if the element is set to fixed and it should become static when the .admin-bar does
// $sign - there mey be times when you want to substract the .admin-bar height instead of adding it
@razwan
razwan / typography.scss
Created December 2, 2015 13:14
Typography Prototype
@mixin font-face($name, $filename, $weight: regular) {
@font-face {
font-family: $name;
font-wight: $weight;
src: url(unquote($filename) + '.eot'); /* IE9 Compat Modes */
src: url(unquote($filename) + '.woff2') format('woff2'), /* Super Modern Browsers */
url(unquote($filename) + '.woff') format('woff'), /* Pretty Modern Browsers */
url(unquote($filename) + '.ttf') format('truetype'), /* Safari, Android, iOS */
url(unquote($filename) + '.svg#svgFontName') format('svg'); /* Legacy iOS */
}
<div class="c-card">
<div class="c-card__header">
<h2 class="c-card__title">Title text here</h3>
</div>
<div class="c-card__body">
<p>I would like to buy:</p>
<!-- A layout module -->
@razwan
razwan / jquery.plugin.js
Created August 2, 2016 14:27
jQuery Plugin Pattern
// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ($, window, document, undefined) {
function PluginName(element, options) {
this.element = element;
// jQuery has an extend method that merges the
// contents of two or more objects, storing the
@razwan
razwan / jquery.parallax.js
Last active August 4, 2016 06:28
jQuery Parallax Plugin
// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ($, window, document, undefined) {
var windowHeight = $(window).height(),
lastKnownScrollY;
$(window).on('resize', function(e) {
windowHeight = $(window).height();
@razwan
razwan / module.js
Last active August 8, 2016 12:06
JavaScript Revealing Module Design Pattern
;var Module = (function(undefined) {
var privateVariable = '';
function privateMethod() {
console.log('did this');
}
function exposedMethod() {
privateMethod();
}
@razwan
razwan / _baseline-spacing.scss
Last active November 10, 2018 18:28
SCSS mixin used to achieve consistent spacing between different typographic elements
$baseline-unit: 12px !default;
$baseline-debug: false !default;
@mixin baseline($baseline-font-size: 16px, $baseline-line-height: 1.25, $cap-height-ratio: 0.68, $margin-bottom: 3rem) {
$baseline-distance: ($baseline-line-height - $cap-height-ratio) / 2;
// set the proper font-size and line-height to size the element in multiples of baseline units
font-size: ($baseline-font-size / $baseline-unit) * 1rem;
line-height: $baseline-line-height;
@razwan
razwan / _media.scss
Created April 6, 2018 13:38
Media query sass mixin
$breakpoints: (
xsmall: 30em, // ~ 480px
small: 42.5em, // ~ 680px
pad: 50em, // ~ 800px
lap: 62.5em, // ~ 1000px
desk: 80em // ~ 1280px
) !default;
@mixin above($bpname) {
$breakpoint: map-get($breakpoints, $bpname);