Skip to content

Instantly share code, notes, and snippets.

@gimesi
gimesi / mobile-subnavigation-toggle.html
Last active May 24, 2023 07:51
A navigation menu for mobile with toggle function for sublevel links powered by AlpineJS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AlpineJS Mobile Menu with Subnavigation Toggle</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet" type="text/css">
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" type="text/css">
</head>
@gimesi
gimesi / column-calc.scss
Created January 4, 2019 13:13
Calculate column width in SCSS for CSS columns to nicely collapse exactly at the point where the container starts to shrink on resize
$container-max-width: 72rem; /* from here on the columns start collapsing */
$container-padding: 2rem; /* added because we don't like text sticking to the edges on mobiles */
$columns: 3; /* number of columns @ the max-width of the container */
$columns-gap: 4rem; /* space between the columns */
/* pretty straightforward but here comes the magic:
the single column width is the result after
- the gap between the columns (always 1 less than the total number of columns)
- the container padding (applied on the left and on the right)
are subtracted from the width of the container and then
@gimesi
gimesi / charcounter.js
Last active August 29, 2015 14:13
Snippet to count how many characters are left in a textarea. I use it in the backend of a CMS to insert meta information for social shares (e.g. re-tweets).
// in HTML:
// <div id="count"></div>
// <textarea id="#share-description"></textarea>
$(document).ready(function() {
var chars = 115; // 140 minus 25 (Twitter links (24 chars) plus 1 whitespace)
var left;
if ($("#share-description").val().length === 0) {
left = chars;
@gimesi
gimesi / meta-tags.html
Last active August 30, 2021 03:54
(Hopefully) useful snippet of common meta tags for the <head> section: standard & social tags (e.g. for Facebook, Twitter, Google+, Pinterest), fav and touch icons, and other stuff.
<!-- Charset, Content Type -->
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Standard Meta Tags -->
<title></title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
@gimesi
gimesi / DivToViewPortHeight
Created December 29, 2013 16:09
Set a div to full viewport height with JQuery.
$(document).ready(function(){
// set the intro div automatically to full viewport height
$('.intro').height($(window).height());
// ensure it stays this way when the window is resized
$(window).resize(function(){
$('.intro').height($(window).height());
});
});
@gimesi
gimesi / gist:6541231
Last active December 22, 2015 22:39
Show and hide hidden files on a Mac.
I. "PERMANENT SOLUTION"
To show hidden files, open Terminal and enter:
defaults write com.apple.Finder AppleShowAllFiles TRUE [enter]
killall Finder
To hide 'em again, type:
defaults write com.apple.Finder AppleShowAllFiles FALSE [enter]
killall Finder [enter]
@gimesi
gimesi / twitter-followers-count
Last active January 16, 2016 12:56
Show the number of followers of a Twitter account.
<?php
/*
* Requires the "Twitter API" wrapper by James Mallison
* to be found at https://github.com/J7mbo/twitter-api-php
*
* The way how to get a follower count was posted by Amal Murali
* on http://stackoverflow.com/questions/17409227/follower-count-number-in-twitter
*/
@gimesi
gimesi / mailchimp-subscribers
Created September 11, 2013 10:12
Show the number of subscribers of a Mailchimp Newsletter.
<?php
/* Show the number of subscribers of a Mailchimp Newsletter
*
* Contains "Mini MailChimp API v2 wrapper" by Drew McLellan
* to be found at https://github.com/drewm/mailchimp-api
*/
class MailChimp
{
@gimesi
gimesi / facebook-page-likes
Last active December 22, 2015 19:39
Show the number of likes of a Facebook page with this php snippet using the cURL function.
// Show the number of likes of a Facebook page
<?php
$url = "http://graph.facebook.com/YOURPAGENAME"; // enter your fb-sitename here
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$results = curl_exec($ch);
curl_close($ch);
$json = json_decode($results, true);