recentpopularlog in

robertogreco : html   119

« earlier  
Bindery.js · Book
"Bindery.js is a library for designing printable books with HTML and CSS.

At its simplest, Bindery flows content over multiple pages. From there, the designer can create running headers, spreads, footnotes, tables of contents, indexes, and more. Bindery also provides print options like bleed, crop marks, and booklet ordering.

Web designers can think about books as an extension of responsive design, and print designers can express layouts programmatically, without the need for InDesign."
bindery  csss  ebooks  html  books  css  webdev  epublishing  webdesign  print  papernet 
7 days ago by robertogreco
getting a new Mac up and running – Snakes and Ladders
"Things I do when I get a new Mac, more or less in order:

• install Homebrew [ ]
• use Homebrew to install pandoc [ * ]
• install BBedit
• install MacTex
• type this into the terminal: defaults write com.barebones.bbedit FullScreenWindowsHogScreen -bool NO
• type this into the terminal: defaults write single-app -bool true (followed by killall Dock)
enable Night Shift
• install TextExpander
• install Alfred
• install Hazeover
• install Hazel

Everything else can wait; once I have the above in place — plus of course syncing all my existing TextExpander snippets — I can do almost everything I really need to do on a computer, with maximum focus and speed."

[*"About pandoc

If you need to convert files from one markup format into another, pandoc is your swiss-army knife. Pandoc can convert documents in (several dialects of) Markdown, reStructuredText, textile, HTML, DocBook, LaTeX, MediaWiki markup, TWiki markup, TikiWiki markup, DokuWiki markup, Creole 1.0, Vimwiki markup, roff man, OPML, Emacs Org-Mode, Emacs Muse, txt2tags, Microsoft Word docx, LibreOffice ODT, EPUB, Jupyter notebooks ipynb, or Haddock markup to

HTML formats
XHTML, HTML5, and HTML slide shows using Slidy, reveal.js, Slideous, S5, or DZSlides

Word processor formats
Microsoft Word docx, OpenOffice/LibreOffice ODT, OpenDocument XML, Microsoft PowerPoint.

EPUB version 2 or 3, FictionBook2

Documentation formats
DocBook version 4 or 5, TEI Simple, GNU TexInfo, roff man, roff ms, Haddock markup

Archival formats

Page layout formats
InDesign ICML

Outline formats

TeX formats
LaTeX, ConTeXt, LaTeX Beamer slides

via pdflatex, xelatex, lualatex, pdfroff, wkhtml2pdf, prince, or weasyprint.

Lightweight markup formats
Markdown (including CommonMark and GitHub-flavored Markdown), reStructuredText, AsciiDoc, Emacs Org-Mode, Emacs Muse, Textile, txt2tags, MediaWiki markup, DokuWiki markup, TikiWiki markup, TWiki markup, Vimwiki markup, and ZimWiki markup.

Interactive notebook formats
Jupyter notebook (ipynb)

Custom formats
custom writers can be written in lua.

Pandoc understands a number of useful markdown syntax extensions, including document metadata (title, author, date); footnotes; tables; definition lists; superscript and subscript; strikeout; enhanced ordered lists (start number and numbering style are significant); running example lists; delimited code blocks with syntax highlighting; smart quotes, dashes, and ellipses; markdown inside HTML blocks; and inline LaTeX. If strict markdown compatibility is desired, all of these extensions can be turned off.

LaTeX math (and even macros) can be used in markdown documents. Several different methods of rendering math in HTML are provided, including MathJax and translation to MathML. LaTeX math is converted (as needed by the output format) to unicode, native Word equation objects, MathML, or roff eqn."
mac  alanjacobs  computers  osx  macos  via:lukeneff  homebrew  pandoc  files  filetype  conversion  text  plaintext  markup  html  epub  latex  setup 
12 weeks ago by robertogreco / Arrangement Collage
[also here: ]

[See also: ]

[via: ]

"In 2015, Frank Chimero wrote on the “Grain” of the Web, focusing on a web-native media that doesn’t try to fight the inherently rectangle-based HTML Document Object Model (DOM)—also shared with XML and XHTML. This remains true: any site that does not look rectilinear is usually just fooling you; strip the CSS and it’s just a pile of blocks. Perhaps tilted and stretched, or with the corners shaved off, but just a pile of blocks.

As McLuhan would have anticipated, this blocky model has substantial effects toward what web-native media looks like. Chimero documents this well. I’d like to add a psychological component, though, in that as an online culture, we’ve grown accustomed to block-based interfaces. We joke at Web 2.0’s desire to round over corners and balk at clunky Flash plugins; nonlinear, non-blocky interfaces are either salient or sore thumbs.

Native internet users consume media through HTML interfaces at an astounding pace; simple rectangles frame a continuous deluge of multimedia updates. In an age of both physical and digital abundance in the Western world, creation of new media from scratch requires ample justification. Acts of synthesis, archiving, compression, and remix are valuable tools for leveraging information otherwise lost to the unsorted heap. These verbs are ways to construct something new from pre-existing media objects, or at least finding some narrative or meaning within them.

A curator, classically, acts as composer and manager of (typically static) objects so as to convey narrative to a willing audience. The internet audience, however, expects more autonomy in the dynamic content they see. Self-selected content is simply a necessary tactic for navigating nearly limitless information. An explosion of digital “curation” caters to the desire, whether by user directly, tuned algorithms, or third-party human. This manifests when you select topics of interest on Quora and construct a twitter feed of only exactly the people you want. Going to a curated museum is now a relinquishing of control compared to typical digital art consumption, which comes mashed-up through various media platforms.

Even with stream moderation, the modern media viewer is accustomed to lack of coherence between adjacent content blocks. In your tumblr dashboard, a peer-reviewed journal article can sit immediately above an anonymously submitted shitpost. We don’t blink. In an arrangement of DOM blocks, each bit of media similarly carries its own context, history, and qualia. I posit we can effectively navigate our feeds not because we can rapidly jump between the context captured by each DOM block, but rather because we interpolate narrative and construct cohesion. Adjacency implies connection and synthesis, or, in the words of John Berger:
[An image reproduction] becomes itself the reference point for other images. The meaning of an image is changed according to what one sees immediately beside it or what comes immediately after it. (Ways Of Seeing)

Marius Watz, in a response on the New Aesthetic, writes on tumblr image culture: “Its art is juxtaposition: If we put this next to that and this other thing, surely a new understanding will emerge.” To be fair, there are uncountably many combinations that may be devoid of meaning—all I mean to point out is that a diptych is a third object, beyond the original two, with the possibility of value. Some find artistic practice in the form of a relentless stream of rectangles. People go nuts over releases of image dumps from Moodmail and JJJJound, and the Lost Image Desk is making professional practice of it.

(A scan of contemporary sculpture demonstrates that selection and arrangement of objects—often found or folk objects—is an ongoing trend. The viewer is trusted with finding meaning in the arrangement, selection, formal qualities, cultural context, and more in a relational tradition.)

HTML is perfectly built for image adjacency—a blank and infinite canvas, empowered by right-click “Copy Image Address.” Our expansive tumblrs and pinterest boards act as collected and performed narratives, collages of found digital media.
[Traditional] collages, […] were probably laid out carefully, aided by facsimiles, white-out, and tape, existed alongside the book, rather than being subsumed or created through the process of publishing and distribution, as is often the case with internet ‘collage’. Computers conceal distance; their collage move consists of juxtaposing elements that might be stored hundreds or thousands of miles apart, giving an illusion of spatial continuity. (Seth Price, Teen Image)

Traditional art collage used the intrigue and power in composing elements pulled from diverse sources. Meaning constructed by selection, editing, and combination. The HTML collage, however, is copy-pasted. What is the HTML-native collage?

I call it the “Arrangement Collage”—rectangular, transcontextual compositions of, ostensibly, found media. The arrangement collage does less work for the viewer than traditional collage: elements are kept fully intact rather than trimmed for blended. The composition often mitigates interaction between elements and instead celebrates raw adjacency.
When the historical avant-garde used valorized cultural objects such as the Mona Lisa or a violin, it profaned, overpowered, and destroyed them before going on to aestheticize them. In contrast, contemporary art uses mass-cultural things virtually intact. (Boris Groys, On The New)

The arrangement collage, while easy to construct in print, is truly native to the web, in which all objects are, by default, level rectangles, context-switching is the norm, and media to compose with is bountiful.

Our feeds, plentiful in the digital landscape, help populate the arrangement collage. Tumblr, ostensibly a micro-blogging site, is largely used for image collection; FFFFound is legendary for its contextless stream of collected imagery (and as birthing the name for JJJJound, when Justin Saunders couldn’t get an account); and Buzzfeed publishes “articles” that are frankly just stacks of image macros. A proliferation of mindless image consumption concerns Bob Gill.
There’s nothing original. ‘The Culture’ is the great mass of images and ideas which bombard us every day, and therefore shape the way we think visually. Only by recognising The Culture’s presence and its power, can designers move away from the clichés it promotes.

Irrefutably, the images we consume affect how we think, and what we can imagine. Gill’s words should be considered, and the internet-native should stay aware of “the clichés” promoted. Gill encourages “first-hand” research, but this points at a cultural gap—there is no line between reality and the internet; “first-hand” research takes place on the social web. In-person discussion and close examination of physical objects can be romanticized, but it should not detract from the fact that meaningful discussion and critical consumption can happen in a digital landscape as well.

Of deeper concern is the stripping of value from imagery in overabundance. Edition MK’s 2010 DDDDoomed (the name, I assume, another reference to FFFFound) gets at the kernel of this problem: Image Aggregators (“IAs”—such as JJJJound and other blogs), which typically present images contextless alongside hundreds of others, can strip imagery of its power. IAs do work that is weaker, semiotically, than traditional collage, and less organized than archiving (which is often a process of attaching or generating metadata, whereas IAs frequently remove it). Images that find political power within a context are reduced to purely aesthetic objects in the stream. If you are a tumblr fiend, this very likely rings true: the multitude of streams filled with gorgeous scenery, motivational quotes, and supermodel women quickly reduce this imagery to banality and objectification.
We [distance ourselves] from our critical faculties as we slide into models of passive spectatorship that reinforce our passivity by promoting a one-way mode of cultural consumption. […] Continuous over-stimulation leads to desensitisation. (Peter Buwert, “Defamiliarization, Brecht and Criticality in Graphic Design” in Modes of Criticism 2: Critique of Method)

The arrangement collage might serve as a tool in this battle against desensitization. In Buwert’s essay, referenced above, he describes how Brecht’s famous defamiliarization of the theater encouraged “a condition of active critical spectatorship within the audience.” DDDDoomed is lamenting the supposed death of this critical spectator, replaced with the numb and passive viewer. Buwert is less concerned with context/lessness than Edition MK, and instead focuses on familiarity.

There are valiant efforts towards an inclusion of context and metadata with online imagery, but it is not built into the structure of the internet. Flickr and twitter use image covers to dissuade copy-pasting (circumnavigable by screen-shotting) and Mediachain attempts to inextricably tie media to metadata using blockchain methods. As of writing, however, the JPG is not going anywhere, and the ease of downloading and re-uploading an image far surpasses digging to find its source. Entropy is not on our side, and Google’s reverse image search will never be quite fast or comprehensive enough to keep up.

Walter Benjamin might lament the loss of contextual sensitivity, as it comes intertwined with a loss of “aura.” The authenticity that drives Benjamin’s aura is dependent on the idea of an original—which, in internet ecosystems, simply isn’t a relevant concept, as the original and reproduction can be… [more]
lukaswinklerprins  2016  frankchimero  arrangementcollage  web  online  feeds  juxtaposition  canon  curation  collections  tumblr  html  webdev  form  imagery  images  webnative  decomposition  composition  peterbuwert  aggregation  ffffound  justinsaunders  bobgill  sethprice  moodmail  lostimagedesk  waysofseeing  johnberger  dom  xml  xhtml  marshallmcluhan 
february 2019 by robertogreco
Keynote Extractor
"A better HTML export option for Apple Keynote.

Extract your slides and notes to an easily modifiable HTML file, using this super easy drag 'n drop application for macOS."
tools  keynote  mac  osx  html  webdev 
december 2018 by robertogreco
/addressbar •
"…or laments about the loss of autonomy on the web.


The web has lost a great battle, one that it was never given a chance to fight for. Apps got the upper hand for good. They’re easy to find: available through your favorite walled garden of a store. They’re are easy to use: they stay right there in your device, making use of all your device’s sensors; have access to all your files and contacts; they make sharing easy. Although HTML5 APIs are a huge leap forward, they are still in their infancy, whereas apps were the first to bear the benefits of sensors, notifications and offline functionality. All without breaking many UX conventions and the people’s safe zone.

No usage study would argue that people use their mobile phone’s browser more than they actually use the in-app browsers offered by default by Facebook, Twitter, Instagram, Google Search and co.

What was by design the core aspect of the World Wide Web, the “URL”, also known as web address, was irrelevant for in-app browsers. The user only needs to peek outside for a minute, then return to the silo. There’s really no need for multiple user journeys. And thus the address bar has vanished. I am frequently reminded of this from my parents, as they discovered mobile phones on their own, had little experience with computers beforehand. Even close friends, so called digital natives that can barely remember their life without internet, forget how to use the address bar. Why do if you can Google the website’s name?
The user can type a URL into the bar to navigate to a chosen website.

…says the collective author in Wikipedia: Address Bar. It still has a bit of truth in it. You can type a URL into it, if you can find where to type it. Even if you do have one, you are most likely using it for Google-ing.

All supporters of the open web should be alarmed. Reclaim your autonomy and make your property visible. Make the URL of your pages visible. Please don’t harm any beautiful hyperlinks in the process."
web  internet  online  openweb  autonomy  applications  appification  ux  walledgardens  html  html5  worldwideweb  urls  browsers  digitalnatives  heraclespapatheodorou 
august 2018 by robertogreco
Bindery.js · Introduction
"Bindery.js is a library for designing printable books with HTML and CSS.

At its simplest, Bindery flows content over multiple pages. From there, the designer can create running headers, spreads, footnotes, tables of contents, indexes, and more. Bindery also provides print options like bleed, crop marks, and booklet ordering.

Web designers can think about books as an extension of responsive design, and print designers can express layouts programmatically, without the need for InDesign."

[via: "Print with Bindery.js"

"Make books from Channels with Bindery.js. You can format the books using CSS!

It currently works pretty well, but we'd be happy to get some help cleaning up the css a little."]
html  css  publishing  pdf  bindery.js  papernet  print 
july 2018 by robertogreco
"Itty bitty sites are contained entirely within their own link. (Including this one!) This means they're...

💼Portable - you don't need a server to host them
👁Private - nothing is sent to–or stored on–this server
🎁Easy to share as a link or QR code
Itty bitty sites can hold about as much as a printed page, and there is a lot you can do with that:

✒️Compose poetry
🛠Create an app
🐦Bypass a 140 280 char limit
🎨Express yourself in ascii

Advanced HTML editing & sharing

Handcrafted HTML files - Drag one into the editor to convert it.

Using - Paste a codepen URL into the editor. Get started with a template or look at some samples.

Size Limits - While most sites support 2000 bytes, some can handle more.

Hosting - One simple way to host is to forward a domain. Just paste the itty.bitty url in the redirect.

Learn more about how it works"
webdev  html  urls  publishing  onlinetoolkit  internet  web 
july 2018 by robertogreco
The Evolution of the Web
"The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible."

Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today's web is a result of the ongoing efforts of an open web community that helps define these web technologies, like HTML5, CSS3 and WebGL and ensure that they're supported in all web browsers.

The color bands in this visualization represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily.
internet  web  history  browsers  infographics  html  technology 
june 2018 by robertogreco
My website is a shifting house next to a river of knowledge. What could yours be? – The Creative Independent
"The web is what we make it

While an individual website could be any of those metaphors I mentioned above, I believe the common prevailing metaphor—the internet as cloud—is problematic. The internet is not one all-encompassing, mysterious, and untouchable thing. (In early patent drawings depicting the internet, it appears as related shapes: a blob, brain, or explosion.) These metaphors obfuscate the reality that the internet is made up of individual nodes: individual computers talking to other individual computers.


The World Wide Web recently turned 29. On the web’s birthday, Tim Berners Lee, its creator, published a letter stating the web’s current state of threat. He says that while it’s called the “World Wide Web,” only about half the world is connected, so we should close this digital divide.

But at the same time, Berners Lee wants to make sure this thing we’re all connecting to is truly working for us, as individuals: “I want to challenge us all to have greater ambitions for the web. I want the web to reflect our hopes and fulfill our dreams, rather than magnify our fears and deepen our divisions.”


“Metaphor unites reason and imagination,” says George Lakoff and Mark Johnson in their book, Metaphors We Live By (1980). “Metaphors are not merely things to be seen beyond. In fact, one can see beyond them only by using other metaphors. It is as though the ability to comprehend experience through metaphor were a sense, like seeing or touching or hearing, with metaphors providing the only ways to perceive and experience much of the world. Metaphor is as much a part of our functioning as our sense of touch, and as precious.”

Instead of a cloud, let’s use a metaphor that makes the web’s individual, cooperative nodes more visible. This way, we can remember the responsibility we each have in building a better web. The web is a flock of birds or a sea of punctuation marks, each tending or forgetting about their web garden or puddle home with a river of knowledge nearby.

If a website has endless possibilities, and our identities, ideas, and dreams are created and expanded by them, then it’s instrumental that websites progress along with us. It’s especially pressing when forces continue to threaten the web and the internet at large. In an age of information overload and an increasingly commercialized web, artists of all types are the people to help. Artists can think expansively about what a website can be. Each artist should create their own space on the web, for a website is an individual act of collective ambition."
laurelschwulst  knowledge  webdev  webdesign  internet  web  online  2018  websites  design  flexibility  purpose  creativity  learning  howwelearn  accumulation  accretion  making  murmurations  metaphor  clouds  birds  georgelakoff  markjohnson  completeness  unfinished  wonder  fredrogers  storage  archives  html 
may 2018 by robertogreco
The world’s fastest framework for building websites | Hugo
"The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again."

"Blistering Speed
What's modern about waiting for your site to build?

Hugo is the fastest tool of its kind. At <1 ms per page, the average site builds in less than a second.

Robust Content Management
Flexibility rules. Hugo is a content strategist's dream.

Hugo supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins.

Hugo's shortcodes are Markdown's hidden superpower.

We love the beautiful simplicity of markdown’s syntax, but there are times when we want more flexibility. Hugo shortcodes allow for both beauty and flexibility.

Built-in Templates
Hugo has common patterns to get your work done quickly.

Hugo ships with pre-made templates to make quick work of SEO, commenting, analytics and other functions. One line of code, and you're done.

Multilingual and i18n
Polyglot baked in.

Hugo provides full i18n support for multi-language sites with the same straightforward development experience Hugo users love in single-language sites.

Custom Outputs
HTML not enough?

Hugo allows you to output your content in multiple formats, including JSON or AMP, and makes it easy to create your own."
webdev  static  html 
march 2018 by robertogreco
Everything Easy is Hard Again – Frank Chimero
"Directness is best in my experience, so a great photo, memorable illustration, or pitch-perfect sentence does most of the work. Beyond that, fancy implementation has never moved the needle much for my clients.

My web design philosophy is no razzle-dazzle. My job is to help my clients identify and express the one or two uniquely true things about their project or company, then enhance it through a memorable design with a light touch. If complexity comes along, we focus in on it, look for patterns, and change the blueprint for what we’re building. We don’t necessarily go looking for better tools or fancier processes. In the past, I’ve called this following the grain of the web, which is to use design choices that swing with what HTML, CSS, and screens make easy, flexible, and resilient.

It seems there are fewer and fewer notable websites built with this approach each year. So, I thought it would be useful remind everyone that the easiest and cheapest strategy for dealing with complexity is not to invent something to manage it, but to avoid the complexity altogether with a more clever plan.

To test how much complexity comes along with my limited needs, I wrote down the technical requirements of my web design practice. It’s not a long list:

simple, responsive layout
web fonts and nicely set text
performant, scalable images

All of these have been more than met for at least five years, but the complexity of even these very fundamental needs has ballooned in the last few years.

For instance, I just showed you four different methods to put two things next to each other. Each new method mostly replaces the last, so hopefully we’re reaching a stabilization point with flexbox and CSS Grid. But who knows what will come out five years from now?"

"My point is that the foundations are now sufficiently complicated enough on their own that it seems foolish to go add more optional complexity on top of it. I’ve kept my examples to the most basic of web implementations, and I haven’t touched on Javascript, animation, libraries, frameworks, pre-processors, package managers, automation, testing, or deployment. Whew.


All of that bundled together is the popular way to work in 2018. But other people’s toolchains are absolutely inscrutable from the outside. Even getting started is touchy. Last month, I had to install a package manager to install a package manager. That’s when I closed my laptop and slowly backed away from it. We’re a long way from the CSS Zen Garden where I started.

If you go talk to a senior software developer, you’ll probably hear them complain about spaghetti code. This is when code is overwrought, unorganized, opaque, and snarled with dependencies. I perked up when I heard the term used for the first time, because, while I can’t identify spaghetti code as a designer, I sure as hell know about spaghetti workflows and spaghetti toolchains. It feels like we’re there now on the web.


That breaks my heart, because so much of my start on the web came from being able to see and easily make sense of any site I’d visit. I had view source, but each year that goes by, it becomes less and less helpful as a way to investigate other people’s work. Markup balloons in size and becomes illegible because computers are generating it without an eye for context. Styles become overly verbose and redundant to the point of confusion. Functionality gets obfuscated behind compressed Javascript."

"It’s by keeping our work legible that we keep the door open to the next generation of our co-workers. What works for them also works for us, because whether you are just out of school or have twenty years of experience, you’ll eventually end up in the same spot: your first year of making websites."
francjchimero  webdeb  webdesign  css  html  design  development  web  2018  online  internet  simplicity  complexity 
february 2018 by robertogreco
🔠 Webfonts, web fonts, web-fonts
"Earlier this month Bram Stein published a book, along with the fine folks at A Book Apart, called The Webfont Handbook and it’s all about how browsers interpret our design choices when it comes to typography. Bram explores what fonts are and how they load, along with the unfamiliar CSS properties that we can use to control them.

You might not care one single iota about fonts or how browsers interact with them, and that’s totally okay, but I think this book is then interesting from two separate angles: web accessibility and good technical writing. First, on the topic of accessibility, one of my favorite sections of this book is where Bram writes about how webfonts can harm the user experience if we’re not careful. By loading too many fonts, for example, and thereby slowing the speed by which the website is requested:
Which matters most to you—conveying your message, or conveying your message in the correct font? In almost all cases, communicating your message matters most. The web is not—or at least shouldn’t be—only for the privileged. Young, affluent people with perfect eyesight using modern devices with high-resolution screens on fast network connections constitute a small fraction of internet users. Don’t forget about the rest.

Later in the book, Bram continues this argument further:
We need to start thinking of webfonts as progressive enhancement instead of expecting webfonts to be a resource that is always available. The baseline experience of your site has always been, and will always be, just plain HTML and CSS. Webfonts enhance that experience. In fact, there’s no guarantee that visitors to your site will see webfonts at all. The Opera Mini browser is used by hundreds of millions of people, and it does not support webfonts. Without you doing a thing, those users are already excluded from using the webfonts you specify.

That means there are two possibilities you should design for: when webfonts are not available, and when webfonts are available.

Accessibility and caring deeply about how webfonts impact the overall design of a website does not make us a gang of old type snobs, instead it makes us good citizens of the web. By thinking about those technical implications we show our care for everyone that visits our small island on the web, and not only the people that happen to look just like us. And every moment that we ignore web accessibility is one where the web becomes more difficult to approach and where we all become a little more isolated from one another.

The second important note that I took away from this book is that technical writing, and writing about code in general, is extraordinarily difficult. It’s tough to know what to teach and when. Not only that but it’s tricky to keep enough concentration and focus to go through each step meticulously so that someone else can follow along easily. This subject leads back to accessibility I suppose, but I can only think of a handful of people that are really good at this sort of technical writing and Bram is certainly one of them."
webdev  webfonts  fonts  html  css  accessibility  communication  robinrendle  bramstein  typography  web 
september 2017 by robertogreco
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
... makes spiffy HTML5
site templates that are:
Responsive Built on intelligent
HTML5 + CSS3 Super
Customizable100% Free under the
Creative Commons"

[via (used here): ]
webdev  html5  responsive  webdesign  html  free  templates 
september 2017 by robertogreco
"Glitch is the friendly community where you'll build the app of your dreams

With working example apps to remix, a code editor to modify them, instant hosting and deployment - anybody can build a web app on Glitch, for free."

[See also: ]
collaboration  programming  classideas  fogcreek  html  webdev  coding  glitch  webapps  webdesign 
april 2017 by robertogreco
Highlights - Sawyer Hollenshead

"How I’m exporting my highlights from the grasps of iBooks and Kindle
Using email, AWS, Siteleaf, and GitHub

A few years ago there was a little startup called Readmill that gave a glimpse at what an open, independent reading platform could look like. You could import your books into their beautiful reading app and highlight text as you read. Your highlights would sync with your Readmill account and other people could follow along to see what you were highlighting (and vice-versa). I discovered a bunch of new books and met some new faces this way. I even built a product that tied in with their API. Then Readmill got acquired by Dropbox. The open, independent reading platform was no longer open or independent, and shutdown in July 2014. Since their shutdown, the state of digital reading platforms has been pretty sad.

Now, my reading takes place in a train on my phone (iBooks) or in sunny Prospect Park on my Kindle. I still highlight as I read, but they don’t sync anywhere. They’re typically scattered between two walled gardens, and 99% of the time I don’t come back to reflect on what I’ve highlighted. I might as well be posting screenshots of the text to Twitter like a buffoon (✋guilty).

So after stewing in frustration for quite awhile about the current state of digital reading platforms, I decided to do what any sane programmer would do: Devise an overly complex solution on AWS for a seemingly simple problem (that two companies with a combined market cap of close to a trillion fucking dollars can’t be bothered to solve).

The ultimate product was (Skip to the bottom for links to the code).

The problem: How do I gather all of my highlights from iBooks and Kindle and put them into one collection, preferably online, where I can share, browse, and reflect on everything I’ve read?
The solution: Email.

Actually, it’s a bit more complicated than just “Email”. Yes, I suppose I could just email the highlights to myself and be done with it. Now that I think about it, maybe I should have started there. But I didn’t, I jumped right to this: I created a new email address (eg. and hooked it up to Amazon Simple Email Service (SES). Using SES, my email address receives email I send to it and stores the email as essentially a text file in Amazon S3 (aka an online folder that stores files). Amazon S3 is smart though and can notify other services when a new file is added to it. So I setup my S3 folder to notify another Amazon service, Amazon Lambda, whenever a new email is received. Lambda is the “brains” of this whole flow. It’s given an input, the email S3 just stored, and runs code on that input."

Sending and parsing highlight emails

The code that I setup Lambda to run does a few things: First, it reads the email and identifies the source of the highlights as either iBooks or Kindle. Emails with iBooks highlights contain the highlights in the body and Kindle highlights are sent as attachments. Why?

iBooks provides a fairly nice user experience for emailing your highlights, so all I have to do is select the highlights I want to share and email them to my address.

Kindle is a bit more of a monster. For books that I’ve purchased through Amazon, my highlights get synced to the Kindle highlights page, possibly one of Amazon’s most neglected pages. Using a bookmarklet, I export all these highlights as a JSON file. Next, I email the JSON file as an attachment to my SES address.

Publishing the highlights online

Now that my Lambda code knows the source of the highlights, it parses the highlights from the email and we proceed on to the next step: Saving the highlights to Siteleaf. Siteleaf is a content management system that myself and the team at Oak have been working on. Siteleaf allows you to manage your website’s content in the cloud and then publish your site as static HTML to a web host of your choice. Siteleaf also has an API, which I’m using to save my highlights. Once my highlights are saved to Siteleaf, Siteleaf automatically syncs the new highlights to GitHub as Markdown files. At this point, my highlights are saved to Siteleaf and accessible through the CMS and API. They’re also saved as Markdown files in a GitHub repo. Pretty cool. With one more click in Siteleaf, I then publish these highlights to my website, hosted on GitHub Pages. Now they’re also saved as HTML pages and accessible to everyone online. Even cooler.

(Note: The Siteleaf functionality mentioned above is currently in beta and not yet open to everyone. You can apply for access though — I know a guy.)

The irony that I’m using all of these Amazon services to solve a problem that Amazon itself is a part of isn’t lost on me. Like I said at the beginning, this is an overly complex solution to a problem that seems so simple — but it works for me. Now that I have all the pipes connected, when I finish reading a book, I send one email and my highlights are ready to be published to my site. Whether or not Apple, Amazon, or some other company ever makes browsing your ebook highlights and notes easier, I hope to always have a method of my own. If you have your own workflow, I’d love to hear about it.

View the code on GitHub
Instructions and code for the Lambda function can be found on GitHub. Additionally, the code for is also available GitHub."]
via:caseygollan  sawyerhollenshead  books  libraries  digital  digitallibraries  readmill  kindle  ibooks  webdev  siteleaf  html  annotation  webdesign 
march 2016 by robertogreco
Templates are easy to change. Content usually isn't. | CSS-Tricks
"If it's a chunk of HTML that goes in a database, it's content

It's not impossible to change content, but it's likely much harder and more dangerous.

Websites can last a long time. Content tends to grow and grow. For instance on CSS-Tricks there are 2,260 Posts and 1,369 Pages. Over the years I've sprinkled in classes here and there to do certain stylistic things and over time I always regret it.

Why the regret over classes in content?

Maybe you'll find you named the class wrong and start hating it.
Maybe you'll change the class to something you like better.
Maybe you'll stop using that class.
Maybe you'll forget that class even existed, and not address it in a redesign.
Maybe you'll use that old name again, only it does something new now and messes up old content.

Those are just a few possibilities.

But the pain comes when you decide you'd like to "fix" old content. What do you do? Find all old content that uses those classes and clean them out? Try to run a database query to strip classes? Tedious or dangerous work.

Content in Markdown Helps

Markdown is comfortable to write in, once you get the hang of it. But its best feature is that it doesn't put, or even allow you to put, classes on any of the HTML it generates. Unless you write HTML directly in the Markdown, which always feels a little dirty (as it should)."
webdev  webdesign  css  content  design  templates  via:nicolefenton  2016  html  chriscoyier 
march 2016 by robertogreco
Neocities: Create your own free website!
"Create your own free website.
Unlimited creativity, zero ads.

Neocities is a community of 64,800 sites that are bringing back the lost individual creativity of the web. We provide free web hosting and tools that allow anyone to make a website. Only your imagination is required. Join us!

Share your web creation with the world
Follow your favorite Neocities sites to keep up with all their latest updates. Discover new websites related to your interests using tags, comment on them, and share them.

Powerful new features to help you build
We’ve made it easier to build your website and explore other sites. Neocities features an in-browser HTML editor, custom domain support, faster site loading, easy file uploading, RSS feeds, folder support, and much more.

Our mission: To make the web fun again by giving you back control of how you express yourself online.

HTML editor, right in your browser

No tools needed. With our easy-to-use HTML editor, you're ready to start building your awesome website right now.

If you'd rather use your favorite desktop editor, no problem. Uploading files is as easy as drag-n-drop.

It's time to bring back web surfing.

All Neocities sites are viewable in our website gallery. And it's easy to browse sites with our optional surf bar.

Using tags (our version of Web Rings) you can easily discover new sites related to your interests.

Follow your favorite Neocities sites

Keep track of all your favorite sites by following them. Any changes to the sites automatically show up in your news feed. You'll also see what sites they follow.

Web creativity plus community

Interact with your favorite web builders by posting comments, and sharing their sites on your social network of choice.

Zero advertising

Neocities will never sell your personal data or embed advertising on your site. Instead, we are funded directly by our community through supporter plans and donations. This allows us to base all our decisions on making the best possible web building experience for you, rather than on appeasing ad companies.

More space, speed, and security

Neocities now uses distributed, globally-cached web servers in datacenters all over the world to serve your site. Whether it’s your personal home page or a busy professional site, your site loads fast. And if you need more space, we've got you covered. We also provide Snowden-grade SSL cryptography on all sites, preventing snoops from seeing what you browse.

Developer tools

Our fast static hosting comes with a great in-browser HTML editor, easy file uploading, RSS feeds for every site, powerful APIs for building developer applications, and much more! Upgrade to a supporter plan to get WebDAV publishing and support for custom domains.

Open Company

Neocities is a member of the Open Company Initative, working to help improve trustability in tech companies. We publish the code that powers the site for inspection, and strive for openness in our company's operations. We want to win your trust—not lock you in."
free  hosting  html  web  webdev  neocities  geocities  webrococo  community  websurfing  opencompanyinitiative  kyledrake  victoriawang  scotto'hara  onlinetoolkit  classideas  webdesign 
february 2016 by robertogreco
The Website Obesity Crisis
"Let me start by saying that beautiful websites come in all sizes and page weights. I love big websites packed with images. I love high-resolution video. I love sprawling Javascript experiments or well-designed web apps.

This talk isn't about any of those. It's about mostly-text sites that, for unfathomable reasons, are growing bigger with every passing year.

While I'll be using examples to keep the talk from getting too abstract, I’m not here to shame anyone, except some companies (Medium) that should know better and are intentionally breaking the web.

The Crisis

What do I mean by a website obesity crisis?

Here’s an article on GigaOm from 2012 titled "The Growing Epidemic of Page Bloat". It warns that the average web page is over a megabyte in size.

The article itself is 1.8 megabytes long."

Here's an almost identical article from the same website two years later, called “The Overweight Web". This article warns that average page size is approaching 2 megabytes.

That article is 3 megabytes long.

If present trends continue, there is the real chance that articles warning about page bloat could exceed 5 megabytes in size by 2020.

The problem with picking any particular size as a threshold is that it encourages us to define deviancy down. Today’s egregiously bloated site becomes tomorrow’s typical page, and next year’s elegantly slim design.

I would like to anchor the discussion in something more timeless.

To repeat a suggestion I made on Twitter, I contend that text-based websites should not exceed in size the major works of Russian literature.

This is a generous yardstick. I could have picked French literature, full of slim little books, but I intentionally went with Russian novels and their reputation for ponderousness.

In Goncharov's Oblomov, for example, the title character spends the first hundred pages just getting out of bed.

If you open that tweet in a browser, you'll see the page is 900 KB big.
That's almost 100 KB more than the full text of The Master and Margarita, Bulgakov’s funny and enigmatic novel about the Devil visiting Moscow with his retinue (complete with a giant cat!) during the Great Purge of 1937, intercut with an odd vision of the life of Pontius Pilate, Jesus Christ, and the devoted but unreliable apostle Matthew.

For a single tweet.

Or consider this 400-word-long Medium article on bloat, which includes the sentence:

"Teams that don’t understand who they’re building for, and why, are prone to make bloated products."

The Medium team has somehow made this nugget of thought require 1.2 megabytes.

That's longer than Crime and Punishment, Dostoyevsky’s psychological thriller about an impoverished student who fills his head with thoughts of Napoleon and talks himself into murdering an elderly money lender.
Racked by guilt, so rattled by his crime that he even forgets to grab the money, Raskolnikov finds himself pursued in a cat-and-mouse game by a clever prosecutor and finds redemption in the unlikely love of a saintly prostitute.

Dostoevski wrote this all by hand, by candlelight, with a goddamned feather."

"Everyone admits there’s a problem. These pages are bad enough on a laptop (my fan spun for the entire three weeks I was preparing this talk), but they are hell on mobile devices. So publishers are taking action.

In May 2015, Facebook introduced ‘Instant Articles’, a special format for news stories designed to appear within the Facebook site, and to load nearly instantly.

Facebook made the announcement on a 6.8 megabyte webpage dominated by a giant headshot of some dude. He doesn’t even work for Facebook, he’s just the National Geographic photo editor.

Further down the page, you'll find a 41 megabyte video, the only way to find out more about the project. In the video, this editor rhapsodizes about exciting misfeatures of the new instant format like tilt-to-pan images, which means if you don't hold your phone steady, the photos will drift around like a Ken Burns documentary.

Facebook has also launched, an effort to expand Internet access. The stirring homepage includes stories of people from across the developing world, and what getting Internet access has meant for them.
You know what’s coming next. When I left the homepage open in Chrome over lunch, I came back to find it had transferred over a quarter gigabyte of data.

Surely, you'll say, there's no way the globe in the background of a page about providing universal web access could be a giant video file?

But I am here to tell you, oh yes it is. They load a huge movie just so the globe can spin.

This is Facebook's message to the world: "The internet is slow. Sit and spin."

And it's not like bad connectivity is a problem unique to the Third World! I've traveled enough here in Australia to know that in rural places in Tasmania and Queensland, vendors treat WiFi like hundred-year-old brandy.

You're welcome to buy as much of it as you want, but it costs a fortune and comes in tiny portions. And after the third or fourth purchase, people start to look at you funny.

Even in well-connected places like Sydney, we've all had the experience of having a poor connection, and almost no battery, while waiting for some huge production of a site to load so we can extract a morsel of information like a restaurant address.

The designers of pointless wank like that Facebook page deserve the ultimate penalty.
They should be forced to use the Apple hockey puck mouse for the remainder of their professional lives. [shouts of horror from the audience]

Google has rolled out a competitor to Instant Articles, which it calls Accelerated Mobile Pages. AMP is a special subset of HTML designed to be fast on mobile devices.

Why not just serve regular HTML without stuffing it full of useless crap? The question is left unanswered.

The AMP project is ostentatiously open source, and all kinds of publishers have signed on. Out of an abundance of love for the mobile web, Google has volunteered to run the infrastructure, especially the user tracking parts of it.

Jeremy Keith pointed out to me that the page describing AMP is technically infinite in size. If you open it in Chrome, it will keep downloading the same 3.4 megabyte carousel video forever.
If you open it in Safari, where the carousel is broken, the page still manages to fill 4 megabytes.

These comically huge homepages for projects designed to make the web faster are the equivalent of watching a fitness video where the presenter is just standing there, eating pizza and cookies.

The world's greatest tech companies can't even make these tiny text sites, describing their flagship projects to reduce page bloat, lightweight and fast on mobile.

I can't think of a more complete admission of defeat."

"The other vision is of the web as Call of Duty—an exquisitely produced, kind-of-but-not-really-participatory guided experience with breathtaking effects and lots of opportunities to make in-game purchases.

Creating this kind of Web requires a large team of specialists. No one person can understand the whole pipeline, nor is anyone expected to. Even if someone could master all the technologies in play, the production costs would be prohibitive.

The user experience in this kind of Web is that of being carried along, with the illusion of agency, within fairly strict limits. There's an obvious path you're supposed to follow, and disincentives to keep you straying from it. As a bonus, the game encodes a whole problematic political agenda. The only way to reject it is not to play.

Despite the lavish production values, there's a strange sameness to everything. You're always in the same brown war zone.

With great effort and skill, you might be able make minor modifications to this game world. But most people will end up playing exactly the way the publishers intend. It's passive entertainment with occasional button-mashing.

Everything we do to make it harder to create a website or edit a web page, and harder to learn to code by viewing source, promotes that consumerist vision of the web.

Pretending that one needs a team of professionals to put simple articles online will become a self-fulfilling prophecy. Overcomplicating the web means lifting up the ladder that used to make it possible for people to teach themselves and surprise everyone with unexpected new ideas

Here's the hortatory part of the talk:

Let’s preserve the web as the hypertext medium it is, the only thing of its kind in the world, and not turn it into another medium for consumption, like we have so many examples of already.

Let’s commit to the idea that as computers get faster, and as networks get faster, the web should also get faster.

Let’s not allow the panicked dinosaurs of online publishing to trample us as they stampede away from the meteor. Instead, let's hide in our holes and watch nature take its beautiful course.

Most importantly, let’s break the back of the online surveillance establishment that threatens not just our livelihood, but our liberty. Not only here in Australia, but in America, Europe, the UK—in every free country where the idea of permanent, total surveillance sounded like bad science fiction even ten years ago.

The way to keep giant companies from sterilizing the Internet is to make their sites irrelevant. If all the cool stuff happens elsewhere, people will follow. We did this with AOL and Prodigy, and we can do it again.

For this to happen, it's vital that the web stay participatory. That means not just making sites small enough so the whole world can visit them, but small enough so that people can learn to build their own, by example.

I don't care about bloat because it's inefficient. I care about it because it makes the web inaccessible.

Keeping the Web simple keeps it awesome."
pagebloat  webdesign  maciejceglowski  2015  webdev  participatory  openweb  internet  web  online  minecraft  accessibility  efficiency  aesthetics  cloud  cloudcomputing  amazonwebservices  backend  paypal  google  docker  websites  wired  theverge  medium  javascript  advertising  ads  acceleratedmobilepages  mobile  html  facebook  freebasics  jeremykeith  timkadlec  facebookinstantarticles  maciejcegłowski 
january 2016 by robertogreco
Tufte CSS
"Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

The idea was cribbed in whole from Tufte-LATEX and R Markdown’s Tufte Handout format. This page was in fact originally an adaptation of the Tufte Handout Example PDF. I give hearty thanks to all the people who have contributed to those projects.

If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines."
via:ayjay  css  design  html  typography  edwardtufte  webdev  webdesign 
october 2015 by robertogreco
No legal merit | A Working Library
"In happier news, The Verge reports on Amazon’s shameless enforcement of non-competes for low-wage temporary workers, and Amazon rapidly about-faces. Nevermind pageviews and reading time, let’s measure publishing success by the actual change we bring about. Metrics could include unjust laws repealed, despicable company policies reversed, social welfare improved, centimeters of sea level increase averted, pseudo-science rejected, reduction in atmospheric carbon, happy children, puppies with loving homes. I’m only half-kidding. Business metrics are critical, but they’re not why we pour our hearts into this work, and we can’t ever let the numbers obscure that."

"An interesting aside: media Twitter was understandably aghast at Facebook’s new initiative, while seemingly unmoved by similar patterns on YouTube. I suspect this is because we have feels about words that we don’t have with video. It’s worth noting that while the web has become the de facto distribution method for video, the internet—that is, the open network of hypertext documents—privileges words over images. HTML is words annotating words. Words are foundational to HTML; images and video are not. Even our relationship to images is driven by language: one can “read” a picture, and our interpretation of images is constrained by words. I’m tempted to think our angst about the economy of letters should be directed at the underlying economic concerns—of which publishing is only one victim—and away from the words themselves. The words will be fine."
2015  mandybrown  metrics  journalism  activism  justice  policy  politics  business  measurement  publishing  success  change  changemaking  socialwelfare  society  law  legal  progress  climatechange  science  education  happiness  ellenpao  gender  inequality  amazon  labor  exploitation  women  facebook  html  text  images  video  youtube 
march 2015 by robertogreco
"This is a tool for abusing combining diacritical marks made by Niel McLaren. Source code."


"d̸̡͎̫͚ͬ̅ͭ̚͟í̟̲͒ͩ̓̒́͡͠a̷̴̙̓̾͂̑̂̽͘c̙͚͖̰͂͒̏͒̅̿r̛͍̳͍̪̖ͦ̽̈́̕i͏͓͙̯̰̭̂͑́͞ṭ̡̣̙͋́̓͑ͫ͘i̛͕̬ͤͣ̈́̆ͮ̐͘c͈̯̯͇̙̣ͣ̍́̅i̡̡̭̻͖̙͍ͦ͐̅s̭͚̲̰̄̆ͥ̆͌͋m̘̜̑͊̂͒́̾̏ͨ - abusing diacritics in a mildly lovecraftian way. lovecraftian in the way it is expressed on stackoverflow discussions of parsing html with regex and publicly shaming repos that don’t handle unicode terribly well."]
typography  unicode  diacritics  nielmclaren  html  regex 
march 2015 by robertogreco

Way to Go is an interactive experience for human beings between 5 and 105 years old. Maybe it lasts six minutes; maybe it lasts forever. Way to Go is ready for your web browser and willing to go VR, if you're Rift-y. It is like a grey squirrel balanced on a branch, fearless. Made by Vincent Morisset, Caroline Robert, Édouard Lanctôt-Benoit and the studio AATOAA, visionary creators of BLA BLA and Arcade Fire's award-winning Just A Reflektor. Produced by the National Film Board of Canada, co-produced by France Televisions, with a mesmerizing soundtrack by Philippe Lambert, it is a game and a solace and an alarm, a wake-up call to the hazards of today. At a moment when we have access to so much, and see so little, Way to Go will remind you of all that lies before you, within you, in the luscious, sudden pleasure of discovery.

Shorter Description

Way to Go is a walk in the woods. It is an astonishing interactive experience, a restless panorama, a mixture of hand-made animation, 360˚ video capture, music and dreaming and code; but mostly it is a walk in the woods, c'mon. Created by Vincent Morisset, Philippe Lambert, Édouard Lanctôt-Benoit & Caroline Robert (AATOAA). Produced by the NFB & France TV."


Yes, you are on your way.
It is not your first journey but Way to Go is the next journey before you. A walk through strange country - strange, familiar, remembered, forgotten. It is a restless panorama, a disappearing path, a game and a feeling. Way to Go is a small experience that gets bigger as you uncover it.
And the trees will change their shape, and the sky will widen.
And you will fly.
We go away every day. We plunge through the city, skate down roads, tunneling toward a destination without remembering the quests we are on. A journey is a collection of moments - we are here, we are here, we are here, and yet we miss these moments. A journey is a collection of choices - turn here, stop here, choose here, and yet we surrender these choices.
What if we quit surrendering? What if we didn't miss?
Here is a world enclosed in a screen. Here is an adventure. A landscape of leaves and wildflowers, teeming with hidden life. A garden and a wilderness, a wistful blink of dream. You are Jean Painlevé, Marco Polo, Maria Merian. You are Alice, Sonic, Osvaldo Cavandoli. You are a visitor, a cartoon of face and limbs, and you are going on a walk.
Using hand-made animation, music, 360° capture technology and webGL sorcery, Way to Go imagines a dream-world of journeys. Walk, run, fly; crouch in the grass and remember what's hidden all around. Slip like a rumour from one place into another; chase your shadow; listen to the slow pulse of the metronome, black-clad, following in your wake.
Are you alone? Are you not alone? Are you dreaming or awake? Can you ever reach the mountains?
Can you see what's here before you?
Set out through woods and fields, sunlight and aurora, grey and colours.
Set out, in deliberate lucid looking
and you'll find,
the present.

(Preface by Sean Michaels)"
games  storytelling  gaming  videogames  art  nfb  forest  aaotaa  javascript  html  html5  webgl  three.js  webaudioapi  vincentmorisset  philippelambert  édouardlanctôt-benoit  carolinerobert  nfbc 
february 2015 by robertogreco
Small Victories
"Small Victories is a simple way to make a website out of the contents of a Dropbox folder.

What the hell would I use that for?

You could make a blog, share images, make yourself a portfolio — it's kind of like a scrapbook."
webdev  dropbox  hosting  css  html  webdesign  via:ableparris 
february 2015 by robertogreco
Mozilla Brick
"Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know."
webdev  mozilla  brick  mozillabrick  ui  webapps  webcomponents  html  webdesign 
september 2014 by robertogreco
"a minimal, ui-focused programming language for web designers"
via:tealtan  css  design  javascript  ui  webdev  webdesign  html  uiland 
september 2014 by robertogreco
Pollen: the book is a program
"Pollen is a publishing system that helps authors create beautiful and functional web-based books. Pollen includes tools for writing, designing, programming, testing, and publishing.

I used Pollen to create my book Butterick’s Practical Typography. Sure, go take a look. Is it better than the last digital book you encountered? Yes it is. Would you like your book to look like that? If so, keep reading.

At the core of Pollen is an argument:

• First, that digital books should be the best books we’ve ever had. So far, they’re not even close.

• Second, that because digital books are software, an author shouldn’t think of a book as merely data. The book is a program.

• Third, that the way we make digital books better than their predecessors is by exploiting this programmability.

That’s what Pollen is for.

Not that you need to be a programmer to use Pollen. On the contrary, the Pollen language is markup-based, so you can write & edit text naturally. But when you want to automate repetitive tasks, add cross-references, or pull in data from other sources, you can access a full programming language from within the text.

That language is Racket. I chose Racket because while the idea for Pollen had been with me for several years, it simply wasn’t possible to build it with other languages. So if it’s unfamiliar to you, don’t panic. It was unfamiliar to me. Once you see what you can do with Pollen & Racket, you may be persuaded. I was.

Or, if you can find a better digital-publishing tool, use that. But I’m never going back to the way I used to work."

[via: ]
ebooks  epublishing  html  typography  matthewbutterick  pollen  digital  software 
august 2014 by robertogreco
Learn HTML & CSS - a book that teaches you in a nicer way
A book about code that doesn't read like a 1980s VCR manual...
It's not just for programmers, it's written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages..."
books  css  html  design  webdev  howto  webdesign 
july 2014 by robertogreco
The Simpsons in CSS
"Below are some Simpsons characters made in pure CSS - Made by Chris Pattle."

[via: ]
thesimpsons  css  html  webdev  webdesign 
june 2014 by robertogreco
Subcompact Publishing — by Craig Mod
"A Subcompact Manifesto

Subcompact Publishing tools are first and foremost straightforward.

They require few to no instructions.

They are easily understood on first blush.

The editorial and design decisions around them react to digital as a distribution and consumption space.

They are the result of dumping our publishing related technology on a table and asking ourselves — what are the core tools we can build with all this stuff?

They are, as it were, little N360s.

I propose Subcompact Publishing tools and editorial ethos begin (but not end) with the following qualities:

• Small issue sizes (3-7 articles / issue)
• Small file sizes
• Digital-aware subscription prices
• Fluid publishing schedule
• Scroll (don’t paginate)
• Clear navigation
• HTML(ish) based
• Touching the open web

Many of these qualities play off one another. Let’s look at them in detail.

Small issue sizes
I’ve written quite a bit about creating a sense of ‘edge’ in digital space. One of the easiest and most intuitive ways to do so is to limit the amount of data you present to the user.12

It’s much more difficult for someone to intuit the breadth of a digital magazine containing twenty articles than a digital magazine containing, for example, five. By keeping article number low this also helps decrease file size and simplify navigation.

Small file size
Speed is grossly undervalued in much of today’s software — digital magazines inclusive. Speed (and with it a fluid and joyful user experience) should be the thing you absolutely optimize for once you have a minimum viable product.

One way to bake speed into a publishing product is to keep issue file sizes as small as possible. This happens naturally when you limit the number of articles per issue.

Reasonable subscription prices
Ideally, digital subscription prices should reflect the cost of doing business as a digitally indigenous product, not the cost of protecting print subscriptions. This is yet another advantage digital-first publications have — unlike print publications transitioning to digital, there is no legacy infrastructure to subsidize during this transition.

Fluid publishing schedule
With smaller issue sizes comes more fluid publishing schedules. Again, to create a strong sense of edge and understanding, the goal isn’t to publish ten articles a day, but rather to publish just a few high-quality articles with a predictable looseness. Depending on the type of content you’re publishing, days can feel too granular, and months require the payload to be too large. Weeks feel just about right in digital.

Scroll (for now)
When I originally presented these ideas at the Books in Browsers conference in 2012, the dismissal of pagination was by far the most contentious point. I don’t mean to imply all pagination is bad. Remember — we’re outlining the very core of Subcompact Publishing. Anything extraneous or overly complex should be excised.

I’ve spent the last two and half years deconstructing scrolling and pagination on tablets and smartphones. If your content is formless, then you might be able to paginate with minimal effort. Although, probably not.

Certain kinds of pagination increase the complexity of an application by orders of magnitude. The engineering efforts required to produce beautiful, simple, indigenous, consistent — and fast — pagination are simply too high to belong in the subcompact space.

Furthermore, when you remove pagination, you vastly simplify navigation and thereby simplify users’ mental models around content.

No pagination is vastly superior to pagination done poorly.

Clear navigation
Navigation should be consistent and effortless. Subcompact Publishing applications don’t require complex how-to pages or tutorials. You shouldn’t have to hire a famous actor to show readers how to use the app with his nose. Much like a printed magazine or book, the interaction should be intuitive, effortless, and grounding. The user should never feel lost.

By limiting the number of articles per issue, and by removing pagination, many of the routes leading to complex navigation are also removed.

HTML(ish) based
When I say HTML I also mean EPUB or MOBI or any other format with an HTML pedigree. HTML has indisputably emerged as the future format for all text (and perhaps also interactive) content. By constraining Subcompact Publishing systems to HTML we bake portability and future-proofness into the platforms. We also minimize engineering efforts because most all computing devices come with high-quality HTML rendering engines built in.

Open web
Simply: whatever content is published on a tablet should have a corresponding, touchable home on the open web.

Content without a public address is non-existent in the eyes of all the inter-operable sharing mechanisms that together bind the web."
craigmod  publishing  epublishing  magazines  themagazine  writing  digital  design  2012  digitalpublishing  html  html5  matter  joshuabenton  touch  mobilephone  ios  iphone  ipad  skeuomorphs  openweb  scrolling  pagination  navigation  tablets  claytonchristensen  davidskok  jamesallsworth  marcoarment 
april 2014 by robertogreco
Daring Fireball: Rethinking What We Mean by 'Mobile Web'
"We shouldn’t think of the “web” as only what renders inside a web browser. The web is HTTP, and the open Internet. What exactly are people doing with these mobile apps? Largely, using the same services, which, on the desktop, they use in a web browser. Plus, on mobile, the difference between “apps” and “the web” is easily conflated. When I’m using Tweetbot, for example, much of my time in the app is spent reading web pages rendered in a web browser. Surely that’s true of mobile Facebook users, as well. What should that count as, “app” or “web”?"

"It’s possible that the word “web” is too tightly associated with HTML/CSS/JavaScript content rendered in web browsers — that if I want to make a semantic argument, I should be saying it’s the internet that matters, not the web. But I like calling it the web, even as it expands outside the confines of HTML/CSS/JavaScript. The web has always been a nebulous concept, but at its center is the idea that everything can be linked. So when I open Tweetbot on my iPhone and tap a link that opens within the app as a web page, and from that web page tap a link that opens a video in the YouTube app — that to me feels very webby."

"Yes, Apple and Google (and Amazon, and Microsoft) control their respective app stores. But the difference from Dixon’s AOL analogy is that they don’t control the internet — and they don’t control each other. Apple doesn’t want cool new apps launching Android-only, and it surely bothers Google that so many cool new apps launch iOS-first. Apple’s stance on Bitcoin hasn’t exactly kept Bitcoin from growing explosively. App Stores are walled gardens, but the apps themselves are just clients to the open web/internet."

"The rise of mobile apps hasn’t taken anything away from the wide open world of web browsers and cross-platform HTML/CSS/JavaScript — other than supremacy. I think that bothers some, who saw the HTML/CSS/JavaScript browser-centric web’s decade-ago supremacy as the end point, the ultimate triumph of a truly open platform, rather than what it really was: just another milestone along the way of an industry that is always in flux, ever ebbing and flowing.

What we’ve gained, though, is a wide range of interaction capabilities that never could have existed in a web browser-centric world. That to me is cause for celebration."
mobile  internet  web  www  html  browsers  applications  johngruber  2014  walledgardens  http  browser 
april 2014 by robertogreco
Penflip - collaborative writing and version control
"Write: Focus on writing with our minimalist markdown editor, or work offline with your favorite text editor.

Collaborate: Send a link to gather feedback - no downloads. Easy version control and revision history built right in.

Publish: Download your beautifully formatted ebook with just one click. Compile to PDF, ePub, HTML and more."
collaboration  writing  online.toolkit  markdown  git  epub  pdf  html  collaborativewriting  epubs 
february 2014 by robertogreco
Tinderbox Stretchtext Writing System
"Have you ever found yourself in a conversation which followed too many rabbit trails? Have you ever read an article which did the same? What if you could have digressions and concise style in the same document?

Do you:

• need to write documents which appeal to laypeople and experts?
• struggle with an inability to show the context of a quote without losing your readers?
• wish you could create links which include explanations and multiple possible destinations?
• need to publish information to the web, but find yourself dissatisfied with the terse, flat writing it encourages?

These are just a few reasons the Tinderbox Stretchtext Writing System can help you write a better document.

More uses:
• Follow digressions without derailing the flow and purpose of your text.
• Make links which don't require readers to visit a different page.
• Show full citations in the body of the document without disrupting readers, while still grouping sources at the end.
• Include extra tables and figures.
• Comment on your sources without breaking the flow of your argument.
• Discuss the reasons you didn't cite certain sources for various sections.
• Create paper editions of your enhanced electronic document.

According to Theodor H. Nelson, who first wrote about Stretchtext in 1967, such systems help readers because "The reader remains oriented. If he loses track of where he is, he "shrinks" the text to a higher, shorter level; if he wants to study a topic in more detail, he magnifies it (Nelson, April, 1967). Additionally, such systems also help the writer remain oriented, since it removes your obstacles for good writing."
hypertext  tools  writing  expansion  html  webdev  tednelson  via:litherland  tinderbox  stretchtext  webdesign 
december 2013 by robertogreco
The (other) Web we lost | Web Directions

… Do we honestly want to diminish this network effect by fragmenting the technologies of the web, by creating silos of expertise, with little by way of a common language? We should at least be aware of this potential consequence of our choices. Aware of not just what we (typically as individuals) might gain from our choices, but what we collectively, what the Web, may lose.


… Traditionally, more than half of the cost of a complex system has come during its maintenance phase, and while on the Web we’ve been more likely to throw out and start all over again than traditional software projects, as what we build for the Web becomes increasingly more complex, and mission critical, the maintenance phase of projects will become increasingly long and costly. And again, it’s pretty well understood that maintainability has a lot more to do with the ability of disparate developers to understand and reason about a code base over a long period of time than it does with ease of using find and replace.



Small pieces loosely joined

In 2002, one of the Web’s pioneers David Weinberger (among other things, co-​​author of the Cluetrain Manifesto) wrote “small pieces, loosely joined”, a way of thinking about what makes the Web different. I’ve long thought it applies well to the technologies of the Web, and should guide us as we build for the Web, whether it’s our own sites, those for our clients or employers, or the very technologies that move the Web forward.

If each time we came to solve a problem we thought “how small a problem can I solve”, or even “what really is the problem here”, and then solve that in a way that is as modular, compatible, and extensible as possible, we’d be going a long way toward taming the explosion of complexity we’ve seen over the last half a decade or so, and to returning at least in part to the other Web we lost.

Perhaps this Web simple had to grow up, to meet the challenges of the ever more complex artefacts we’re building. When the Web was about documents and sites, perhaps we could be simple, but in an age of Apps that’s a luxury we can’t afford. Perhaps the technical underpinnings of all platforms of necessity fragment over time.

But, before we lose this Web for good, I think we owe it to that Web to really understand it, what makes it tick. And when we make technical, architectural choices about what the Web looks like, we don’t just focus on what we (as individuals) gain, but what costs there are to this Web as well."
learnability  web  webwelost  maintainability  html  interoperability  longevity  smallpieceslooselyjoined  johnallsop  2013  networks  internet  technology  webdev  css  webdesign 
december 2013 by robertogreco
The Web as a Preservation Medium | inkdroid
"So how to wrap up this strange, fragmented, incomplete tour through Web preservation? I feel like I should say something profound, but I was hoping these stories of the Web would do that for me. I can only say for myself that I want to give back to the Web the way it has given to me. With 25 years behind us the Web needs us more than ever to help care for the archival slivers it contains. I think libraries, museums and archives that realize that they are custodians of the Web, and align their mission with the grain of the Web, will be the ones that survive, and prosper. Brian Fitzpatrick, Jason Scott, Brewster Kahle, Mislav Marohnic, Philip Cromer, Jeremy Ruten and Aaron Swartz demonstrated their willingness to work with the Web as a medium in need of preservation, as well as a medium for doing the preservation. We need more of them. We need to provide spaces for them to do their work. They are the new faces of our profession."
archiving  web  digitalpreservation  digital  facebook  archiveteam  archives  twitter  internet  edsummers  2013  preservation  aaronswartz  timberners-lee  marshallmcluhan  kisagitelman  matthewkirschenbaum  davidbrunton  linkrot  www  adamliptak  supremecourt  scotus  lapsteddomains  brewsterkahle  urls  html  permalinks  paulbausch  jasonscott  mihaiparparita  zombiereader  googlereader  impermanence  markpilgrim  jonathangillette  rss  _why  information  markdown  mslavmarohnic  philipcromer  jeremyruten  github  williamgibson  degradation  data  cern  grailbird  google  davewiner  rufuspollock  distributed  decentralization  collaboration  brianfitzpatrick 
december 2013 by robertogreco
Pandoc - About pandoc
"If you need to convert files from one markup format into another, pandoc is your swiss-army knife. Pandoc can convert documents in markdown, reStructuredText, textile, HTML, DocBook, LaTeX, MediaWiki markup, OPML, or Haddock markup to

• HTML formats: XHTML, HTML5, and HTML slide shows using Slidy, reveal.js, Slideous, S5, or DZSlides.
• Word processor formats: Microsoft Word docx, OpenOffice/LibreOffice ODT, OpenDocument XML
• Ebooks: EPUB version 2 or 3, FictionBook2
• Documentation formats: DocBook, GNU TexInfo, Groff man pages, Haddock markup
• Outline formats: OPML
• TeX formats: LaTeX, ConTeXt, LaTeX Beamer slides
• PDF via LaTeX
• Lightweight markup formats: Markdown, reStructuredText, AsciiDoc, MediaWiki markup, Emacs Org-Mode, Textile
• Custom formats: custom writers can be written in lua.

Pandoc understands a number of useful markdown syntax extensions, including document metadata (title, author, date); footnotes; tables; definition lists; superscript and subscript; strikeout; enhanced ordered lists (start number and numbering style are significant); running example lists; delimited code blocks with syntax highlighting; smart quotes, dashes, and ellipses; markdown inside HTML blocks; and inline LaTeX. If strict markdown compatibility is desired, all of these extensions can be turned off."

[via: ]
conversion  markdown  markup  pdf  latex  html  xhtml  software  mac  osx  windows  linux 
october 2013 by robertogreco
LLK/scratch-html5 · GitHub
"Scratch HTML5 Player

This project aims to create a Scratch Player in HTML5. Scratch is currently implemented with Actionscript 3 and requires the Flash Player version 10.2. Since Flash does not run on iOS (iPads, iPods, etc) and newer Android devices, we would like to have an HTML5 version to display (but not edit) projects on mobile devices. Scratch projects played in the HTML5 player should look and behave as closely as possible to the way they look and behave when played by the Flash player. We will not be accepting pull requests for new features that don't already exist in the Flash based Scratch project player.

There are a few github issues created that represent some of the missing features. At this point, the HTML5 player is about 40% complete and can run some simple projects. Running the HTML5 player on your own website, or locally, you will need to have PHP so that the proxy.php file can be used to load assets from the same domain. This is done to be compatible with Javascript security models in today's browsers. To test the HTML5 player against the Flash player you can use the compare.html web page.

Unimplementable Features on iOS: Image effects for whirl, fisheye, mosaic, and pixelate. Sound and video input for loudness, video motion, and touching colors from the video.

More documentation will be added as time permits. Thanks for contributing, and Scratch On!"
scratch  html5  html  ios 
october 2013 by robertogreco
Coder for Raspberry Pi
"Coder is a free, open source project that turns a Raspberry Pi into a simple platform that educators and parents can use to teach the basics of building for the web. New coders can craft small projects in HTML, CSS, and Javascript, right from the web browser."
raspberrypi  coder  google  googlecreativelab  html  css  javascript  teaching  learning 
september 2013 by robertogreco
Pandoc - About pandoc
"If you need to convert files from one markup format into another, pandoc is your swiss-army knife. Pandoc can convert documents in markdown, reStructuredText, textile, HTML, DocBook, LaTeX, or MediaWiki markup to

• HTML formats: XHTML, HTML5, and HTML slide shows using Slidy, Slideous, S5, or DZSlides.
• Word processor formats: Microsoft Word docx, OpenOffice/LibreOffice ODT, OpenDocument XML
• Ebooks: EPUB version 2 or 3, FictionBook2
• Documentation formats: DocBook, GNU TexInfo, Groff man pages
• TeX formats: LaTeX, ConTeXt, LaTeX Beamer slides
• PDF via LaTeX
• Lightweight markup formats: Markdown, reStructuredText, AsciiDoc, MediaWiki markup, Emacs Org-Mode, Textile

Pandoc understands a number of useful markdown syntax extensions, including document metadata (title, author, date); footnotes; tables; definition lists; superscript and subscript; strikeout; enhanced ordered lists (start number and numbering style are significant); running example lists; delimited code blocks with syntax highlighting; smart quotes, dashes, and ellipses; markdown inside HTML blocks; and inline LaTeX. If strict markdown compatibility is desired, all of these extensions can be turned off."
pandoc  conversion  html  epub  latex  pdf  html5  onlinetoolkit  ebooks  documents  markdown  text  tools  epublishing  digitalpublishing  epubs 
august 2013 by robertogreco
D3.js - Data-Driven Documents
"D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation."

[See also: ]
data  javascript  visualization  graphs  mikebostock  d3  d3.js  html  webdev  css  datavisualization  webdesign 
july 2013 by robertogreco
Welcome to openHTML
Building tools to support learning in basic web development. Check out openHTML editor, a web-based HTML and CSS tool with a simple interface.

Developing learning activities that motivate students while teaching the fundamentals of computation and the web based on research.

Exploring ways to assess learning, using mixed methods that include naturalistic observations, lab studies, and analysis of Q&A forums and activity logs."
css  html  coding  learning  education  openhtml  howto  classideas  via:jessebrand 
july 2013 by robertogreco
HTML5 Reset :: A simple set of templates for any project
"Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We've been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up, and we thought we'd put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it's a good starting place that anyone can make their own."
framework  webdev  webdesign  templates  css3  css  html5  html  via:spencerbeacock 
december 2012 by robertogreco
In-depth tutorials and articles on web design | Webdesigntuts+
"Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.
Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!"
typography  ux  javascript  css  html  howto  webdev  edg  srg  via:steelemaley  classideas  web  design  tutorials  webdesign 
october 2012 by robertogreco
Savory | The new platform for digital publishing
"NOW writers, editors, and publishers have a new tool to design and publish narrative content on the web.

Savory™ provides app-like designs for publications, and an on-line content management system to build them.

Powered by Treesaver®, the adaptive HTML technology, Savory lays out content onto pages that fit any size screen. Desktops, laptops, tablets and phone. Any device that has a browser.

Savory is an upgrade from blog hosting services. It's made for multiple stories or chapters. And publishers can produce editions whenever they want—and add updates any time.

Sign up for for the Charter Rate, only $49 (€49) a month."
browser  browsers  savory  newspapers  magazines  books  html  adaptivehtml  web  copenhagen  epublishing  epub3  epub  design  publishing  html5  digitalpublishing  epubs 
september 2012 by robertogreco
Benji Lanyado is a journalist, coder – and a glimpse of the future? | News Burger
"When I first heard about The Reddit Edit, I thought it was a nifty idea.

It takes Reddit’s functional, information-laden appearance and turns it into a streamlined, colourful depiction of the top trending stories. The top three stories are displayed in an easy-to-use side-scrolling interface, plucked from five popular subreddits: /r/worldnews, /r/politics, /r/technology, /r/science and /r/pics, plus the homepage.

You might think a project like this would be the undertaking of a web developer, but it’s the brainchild of 28-year-old British journalist Benji Lanyado. The Reddit Edit was his final project while taking front-end web development classes with General Assembly, a New-York based digital education company who have recently expanded to London.

Benji, who writes for The Guardian and The New York Times, is part of a growing number of media types that are taking it upon themselves to know how to write and code to bring their content to life…"

[An interview follows.]
redditedit  programming  generalists  crossdisciplinary  classideas  glvo  srg  edg  howwework  filters  filtering  clayshirky  facebook  twitter  howweread  news  developers  interdisciplinary  interdisciplinarity  learning  nyc  html  css  javascript  generalassembly  rubyonrails  codecademy  kerouapp  nytimes  guardian  2012  media  reading  theredditedit  benjilanyado  via:russelldavies  reddit  careers  coding  journalism 
september 2012 by robertogreco
320 and Up | The ‘tiny screen first’ responsive boilerplate
"1. A working toolkit
Frameworks and boilerplates like HTML5 Boilerplate and Bootstrap are great, but they include some files and styles you’ll use once in a blue moon. ‘320 and Up’ includes only things I use when I start a project.

2. LESS and Sass
LESS and Sass have transformed the way we write CSS. ‘320 and Up’ is built with LESS and CSS includes our trusted mixins and variables. If you’re not ready for LESS, don’t worry, use the plain ol’ CSS version.

3. New Upstarts
‘Upstarts’ are responsive design patterns for the things we build every day. Get started faster with easily customisable HTML and LESS CSS imports or write your Upstarts and contribute them on Github."
responsivedesign  html5boilerplate  html  css3  css  mobile  html5  responsive  boilerplate  responsivewebdesign 
august 2012 by robertogreco
Initializr - Start an HTML5 Boilerplate project in 15 seconds!
"Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!"
boilerplate  html5boilerplate  responsivedesign  html  initializr  webdev  template  blueprint  tools  code  css  css3  webdesign  generator  framework  html5  responsivewebdesign 
august 2012 by robertogreco
Modernizr: the feature detection library for HTML5/CSS3
"Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser."
modernizr  javascript  webdesign  html  webdev  css  css3  html5 
august 2012 by robertogreco
Platforming Books — by Craig Mod
"Transitions from physical to digital don't need to be one-to-one forced representations. A defining quality of good design is one in which the essence of a thing can be transmitted between mediums while staying true to the new medium. Or, in Mr. Chimero's words, "What is the marker of good design? It moves." 13

Is everything perfect? No. But it's pretty good. Certainly acceptable. These platforms are still young and evolving. As they mature, we'll be watching and making more beautiful, better formatted digital editions."

"The massive shifts in publishing in the past two years have been those of adoption and distribution. Crowd funding can help provide publishing capital. If you create just one file — one file — an EPUB, you can publish to nearly every single mobile device in the world."

"If you’re a publisher wondering what to do, the lowest investment, highest return action in this liminal stage of digital publishing is to embrace open EPUB standards."
epub3  artspacetokyo  design  2010  2012  ipad  iphone  ipod  kindle  digital  books  publishing  epub  ebooks  craigmod  html  html5  epublishing  digitalpublishing  epubs 
august 2012 by robertogreco
Robin Rendle · Call Me Interactivity
"We are all tempted by inter­ac­tiv­ity; video & audio snip­pets, data charts that can be flicked and pushed, let­ters that can be popped & pinched. But how many of these fea­tures enhance the rela­tion­ship between reader and writer? Due to the con­straints I men­tioned pre­vi­ously, we most likely won’t recog­nise the dig­i­tal book in a decade. This is because they won’t be built in the same way, they won’t be writ­ten in the same way & they won’t be funded & pub­lished in the same way either. These prob­lems, some eco­nomic, some tech­ni­cal, will force us to con­sider alter­na­tive meth­ods of think­ing about con­tent, space, sto­ry­telling & time.

The line that bor­ders pixel & paper has been crossed, bound­aries have been bro­ken, but the hori­zon swells with oppor­tu­nity. And so these uncharted, dig­i­tal spaces demand not only new types of think­ing, pub­lish­ing and design, but also a new form of sto­ry­telling, new kinds of heroes and mon­sters, new worlds to explore…"
technology  mobydick  leonwiedeltier  oliverreichenstein  craigmod  content  flexibility  control  mandybrown  design  ebooks  digitalpublishing  publishing  interactivity  interactive  2012  future  books  robinrendle  epub3  html  html5  moby-dick 
august 2012 by robertogreco
How to Teach Web-Building to Anyone
"I'm making some big shifts in my work in the coming months (read: focusing my energies rather than what's become the scattershot of freelance writing). I'm thrilled to say that this will mean more time for Hack Education, thanks in no small part to a research and writing project I'll be undertaking for Mozilla.

It's part of the organization's larger learning and literacy efforts, and my piece will involve researching practices and pedagogies and interviewing teachers, learners, technologists about tools for teaching programming for the Web. Specifically (or rather, conceptually), I'm asking the question: Do we need a "'Scratch' for HTML5?" All my findings and conversations will be written up here on this blog."
srg  edg  kids  2012  programming  coding  web  webdev  html5  html  audreywatters  children  webdesign 
february 2012 by robertogreco
Don’t Fear the Internet
"Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackers was in theaters. Through short tutorial videos, you’ll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. You’ll feel empowered rather than crippled by the internet and worst case scenario you’ll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen."
howto  tutorials  web  tutorial  design  reference  webdesign  css  html  srg  edg  via:tealtan  webdev 
february 2012 by robertogreco
Writing Kit 2.0 · Unitasking at its finest [See also: [See also: ]
"Advanced Markdown Text Editor...

Link to Dropbox. Write Markdown-formatted text. Use your favorite TextExpander snippets. Do quick research to find reference materials. Lookup or substitute words from Terminology app. Insert quotes and links into your documents. Upload images to CloudApp. Export your writings as Markdown or HTML files. Send them to Evernote, Facebook, Posterous, Tumblr and Twitter. Or use the generated HTML for your blog post. Your choice.
... Meets Awesome Researching Tools

Use the power of 1300+ site-specific search engines to find the materials you need. Enable Ad blocking and Text-only mode to enjoy a reading experience without visual clutters. Access your bookmarks on Delicious, Pinboard and Zootool. Browse your Instapaper unread items. Queue interesting links to view them later. Send content to OmniFocus, Things and The Hit List. Writing Kit is built for researching and looking up stuff."
research  wordprocessing  tumblr  posterous  cloudapp  html  zootool  omnifocus  evernote  pinboard  dropbox  texteditor  markdown  writing  applications  ipad 
january 2012 by robertogreco
Learn Web Design, Web Development, and iOS Development - Treehouse
"What do you want to learn today?

Web Design: CSS, CSS3, Aesthetic Foundations, HTML, HTML5 and Responsive Web Design.

Web Development: HTML5, JavaScript and Introduction to Programming.

iOS: Build iPhone and iPad apps with Objective-C, Xcode and more."
webdev  howto  tutorials  coding  programming  ipad  iphone  ios  xcode  objective-c  responsivewebdesign  css3  css  srg  edg  javascript  html5  html  design  webdesign  webdevelopment  responsivedesign 
january 2012 by robertogreco
Beating the drum for Delicious « Jon Udell
"More than anything before or since, Delicious empowers me to manage web resources — both personally and socially. Once those resources were mainly things we found on the web. Now they’re also things we make on the web. I hope the forthcoming Delicious makeover will help people understand it to be a tool for creating, mixing, and sharing web resources. And I hope it remains the sort of open web tool that Mozilla Drumbeat wants to popularize."
socialnetworking  jonudell  2011  making  html  coding  programming  mozilladrumbeat  avos  sharing  reflection  via:preoccupations 
september 2011 by robertogreco
Bootstrap, from Twitter
"Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more."
design  web  twitter  webdesign  ui  github  webdev  tools  toolkits  css  html  typography  webapps  bootstrap 
august 2011 by robertogreco
"Building a generation of webmakers… Hackasaurus spreads skills, attitudes and ethics that help youth thrive in a remixable digital world. By making it easy for youth to tinker and mess around with the building blocks that make up the web, Hackasaurus helps tweens move from digital consumers to active producers, seeing the web as something they can actively shape, remix and make better.

Through a set of easy-to-use tools…Hackasaurus tools make it easy for kids to remix, create and share on the web. The X-Ray Goggles allow learners to see what the web is made of, remix and change their favorite web pages, and share their creations with friends. WebPad makes it easy to take the next step, creating your own web pages in a matter of seconds. And the Hackbook provides bits of code for easy copying and pasting, making it easy to play with the web like lego.

…and at "hack jam" events around the world."
onlinetoolkit  hacking  html  hackasaurus  hackdays  classideas  srg  edg  glvo  mozilla  youth  coding  programming  web  webdev  hacks  web2.0  tools  tinkering  remixing  remixculture  hackjams  unconferences  bookmarklets  bookmarklet  webdesign 
august 2011 by robertogreco
Practical Magic | Think Quarterly by Google
"The most original innovations spring from mucking about, not from thinking hard. Perhaps that’s really why all this is happening now – components are getting smaller and cheaper, computing is becoming disposable, networking is getting easier – but I don’t think this is driven just by technology. It’s driven by a generation of inventors who’ve learned the power of fast, cheap ‘making’ on the web and want to try it in the world.

This, to me, is as exciting as the day I downloaded a browser. We’re seeing the connectivity and power of the web seeping from our devices and into our objects. Everyday objects, yes, but also new generations of extraordinary objects – flying robot penguin balloons, quadrocopters that can play tennis, Wi-Fi rabbits that tell you the weather."
google  innovation  russelldavies  tinkering  berglondon  berg  wifi  arduino  mikekuniavsky  html  web  internet  making  hacking  internetofthings  spimes  2011  iot 
july 2011 by robertogreco
Am I Violating The DMCA By Visiting The NYTimes With NoScript Enabled? | Techdirt
"As we continue to explore the NY Times' bizarrely pointless paywall, it comes as no surprise that the wall itself is barely any wall at all. It's not even a fence. It's basically a bunch of fence posts, and someone screaming: "Pay no attention to your own eyes. There is a fence here, and you should go round the front & pay at the entrance... unless someone sent you here. Then walk on through."…But it gets even more bizarre when you discover that the "paywall" itself has apparently been written in javascript, meaning that when you do hit the wall, the full article you want to read actually loads in the HTML, it's just then blocked by some script asking you to pay up. That means it's even easier to remove than many had predicted (no need to even delete cookies or any such nonsense). In fact, that link above points people to NYTClean, a 4-line javascript bookmarklet, that makes it easy to remove the paywall w/ (literally) the click of a button, should you actually encounter it."
drm  paywall  nytimes  2011  javascript  html  workarounds  nytclean  dmca  addons  firefox  browser  browsers 
march 2011 by robertogreco
HOWTO: Native iPhone/iPad apps in JavaScript
"Until the recent language ban imposed by Apple, I didn't even know that you could write native apps for iPhone and iPad in JavaScript. (I must be the last person to figure this out; it's been possible since 2008!)

In case you're as late to the party as me, it turns out that you can get web apps to behave like native apps. In this article, I'll explain how to:

strip away the browser chrome (the url bar and button bar);
prevent viewport scrolling and scaling;
respond to multi-touch and gesture events;
use webkit CSS to get the iPhone OS look and feel;
cache the app so it runs without internet access;
get a custom icon on the home screen; and
have a splash screen load at the start.

If you want to put it in the app store, you can even package your web app as a "native" Objective-C app. (Although, why you'd want to subject yourself to the app store approval process when you don't have to is beyond me.)"
iphone  ipad  javascript  development  howto  css  html  via:migurski  ios  applications 
february 2011 by robertogreco
Humans TXT: We Are People, Not Machines.
"What is it?
An initiative to know the creators of the website.

A TXT file that contains the information about the different people who have contributed to the web building.

Why a TXT?
It's simple and fast to create.

Because it is not intrusive with the code. The owners of the sites are usually reluctant to let the creators of their sites to sign them, claiming that it reduces their effiency. This way, you can prove your authorship (not property) in an extern, fast, easy and accessible way."
webdev  web  programming  design  standards  html  txt  human  authors  authorship  webdesign 
january 2011 by robertogreco
Daring Fireball: Title Junk
"That’s a good rule of thumb for designing and writing page titles: pick a name (and, for CMS templates, a pattern) that makes sense as the name of a bookmark for that page. Most bookmarking tools — the ones built into web browsers, and bookmarklets for third-party apps — do use the page title as the default bookmark name. Tools that help people tweet links to articles use the page title as the default description. So make titles useful. Write them for humans, not search engine spiders. Putting SEO keywords in the page title (a) doesn’t actually help your page’s rank in search engine indexes, and (b) makes things harder for people trying to tweet a link, bookmark your page, or scan it from a list of currently open windows and tabs in their browser. Trust the Googlebot to figure it out."
seo  web  html  webdesign  johngruber  daringfireball  titles  standards  consistency  usability  bookmarks  bookmarking  webdev 
december 2010 by robertogreco
Frank Chimero - Utility Ambiguity [Frank describes the iPad, iPhone, and Twitter in way that suggests these tools were built knowing that, as William Gibson said, "the street will find its own uses for things"]
"It’s why Twitter is so different from Facebook. The value proposition of Facebook is clear: stay in contact with friends and share with them. But what do you use Twitter for? No one knows, because there’s no right way to use it. It’s why it fascinates some, and beguiles others. Twitter can’t even craft a clear value proposition on their homepage to say what the site is for. If you are someone who needs convincing, that’s frustrating, because everyone is talking about Twitter. If you are observant, it’s a sign that something big is happening. It’s not a hammer with one specific use. It’s not even a swiss army knife that can do many different things. It’s more akin to two pieces of stone, from which you can make your own tool: arrowhead or hand axe."
twitter  ipad  iphone  facebook  tools  human  ingenuity  frankchimero  socialmedia  media  technology  design  apple  consumer  gaming  innovation  html  utility  ux  makeyourowntool  ambiguity  multipurpose  defineityourself  whatcanyoudowiththis  onlinetoolkit  moldability 
august 2010 by robertogreco
MiniApps - HTML5 apps for Apple iOS, Google Android & other mobile platforms
"All apps are free and open source. MiniApps does not use any in–app third–party advertisements. Help keep it that way and show a little love using Flattr."
iphone  ipad  applications  ios  android  html5  html  ipodtouch  javascript  mobile  mobileweb  webapp  webdev  development  software  web  webdesign 
july 2010 by robertogreco
« earlier      
per page:    204080120160

Copy this bookmark:

to read