According to wikipedia, a closure is:
a technique for implementing lexically scoped name binding in languages with first-class functions.
I don't think this mouthful definition is comprehensible to anybody learning the language. So I decide to break it down and explain it in plain language.
Lexical scope = static scope, it refers to
An example to illustrate this concept:
We can determine where foo and bar can be accessed within the program by looking at the code. Thus, the scopes of the variables are determined statically.
To contrast it with dynamic scope:
The value of x is not determined until runtime. Thus,
console.log(x) has no idea what will be printed out. Also, x is neither a globally variable nor is defined within the
log function. But
log has access to it.
So now we understand what the fancy term lexical scope means, let's take a look at the definition of first-class function
A language supports:
- passing functions as arguments to other functions
- returning them as the values from other functions
- assigning them to variables
- storing them in data structures.
This one is easy to understand:
According to this explanation,
Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.
Highlights of this example:
inner()has access to variable x, which is defined outside of it
var test = outer()is equivalent of
var test = inner()but test has no access to
- The value of
xis stored in memory so that any subsequent call of
test()will print 5
So to summarize what a closure is:
- A function f that is nested within another function
- f accesses variables defined in the outer function
During the research of closure, another term comes up often:
A function that does at least one of the following:
- takes one or more functions as an input
- outputs a function
I was given a task to randomly generate usernames and passwords for 80 users in Django. Here is how I did it:
Thanks to this excellent StackOverflow post, generating random characters become very easy:
I want to use lowercase characters for usernames and digits only for passwords. Thus, the optional parameter numbers_only is used to specific which format I want.
Then, open up the Django shell:
and Enter the following to the interactive shell to generate a user:
I saved the generate() inside utils.py which is located inside a project named note. Modify
from note import utils to suit your needs.
Use the --log-file=- option to send error messages to console:
After debugging is complete, remove this option and output the error message to a log file instead.
To install it on Mac:
2) Install the dependencies via pip:
3) to run:
Here is a screenshot of it running:
The default npm list command not only list the packages installed locally but also the packages they depend on. To most users, showing packages dependency is not necessary, as most of the time, we only want to know what is installed. To fix this, the --depth=0 option can be used:
So we get the list on the left instead of on the right:
However, this is not enough. Because if you have installed a package either
- globally or
- locally but without adding it to the package.json file
You are likely to see these errors:
To ignore these errors, a solution provided by this blog works:
To create a proper shorcut, open your .bash_profile (for Mac):
Reload the .bash_profile file and that's it!
To reference globally installed NPM packages (i.e. packages installed with the "-g" option, like
npm install -g webpack), a NODE_PATH has to be set in your environment. I used NVM to manage node.js and here is my setting (for Mac):
Now, you can reference these packages from anywhere.
If you use other OS, check out this post on StackOverflow.
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.