Skip to content

Instantly share code, notes, and snippets.

View didoo's full-sized avatar

Cristiano Rastelli didoo

124 followers · 17 following
View GitHub Profile
@scmx
scmx / react-proptype-warnings-as-errors-with-sinon.markdown
Last active March 1, 2019 08:42
Make React PropType warnings throw errors with mocha.js, enzyme.js and sinon.js

Make React PropType warnings throw errors with enzyme.js + sinon.js + mocha.js

A simple stateless functional component that we want to test that it renders without propType warnings.

import React, { PropTypes } from 'react'

let VersionListItem = function ({ active, version }) {
  return (
@claus
claus / iOSViewport.md
Last active April 28, 2024 17:39

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

@paulsturgess
paulsturgess / Todo.test.js
Last active October 8, 2018 11:22
Testing a stateless component
import React from 'react';
import TestUtils from 'react/lib/ReactTestUtils';
import Todo from './Todo';
describe('Todo', () => {
let instance, li;
let Wrapper = React.createClass({
render: function() {
return this.props.children;
}
@threepointone
threepointone / infinite.js
Created December 20, 2016 08:44
infinite scrolling pattern with react fiber (featuring intersection observers)
// inifinite scrolling of content without extra wrappers
const { render, findDOMNode } = ReactDOMFiber
class App extends React.Component {
render() {
// wrap the root element with an Intersection Observer, exposing .observe for children
return <Intersection>
<div style={{ height: 200, overflow: 'auto' }}>
<Page offset={0} count={10} />
</div>
@threepointone
threepointone / glam-for-css-folks.md
Last active September 4, 2022 07:43
why css purists will love glam

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

@troch
troch / choosing-a-css-in-js-library.md
Last active October 18, 2020 17:52
Choosing a CSS in JS library

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

@piotrfonte
piotrfonte / lines.js
Created September 18, 2017 11:30
Fluid-type typography and spacing (border, margin, padding) for `styled-components`.
export const lines = {
h: '1.8em',
l: '1.6em',
m: '1.4em',
s: '1.2em',
x: '1',
n: '0',
}
export const _line = lines;
@busypeoples
busypeoples / FlowReactTutorial.js
Last active July 17, 2023 10:12
Flow Fundamentals For ReactJS Developers
//
// MIT License
//
// Copyright (c) 2018 Ali Sharif
//
// 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
@stevenkaspar
stevenkaspar / CustomIframe.jsx
Created October 27, 2017 19:38
React Iframe for Writing to contentDocument
/**
* This has a specific use case for writing to the contentDocument allowing for a separated scope
*
* There are probably other ways to do this with ShadowDom but this works well for my purposes
*
* USAGE:
*
* <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} />
*
*/
@oliverturner
oliverturner / extensions.txt
Created June 9, 2018 18:20
VSCode extensions for general web dev
Orta.vscode-jest
Shan.code-settings-sync
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
codezombiech.gitignore
dbaeumer.vscode-eslint
esbenp.prettier-vscode
jasonlhy.vscode-browser-sync
jpoissonnier.vscode-styled-components
kumar-harsh.graphql-for-vscode