Michel Weststrate mweststrate

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:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

Lightning talk proposal for the Reactive 2016 Conference. Here's a handy retweet link

If you want to hear this talk, or if you just want to support me, please star ⭐ the Gist!

When I started writing React apps, I approached components as if they were “just the V in MVC!” Seriously, we’ve all heard it.

I have found this to be an inferior way of thinking about and building React applications. It makes people treat React as a drop-in replacement for something like a Backbone or Angular 1.x View. In other words, people treat it like a glorified template system with partials and don’t harness the power of its functional paradigms.

This talk is about a functional way to write and conceptualize entire React applications.

Proposal for this year's Reactive lightning talks @ReactiveConf - If you want to see my talk, star this gist please :-) [Reactive Blogpost][reactive-conference-blogpost]

A life on a Commandline

As a JavaScript developer, could you imagine using something else than Atom, Sublime or other IDE-like text-editors? During their daily work, people wrangle a lot with different applications, editors, windows, browsers and loose a lot of time because of their tools getting in their way.

       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$..........................................$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$........................... ... .........I$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$........................................$$$$$$$$$$$$$$$$$$$$$
       $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$....,$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$....I$$$$$$$$$$$$$$$$$$$$$

Please star ⭐️ the gist to help! This is a proposal for a ⚡️ talk at Reactive Conference.

Styling Components in React Toolbox 2

I wrote react-toolbox and presented it almost a year ago in lighning talk at Reactive Conf 2015 in Bratislava. At first it was just a proof of concept of a component library styled with CSS Modules and SASS. Now the project has grown quite a bit, and during this year there has been tons of changes and lessons learned.

Theming and customization is one of the most difficult and interesting problems to solve. For the first version we needed a custom Webpack loader to generate themes and doing simple style overrides was very painful. Today I'm working on a new playground that will allow you try CSS Modules live, and to create React Toolbox themes on the f

#Conference Reactive 2015 ( https://reactive2015.com/ )

#Talk Title: React + MALEVICH

#Speaker: Oleksii Okhrymenko - Lead JavaScript developer

#Summary:

Note: This is a submission for a Reactive2015 lightning talk. If you'd like to see a lightning talk about this (or read a detailed blog post if you are not going for the conference), vote for it by starring this gist! Thanks a lot!

Advanced React.js Performance

Performance is one of the reasons why React.js is so popular for building complex, highly interactive web applications. It became the go-to library for developers who don’t like to make compromises for technical reasons when building awesome user experiences. However even with React.js it still can be easy to hit it’s performance limits.

In this lightning talk Daniel will go beyond the basics of shouldComponentUpdate and immutable data structures and will discuss how to correctly instrument, measure and optimize performance in complex React apps. He will help you understand the overhead of different parts of the React component lifecycle, how some of it’

In my proposed lightning talk for the Reactive Conference, I'll create Conway's Game of Life in ClojureScript, and I'll do it in five minutes. I'll use an interactive programming workflow enabled by Figwheel. Each piece will be added into the running application without reloading the page.

If you want to see a little cellular lifeform spawn out of nothing into an running web browser window, I'd appreciate it if you starred this Gist!

Cheers,

(@teropa)

	var document = global.document = createDocument();
	export default document;

	function createDocument() {
	const NODE_TYPES = {
	ELEMENT_NODE: 1,
	ATTRIBUTE_NODE: 2,
	TEXT_NODE: 3,
	CDATA_SECTION_NODE: 4,
	ENTITY_REFERENCE_NODE: 5,

	(function() {
	function mrFactory(mobservable, vidom) {
	if (!mobservable)
	throw new Error("mobservable-vidom requires the Mobservable package.")
	if (!vidom)
	throw new Error("mobservable-vidom requires vidom to be available");

	var isTracking = false;

	// WeakMap<Node, Object>;