Skip to content

Instantly share code, notes, and snippets.

View a-axton's full-sized avatar

Andy Axton a-axton

19 followers · 3 following
View GitHub Profile
@avesus
avesus / September 2017 iOS WebKit input focus position: fixed.md
Created September 4, 2017 23:24
September 2017 iOS WebKit input focus position: fixed

Mobile Safari does not support position: fixed when an input focused and virtual keyboard displayed.

To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events.

The trick is to put the tapped input control to the bottom of screen before it activates focus. In that case iOS Safari always scrolls viewport predictably and window.innerHeight becomes exactly visible height.

Open https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html in Mobile Safari to see how it works.

Please avoid forms where you have several focusable elements because more tricks to fix position will be necessary, those were added just for demonstration purposes.

@robinloeffel
robinloeffel / _grid-ie-calc.scss
Last active June 5, 2024 21:52
Dynamic CSS Grid Items in Internet Explorer and Edge - https://grid-ie-calc.surge.sh
/*
This mixin allows us use CSS grid without having to think about
what -ms-grid-row/-ms-grid-column we have to assign to a grid element
for it to properly work on Internet Explorer and Edge.
It takes three arguments, the last one of which is optional. Specify the
maximum amount of items you want to have in your grid, when they should
break to the next line and, if you like, a grid-gap of some sort.
@davidgilbertson
davidgilbertson / block-scroll.css
Last active May 18, 2020 20:44
/* the page should not change width as content is loaded */
body {
overflow-y: scroll;
}
/* block scrolling without losing the scroll bar and shifting the page */
/* add this class when a modal is open */
body.block-scroll {
overflow: hidden;
overflow-y: scroll !important;
@Dagnan
Dagnan / application.html.erb
Last active November 21, 2020 19:10 — forked from averyvery/application.rb
Inline CSS or JS in Rails 5
<!DOCTYPE html>
<html>
<head>
<%= inline_js 'application.js' %>
<%= inline_css 'application.css' %>
</head>
<body>
</body>
</html>
@clarabstract
clarabstract / ConnectedActivityFeed.jsx
Last active December 2, 2016 03:32
Exposing life-cycle methods as props via a Higher Order Component
// example use
export default let ConnectedActivityFeed = compose(
connect(
({activityFeeds = {}}, {userId}) => ({
feedItems: activityFeeds[userId]
}),
{
onPropsChange: ({userId}) =>
requestActvityFeedData(userId)
@ericelliott
ericelliott / defaults-overrides.md
Last active May 7, 2023 13:52
ES6 defaults / overrides pattern

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {
@vitalbone
vitalbone / keystone2heroku.md
Last active January 1, 2023 23:35
Deploying KeystoneJS to Heroku

Deploying a Keystone App to Heroku

Keystone comes completely set up to install on Heroku in a couple of steps.

1. Sign up for a Heroku account and install the Heroku Toolbelt.

Log in with it and you're ready to begin. Heroku uses git to deploy a new site, so with that in mind:

2. Create a new repository on Github and then clone it.

@roblevintennis
roblevintennis / gist:865de775fb988bfad9a1
Last active May 7, 2017 20:20
Responsive Inline SVGs Sass Mixin
$svg-container-namespace: '.svg-container';
//Give 'em' 1:1 responsive container by default
#{$svg-container-namespace} {
display: inline-block;
position: relative;
height: 0;
width: 100%;
padding: 0;
//Default for 1:1 aspect ratio
@cletusw
cletusw / .eslintrc
Last active May 18, 2025 18:05
ESLint Reset - A starter .eslintrc file that resets all rules to off and includes a description of what each rule does. From here, enable the rules that you care about by changing the 0 to a 1 or 2. 1 means warning (will not affect exit code) and 2 means error (will affect exit code).
{
// http://eslint.org/docs/rules/
"ecmaFeatures": {
"binaryLiterals": false, // enable binary literals
"blockBindings": false, // enable let and const (aka block bindings)
"defaultParams": false, // enable default function parameters
"forOf": false, // enable for-of loops
"generators": false, // enable generators
"objectLiteralComputedProperties": false, // enable computed object literal property names
@tkafka
tkafka / LICENSE.txt
Last active September 18, 2025 20:18
Drop-in replacement for ReactCSSTransitionGroup that uses velocity.js instead of CSS transforms. Add your own transitions to `transitions` hash.
The MIT License (MIT)
Copyright (c) 2014 Tomas Kafka
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions: