Skip to content

Instantly share code, notes, and snippets.

View amans199's full-sized avatar

Ahmed Mansour amans199

28 followers · 90 following
View GitHub Profile
@loilo
loilo / readme.md
Last active April 9, 2024 20:01
Sass Dark/Light Theme Mixin

Sass Dark/Light Theme Mixin

This is a Sass mixin to handle a 3-way dark mode. It relies on a data-theme attribute on your <html> element with a value of light or dark. If data-theme is absent (i.e. it's neither light nor dark), the system's preferred mode is used.

body {
  // matches data-theme="light" or data-theme="auto" with system instructing light mode
  @include light {
    background: white;
 color: black;
@amans199
amans199 / ACF Arabian Country list
Created February 10, 2020 06:43
Arabian Country list formatted for Advanced Custom Fields select dropdown
algeria : Algeria
bahrain : Bahrain
comoros : Comoros
djibouti : Djibouti
egypt : Egypt
iraq : Iraq
jordan : Jordan
kuwait : Kuwait
lebanon : Lebanon
libya : Libya
@sbatson5
sbatson5 / concurrency.js
Created September 27, 2019 15:09
Throttling Vuex actions
import store from '@/store';
/**
* A simple class we create just for tracking our running functions
*/
class Concurrency {
get(key) {
return this[key] || {};
}
@bradtraversy
bradtraversy / vscode_shortcuts.md
Last active July 25, 2024 10:27
Helpful shortcuts for VSCode

VSCode Shortcuts

List of helpful shortcuts for faster coding

If you have any other helpful shortcuts, feel free to add in the comments of this gist :)

Official List of all commands

@john-bell-gw
john-bell-gw / perfomanceMattersWorkshop.md
Last active February 13, 2021 17:02
My notes from Harry Robert's workshop on front-end performance

Front End Performance: Building Faster Websites

Harry Roberts

Slides from the workshop (Password: #perfmatters)

Desciption of the workshop from https://newadventuresconf.com/2019/workshops/harry-roberts/

Every case-study, every report, and every bit of feedback always tells us the same thing: speed matters. It’s good for users, it’s good for accessibility, and it’s good for business. But why are modern browsing experiences so slow? If technology is getting better, why are websites getting worse?

Useful Links

@phelma
phelma / PERFNOW_up.md
Last active June 30, 2023 12:32
performance.now() conference notes

Performance Now Conference

Resource Loading

  • Resource Hints
    • <link rel="preload" href="stlye.css" as="style" >
      • rel="dns-prefetch" browser resolves dns asap
      • rel="preconnect" browser resolves dns & TCP handshake ( & TLS negotiation) asap
      • rel="prerender" loads all resources & renders page (like in hidden tab)
  • rel="prefetch" browser requests item and caches - intended for next page resources
@aschmelyun
aschmelyun / DetectScroll.vue
Created May 29, 2018 09:19
Detect scrolling to the bottom of a div in Vue.js
<template>
<div class="wrapper">
<div class="box" @scroll="handleScroll">
<p>Your content here...</p>
</div>
<a href="#" v-if="hasScrolledToBottom">Show After Scrolling</a>
</div>
</template>
<script>
export default {
@saqueib
saqueib / errorHandler.js
Last active June 9, 2022 06:42
Global error handling using axios interceptor for http calls http://www.qcode.in/api-error-handling-in-vue-with-axios
import axios from 'axios'
import toast from './toast'
function errorResponseHandler(error) {
// check for errorHandle config
if( error.config.hasOwnProperty('errorHandle') && error.config.errorHandle === false ) {
return Promise.reject(error);
}
// if has response show the error
@desinas
desinas / avoidManyEvents.js
Last active June 12, 2023 20:17
Avoid too many events & Event Delegation - Working w Browser Events - Udacity FrontENDev
const myCustomDiv = document.createElement('div');
function respondToTheClick(evt) {
console.log('A paragraph was clicked: ' + evt.target.textContent);
}
for (let i = 1; i <= 200; i++) {
const newElement = document.createElement('p');
newElement.textContent = 'This is paragraph number ' + i;
@kimcoleman
kimcoleman / elementor_compatibility_for_pmpro.php
Last active October 26, 2023 08:40
Ensure Paid Memberships Pro compatibility when using the Elementor Page Builder.
<?php
/**
* Ensure Paid Memberships Pro compatibility when using the Elementor Page Builder:
* https://wordpress.org/plugins/elementor/
*
* Your administrator-level account must have a Membership Level in order to edit all of the pages assigned
* under Memberships > Pages.
*
* You must also set a Custom Field on the Membership Checkout page with the key 'pmpro_default_level' and
* value of a level ID in order to properly edit your Membership Checkout page using Elementor.