Skip to content

Instantly share code, notes, and snippets.

View alekseykulikov's full-sized avatar
🚄
Making treo.sh

Aleksey Kulikov alekseykulikov

🚄
Making treo.sh
View GitHub Profile
@neonto
neonto / ReactStudio-Reactconf.md
Last active March 19, 2024 22:53
React Studio - a GUI tool built specifically for React

--> Star this gist if you want to see it on the Reactive 2016 conference <--

Writing React.js is fun... But being able to draw React components, design responsive layouts and create entire app flows visually can be even more fun! (Especially for those non-coder members of your team who think ECMAScript 6 is a skin disease. They should see the light of React too.)

In this lightning talk, we'll give you a world premiere sneak peek at React Studio (www.reactstudio.com), a GUI tool built specifically for React. We'll explain how React's functional design makes it a great fit for visual tools. Also we will show how React Studio's plugin approach makes it a really powerful meta-programming system. Want to switch your app from Redux to Alt.js or vice versa? Just swap the state plugin and export again! That's just one of the joys of using a visual system for your Reactified visual design.

https://reactiveconf.com

@alekseykulikov
alekseykulikov / index.md
Last active April 14, 2024 00:32
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@matthewmueller
matthewmueller / index.html
Last active January 11, 2018 09:41
HTML Starter Template for rock-solid Web Apps
<!--
What?
HTML Starter Template for rock-solid Web Apps
Where?
Get the latest template here: https://gist.github.com/matthewmueller/cb33e2c5f6834511cd45f17b59271052
@nikgraf
nikgraf / reactive-2016.md
Last active August 5, 2021 15:31
Proposal for lightning talk at Reactive Conf 2016

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

Draft JS Plugins Logo

@stesie
stesie / index.html
Created April 1, 2016 22:28
AWS IoT-based serverless JS-Webapp Pub/Sub demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AWS IoT Pub/Sub Demo</title>
</head>
<body>
<h1>AWS IoT Pub/Sub Demo</h1>
<form>
<button type="button" id="connect">connect!</button>

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

@bcoe
bcoe / npm-top.md
Last active March 23, 2024 20:02
npm-top.md

npm Users By Downloads (git.io/npm-top)


npm users sorted by the monthly downloads of their modules, for the range May 6, 2018 until Jun 6, 2018.

Metrics are calculated using top-npm-users.

# User Downloads
@marcanuy
marcanuy / gist:06cb00bc36033cd12875
Created July 11, 2015 13:35
The 5,000 Most Frequently Used Domain Name Prefixes and Suffixes
1. my+ 1001. se+ 2001. thedaily+ 3001. empire+ 4001. herb+
2. +online 1002. test+ 2002. giant+ 3002. +cook 4002. +teen
3. the+ 1003. fish+ 2003. survey+ 3003. +deluxe 4003. affordable+
4. +web 1004. hk+ 2004. +conference 3004. +crunch 4004. proto+
5. +media 1005. florida+ 2005. twit+ 3005. michigan+ 4005. +ity
6. web+ 1006. fine+ 2006. pick+ 3006. cars+ 4006. myhome+
7. +world 1007. loan+ 2007. +dvd 3007. +forest 4007. plastic+
8. +net 1008. page+ 2008. cinema+ 3008. yacht+ 4008. +kc
9. go+ 1009. fox+ 2009. desi+ 3009. +wallet 4009. +foot
10. +group 1010. +gift 2010. act+ 3010. +contest 4010. +sup
@pmeenan
pmeenan / gist:7465158c6439db066a53
Created May 20, 2015 12:45
RUM Speed Index Custom Metric
[RUMSpeedIndex]
var RUMSpeedIndex = function(win) {
win = win || window;
var doc = win.document;
/****************************************************************************
Support Routines
****************************************************************************/
// Get the rect for the visible portion of the provided DOM element
var GetElementViewportRect = function(el) {
@rauchg
rauchg / effective-es6.md
Last active July 11, 2023 09:38
Writing ES6 today, effectively.

Effective transpiling of ES6

After publishing my article on ECMAScript 6, some have reached out to ask how I exactly I make it all work.

I refrained from including these details on the original post because they're subject to immiment obsoletion. These tools are changing and evolving quickly, and some of these instructions are likely to become outdated in the coming months or even weeks.

The main tool

When evaluating the available transpilers, I decided to use 6to5, which has recently been renamed to Babel. I chose it based on: