Skip to content

Instantly share code, notes, and snippets.

View stubbornella's full-sized avatar
😀
Building a browser

Nicole Sullivan stubbornella

😀
Building a browser
2.3k followers · 3 following
View GitHub Profile
@stubbornella
stubbornella / if-you-like-jquery-you-are-gonna-love-react.md
Last active May 26, 2018 06:12
If you like jQuery, you're gonna love React, and how to set it up on npm

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
@stubbornella
stubbornella / bootstrap-tabs-in-react.md
Last active August 29, 2015 14:22 
<SimpleTabs defaultActiveKey={1}>
  <Tab eventKey={1} tab="Home">
    ...
  </Tab>
  <Tab eventKey={2} tab="Profile">
    ...
  </Tab>
</SimpleTabs>
@stubbornella
stubbornella / react-media-talk-examples.md
Last active August 21, 2017 20:44

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.




  


  




    


          
    

      

        
        

          

              @stubbornella
          

          

            
                stubbornella
                / React Media Block docs.md
            
            

              Last active
              May 26, 2018 06:11
            

          

        

      

        

  

      

    
##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.



  


  




    


          
    

      

        
        

          

              @stubbornella
          

          

            
                stubbornella
                / tabs-react-interface.jsx
            
            

              Created
              January 6, 2015 19:59
            

              
                tabs jsx interface react
              
          

        

      

        

  

    
    


        



  


  

        

          
          <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
              December 18, 2014 15:29
            

              
                Media Object from OOCSS and now Bootstrap written in React/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
              November 7, 2014 18:19
            

              
                Twitter's obnoxious condescending response to harassment
              
          

        

      

        

  

      

    
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,



  


  




    


          
    

      

        
        

          

              @stubbornella
          

          

            
                stubbornella
                / jsbin..html
            
            

              Created
              October 14, 2013 03:06
            

          

        

      

        

  

    
    


        



  


  

        

          
          <!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>
        

  





    


  




    


          
    

      

        
        

          

              @stubbornella
          

          

            
                stubbornella
                / jsbin.EGusina.html
            
            

              Created
              October 14, 2013 00:21
            

          

        

      

        

  

    
    


        



  


  

        

          
          <!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>
        

  





    


  




    


          
    

      

        
        

          

              @stubbornella
          

          

            
                stubbornella
                / jsbin.akIZINi.html
            
            

              Created
              October 13, 2013 23:27
            

          

        

      

        

  

    
    


        



  


  

        

          
          <!DOCTYPE html>
        

        

          
          <html>
        

        

          
          <head>
        

        

          
          <meta charset=utf-8 />
        

        

          
          <title>JS Bin</title>
        

        

          
            
        

        

          
          </head>
        

        

          
          <body>
        

        

          
            <div class="text">text to be replaced</div>
        

        

          
            <ul>