Skip to content

Instantly share code, notes, and snippets.

View zaidaldabbagh's full-sized avatar

Zaid Al-Dabbagh zaidaldabbagh

2 followers · 8 following
View GitHub Profile
@zaidaldabbagh
zaidaldabbagh / components.json
Last active November 13, 2018 20:34
AngularJS Load App Data from JSON — See zaidaldabbagh.com/blog/loading-app-data-from-json-in-angularjs
{
"banner": {
"image": {
"source": "ClientApp/dist/images/nz-fern.jpg"
},
"content": {
"color": "#ffffff",
"heading": "MPI Animal & Plant Import Permits",
"title": "Growing and protecting New Zealand",
"subtitle": "A permit is required to import live animals and plants, and specifie d animal products and plant products. A permit is also required for animals transiting through New Zealand. The requirement for a permit is included in the import health standard for that commodity.",
@zaidaldabbagh
zaidaldabbagh / webpack-example.config.js
Last active November 13, 2018 20:32
Example webpack.config.js for webpack setup — See zaidaldabbagh.com/blog/webpack-setup
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: ['./js/index.js', './scss/style.scss'],
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
@zaidaldabbagh
zaidaldabbagh / package-example.json
Last active November 13, 2018 20:32
Example package.json for webpack setup — See zaidaldabbagh.com/blog/webpack-setup
{
"name": "mpi",
"version": "1.0.0",
"description": "Ministry for Primary Industries (MPI) website.",
"main": "index.js",
"dependencies": {
"bootstrap": "^3.1.1",
"include-media": "^1.4.9",
"infinite-scroll": "^3.0.5",
"moment": "^2.22.2",
@zaidaldabbagh
zaidaldabbagh / checkboxFilter.html
Last active December 4, 2018 00:10
Checkbox Styling with Minimal CSS — See https://codepen.io/zaidaldabbagh/pen/pQBNEo
<div class="filter">
<label class="filter__item">
<input type="checkbox" id="chkStatDraft" checked="" value="DRAFT">
<span>Draft</span>
</label>
<label class="filter__item">
<input type="checkbox" id="chkStatWD" value="WITHDRAWN">
<span>Withdrawn</span>
</label>
<label class="filter__item">
@zaidaldabbagh
zaidaldabbagh / camelCaseToSentenceCase.js
Last active January 10, 2019 22:53
Convert CamelCase to SentenceCase — https://stackoverflow.com/questions/7225407/convert-camelcasetext-to-sentence-case-text
function camelCaseToSentenceCase(word) {
const result = word.replace(/([A-Z])/g, ' $1');
const finalResult = result.charAt(0).toUpperCase() + result.slice(1);
return (
<span>{finalResult}</span>
);
}
@zaidaldabbagh
zaidaldabbagh / initVanillaTilt.js
Created January 15, 2019 20:13
Initializing VanillaTilt
import VanillaTilt from 'vanilla-tilt';
...
const initTilt = () => {
// init tilt
VanillaTilt.init(document.querySelector(".card"), {
max: 25,
speed: 400
});
@zaidaldabbagh
zaidaldabbagh / addScrollAnimation.js
Last active February 8, 2019 00:23
Add scroll animation to anchor links on a page
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const addScrollAnimation = () => {
const anchorLinks = document.querySelectorAll('[href*="#"]');
anchorLinks.forEach((anchorLink) => {
anchorLink.addEventListener('click', (e) => {
const href = e.target.getAttribute('href');
@zaidaldabbagh
zaidaldabbagh / mysite.yml
Created April 24, 2019 04:51
Allow JSON uploads in SilverStripe CMS
SilverStripe\MimeValidator\MimeUploadValidator:
MimeTypes:
'json': 'text/plain'
@zaidaldabbagh
zaidaldabbagh / ElementContentOverflowIdentified.js
Last active May 16, 2019 01:00
Script to identify if content of a particular div is overflowing — See https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows.
// add overflowing text indicator for cards with longer texts
var win2dOptionValues = document.getElementsByClassName('win2dOption-value');
for (var i=0; i < win2dOptionValues.length; i++) {
var curOverflow = win2dOptionValues[i].style.overflow;
var isOverflowing = win2dOptionValues[i].clientWidth < win2dOptionValues[i].scrollWidth ||
win2dOptionValues[i].clientHeight < win2dOptionValues[i].scrollHeight;
if (isOverflowing) {
win2dOptionValues[i].className += " win2dOption-value--overflowing";
win2dOptionValues[i].style.overflowy = "scroll";
@zaidaldabbagh
zaidaldabbagh / hide-scrollbar-mixin.scss
Last active June 13, 2019 01:00
Sass mixin to hide scrollbar in Chrome, Firefox, Safari and IE.
@mixin hideScrollbar {
// https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
// There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari).
&::-webkit-scrollbar {
width: 0 !important
}
// There is a CSS rule that can hide scrollbars in IE 10+.
-ms-overflow-style: none;
// Use -ms-autohiding-scrollbar if you wish to display on hover.