How to Put SVG Graphics on Your Web Pages - Adding SVG to HTML SVG or Scalable Vector Graphics let you draw much more complex images and have them rendered on web pages. But you can't simply take the SVG tags and slap them into your HTML. They won't show up and your page will be invalid. Instead, you have to use one of three methods. Use the object Tag to Embed SVG The HTML object tag will embed an SVG graphic in your web page. For cross-browser compatibility, you should include the type attribute (it should read type="image/svg+xml") and a codebase for browsers that don't support it (Internet Explorer 8 and lower). Your object would look like this: Tips for Using object for SVG Make sure that the width and height are at least as large as the image you are embedding. View an SVG in an object tag example. Embed SVG with the embed Tag Another option you have for including SVG is to use the embed tag. Your embed would look like this: Tips for Using embed for SVG View an SVG in an embed tag example. Use an iframe to Include SVG Your iframe would look like this:
Using SVG SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Why use SVG at all? Small file sizes that compress wellScales to any size without losing clarity (except very tiny)Looks great on retina displaysDesign control like interactivity and filters Getting some SVG to work with Design something in Adobe Illustrator. Notice the artboard is cropped up right against the edges of the design. You can save the file directly from Adobe Illustrator as an SVG file. As you save it, you’ll get another dialog for SVG Options. The interesting part here is that you can either press OK and save the file, or press “SVG Code…” and it will open TextEdit (on a Mac anyway) with the SVG code in it. Both can be useful. Using SVG as an <img> If I save the SVG to a file, I can use it directly in an <img> tag. In Illustrator, our artboard was 612px ✕ 502px. <!
Terminology, Syntax, & Introduction - A Beginners Guide to HTML & CSS Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology. As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance. To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. Taking this concept a bit further, the HTML p element is used to display a paragraph of text on a web page. Common HTML Terms When getting started with HTML you are likely to hear new, and often strange, terms. Elements Elements are designators that define objects within a page, including structure and content. Tags Elements are often made of multiple sets of tags, identified as opening and closing tags. <a>... Attributes HTML Document Structure & Syntax <!
Moving things with Clojurescript and your phone accelerometer | Samrat Man Singh Now let's get to actually moving things. We'll use a canvas element of width and height both 300 pixels. (def width 300)(def height 300 We'll store the x and y coordinates of our blob in an atom, (def state (atom {:x (/ width 2) :y (/ height 2)})) Our draw function will draw our blob into the x and y coordinates: (defn draw [] (let [canvas (.getElementById js/document "canvas") ctx (.getContext canvas "2d") [r g b] [200 0 0] x (:x @state) y (:y @state)] (.clearRect ctx 0 0 width height) (set! .clearRect above clears the canvas and .fillRect draws a square with length 50px. Let's also show the x and y coordinates: (defn show-coords [] (let [x (:x @state) y (:y @state)] (dommy/set-text! As before let's add our event listener, (.addEventListener js/window "devicemotion" (fn [event] (let [a (. The interesting thing above are the two swap! We'll have the canvas re-drawn every 100 milliseconds: (defn ^:export init [] (.setInterval js/window draw 100) (.setInterval js/window show-coords 100))
Best Practices for Designing a Pragmatic RESTful API | Vinay Sahni Your data model has started to stabilize and you're in a position to create a public API for your web app. You realize it's hard to make significant changes to your API once it's released and want to get as much right as possible up front. Now, the internet has no shortage on opinions on API design. But, since there's no one widely adopted standard that works in all cases, you're left with a bunch of choices: What formats should you accept? In designing an API for Enchant (a Zendesk Alternative), I've tried to come up with pragmatic answers to these questions. ... or just skip to the bottom and signup for updates Latest from the Enchant blog How to make your app lovable A decent app helps you get the job done. ... and those apps, the ones that make things feel effortless, are the ones we love the most. But what makes an app feel effortless? Key requirements for the API An API is a developer's UI - just like any UI, it's important to ensure the user's experience is thought out carefully!
Clojure Alchemy: Reading, Evaluation, and Macros By this point, you probably have a magical understanding of Clojure. In the same way that alchemists thought of each chemical substance as a force of nature with no rational relationship to other chemicals, your alchemical elements are "form", "special form", "evaluates", and the like. This chapter will serve as your periodic table. By the end, you'll be able to clearly see the relationships among Clojure's component parts. We'll get you to this understanding by explaining Clojure's fundamental mechanisms: reading and evaluation. Once you understand these fundamentals, you'll be ready to go full circle and obtain Clojure enlightenment, transcending code/data duality. 1. The philosopher's stone — the supreme obsession of alchemsists — was not just a wonder tool for transmuting base metals into gold; it was also a metaphor for transcending duality and reaching enlightenment. The key to Clojure enlightnment is that Clojure evaluates data structures. That's right, baby! 2. 3. Whoa! 4. 4.1.
The Datomic Information Model Datomic is a new database designed as a composition of simple services. It strives to strike a balance between the capabilities of the traditional RDBMS and the elastic scalability of the new generation of redundant distributed storage systems. Motivations Datomic seeks to accomplish the following goals: Provide for a sound information model, eschewing update-in-place Leverage redundant, scalable storage systems Provide ACID transactions and consistency Enable declarative data programming in applications Datomic considers a database to be an information system, where information is a set of facts, and facts are things that have happened. Traditional databases (and many new ones!) It's interesting to consider why keeping active history is even in question. A database is a database in large part due to the leverage it provides over the data. Structure and Representation Every database has a fundamental unit at the bottom of its model, e.g. a relation, row or document. Schemas :person/name Query
Vim and Ctags - Andrew's blog Ctags is an old tool, just like vim, and it works wonders for code navigation. Since I was recently told that TextMate doesn’t have ctags integration out of the box, I figured I’d make an article explaining it. Even if you’ve used it before, I’ll describe some of my own workflow, so you might learn something interesting anyway. I’ll start from the basic usage, and then I’ll discuss things like keeping the tags file up to date and maintaining tags for any libraries you might be using. What is ctags? Ctags is a tool that extracts important constructs from the code you’re working on. Installation and simplest use case Setting up the environment is pretty simple. If you’re on a Mac and using a package manager, you could do a brew install ctags or port install ctags.On Linux, I’ve yet to see a package manager that doesn’t provide ctags.On Windows, just download the binary from the homepage and install away. Multiple matches There are various ways to jump through the rest of the matches: Summary
The ClojureScript Compilation Pipeline The ClojureScript Compilation Pipeline this is the fifth entry in an n-part series explaining the compilation techniques of Clojure. In honor of the upcoming Clojure’s Google Summer of Code projects I present some discussion of the ClojureScript compiler pipeline. I talked about this in my ClojureWest talk, but a little more discussion is welcomed. The ClojureScript pipeline survey This is the ClojureScript compiler pipeline: You put Clojure code in one end and out comes JavaScript from the other end. The compiler is made of numerous phases the first of which is devoted to reading strings and converting them into Clojure data structures. You can see how the reading phase works by observing the following in a Clojure REPL: (def E (read-string "(-> 42 (- 6) Math/sqrt)")) (type E) ;=> clojure.lang.PersistentList (type (last E)) ;=> clojure.lang.Symbol You can see E is a data structure. The next compilation phase is the macro expansion phase. Jacking into the ClojureScript pipeline
VIM Adventures Light Table 0.4 28 Apr 2013 Today, I'm proud to announce the 0.4 release of Light Table - go download it! A bit of the future. With this release our goal was to bring more people into the fold, to increase the number of languages we can eval, and to smooth out some of the core experience. After 0.3, we finally had a chance to move the ball forward some - from live modifying websites directly inside of LT to injecting code into NodeJS and showing matplotlib graphs inline. This is a huge release in virtually every way and I think there's something for everyone, whether you're just starting out programming or you've been writing python since it was released. Next-gen web dev One of the things I originally showed in the Light Table videos was the ability to embed your work directly into Light Table itself. You can now stick a browser in a tab, navigate to any page you want and start live modifying it. But the most powerful thing to me is the level of eval we now have. Speaking snake: Python support SSssssss.
Clojure Cup 2013 Clojure Libraries Fast Track Clojure