onezerodigits

## README.md

      
              1 file
            
          
              1 fork
            
          
              11 comments
            
          
              14 stars
            
          
                altynbek07
                / README.md
            
            
              Last active
              March 25, 2022 22:42
            
              
                Switch PHP Version in Laravel Valet
              
          
    Switch PHP Version in Laravel Valet

For me, the valet use php@7.3 command does not work.
And so I created this bash function.
Install

I already have PHP versions 7.2, 7.3 and 7.4 installed via Homebrew.
Add this function in your .bash_profile or .zshrc file:
# Switch PHP version
switch-php() {


## flickr_select_all_click.js
/*
  # WHAT IS THIS?

  Use this method on Flickr's camera roll page.

  https://www.flickr.com/cameraroll

  Then, scroll the page gradually, which allows
  Flickr to lazy load the images and links.

## states.md

      
              1 file
            
          
              7 forks
            
          
              0 comments
            
          
              31 stars
            
          
                alishalisha
                / states.md
            
            
              Last active
              January 6, 2021 06:59
            
              
                Checking state on product design patterns
              
          
    Checking the State of Your States

If applicable, make sure your design component accounts for all these states.
This is basically copied from the Nine States of Design Medium article. 😛

 Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
 Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
 Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
 One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
 Some data state: This is usually what you think


## rwdurl
# My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours.
# Best on an ultra wide monitor.

function rwdurl() {
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(0,0);window.resizeTo(320,1395);window.location='$1';</script></body></html>"
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(330,0);window.resizeTo(480,1395);window.location='$1';</script></body></html>"
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(815,0);window.resizeTo(640,1395);window.location='$1';</script></body></html>"
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(1460,0);window.resizeTo(800,1395);window.location='$1';</script></body></html>"
	open -n

## stop-video.js
/**
 * Stop an iframe or HTML5 <video> from playing
 * @param  {Element} element The element that contains the video
 */
var stopVideo = function ( element ) {
	var iframe = element.querySelector( 'iframe');
	var video = element.querySelector( 'video' );
	if ( iframe ) {
		var iframeSrc = iframe.src;
		iframe.src = iframeSrc;

## gulpfile.js
'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var del = require('del');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');
var exec = require('child_process').exec;


var notify = require('gulp-notify');

## high-dpi-media.css
/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */

## viewport-meta-in-20-best-responsive-designs.md

      
              1 file
            
          
              5 forks
            
          
              4 comments
            
          
              25 stars
            
          
                andreasbovens
                / viewport-meta-in-20-best-responsive-designs.md
            
            
              Created
              July 17, 2012 15:56
            
              
                Viewport meta tags used by the 20 sites that are listed in Social Driver's "20 Best Responsive Web Design Examples of 2012"
              
          
    Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.
Findings


All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
1 site has 2 viewport meta tags (with different values) in the source...


## responsive.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
		body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
		.wrapper { width: 6000px; }
		.frame { float: left; }
		h2 { margin: 0 0 5px 0; }

## event.tracking.js
(function($) {
	/*
		A simple helper plugin for wrapping Google Analytic event tracking
		into sites through jQuery and HTML5 data attributes.

		This assumes that you have used the standard configuration provided
		by google for setting up Google Analytics and used the _gaq var for
		storing the tracker.

		Can track focus, activate, hover and click input methods but not key
	/*
	# WHAT IS THIS?

	Use this method on Flickr's camera roll page.

	https://www.flickr.com/cameraroll

	Then, scroll the page gradually, which allows
	Flickr to lazy load the images and links.
	# My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours.
	# Best on an ultra wide monitor.

	function rwdurl() {
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(0,0);window.resizeTo(320,1395);window.location='$1';</script></body></html>"
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(330,0);window.resizeTo(480,1395);window.location='$1';</script></body></html>"
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(815,0);window.resizeTo(640,1395);window.location='$1';</script></body></html>"
	open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(1460,0);window.resizeTo(800,1395);window.location='$1';</script></body></html>"
	open -n
	/**
	* Stop an iframe or HTML5 <video> from playing
	* @param {Element} element The element that contains the video
	*/
	var stopVideo = function ( element ) {
	var iframe = element.querySelector( 'iframe');
	var video = element.querySelector( 'video' );
	if ( iframe ) {
	var iframeSrc = iframe.src;
	iframe.src = iframeSrc;
	'use strict';
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var del = require('del');
	var uglify = require('gulp-uglify');
	var gulpif = require('gulp-if');
	var exec = require('child_process').exec;


	var notify = require('gulp-notify');
	/* ---------------------------------------------------------- */
	/* */
	/* A media query that captures: */
	/* */
	/* - Retina iOS devices */
	/* - Retina Macs running Safari */
	/* - High DPI Windows PCs running IE 8 and above */
	/* - Low DPI Windows PCs running IE, zoomed in */
	/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
	/* - Android hdpi devices and above */
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
	body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
	.wrapper { width: 6000px; }
	.frame { float: left; }
	h2 { margin: 0 0 5px 0; }
	(function($) {
	/*
	A simple helper plugin for wrapping Google Analytic event tracking
	into sites through jQuery and HTML5 data attributes.

	This assumes that you have used the standard configuration provided
	by google for setting up Google Analytics and used the _gaq var for
	storing the tracker.

	Can track focus, activate, hover and click input methods but not key