Skip to content

Instantly share code, notes, and snippets.

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";
/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
const [mouseX, mouseY] = useMousePosition();
const positions = { x, y, h, w, mouseX, mouseY };
return (
<div
@swsalim
swsalim / nuxt-mapbox-gl.vue
Created August 16, 2020 16:13
Real-word example of using the Mapbox GL library in a Nuxt static app
<template>
<div id="map" class="mt-4 sm:mt-8 sm:mx-5 sm:mb-5"></div>
</template>
<script>
export default {
name: 'DepotsMap',
data() {
return {
selectedMarker: null,
@swsalim
swsalim / example.com
Created August 8, 2020 01:58 — forked from 1hakr/example.com
Supercharge your NGIX config
proxy_cache_path /tmp/cacheapi levels=1:2 keys_zone=microcacheapi:100m max_size=1g inactive=1d use_temp_path=off;
server {
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name example.com;
location /api/ {
# Rate Limiting
limit_req zone=reqlimit burst=20; # Max burst of request
@swsalim
swsalim / Wordpress Data Layer Variables
Created May 8, 2020 08:35 — forked from BryanBarrera/Wordpress Data Layer Variables
Modified Wordpress datalayer variables for pulling: author names, post types, categories, page name, and dates into custom variables for the classic version of Google Analytics. Feel free to leave a comment or hit me up http://BryanBarrera.com
// Add this script after you make your dataLayer = []; call
// AND after your GTM code snippet
// This needs to go inside the header.php in order for it work globally across your site
<script type="text/javascript">
// URL toolbox - helps grabbing elements in the URL
var _d = document;
var _dl = _d.location;
var _dlp = _dl.pathname;
var _dls = _dl.search;
var _dr = _d.referrer;

Frontend Masters: AWS for Frontend Engineers

You should have the following completed on your computer before the workshop:

  • Install the AWS CLI.
  • Have Node.js installed on your system. (Recommended: Use nvm.)
    • Install yarn with brew install yarn.
  • Create an AWS account. (This will require a valid credit card.)
  • Create a Travis CI account. (This should be as simple as logging in via GitHub).
/* dragging logic for nomadlist.com/dating */
/* by @levelsio */
/* MIT license */
/* <dragging logic> */
$('body').on('mousedown touchstart','.card',function(e) {
if(!currentCardUserId) return;
if($('card.match_card').is(':visible')) return;
if(typeof e.originalEvent.touches !=='undefined') {
/* touch device */