Skip to content

Instantly share code, notes, and snippets.

View bm2ilabs's full-sized avatar
🎯
Focusing

Boukraa Mohamed bm2ilabs

🎯
Focusing
View GitHub Profile
@bm2ilabs
bm2ilabs / install_lamp_18.sh
Created January 15, 2020 21:51 — forked from ankurk91/install_lamp_ubuntu.sh
Ubuntu 18.04 - PHP development (php 7.3, MySQL 5.7, apache 2.4)
#!/bin/bash
set -euo pipefail
IFS=$'\n\t'
# Ubuntu 18.04 dev Server
# Run like - bash install_lamp.sh
# Script should auto terminate on errors
echo -e "\e[96m Adding PPA \e[39m"
sudo add-apt-repository -y ppa:ondrej/apache2
@bm2ilabs
bm2ilabs / AuthServiceProvider.php
Created November 19, 2019 10:40 — forked from roquie/AuthServiceProvider.php
Laravel 5.6 Cartalyst Sentinel Integration
<?php
declare(strict_types=1);
namespace App\Providers;
use Auth;
use Domain\SentinelGuard;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
@bm2ilabs
bm2ilabs / Breakpoints
Created September 26, 2019 04:20 — forked from janily/Breakpoints
Mobile-first CSS Media Queries Breakpoints
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
@bm2ilabs
bm2ilabs / gen-statistics.sh
Created April 17, 2019 07:38 — forked from zeehio/gen-statistics.sh
Generate HTML page with CPU, RAM, and disk usage information for several SSH servers.TODO: There are too many SSH connections per server. Fixing that would speed up a lot the HTML generation.
#!/bin/bash
# Shell script to get disk usage, cpu usage, RAM usage,system load,etc.
# from multiple Linux servers and output the information on a single
# server in html format. Read below for usage/installation info
# *--------------------------------------------------------------------*
# * ORIGINAL WORK BY:
# * dig_remote_linux_server_information.bash,v0.1
# * Last updated on 25-Jul-2005*
# * Copyright (c) 2005 nixCraft project *
# * Comment/bugs: http://cyberciti.biz/fb/ *
Add this to your http {} of the nginx.conf file normally located at /etc/nginx/nginx.conf:
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;
Then add this to your php location block, this will be located in your vhost file look for the block that begins with location ~ .php$ {
fastcgi_buffer_size 128k;
fastcgi_buffers 4 256k;
fastcgi_busy_buffers_size 256k;
@bm2ilabs
bm2ilabs / string-utils.js
Created February 14, 2019 19:21 — forked from jonlabelle/string-utils.js
Useful collection of JavaScript string utilities.
// String utils
//
// resources:
// -- mout, https://github.com/mout/mout/tree/master/src/string
/**
* "Safer" String.toLowerCase()
*/
function lowerCase(str){
return str.toLowerCase();
@bm2ilabs
bm2ilabs / v-cloak.md
Created April 10, 2018 14:39 — forked from adamwathan/v-cloak.md
Useful CSS utilities for Vue.js cloaking

Handy helpers for controlling visibility of elements until Vue has compiled.

Use like:

<div v-cloak>
  <h1>
    <span class="v-cloak--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-cloak--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
 

Custom Sharing Buttons for Social Media

These files contain a basic template for creating customized social media share buttons on a web page. The CSS styles are arbitrary, and easily changes. The HTML and JavaScript works as follows.

HTML Structure

The buttons are simply a elements with no href value. Font Awesome is used to add icons. The IDs are used by the JavaScript to modify these a elements.

JavaScript Structure

This file uses jQuery.

Three functions are defined to find share counts for Facebook, Twitter and LinkedIn. Google+ is currently excluded.

The web page address is grabbed by window.location.href and encoded. The page title is pulled from whatever HTML element has id="title". The share count functions are called, and the results appended to the inner text of the share buttons. The the href of each button is changed to the appropriate URL for sharing the webpage.

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter