Skip to content

Instantly share code, notes, and snippets.

View ethan-deng's full-sized avatar

Ethan ethan-deng

1 follower · 0 following
View GitHub Profile
@ethan-deng
ethan-deng / VS2013andJS.md
Last active August 29, 2015 14:15

JavaScript Intellisense (Code Auto Complete) in Visual Studio 2013

How to set up VS2013 to work with NPM + Browserify

After giving WebStorm 9 a try for a few weeks for client side JS development, WebStorm 9 completely stop responding to user interaction or extremely slow after startup. This force us to go back to the good old boring tool VS :-(.

It seems how to set up JavaScript intellisense such as jQuery 2.0 intellisense for VS 2013 is not well documented at MSDN. The new way to set it up has been blogged at The story behind _references.js.

Here are some missing details and considerations about the setup when use it together with NPM + Browserify.

@ethan-deng
ethan-deng / LetJsFly.md
Last active August 29, 2015 14:15
Let JS code fly in Visual Studio

Let JS code fly in Visual Studio

Here is a few things to check out to let your JS code fly in Visual Studio.

  1. Check available code snippets at "Tools" -> "Code Snippets Manager ..."
  2. Install jQuery Code Snippets from "Tools" -> "Extensions and Updates" -> Search
  3. Install Brace Completer" from "Tools -> "Extensions and Updates" -> Search
  4. Learn the OOTB JS snippets.

This is relatively straight forward. For example to create a funtion, the shortcut is just "function" + Tab. To create a HTML ``````, just type div + Tab.

@ethan-deng
ethan-deng / ChromeDebug.md
Last active November 4, 2015 07:47
@ethan-deng
ethan-deng / Browserify.md
Last active November 4, 2015 07:47
@ethan-deng
ethan-deng / EventHandlerAsync.md
Last active November 4, 2015 07:46

Add Event Handler to Aysnc Loaded UI Component without Wait

Usually when you want to add a event handler to a dynamically loaded UI compoent is to wait for the UI is generated and then attached the event handler. If this is the only way to do it, and if you are writing a shared library, you have to provide a "update"/"refresh" function to run to attach the event handlers in the "wait" function.

$.when($.ajax(url)).done(function(result){
  $('<div>').appendTo(myDoc).click(function(){
    ......
  });
});
@ethan-deng
ethan-deng / ReactAttr.md
Last active August 29, 2015 14:16
React Custom HTML Attributes must be data-xyz and all lowercase

##React Custom HTML Attributes must be data-xyz and all lowercase

React Document:

Custom HTML Attributes

If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with data-.

Beside this the attribute name must all lowercase




  


  




    


          
    

      

        
        

          

              @ethan-deng
          

          

            
                ethan-deng
                / React_Props_State.md
            
            

              Last active
              November 4, 2015 07:46
            

          

        

      

        

  

      

    
React Props, State and Data Flow


In React always treat component props and state as immutable. props are owned by parent component and flow one-way from parent to child. State is private to the current component and can only be changed by setState. When there is need to flow data from child to parent, use the event handler.


    

  1. Don't try to access children component's state using refs.
    2. 



For example (bad code)


this.refs.myChildComp.state



  


  




    


          
    

      

        
        

          

              @ethan-deng
          

          

            
                ethan-deng
                / ReactDesign.md
            
            

              Last active
              August 29, 2015 14:17
            

              
                React Design Partten
              
          

        

      

        

  

      

    
React Design Partten


    

  • Parent Component (Stateful)
    • 

  • Define state and render child based on the state

      

    • Child Component (Stateless)
      • 

    • Get props from parent and render
      • 

    • Trigger event handler in parent
      • 

    

    • 

  • Parent event handler set state and re-render child
    • 




  


  




    


          
    

      

        
        

          

              @ethan-deng
          

          

            
                ethan-deng
                / sublime3.md
            
            

              Last active
              August 29, 2015 14:17
            

              
                Set up Sublime 3
              
          

        

      

        

  

      

    
  


  




    


          
    

      

        
        

          

              @ethan-deng
          

          

            
                ethan-deng
                / IDE.md
            
            

              Last active
              October 13, 2022 15:06
            

              
                Visual Studio, WebStorm, Sublime Common and Differences