Skip to content

Instantly share code, notes, and snippets.

Avatar

tomasz stryjewski stryju

View GitHub Profile
@ebidel
ebidel / reporting_observer.js
Created Jul 19, 2018
Using a ReportingObserver to watch for deprecation warnings on page.
View reporting_observer.js
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Drop this in the DevTools console:
(new ReportingObserver((reports, observer) => {
console.warn('This page is using deprecated APIs or features:');
const deprecations = reports.map(report => {
@gaearon
gaearon / prepack-gentle-intro-1.md
Last active Apr 8, 2021
A Gentle Introduction to Prepack, Part 1
View prepack-gentle-intro-1.md

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
@ebidel
ebidel / smoothscroll.js
Last active Jan 17, 2019
Smooth scroll page
View smoothscroll.js
(function() {
const scroller = document.scrollingElement || document.body;
// Smooth scrolls to the bottom of the page.
window.smoothScrollPage = (y = scroller.scrollHeight) => {
scroller.style.scrollBehavior = 'smooth';
scroller.scrollTop = y;
scroller.style.scrollBehavior = '';
};
@gaearon
gaearon / connect.js
Last active Apr 13, 2021
connect.js explained
View connect.js
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@domenic
domenic / 0-usage.js
Last active Mar 19, 2019
Import module function (assuming <script type="module"> is implemented)
View 0-usage.js
// Dynamic module loading using runtime-composed strings, decisions, etc.
for (const m of ["cool", "awesome", "fun", "whee"]) {
if (Math.random() > 0.5) {
importModule(`/js/${m}.js`).then(
module => console.log("Module instance object for " + m, module),
e => console.error(e)
);
}
}
@staltz
staltz / migration-guide.md
Last active Mar 3, 2021
How to show migration guides in GitHub Markdown
View migration-guide.md

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  ```diff
  - foo
  + bar

Example:

@notwaldorf
notwaldorf / things.md
Created Sep 21, 2015
A note on duplicate property names
View things.md

The question was: "What's the best, if any, way to detect "conflicts" w/ CSS vars names between components?"

First, as a best-practice policy, on the elements team, we prefix custom properties with the element name, to make things clear: So paper-checkbox would have something like --paper-checkbox-checked-color etc.

Now, let's say that I have two identical elements, paper-checkbox and paper-checkbox-copy (in the sense that paper-checkbox-copy has all of paper-checkbox's custom variables, --paper-checkbox-checked-color and friends). If you style individual elements separately, even if the names are duplicate, the custom properties are scoped correctly. So in the example above, this will always do the right thing (because, remember: custom properties are scoped to their elements, and down their tree, they're not globally set)

paper-checkbox { 
  /* all paper-checkboxes instances always be blue */
  --paper-checkbox-unchecked-background-color: blue;
}
View angular-ios9-uiwebview.patch.js
/**
* ================== angular-ios9-uiwebview.patch.js v1.1.1 ==================
*
* This patch works around iOS9 UIWebView regression that causes infinite digest
* errors in Angular.
*
* The patch can be applied to Angular 1.2.0 1.4.5. Newer versions of Angular
* have the workaround baked in.
*
* To apply this patch load/bundle this file with your application and add a
@WebReflection
WebReflection / certificate.sh
Last active Jul 1, 2020
A basic Self Signed SSL Certificate utility
View certificate.sh
#!/usr/bin/env bash
# A basic Self Signed SSL Certificate utility
# by Andrea Giammarchi @WebReflection
# https://www.webreflection.co.uk/blog/2015/08/08/bringing-ssl-to-your-private-network
# # to make it executable and use it
# $ chmod +x certificate
# $ ./certificate # to read the how-to
@sebmarkbage
sebmarkbage / Enhance.js
Last active Apr 15, 2021
Higher-order Components
View Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {