Ruby w/ Sinatra: what is the equivalent of a .js.erb from rails?
Color Hex - ColorHexa.com
Yeoman - Modern workflows for modern webapps
Building Single Page Web Apps with Sinatra: Part 1
Have you ever wanted to learn how to build a single page app with Sinatra and Knockout.js? Well, today is the day you learn! In this first section of a two-part series, we'll review the process fo building a single page to-do application where users can view their tasks, sort them, mark them as complete, delete them, search through them, and add new tasks. According to their website: Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort. Sinatra allows you to do things, like: This is a route that handles GET requests for "/task/new" and renders an erb form named form.erb. Knockout is a Model-View-ViewModel (MVVM) JavaScript framework that allows you to keep your models in special "observable" objects. Here is what you'll be building: We'll get started by defining our model and then our CRUD actions in Sinatra. Let's add a task model to the models.rb file: Next, let's write our Sinatra JSON server. The before helper function runs before every route match.
JavaScript
Help What is repl.it? It is an online environment for interactively exploring programming languages. The name comes from the read-eval-print loop, the interactive toplevel used by languages like Lisp and Python. How do I start? Once you have selected a language, start by typing an expression into the console on the right side of the screen and pressing Enter. Can I use variables or other state? Yes! Can I save my session? Yes! Is repl.it open source? Can I use repl.it on my phone or tablet? Yes! How does repl.it work? All code processed by repl.it runs entirely on your computer, with no server-side evaluation. Enter Evaluate the entered command. Shift+Enter Continue to the next line. Tab Indent. Shift+Tab Unindent. Up Previous history item. Down Next history item. Ctrl+Up Move to the line above the cursor. Ctrl+Down Move to the line below the cursor. Ctrl+E Move to the end of the current line. Ctrl+A Move to the start of the current line. Ctrl+K Clears the console. Ctrl+Z Cancel current prompt. Ctrl+L Ctrl+G Ctrl+H
yeoman/yo
AJAX With Sinatra
AJAX is a method to make requests to a web application without reloading the entire page that made the request. For example, if you were to click on an email message in a web mail application, the entire page doesn't reload. The email message is loaded and displayed in a div, but the rest of the page stays as it was. Using AJAX and a little bit of jQuery (a popular Javascript library that makes a lot of things here easy) you can make AJAX requests to your Sinatra web application very easily. What is AJAX? AJAX stand for Asynchronous Javascript and XML. On the client side, things can be quite a bit different. Though the name implies we'll be using XML, this is just a vestige of the technique's origin, and we'll be using JSON. What is jQuery? jQuery is a Javascript library that allows very simple manipulation of the DOM tree and an easy to use event-driven framework. jQuery is an industry standard Javascript library. Making AJAX Requests Right now this doesn't do much of anything.
rwaldron/idiomatic.js
Building Single Page Web Apps With Sinatra: Part 2
In the first part of this mini-series, we created the basic structure of a to-do application using a Sinatra JSON interface to a SQLite database, and a Knockout-powered front-end that allows us to add tasks to our database. In this final part, we'll cover some slightly more advanced functionality in Knockout, including sorting, searching, updating, and deleting. Let's start where we left off; here is the relevant portion of our index.erb file. Sorting is a common task used in many applications. Knockout provides a sort function for observable arrays First, we define a sortedBy array as a property of our view model. Next is the sort() function. Knockout provides a sort function for observable arrays. Note: the properties of the array elements must be called rather than simply accessed; these properties are actually functions that return the value of the property if called without any arguments. Next, we define the bindings on the table headers in our view. This tells us two things:
NinjaScript and Mizugumo 2011-02-05
Rapid Prototyping with Sinatra
If you’re a web designer or developer, you’re well acquainted with prototyping. From raw wireframing to creating interfaces in Photoshop, designers map out how sites will work before they create them. Article Continues Below Over the past few years, the protoyping process has changed significantly. With browser makers generally agreeing on web standards and the rise of tools such as Firebug and WebKit’s web inspector, we can sometimes skip Photoshop altogether and go straight to the browser. Plus, JavaScript frameworks like jQuery let us play with browser events with only a few lines of code. This article introduces Sinatra, a so-called “micro” web framework that helps you create real (albeit simple) web apps extremely fast, allowing you to prototype flows and behaviors that you may want to integrate into a final product. Blurring “front end” and “back end” and the threshhold of “appness”#blurring_8220front_end8221_and_8220back_end8221_and_the_threshhold_of_8220appness8221
JavaScript Style Guide | Contribute to jQuery
Use JSHint to detect errors and potential problems. Every jQuery project has a Grunt task for linting all JavaScript files: grunt jshint. The options for JSHint are stored in a .jshintrc file; many repositories will have multiple .jshintrc files based on the type of code in each directory. Each .jshintrc file follows a specific format. The following common options must be used in all projects: If the project supports browsers which do not implement ES5, then the es3 option must be included with the repo-specific options. In general, the jQuery style guide encourages liberal spacing for improved human readability. Indentation with tabs.No whitespace at the end of line or on blank lines.Lines should be no longer than 80 characters, and must not exceed 100 (counting tabs as 4 spaces). Object and array expressions can be on one line if they are short (remember the line length limits). When a statement is too long to fit on one line, line breaks must occur after an operator. Use them.
addyosmani/essential-js-design-patterns
