A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
# Samba 4 config example | |
# Connected to existing remote Samba 4 Active Directory Directory Controller | |
# ZFS pool @ /storage | |
# Network is 192.168.101.0/24 | |
# Samba is installed with: | |
# pkg install samba42 | |
# and then joined to existing AD with: | |
# samba-tool domain join <params> | |
# After this /usr/local/etc/smb4.conf is edited and restarted with /usr/local/etc/rc.d/samba_server restart |
{ | |
"compilerOptions": { | |
"target": "es5", | |
"module": "commonjs", | |
"moduleResolution": "node", | |
"emitDecoratorMetadata": true, | |
"experimentalDecorators": true, | |
"allowSyntheticDefaultImports": true, | |
"sourceMap": true, | |
"noEmit": true, |
# Inline svg from @tomeara https://gist.github.com/tomeara/6515860 | |
def inline_svg(source) | |
file = File.open("app/assets/images/#{source}", "rb") | |
raw file.read | |
end | |
# SVG internal link | |
#= svg_tag 'sprite/icons.svg', 'icon-facebook-invers' | |
module SvgHelper |
# frozen_string_literal: true | |
module ImagesHelper | |
# Acts as a thin wrapper for image_tag and generates an srcset attribute for regular image tags | |
# for usage with responsive images polyfills like picturefill.js, supports asset pipeline path helpers. | |
# | |
# image_set_tag 'pic_1980.jpg', { 'pic_640.jpg' => '640w', 'pic_1024.jpg' => '1024w', 'pic_1980.jpg' => '1980w' }, sizes: '100vw', class: 'my-image' | |
# => <img src="/assets/ants_1980.jpg" srcset="/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw" class="my-image"> | |
# | |
# image_set_tag 'logo-amzlenders.png', {'[email protected]' => '2x'} | |
# => <img srcset="/assets/[email protected] 2x" src="/assets/logo-amzlenders.png" alt="Logo amzlenders"> |
module ApplicationHelper | |
def responsive_image_tag(image, options = {}) | |
content_tag(:picture) do | |
concat content_tag(:source, nil, media: '(max-width: 768px)', srcset: image.url(:thumbnail_mobile)) | |
concat content_tag(:source, nil, media: '(max-width: 960px)', srcset: image.url(:thumbnail_tablet)) | |
concat image_tag(image.url(:thumbnail_desktop), options) | |
end | |
end | |
end |
/** | |
* BrowserSync config: serve static assets, and proxy the HTML | |
* | |
* Let's say we have the codebase for the front-end of a website, | |
* and we want to develop CSS/JS or debug against the HTML of | |
* a remote development, staging or production server. | |
* | |
* Using BrowserSync (2.4 needed), we want to serve to our browser(s): | |
* - the distant HTML pages and content images from the server | |
* - local static assets (including or changes) |
#!/usr/bin/env bash | |
# Copy the url of the active ngrok connection to the clipboard. | |
# Usage: | |
# ngrok-copy # copies e.g. https://3cd67858.ngrok.io to clipboard. | |
# ngrok-copy -u # copies e.g. http://3cd67858.ngrok.io to clipboard. | |
if [[ "$1" == "-u" ]]; then | |
NGROK_URL=`curl -s http://127.0.0.1:4040/status | grep -P "http://.*?ngrok.io" -oh` | |
else | |
NGROK_URL=`curl -s http://127.0.0.1:4040/status | grep -P "https://.*?ngrok.io" -oh` |
$ cd /usr/local/lib | |
$ sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.5.dylib | |
$ sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.4.dylib |
version: '2' | |
services: | |
api: | |
volumes: | |
- "nfsmount:${CONTAINER_DIR}" | |
volumes: | |
nfsmount: | |
driver: local | |
driver_opts: |