Use Jquery to get DOM elements
React.js injects code into HTML block like this:
To use Jquery to accomplish the samething:
$("#content") along is not enough, because it returns a jquery object instead of a DOM object.
Why does React.js render function's return statement is surrounded by a parenthese?
When the following line is entered:
The output is not an error, but instead str1 is assigned to variable test. This is because a semicolon has been inserted by js automatically like this:
When working with React.js, this is what a typical render() looks like:
To make sure the entire div block is returned as a whole instead of just the first line, the parenthese are needed.
The following ST3 plugins are need for React development:
- babel - for jsx syntax highlighting
- sublime-jshint - for linting your js code
- sublime-jsxhint - for linting your jsx code
This one is very straight forward, just find babel in package control and install it. To use the Babel's JSX syntax highlight whenever a .jsx file is opened:
- open up a .jsx file in ST3
I have written a blog about Linting react code here. Follow the instructions in that blog, it will give you real time linting as you code in sublime.
Install React Chrome plugin
Install this plugin if you use Chrome for development, go to this link and install.
Once installed, open up Extensions find the React plugin and check the Allow access to file URLS. This is important if you want to test React files locally.
If you have a webpage using React opened, such as this page, an extra tab named React should appear in your Developer Tools
Convert JSX files to JS files
React uses a syntax called JSX. To use it in your webpage, you have to convert it to regular JS format first. There are two ways to do it:
- Use the 'JSXTransformer.js' (which comes with React.js download) to do the conversion
- Use the 'react-tools' npm package to perform the conversion
Which one should you choose?
If you want to write your JSX code inside the HTML page, then use JSXTransformer.js like this:
This is good for debugging but not good for production. Because compiling from .jsx to .js takes time, you want to precompile the .jsx files to regular .js files before serving them to your customers.
So, how to compile .jsx files?
Install the 'react-tools' package via npm:
Once finished, go into your dev directory and use this command:
Assuming this is the structure of your dev directory
This command means watching all .js files inside the src folder and compile them if modified to regular .js files and save them to the build folder.
WARNING: This command works only if you saved the JSX files with .js extension, if you saved your JSX files with the .jsx extension, then you need to use this command:
If the command has been executed successfully, you should see a message like this:
You can import the compiled js files like this (without the need of JSXTransformer.js):
XMLHttpRequest cannot load
Just when you thought you can import a .jsx file like regular .js file locally like this:
You will see an error in Chrome's console: XMLHttpRequest cannot load, this is because the JSXTransformer.js loads jsx files via XHR which is prohibited for local files.
There are a few ways to overcome this problem which is explained in the StackOverflow link above, but the easiest way to deal with it is to precompile your .jsx files into regular .js files and import them. (which has been explained in the previous section)
A very good React tutorial link
This is about it to kickstart your React project using ST3.
There are a few services that enable you to create responsive HTML email if you don't know how (with a price tag):
If you know how to write HTML & CSS, you might think writing a responsive HTML email would be simple. WRONG !!! There is reason why such services exists. How to make sure your email look the same on ALL email clients is the first & most difficult problem you will run into. Have a look at this test page provided by Email on Acid
I attempted to write a simple responsive HTML email with the following feature:
- Have an banner image on the top
- The rest of the body is just text
I found this tutorial and followed it, the first thing I noticed is that:
Everything should be inside a table tag
Because mail clients like outlook would ignore a few important CSS properties: background-image, float, margin and display.reference here
CSS Style in the header section will be ignored
You have to use inline style for all of the elements. MailChimp is really nice because they provides a tool to convert all styles inside the header section to inline style.
I don't know how to reference image files
You can add the image as attachment but I have no idea how to get a reference id to that attachment. So I had to upload the image to a web server (or to your dropbox and make it public).
Outlook makes my image unresponsive
Depending on how you send the email, outlook may add the width and height of the image file to the image tag's style. This makes the image unresponsive. To overcome this problem, do this:
Then, in your body tag:
Once the fix is applied, Outlook will not ignore the style in the head section anymore.
Validate your HTML using W3C's validator
How to send HTML mail using Mac's Mail app?
- Open your HTML file locally in Safari
- Press 'command + i' (now the Mail app should pop up with the HTML content in it)
- Send it
DO NOT use 'command + a' to select the entire HTML page and copy and paste it into the Mail app. This works, but during this process, certain css attribute will be changed and you are likely to lose the responsiveness of your site!
This is only the beginning of the headaches. After you overcome the compatibility issure, you have to think about spam. Will your mass email pass the spam filter is another tricky topic.
I can see why you may want to pay for those email services now.
When you have large number of models, it is eaiser to understand their relationships by looking at a graph, Django extensions has a handy command to convert these relationships into an image file:
- Install Django extension by:
2. Enable Django extensions in your settings.py:
3. Install graph packages that Django extensions relies on for drawing:
4. Use this command to draw:
For more drawing options, please refer to the offical doc.
To writing Markdown in Sublime Text 3, two plugins are needed to:
- Enable Markdown syntax highlighting
- Convert Markdown document to HTML and preview it in a web browser
To accomplish these, install these two plugins:
Markdown Editing: This plugin enables syntax highlighting for standard Markdown, Github Flavoured Markdown(GFM) and MultiMarkdown
Markdown Preview: as the name suggests, it converts your MD file to HTML and opens it in your system default browser
LiveReload(optional): This is a standalone plugin (i.e. has nothing to do with Sublime Text 3) that automatically refreshes a webpage if its source (HTML,CSS,JS, etc.) has changed. With this plugin, you don't have to click on refresh or F5 everytime you make changes in the Markdown document.
How to use these plugins:
Markdown Editing: once installed, open a Markdown document, set the syntax to either Markdown, GFM, or MultiMarkdown by either click at the bottom right corner and select or use command + shift + p > Set Syntax: Markdown
Markdown Preview: once installed, open a Markdown document, press ** Command + Shift + p ** > Preview in browser > select the markdown option (You will see two options presented here. GitHub or Mardown. The github option means to use Github's online API for parsing the MD file, this can take sometime due to your connection speed. It also has a 60 calls/day limitaion. But the upside is you get a GFM with syntax highlighting and EMOJI support for free)
If selecting parser becomes anonying everytime you preview a MD file, you can always set a hotkey in your Keybindings - User file:
A "better" alternative: Github has released a text editor named Atom. It looks and works almost exactly like Sublime Text (most of the hotkeys are the same too). The best part is that it is FREE.
The reason I mentioned it is because Atom offers default Markdown support. It can open a split window with your MD file on the left and a live HTML preview on the right all in the text editor. There is no need to install any plugins or opening the web browser.
To following up on my previous post on the essential settings for Sublime Text 3, I would like to layout a few non-essential but useful settings:
Change cursor style
Set the caret_style property to change cursor style:
Other caret styles can be used:
- smooth (this is the default)
- blink (I cannot tell the difference between this and smooth)
- wide (the cursor width is wider and it does not blink)
- solid (the cursor does not blink and stays "solid")
- phase (fade in / fase out effect, very subtle)
Make cursor wider
If you just want the cursor to be wider but still blinks, use this
To display a vertial ruler:
You can word wrap at specific character count:
Highlight the line where cursor is at
Save all files when tab out to another Window
When you alt+tab to another window, saves all the files opened in Sublime:
Turn on spell checker
Visualize all whitespace characters
Available options are:
Antialiasing Font for Retina Display
Try this option if you are on a retina display:
Always show code folding icon
The folding icon is only shown on hover by default, you can change it to always appear:
A handy website for generating setting file
Sublime Text is great, but a few settings should be enabled as default to make the experience even better. Open your user setting file by pressing command + , on Mac or ctrl + , on windows. Or go to Preferences -> Settings - User:
TL;DR: just copy and paste the following chunk into your user setting file:
and the following to Preferences -> Key Bindings - User:
Got 5 mintues to read?
Show current location on minimap
By default, the minimap does not highlight your current location. Use this setting to turn it on:
Convert tabs to spaces
It is import to convert tabs to white spaces when coding in Python, Ruby, YAML etc. To do that:
Indentation by 4 spaces or 2 spaces depend on the language, it is better off to set the tab_size property separately for different file types. For instance, if I code in Python, I want the tab size to be 4 spaces. If I code in Ruby, I want it to be 2. To do this,
- Open a new document and click the bottom right corner (which says Plain Text) and set the language type to Python for instance
- Go to Preferences -> Settings - More -> Syntax Specific - User
- A file named ** Python.sublime-settings ** should be opened
Add the following lines:
Enable word wrap
Find highlighted text
When you have a phrase highlighted and press command + f to look it up in the document, the highlighted word is not automatically copy and pasted to the Find dialog box. This can be fixed by:
Scroll past the end of the document
It is sometimes awkward to look at lines at the bottom of the screen. You can actually scroll the windows pass the last line of the document:
Highlight indentation level
When writing in a language that requires multiple levels of indentations (like Python), highlighting the current indentation the cursor is in makes finding yourself within the nested code structure easier:
You can find a screenshot of this on Wes Bos' blog.
Adjust line height to increase readability
The default line height is too narrow for the eyes. Change it to a number that looks more comfortable:
Highlight tabs with unsaved changes
Ensure newline at end of file on save
UNIX/Linux convention is to have a newline at the end of the file. When collaboration with people using different OS, this is important:
You may attempt to set this as well:
But this can be hazardous if you write in Markdown. Because two trailing white spaces in Markdown means a newline character. A workaround proposed by this blog is to set the setting to True in the user setting file and set it to false in the Mardown syntax file.
Make folder name bold in the sidebar
Paste code without having to fix indentation
This is definitely an annoying issue that everybody encounters all the time. When you copy and paste a block of indented code, the indentation on certain lines of the copied code is guaranteed to be messed up.
Sublime Text acutally has an Paste and Indent option which fix this issue but it is bind to command+shift+v instead of command+v. To fix this, Open Preferences -> Key Bindings - User and paste the following lines:
Run the following command to copy the Packages and Installed Packages folder to your dropbox.
Then, on a different computer, remove its Packages and Installed Packages folder and make a symbolic link to the copies in the Dropbox folder.
After updating pip using pip install -U pip,
pip can no longer be found:
So pip is definintely in /usr/local/bin/pip but it is been cached as in /usr/bin/pip, thanks to the Stackoverflow question, the solution is very simple:
When the cache is clear, pip is working again.
Linters are used to highlight syntax and style errors in your source code. It is very useful to have when writing python, js, css, YAML, etc.
To enable linting in Sublime text 3, a few things need to be installed to get it working.
1) Install Sublime Linter first. This is a framework rather than an actual linter that can inspect your code. When we install other linters, they will depend on this framework. Thus, it is important to install this 'mother base' first.
2) Install pep8 and pyflake. These python libraries will be used by the linters installed in the next step. Open up a console window, and install them by:
NOTE: make sure you are not installing these packages while using virtualenv. This is the mistake that I made. These pacakges need to be available system wide.
- open up package control, cmd+shift+p on Mac OS X, ctrl+shift+p on Linux/Windows
- type 'install' and select 'Package Control: Install Packages'
- type 'pep8' and find 'SublimeLinter-pep8'
- type 'pyflakes' and find 'SublimeLinter-pyflakes'
4) After everything has been installed, restart sublime text 3
5) Now you should see error highlights in the gutter and around the code. To set when linting should be active, right click anywhere in Sublime Text 3 and select 'SublimeLinter' > 'Lint Mode'
6) It is very likely that pep8 will point out a few styling errors. It is anonying to fix them by hand. We can use another plugin to autoformat python code for us. Install Python PEP8 Autoformat via package control.
After this is installed, press 'ctrl + shift + r' to perform auto format.
7) pep8 linter is likely to complain about using 4 spaces instead of tabs when writing Python code. You can change this in Sublime's setting File. Go to 'Sublime Text > Preferences > Settings - User', add the following lines:
Now, when the tab key is pressed, 4 spaces are inserted instead.