Warning: contains strong languages XD
First of all, please let me say this, React is designed for us native developer!(because of the similar API, lifecycle things…).
Long long ago, when Facebook tries to use HTML5 technology to build the mobile version of Facebook, it turns out to be a failure, at that time, there are not so many choices of front-end modularization framework to choose from.
But no pains, no gains.
I guess Facebook learns from it, and I guess they actually learn a lot from the process. Since then Facebook spend a lot of energy on iOS.(like building the very famous Paper™ APP)
So my point is, if there’s gonna be one technology to rule the mobile & web platform, that’s gonna be build by Facebook XD.
D3 Overview & concept
lower lever API, but more control
Behaviors - reusable interaction behaviors
Core - selections, transitions, data, localization, colors, etc.
Geography - project spherical coordinates, latitude & longitude math
Geometry - utilities for 2D geometry, such as Voronoi diagrams and quadtrees
Layouts - derive secondary data for positioning elements
Scales - convert between data and visual encodings
SVG - utilities for creating Scalable Vector Graphics
Time - parse or format times, compute calendar intervals, etc.
The g element is a container used to group objects. Transformations applied to the g element are performed on all of its child elements. Attributes applied are inherited by child elements. In addition, it can be used to define complex objects that can later be referenced with the
Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.
D3 + React
Let React have complete control over the DOM even when using D3. This way we can benefit from Reacts Virtual DOM.
With this approach, React itself is responsible for generating the SVG markup. d3.js is used for its tremendous collection of utility functions, such as those that calculate the path value for various chart types.
First we make a selection object of all the svg circles in the visualisation (initially there will be none). Then we bind some data to the selection (our data array).
D3 keeps track of which data point is bound to which circle in the diagram. So initially we have two datapoints, but no circles; we can then use the .enter() method to get the datapoints which have “entered”. For those points, we say we would like a circle added to the diagram, centered on the x and y values of the datapoint, with an initial radius of 0 but transitioned over half a second to a radius of 5.
super cool example
- There’s a confusing idiom “scale”.
“Scales are functions that map from an input domain to an output range.”
- React files can actually be named like “*.react.js”. Then you can require it like this:
Hmmm… definitely cooler, not sure if it’s useful
- Paperclip™ is a great way for you to play around with d3, you just copy those html into the editor and see how things are going on. I don’t know how to explain it better, but you just fucking do it.
Let’s Make a Bar Chart http://bost.ocks.org/mike/bar/
D3 and React - the future of charting components?
Play with D3:
One repo to rule them all
Get them for free… Holy High(好厉害).
This one’s not for free… so if there are team coverage? XD
Tools Built with D3
When you want to use D3 without actually writing any D3 code, you can choose one of the many tools built on top of D3!
A library for working with large, multivariate datasets, written primarily by Mike Bostock. This is useful for trying to squeeze your “big data” into a relatively small web browser.
A D3 plug-in for visualizing time series data, also written by Mike Bostock. (One of my favorite demos.)
An online tool for data dashboards and widgets updated in real time, by Paul Jensen.
The “dc” is short for dimensional charting, as this library is optimized for exploring large, multidimensional datasets.
Reusable charts with D3. NVD3 offers lots of beautiful examples, with room for visual customizations without requiring as much code as D3 alone.
More reusable charts, with a range of chart types available. Polychart.js is free only for noncommercial use.
A toolkit for displaying time series data that is also very customizable.
A great tool for experimenting with live coding using D3, by Ian Johnson.
When a constructor creates an object, that object implicitly references the constructor’s prototype property for the purpose of resolving property references. The constructor’s prototype property can be referenced by the program expression constructor.prototype, and properties added to an object’s prototype are shared, through inheritance, by all objects sharing the prototype. Alternatively, a new object may be created with an explicitly specified prototype by using the Object.create built-in function.
More Object-Oriented than Objects
Functional programming avoids the problems associated with shared mutable state by avoiding mutable state. Actor programming, by contrast, retains mutable state but avoids sharing it.
Computer graphics is all about manipulating data—huge amounts of data. And doing it quickly.
To create a complete program, we need to embed our kernel in a host program that performs the following steps:
- Create a context within which the kernel will run together with a command queue.
- Compile the kernel.
- Create buffers for input and output data.
- Enqueue a command that executes the kernel once for each work-item.
- Retrieve the results.
“Café Allongé, also called Espresso Lungo, is a drink midway between an Espresso and Americano in strength. There are two different ways to make it. The first, and the one I prefer, is to add a small amount of hot water to a double or quadruple Espresso Ristretto. Like adding a splash of water to whiskey, the small dilution releases more of the complex flavours in the mouth.
For example, the Chinese app sometimes always don’t have an english name, so in the case of the user prefer English language, he can’t use siri to open the app.
The principle is: When you are in other language mode, play like a native.
Zoft is an online global organization which wanna make anything which is fun.
If you wish to build something FUN in your FREE TIME.
Introduce myself, I am
Here’s some of my ideas:
- Just For Fun
CV > zhengzhongzhao#gmail.com
Find the mistake
This is a classic example of the notorious “n+1” bug. The first line will retrieve all of the Post objects from the database, but then the very next line will make an additional request for each Post to retrieve the corresponding Comment objects. To make matters worse, this code is then making even more database requests in order to retrieve the Author of each Comment.
This can all be avoided by changing the first line in the method to:
posts = Post.includes(comments: [:author]).all
This tells ActiveRecord to retrieve the corresponding Comment and Author records from the database immediately after the initial request for all Posts, thereby reducing the number of database requests to just three.
Please note that the above answer is only one of a few ways that it is possible to avoid incurring an “n+1” penalty, and each alternative will have its own caveats and corner cases. The above answer was selected to be presented here since it requires the smallest change to the existing code and makes no assumptions regarding the reverse association of Comment to Post.
Incidentally, there’s another issue here (although not what we’re focused on in this question and answer); namely, erforming a query in Ruby that could instead be done in the database (and which would very likely be faster there!). A relatively complex query like this can instead be constructed in ActiveRecord pretty easily, thus turning a 3 database query operation (plus some Ruby code executing) into a single database query.
It’s dangerous to convert user supplied parameters to symbols, since Symbol objects in Ruby are not garbage collected. An attacker could send a series of requests with random keys that would be turned into symbols, quickly exhausting your server’s available memory and taking down your site.
There are two ways that this could be fixed. The first would be to use slice to eliminate values from the params hash that are not valid option keys. This would look something like:
An alternative, some would argue better, option would simply be to use String keys for your options. Unless you have an extremely large number of possible option keys, you won’t actually save that much memory by using Symbol keys instead.
CSRF stands for Cross-Site Request Forgery. This is a form of an attack where the attacker submits a form on your behalf to a different website, potentially causing damage or revealing sensitive information. Since browsers will automatically include cookies for a domain on a request, if you were recently logged in to the target site, the attacker’s request will appear to come from you as a logged-in user (as your session cookie will be sent with the POST request).
In order to protect against CSRF attacks, you can add protect_from_forgery to your ApplicationController. This will then cause Rails to require a CSRF token to be present before accepting any POST, PUT, or DELETE requests. The CSRF token is included as a hidden field in every form created using Rails’ form builders. It is also included as a header in GET requests so that other, non-form-based mechanisms for sending a POST can use it as well. Attackers are prevented from stealing the CSRF token by browsers’ “same origin” policy.
Recently I’ve been watching some “PHP, the good part”, here’s some thing i think good in it XD.
Integration with Web Pages
One of the greatest features of PHP is that it gives you the ability to generate HTML based on integration with a web server, be that Apache, IIS, or any other leading web server.
The next superglobal entity to discuss is $_GET. The $_GET value is created automatically with the existence of a query string within a URL, or if a form is submitted with the
It’s important to understand that the $_GET array is refreshed on each page call, so you have to pass it on to each page being called further down the call stack. It’s different than the session concept in this regard.
You can control the overall environment of superglobal arrays with the php.ini directive known as variables_order. The setting on my server is GPC. This means that the arrays are loaded and created in GET, POST, and COOKIE order, with the latter elements taking precedence over the former if they are similarly named. The “G” stands for GET, the “P” for POST, and the “C” is for cookie. If you remove one of the letters in GPC, save the .ini file and restart your server. The array rep- resented by that letter will not be created in the superglobal space on the web server.