Skip to content

Instantly share code, notes, and snippets.

Nicole Sullivan stubbornella

Block or report user

Report or block stubbornella

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@stubbornella
stubbornella / if-you-like-jquery-you-are-gonna-love-react.md
Last active May 26, 2018
If you like jQuery, you're gonna love React, and how to set it up on npm
View if-you-like-jquery-you-are-gonna-love-react.md

I bet you think I'm making that up, right? Here is the thing, they both solve the same problem, just in different ways:

DOM interactions are complicated, it would be great if we didn't have to worry about them.

That's it, that is all both libraries do. I'm exaggerating a little, but not too much! They aren't trying to solve every problem out there, both libraries are highly focused on the DOM. They leave other bells and whistles to adjacent libraries, following a "do one thing and do it well" philosopy.

jQuery solves the DOM complexity problem by giving you handy ways of accessing particular nodes, and little methods for adding events to those nodes once you find them.

$("#price"); // finds the price element
View bootstrap-tabs-in-react.md
<SimpleTabs defaultActiveKey={1}>
  <Tab eventKey={1} tab="Home">
    ...
  </Tab>
  <Tab eventKey={2} tab="Profile">
    ...
  </Tab>
</SimpleTabs>
View react-media-talk-examples.md

How do you make a Media component in React?

var Media = React.createClass({

});

We then need to export our component so it can be used outside this file.

View React Media Block docs.md

##Usage

First, require the component.

var Media = require('pivotal-ui-react.media').Media;

Next, in your jsx, use the component. The default media displays a media object (images, video, audio) to the left or right of a content block.

View tabs-react-interface.jsx
<Tabs>
<Tab heading="My first tab" >Content for first tab</Tab>
<Tab heading="My second tab" >Content for second tab</Tab>
</Tabs>
@stubbornella
stubbornella / media-object.jsx
Created Dec 18, 2014
Media Object from OOCSS and now Bootstrap written in React/jsx
View media-object.jsx
'use strict';
var React = require('react/addons');
var _ = require('lodash');
var setClass = React.addons.classSet;
var MediaObject = React.createClass({
render: function () {
var classes = setClass({
'media-left': this.props.horizontalAlignment === 'left',
@stubbornella
stubbornella / twitter-harassment.md
Created Nov 7, 2014
Twitter's obnoxious condescending response to harassment
View twitter-harassment.md

Hello,

We understand that you might come across content on Twitter that you dislike or you find offensive. However, Twitter is a global platform that lets us participate in broader conversations and connect with people from many corners of the world. Just like when we are interacting in a public space we may overhear conversations that are offensive, coming across inflammatory content on Twitter can be frustrating.

We've reviewed the content and while you may find it offensive, it is not in violation of our rules, so we will not be removing it from the platform. You can learn more about how to deal with abusive users here: https://support.twitter.com/articles/15794

If someone feels personally threatened, or if you believe the content you are reporting is prohibited in your local jurisdiction, please contact your local authorities with the information you provided to us. You can point local law enforcement to our Law Enforcement Guidelines here: https://support.twitter.com/articles/41949.

Thanks,

View jsbin..html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="text">text to be replaced</div>
View jsbin.EGusina.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1>Using onclick</h1>
View jsbin.akIZINi.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="text">text to be replaced</div>
<ul>
You can’t perform that action at this time.