recentpopularlog in

robertogreco : webdev   541

« earlier  
Old CSS, new CSS / fuzzy notepad
"I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was.

And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with.

I’ve been taking for granted that most folks doing web stuff still remember those days, or at least the decade that followed, but I think that assumption might be a wee bit out of date. Some time ago I encountered a tweet marvelling at what we had to do without border-radius. I still remember waiting with bated breath for it to be unprefixed!

But then, I suspect I also know a number of folks who only tried web design in the old days, and assume nothing about it has changed since.

I’m here to tell all of you to get off my lawn. Here’s a history of CSS and web design, as I remember it."
css  webdev  history  html  web 
6 days ago by robertogreco
Liza Sabater 🇵🇷👸🏾🌹 on Twitter: "BOOK BUTCHER is better for it’s alliteration. this raises one of my biggest peeves with book publishers: people buying a paper book should get an EPUB/PDF copy. EPUB/PDF are ghastly misused because publishe
“BOOK BUTCHER is better for it’s alliteration.

this raises one of my biggest peeves with book publishers: people buying a paper book should get an EPUB/PDF copy.

EPUB/PDF are ghastly misused because publishers only use them as copy formats & not distinct creative media…
Yesterday my colleague called me a ‘book murderer’ because I cut long books in half to make them more portable. Does anyone else do this? Is it just me? [image of three books, Infinite Jest, Middlesex, and Dostoyevsky (bio?), each separated into two.

this is why, as am getting ready to shop book proposals, am absolutely clear my biggest negotiating challenge will be the digital rights to my books.

my web dev skills COMPLETELY changed the way i write and think of writing. when i built the publishing front-end of my blogs…

i did so inspired mainly by many of the tactics of the avant gardes, especially CONSTRUCTIVISM.

because i see typography as an art form and art objects that can bring a different “something” to your writing ―not just in conventional syntaxes. think of e. e. cummings…

THING1 is reading “House of Leaves” by Mark Z. Danielewski and am looking forward to reading myself, exactly because of what he does with typography and page design.

but would love to see how they succeeded or failed to translate the page design to EPUB/MOBI in particular… [image of open pages from House of Leaves]

BECAUSE YOU LAZILY CAN’T. most publisher just process the DOCX file to EPUB and don’t even have the decency to add a basic style-directive (CSS file) to it.

for Danielewski’s book, if you’re not going to use Javascript, then you’ll need to use robust CSS3 and…

Responsive Design tactics to make it a proper EPUB/MOBI version of the book.

but that would mean, it’s only a translation ―and since that’s core to the plot, then that EPUB should be an opportunity to exapand the story, not just copy it.

with a PDF though…

you have 2 options:

an IMAGE copy of the paper pages

or

an INTERACTIVE ⁺ REFLOWABLE version

so we have 5 ways of getting the same book ported:

1. text dump (EPUB/MOBI)
2. image dump (PDF)
3. CSS3 ⁺ Responsive (EPUB)
4. Javascript ⁺ CSS3 (EPUB)
5. IA/Reflowable PDF



anybody who has read RAYUELA (Hopscotch) by Julio Cortázar, will see la mar de posibilidades that we have for going beyond the lazy conventions of treating EPUB & PDF as just copies of a paper book.

this is why the DMCAA has been devastating…

claiming a new publishing copyright for just transposing across formats is criminal.

you should have something else, even if it is technically the same book or song.

because each format, each medium, has it’s own set of challenges. just copying, as in transposing, isn’t it…

so, if you are a writer, it would behoove you to learn about the principles of web development ―because all EPUBS are, basically, websites made portable with a ZIP file (EPUB/MOBI are zip files).

notice i do not mention AZW3. they’re proprietary EPUBs ―and tbh a waste of time…

all this to say:

you wouldn’t butcher books if you had an EPUB version on your phone or a tablet. even a PDF image dump is preferable.

am weeding my book collection.

with ⁺50 yrs of books, i’ve noticed they’re not only works of art but cherished memory capsules.

/fin”
lizasabater  books  epub  formatting  pdf  bookdesign  digital  ebooks  2020  markdanielweski  rayuela  form  constructivism  avantgarde  mobi  docx  fileformats  css  responsivedesign  webdev  javascript  juliocortázar  conventions  syntax 
26 days ago by robertogreco
Better Default Directory Views with HTAccess | Perishable Press
"Currently building the lightest/fastest theme possible for Perishable Press. Fine line between aesthetics and performance."
webdesign  webdev 
5 weeks ago by robertogreco
How to run a small social network site for your friends
“Table of Contents

How to run a small social network site for your friends
> Who this guide is for
> Social solutions to social problems

What makes a small social network site different from a big one?
> You control the computer that runs the site
> You can modify the software
> You get to make the social rules and policies
> Wait, who is “you”?

Why run a small social network site?
> Software can be complicated where necessary
> You can have hyper-specific norms
> Why to NOT run a small social network site

What you can do today
> Keep it small
> You are the party host
> Provide a custom introduction to your network for every user
> Group activities
> Keep it interconnected
> Funding
> The bus problem
> Code of Conduct
>> Enforcement
> Technical recommendations
>> Examples of services you can provide

What we need to do in the future
> Places where we need better tech
>> Fluidity of identity and the ability to migrate
>> Let people keep things in the community
>> Server forking should be easy
>> Lean software that doesn’t have to scale
> More on scale
> Beyond local and public: the neighborhood

Conclusion
> Hard questions
> So what do you, the reader, do next?
>> If you are comfortable with servers and hosting
>> If you are not comfortable with that but would like to learn
>> If learning the tech stuff is realistically not going to happen
> Running a small social network site is completely possible to do on the side

Acknowledgments

About the author

License

Older Versions”
dariuskazemi  socialmedia  socialnetworking  socialnetworks  2019  howto  technology  webdev  mastodon  software  social  community  communities  via:jenlowe 
7 weeks ago by robertogreco
Favicon Generator for all platforms: iOS, Android, PC/Mac...
"Why RealFaviconGenerator?

No hard decision
With so many platforms and icons, it's hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

Done in 5 minutes
You spent hours on design, colors, graphics... How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.

Compelling design, a platform at a time
Each platform comes with its own design requirements. You can't just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.

Instant feedback
How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like."
webdev  icons  generator  tools  favicons 
10 weeks ago by robertogreco
Persona
"Persona is a compact, powerful and economic site builder; it is part of the Cargo set of web tools."
cms  webdesign  webdev  cargo  persona 
november 2019 by robertogreco
Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap
“Bootstrap themes, templates, and more to help you start your next project!

Start Bootstrap creates free, open source, MIT license, Bootstrap themes, templates, and code snippets for you to use on any project, guides to help you learn more about designing and developing with the Bootstrap framework, and premium Bootstrap products.”

[Seen here: https://mayaontheinter.net/ ]
css  opensource  bootstrap  framework  webdev  startbootstrap  templates 
october 2019 by robertogreco
GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
“A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. http://ianlunn.github.io/Hover/

[Seen here: https://mayaontheinter.net/ ]
animation  css  effects  github  ianlunn  css3  sass  less  webdev 
october 2019 by robertogreco
Bootstrap · The most popular HTML, CSS, and JS library in the world.
“Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Get started
Download”

[Seen here: https://mayaontheinter.net/ ]
css  html  javascript  bootstrap  framework  webdev  js  jquery  opensource 
october 2019 by robertogreco
Automatic Book Workshop
"This workshop was originally designed as a way for designers to explore the possibilities of web programming languages as tools for design and self-publishing. It could also be of interest to anyone interested in: learning or experimenting with the finer points of web typography, web-based archival or publishing tools, alternative models for presenting content on the web.

There are probably many differences we can point to between a book and a website (or between analog/digital, old/new, etc.), and most of them have been discussed exhaustively in other places. For the purposes of this workshop, we are interested less in the difference in these media but in how to apply the unique features of each to the other."
web  coding  webdev  typography  publishing 
september 2019 by robertogreco
Animating URLs with Javascript and Emojis
“You can use emoji (and other graphical unicode characters) in URLs. And wow is it great. But no one seems to do it. Why? Perhaps emoji are too exotic for normie web platforms to handle? Or maybe they are avoided for fear of angering the SEO gods?

Whatever the reason, the overlapping portion on the Venn diagram of “It’s Possible v.s. No One Is Doing It” is where my excitement usually lies. So I decided to put a little time into the possibilities of graphical characters in URLs. Specifically, with the possibility for animating these characters by way of some Javascript.”

[direct link to video: https://www.youtube.com/watch?v=4YZt4HEv48Y ]
matthewrayfield  animation  emoji  javascript  webdev 
august 2019 by robertogreco
Sanity.io - The fully customisable headless CMS
"Distribute to any device or channel over flexible APIs. Fully customizable React.js editor."
react.js  javascript  cms  api  webdev 
august 2019 by robertogreco
Web design as architecture
“WEB DESIGN AS ARCHITECTURE

1. Websites are places. They provide services and social environments. Like architecture, they distribute access and atmospheric context to these resources: Watching a video on Nowness is different from watching a video on YouTube.

2. Websites are inherently public. Architecture is by nature a public discipline. Both buildings and websites are built realities. They are part of the fabric of societies that are now both physical and virtual.

3. Websites are inhabited. They become part of societies through the interactions they enable. They are homes to communities, to thoughts and approaches. They may be privately owned and operated, but inhabited and used by the public. As buildings, websites are where we spend our lives.

4. Websites are local, despite their distributed nature. Websites adhere to culturally established patterns, languages and user expectations in similar ways architecture does. Buying an onigiri from a 7-11 branch is different from buying a pretzel from a Bavarian bakery.

5. Websites are cultural artifacts. Like buildings, websites foster social discourses. They do so by establishing new ways of interaction or by asking new aesthetic questions.

6. Websites are constructed. Websites may use new technologies or existing technology to new effect. They may employ new ways of construction, or cite old ways of construction. Similarly, material and construction are defining characteristics of architectural work.

7. Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.

8. Websites exist within frameworks. They negotiate contrasting requirements. Similarly, architecture deals with zoning and building regulations. Smart integration or avoidance of such requirements is a source for good and efficient design in both cases.

9. Websites are made by individuals, by collectives or by large-scale project groups, decisively influencing their aims, design quality and building process. Similar differences exist between private construction and large-scale urban projects. There is value in each scale.

10. Websites are inevitable. Applying Rem Koolhaas’ quip about buildings, a website has to happen in order for a service or content to exist in the digital realm.

The above aims to provide a starting point for a more expansive, and more critical discourse on website design. The engagement of liberal arts, humanities and engineering present in the architectural discourse is more timely than ever. Considering and expanding upon these aspects when building and critiquing websites may help us fulfilling our responsibility as contributors to the global digital infrastructure today.

This text uses the term Website to describe a markup document containing text and other media, served via a networked connection. For this definition, mobile apps and specialized hardware devices are interpreted as specific types of browsers serving websites in proprietary content formats.

ⓐThis text started as a tweet. ⓑ It was turned into a talk held on May 23rd 2019, in Oslo, Norway on invitation by Grafill. ⓒThere is an are.na channel that collects sources and collateral concerning the topic.



http://maltemueller.com
https://waf.gmbh
@electricgecko

This website is built as a single HTML document.
Set in Authentic Sans.”

[See also:
https://www.are.na/malte-muller/web-design-as-architecture ]
webdesign  webdev  architecture  manifestos  place  buildings  are.na  maltemüller 
june 2019 by robertogreco
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 
june 2019 by robertogreco
Local Area Network
"Inspired by grassroots independent publishing, we will collectively build an online publication within our local area network. We will each contribute a page to this publication, exploring what it might mean to reintroduce a sense of locality to our networks. These contributions might take the form of manifestos, essays, proposals, recipes, or personal corners of the net.

Special thanks to Michèle Champagne, Garry Ing, Greg J. Smith

Visit dat://local-area-network.hashbase.io/a-b-z-txt on Beaker.

Schedule

Thursday, August 23

• 10:30–11:00 — Mindy talks about Artist as Networker
• 11:30–12:00 — Jon talks about p2p and time

Friday, August 24

• 09:30–10:00 — Coffee
• 10:30–10:45 — Exercise 1: Browsing
• 10:45–11:00 — Exercise 2: Profiling
• 11:00–12:30 — Exercise 3: Speed Dialoguing
• 12:30–14:00 — Lunch
• 14:00–14:30 — Exercise 3 Recap: Network Circle
• 14:30–15:30 — Group Discussion
• 15:30–16:00 — Tutorial: Dat and Beaker
• 16:00–17:00 — Reading Discussion

Saturday, August 25

• 09:30–10:00 — Coffee
• 10:00–10:15 — Introduce prompt and examples of grassroots publishing
• 10:15–12:15 — Initial brainstorm
• 12:15–12:30 — Introduce statement: A _____ that _____.
• 12:30–14:30 — Lunch
• 14:30–14:45 — Tutorial: Beaker APIs
• 14:45–17:00 — Begin building personal webpages
• 17:00–18:00 — Table crits

Sunday, August 26

• 09:30–10:00 — Coffee
• 10:00–10:30 — Tutorial: CSS to Print
• 10:30–12:30 — Continue building personal webpages
• 12:30–13:30 — Lunch
• 13:30–15:30 — Continue building personal webpages
• 15:30–16:30 — Begin printing
• 16:30–18:00 — Final Presentations

Overview

Day 1

A series of micro-exercises that create a word bank about each participant. As a group, we will discuss the current state of online communities and speculate on the type of content and interactions we would like to see on new networks.

• Exercise 1: Browsing — A public reading of each participant's past 7 browser searches. Collect 7 keywords.
• Exercise 2: Profiling — List 7 keywords of yourself from the perspective of an algorithm.
• Exercise 3: Speed Dialoguing — A 3-minute conversation in pairs, after which a single keyword must be selected. Continue for 1.5 hours until every possible pair has been created.
• Exercise 3 Recap — One person picks a conversation, reads the respective keyword, and briefly describes how it was selected. The corresponding person selects another conversation, and the process repeats until every person has been selected.

◦ Seita - Rory — bone to bone
◦ Rory - Mike — co-sin
◦ Mike - Stephanie — Russian ketchup
◦ Stephanie - Matt — Craigslist Roommates
◦ Matt - Timur — house plant
◦ Timur - Cyrill — Fleur & Manu
◦ Cyrill - Cezar — Santa Claus
◦ Cezar - Davis — Park Slope
◦ Davis - Taulant — textiles
◦ Taulant - Kenton — the nine
◦ Kenton - Omar — Loblaws
◦ Omar - Derrick — The Wire
◦ Derrick - Sam P — mesh network
◦ Sam - Ysabel — Jane the Virgin
◦ Ysabel - Brian H — train commute
◦ Brian H - Sam G — Annie Albers
◦ Sam G - Josh — fern
◦ Josh - Julia — nomadic / travel
◦ Julia - John C — running
◦ John C - Brian S — bedtime
◦ Brian S - Allison Parrish — adjunct (at NYU)
◦ Allison P - Florence — mukbang
◦ Florence - Mubashir — self taught
◦ Mubashir - Javid — Mexican food
◦ Javid - Seita — Japan

[images]
Some notes from Cyrill, Sam P, Tau

Based on all of the harvested keywords, begin to speculate what the tenants of a new online community might be. What are the values? What are the goals? How do we want to be represented? Do we want it public? Do we want it private? Do we want to create something which reflects the individuals, the community, or both?

• Group Discussion
◦ Internet personas and self-representation
◦ Imperfect algorithms
◦ Passive/Active consumption
• Reading Discussion
*For excerpts and files, please visit dat://local-area-network.hashbase.io/a-b-z-txt/readings/ on Beaker.
◦ Jane Jacobs, The Death and Life of Great American Cities
◦ Vannevar Bush, “As We May Think”
◦ A Pattern Language, “Mosaic of Subcultures”
◦ Ted Nelson, Computer Lib/Dream Machine
◦ Maarten Hajer & Arnold Reijndorp, In Search of a New Public Domain
◦ Kev Bewersdorf, “Reversing the Flow of Internet Expansion”
◦ Laurel Schwulst, “My website is a shifting house next to a river of knowledge. What could yours be?”

Day 2 and 3

Inspired by grassroots independent publishing, we will collectively build an online publication within our local area network. We will each contribute a page to this publication, exploring what it might mean to reintroduce a sense of locality to our networks. These contributions might take the form of manifestos, essays, proposals, recipes, or personal corners of the net.

• Some references
*For all references, please visit dat://local-area-network.hashbase.io/a-b-z-txt/references/ on Beaker.
◦ Whole Earth Catalog
◦ New Woman's Survival Guide
◦ Dome Books 1 & 2
◦ Autoprogettazione
◦ Computer Lib/Dream Machine
◦ Inflato Cookbook
◦ How to Build Your Own Living Structures
• Statement: A _____ that _____.
◦ A proposal for good gossip (Mike)
◦ A text that strengthens from collective readership (Brian H)
◦ An algorithm that gives you 9 friends (Cezar)
◦ A manifesto that overcrowds until reaching illegibility (Seita)
◦ A website that keeps you warm (Davis)
◦ A drawing scripture decoded for its disciples (Derrick)
◦ A local guide to hypnosis (Julia)
◦ A series of short stories with multiple outcomes (Javid)
◦ A manual to close down the street (John C)
◦ An example of a structured format that collects items for sharing (Kenton)
◦ A speculative source of value (Omar)
◦ An interface to fill the peer-to-peer web with procedurally-generated nonsense (Allison)
◦ A flag to rule (Cyrill)
◦ A tutorial for creating a dark aesthetic (Rory)
◦ A narrative that encourages people to unfollow others (Florence)
◦ A text that shows the value of collective, unified thought (Josh)
◦ A space to give more than I receive (Sam G)
◦ A reading experience for slow life (Matthew)
◦ A set of directions that takes you on a blind date (Stephanie)
◦ An acknowledgment of the context in which the internet operates and this space exists (Mubashir)
◦ A service that maps connected peers (Sam P)
◦ A dedicated day for tidying your network presence (Tau)
◦ An interface that promotes continuous real life interactions (Timur)
◦ A page that reconsiders “local area network” through neighbourhood civic infrastructures (Brian S)

Some Projects

[images]

View all projects on Beaker Browser at
dat://local-area-network.hashbase.io/a-b-z-txt .

[images]

Steph, A website for a blind date
dat://d4d4cf7526a7bea710f18eb9797c6cb3e3354d59041d711a2d630222eb144644/

[images]

Brian H, A text that strengthens from collective readership
dat://ffb9a22300a2c76a43c4e5b204b66d6f28edbda0fdad8cabd0d24ddaa79687f9/
Download A-B-Z-Times.ttf

[images]

Mubashir, An acknowledgment of the context in which the internet operates and this space exists
dat://837cf6bca44d16229dd6bc4681f52c82bae4f05f2c672f284efb632cfc83b932/

[images]

Sam P, A service that maps connected peers
dat://e5225908fe650662e6f709c579cb35cefdab2cabcc06d8ebd80c2a3bc351b9be/

[images]

Florence, A narrative that encourages people to unfollow others
dat://8bd0ba7d8dcdbc110fb89cd4528ad191ec4bb3a4e6d8a373fc2173d0b6c2aa98/

Documentation

[images]

Photos by Garry Ing"
mindyseu  jürglehni  jongacnik  p2p  p2pweb  beakerbrowser  dat  christopheralexander  apatternlanguage  janejacobs  vannevarbush  tednelson  maartenhajer  arnoldreijndorp  kevbewersdorf  laurelschwulst  2018  local  grassroots  publishing  p2ppublishing  web  webdev  webdesign  garrying  michèkechampagne  gregsmith  wholeearthcatalog  manifestos  survivalguide  decentralizedweb 
may 2019 by robertogreco
Laurel Schwulst, "Blogging in Motion" - YouTube
"This video was originally published as part of peer-to-peer-web.com's NYC lecture series on Saturday, May 26, 2018 at the at the School for Poetic Computation.

It has been posted here for ease of access.

You can find many other great talks on the site:
https://peer-to-peer-web.com

And specifically more from the NYC series:
https://peer-to-peer-web.com/nyc "

[See also:
https://www.are.na/laurel-schwulst/blogging-in-motion ]
laurelschwulst  2019  decentralization  p2p  web  webdesign  blogging  movement  travel  listening  attention  self-reflection  howwewrite  writing  walking  nyc  beakerbrowser  creativity  pokemon  pokemonmoon  online  offline  internet  decentralizedweb  dat  p2ppublishing  p2pweb  distributed  webdev  stillness  infooverload  ubiquitous  computing  internetofthings  casygollan  calm  calmtechnology  zoominginandout  electricity  technology  copying  slow  small  johnseelybrown  markweiser  xeroxparc  sharing  oulipo  constraints  reflection  play  ritual  artleisure  leisurearts  leisure  blogs  trains  kylemock  correspondence  caseygollan  apatternlanguage  intimacy  dweb 
may 2019 by robertogreco
to be
"Free expressive tools for online creation.
Formed by the thousands of artists who’ve made and own a growing collection of extraordinary work.

Camera
The to.be Camera app uncovers a fantastic digital world beneath the surface of reality. Choose from hundreds of animated backgrounds. Tap a few colors on the screen, and record a video – or enjoy a passing daydream on your screen.
http://to.be/camera

Fields
Fields are your space to collage the internet. Much deeply personal and wonderfully diverse work has been done in these fields, from the serene to the unhinged.
http://to.be/fields

Printshop
Use the best set of tools online to easily make t-shirts and other printed products. We work with amazing partners that deliver the finest quality products. All made in the USA.
http://to.be/printshop "

[via: https://www.are.na/block/736425 ]
art  collage  design  web  webdev  applications  onlinetoolkit  internet  online  cameras 
february 2019 by robertogreco
AMB 1
"An automatic mood board creator. Add images to a Dropbox folder and view them on the web instantly. Designed for unobstructed inspiration."

[via: https://www.are.na/block/736425 ]
webdev  dropbox  design  moodboards  online  onlinetoolkit  internet 
february 2019 by robertogreco
Are.na / Arrangement Collage
[also here:
https://github.com/dark-industries/dark-zine/blob/master/lukas_collage.md ]

[See also:
https://www.are.na/lukas-w/arrangement-collage ]

[via:
https://urcad.es/writing/new-american-outline/ ]

"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
Scratching the Surface — 102. Laurel Schwulst
"Laurel Schwulst is a designer, writer, teacher, and webmaster. She runs an independent design practice in New York City and teaches in design programs at Yale and Rutgers. She previously was the creative director for The Creative Independent and a web designer at Linked By Air. In this episode, Laurel and Jarrett talk about how horses got her into graphic design, what websites can be, the potential of the peer-to-peer internet, and how writing and teaching influence her practice."

[Direct link to audio: https://soundcloud.com/scratchingthesurfacefm/102-laurel-schwulst ]
jarrettfuller  scratchingthesurface  laurelschulst  2018  interviews  design  web  online  internet  are.na  lynhejinian  mindyseu  decentralization  neilpostman  charlesweingartner  juliacameron  teachingasasubversiveactivity  teaching  education  learning  howwelearn  kameelahjananrasheed  research  archiving  cv  roombaghost  graphicdesign  websites  webdev  webdesign  p2p  beakerbrowser  decentralizedweb  dat  p2ppublishing  p2pweb  distributed  dweb 
january 2019 by robertogreco
The Creative Independent: How to make a website for your creative work
"A guide to getting your work on the internet so you can share it with others, written by Jason Huff and illustrated by Sean Suchara."



"If you’re a creative person living in the world today, people will expect to be able to find some examples of your work online. How you choose to put it there, though, is completely up to you.

I got started on the web in the early aughts when I created a gallery for my creative work. I call it a gallery because it was just that: a blank space with images in a row that linked to some projects I wanted to share with friends. Since then my site has evolved, disappeared, come back, and spawned other sites that express my ideas and identity online. Each evolution was a chance to share new work in a way that reflected how I wanted people to experience it.

I work on the web everyday. I help designers, artists, and galleries discover and create their online presence. And for seven years, I designed and led teams at Etsy, a platform that helps millions of creative humans around the world use the web to make an income from their craft. In all of my work, I’ve learned that every person brings their own body of knowledge and point of view when they create their own space online. The unique approaches that each individual brings to the experience are what make the internet an interesting place to explore.

Before digging into this guide, I recommend reading Laurel Schwulst’s essay, My website is a shifting house next to a river of knowledge. What could yours be? It’s a great sister piece to this more practical guide, and provides many poetic explorations of the website format. Like Laurel mentions in her essay, “Artists excel at creating worlds.” I hope this guide will help you start creating yours.

— Jason Huff"
webdesign  webdev  howto  websites  seansuchara  jasonhuff  art  glvo  projectideas  laurelschwulst  morehshinallahyari  petracortright  americanartist  ingridburrington  damonzucconi  jennyodell  seokhoonchoi  tomjennings  carlyayres 
january 2019 by robertogreco
Scratching the Surface — 104. Cab Broskoski and Chris Sherron
"Cab Broskoski and Chris Sherron are two of the founders of Are.na, a knowledge sharing platform that combines the creative back-and-forth of social media with the focus of a productivity tool. Before working on Arena, Cab was a digital artist and Chris a graphic designer and in this episode, they talk about their desire for a new type of bookmarking tool and building a platform for collaborative, interdisciplinary research as well as larger questions around open source tools, research as artistic practice, and subverting the norms of social media."

[direct link to audio:
https://soundcloud.com/scratchingthesurfacefm/104-cab-broskoski-and-chris-sherron ]
jarrettfuller  are.na  cabbroskoski  chrissherron  coreyarcangel  del.icio.us  bookmarkling  pinterest  cv  tagging  flickr  michaelcina  youworkforthem  davidbohm  williamgibson  digital  damonzucconi  stanleykubrick  stephaniesnt  julianbozeman  public  performance  collections  collecting  research  2000s  interview  information  internet  web  sharing  conversation  art  design  socialmedia  socialnetworking  socialnetworks  online  onlinetoolkit  inspiration  moodboards  graphicdesign  graphics  images  web2.0  webdesign  webdev  ui  ux  scratchingthesurface  education  teaching  edtech  technology  multidisciplinary  generalists  creative  creativitysingapore  creativegeneralists  learning  howwelearn  attention  interdisciplinary  crossdisciplinary  crosspollination  algorithms  canon  knowledge  transdisciplinary  tools  archives  slow  slowweb  slowinternet  instagram  facebook 
january 2019 by robertogreco
txt.fyi
"This is the dumbest publishing platform on the web.

Write something, hit publish, and it's live.

There's no tracking, ad-tech, webfonts, analytics, javascript, cookies, databases, user accounts, comments, friending, likes, follower counts or other quantifiers of social capital. The only practical way for anyone to find out about a posting is if the author links to it elsewhere.

But it is legible, no-nonsense static hypertext, good for short stories, not-short-enough tweets and adventures and all your numbers station or internet dead drop needs. Here you can scream into the void and know the form of your voice is out there forever.

Search engines are instructed not to index posts and I'll do my best to make sure this isn't used as a tool by spammers or other abusers. Nonetheless, posting will be turned off if anything bad grows out of it.

Use basic Markdown to format posts: #header, **bold**, *italic*, `code`, >quote, and hyperlinks in the format [link](http://example.com). Try !hacker and !professor and !timestamp too.

Be sure to email and tell me how to make it better.

Many thanks go to Ken Snider, @zemnmez, Ben Overmyer, Johannes Kröger and the others.

Long live the independent web!

Rob Beschizza | beschizza.com | @beschizza"
internet  publishing  onlinetoolkit  web  webdev  simplicity  robbeschizza  via:ayjay 
january 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
Lesspod: Serverless Websites
"Lesspod lets anyone build and deploy website+blog combination to serverless platforms (starting with Firebase). Key benefits:

• Super fast page load times.
• Infinite scalability of the cloud.
• No servers to manage or related problems.
• Free forever hosting! (for 99% websites)

This is a serverless website hosted freely on Firebase."
webdev  webdesign 
november 2018 by robertogreco
enoki
"An experimental platform tool for peer-to-peer publishing

Free
Culture wants to be free. No monthly hosting fees or billing to keep up with.

Decentralized
Instead of being confined to a centralized platform, publish directly with Dat.

Offline first
No internet? No problem. Sync changes automatically when reconnecting.

Own your content
This is a tool! Your content stays with you, not a greedy platform.

Archival
Easily go back in time and revert to previous versions of your site whenever!

Open source
Built with open source projects; released as an open source project."
enoki  p2p  publishing  web  online  internet  webdev  webdesign  cms  free  opensource  archives  archival  offline  decentralization  beakerbrowser  dat  p2ppublishing  decentralizedweb  p2pweb  distributed  dweb 
october 2018 by robertogreco
The Creative Independent: On exploring how to be online in radical ways [interview with Tara Vancil, co-creator of Beaker Browser]
"Web developer Tara Vancil discusses the peer-to-peer web, the current state of self-publishing, and the future of the internet."


"[Q] I love that Beaker has a built-in editor. There’s this all-in-one feel to it where you can browse and publish websites from the browser. I was curious what self-publishing means for you and why it’s important?

[A] Well, there’s this myth floating around on the web that the very first web browser, it was called WorldWideWeb, made by Tim Berners-Lee actually had an editor built into it. Now, I’ve never been able to 100% confirm this with him, or anybody, but there’s kind of just the shared history that goes around on the web, so I’m willing to believe it. When I found that out, it was really interesting because we had been building the early prototype of Beaker and it was quite different from what it is now. It did have a button that let you create a website from the browser, so self-publishing was a part of Beaker very early on. But we didn’t fully understand how important facilitating self-publishing would be. It was fairly recently that we decided to put in an editor. We thought it would be too much work to maintain, we thought people wouldn’t care, we thought they’d prefer to use their own editors. And then one day, we just realized like, “You know what? No, a browser really should help people participate in the web.”

So self-publishing, for me, is not necessarily about owning your content. It’s not all about enabling creativity. There are other tools that enable creativity. I think it’s about creating opportunities for the widest swath of people to participate on the web. I think right now, there are so many barriers that can pop up at any given moment when you decide, “I want to make an app, I want to make a game, I want to publish my portfolio, or I want to create an interactive art piece.” With Beaker, self-publishing is about reducing as many of those barriers as possible, so that literally everybody can have some hope of meaningfully participating on the web. Because why not? That’s what the web is. It’s this really strange thing.

I like to call the web humanity’s shared language. We’ve all come together, by some miracle, as a society to define a set of rules and technical standards about how we will communicate, how our computers will communicate with each other, and people all over the world use this. I mean, that’s pretty miraculous that we’ve managed to do that. So why shouldn’t everybody be able to build stuff on it, and share things on it? It seems really sad that right now that’s not the case, and I think it’s also boring.

[Q] There seems to be a general feeling that HTTP doesn’t provide a productive space any longer. Recently there’s been a lot of interest in going offline or just slowing down. I wanted to get your thoughts on the offline first movement and if you align yourself with it?

[A] Offline first is a funny concept to me because it’s rooted in both very corporate ideology and very anti-corporate ideology. So there’s one meaning for offline first, I think it was coined by Google, and this was a way for building applications such that low-power devices in places that have really bad connectivity could cache an application’s or website’s assets so that it can still function well. I think this is an honorable effort to build applications with the expectation that we don’t live in an equitable world, but we have to remember that a corporation like Google is motivated to do that because they want to sell more devices, and they want to further the reach of Gmail and their other tools.

And then there’s the other side of the movement, where offline first means something very different to another group of people. If you’ve heard of Secure Scuttlebutt, it’s a peer-to-peer online friends space. It’s a place for people to post content and share things with their friends without having to connect through something like Twitter or Facebook. And a lot of the folks that participated there in the early days were really interested in finding ways to live a little more independently, to maybe not depend entirely on the electrical grid, or to be able to live on a boat, or to maintain their own garden. I think that reflects an interest in slowing down, and a reaction to the speed of consumption that the web of today demands of us.

So at the end of the day, I think offline first—by both definitions—is rooted in the observation that we don’t live in an equitable world, and modern applications do not serve everybody. They don’t serve every kind of lifestyle. I’m definitely interested in living in a home with electricity and modern amenities but I’m also really interested in doing that responsibly, and I care a lot about my own sanity and other people being able to maintain their sanity in this hyper-connected world. I think a lot of us are perhaps exploring how we do that for the long-term. So I like being online and I want to continue being online, but I think looking to these communities that are exploring how to be online in radical ways, is really important.

[Q] Beaker is a good example of that. In my own exploration of the peer-to-peer web, I’ve needed to either be sent a link directly from somebody, or be in connection with the HTTP web to find websites on the p2p web. I’m curious what the longer-term goals are? Is it sort of like in tandem with the current web, or is the goal to replace HTTP with peer-to-peer protocols?

[A] Yeah, there’s an interesting effect on the peer-to-peer web where you kind of have to bootstrap your experience somehow. You either have to have a chat open with a friend so that you can send links between each other, or you need to have a curated list of websites and projects that you want to visit. And interestingly, I think that’s a problem that the HTTP web suffers from as well. It’s an aggregation problem. If you think back to the early days of the HTTP web, someone—or some company—had to go out there and crawl the web, and collect the links that they found, and then publish them somewhere. That’s just a fact of how networks work. It’s hard to aggregate content independently.

So I think what that means is that if the peer-to-peer web is going to become a part of the web as we know it, then so are search engines and aggregators. And maybe those search engines will use HTTP just because it’s easier for that purpose. Maybe not. I’m not sure that we need to replace HTTP entirely to fix what’s wrong with the web. I think we need to replace HTTP in cases where it encourages centralization of governance over our communities, and it discourages innovation and the ownership of our online experiences. That’s why I think it’s so important that people are able to publish their own websites, for example, because a website can be anything. It can be the place where you post your micro-blogs, like your tweets. It can be a place where you post blog posts, which is pretty obvious. It could be a place where you post photos or art projects, and I feel that the HTTP web makes it so difficult to do that right now. As a result, we’re cornered into the situation where we have to publish on Twitter, and Facebook, and Instagram. And that’s fine, those are pretty cool platforms, but they also constrain us, and I think we’re starting to understand the limits and the consequences of that.

[Q] It might be a positive thing that you can’t search the peer-to-peer web currently, in that it has to be such a personal connection where my friend will send me a link to a website. HTTP is a constant process of following links to other links. On the p2p web it’s more about accessing a page and then reading it to the end, and then maybe going offline after that.

[A] Yeah, there’s a certain finiteness to it, which is blissful at times. I’m not sure it’ll stay that way forever. There’s a lesson to be learned about how it feels to use the peer-to-peer web. I’ve found websites where I couldn’t believe I found them. It felt like I’d just stumbled upon a treasure. Like, “Wow, this person is out there and they’ve made this thing. I want to read everything they’ve posted,” and then that’s the end of it. It’s a really satisfying experience.

[Q] It also feels like you have to forget what you thought the web was when you’re approaching the p2p web. I find it pretty difficult to describe what the peer-to-peer web is, and I think maybe that’s not just me. It’s broad, it’s many different things, it’s multi-layered.

What does your ideal web look like?

[A] I want a web that I can build on. I love building on the web so much. To me, websites are my canvas. I grew up in a family that I think looked down on anything that smelled of creativity. I grew up hunting, watching football, and playing sports. There’s no creative exploration in that. I became exposed to the creative process fairly late in my life, and the canvas for me is websites. I love the feeling that I get when I sit down with a blank slate, and I know how to use the tools, I know how to wield HTML and CSS and bend it to my will. I want a web that is conducive to that, and I don’t want to just build standalone websites. I would love to build things that are meaningful to people, that have users, and then I want those users to be able to take what I’ve made and be able to shape it into something new.

On the web today, I feel like I can build something amazing, and I can go out and find people who want to use what I’ve built. But it’s a very rigid process. To build something, I first of all probably have to find investment because launching a service on the web, launching an app that’s actually going to get wide usage, is really, really expensive. So I think I want a web that makes that process cheaper, and distributes the cost of bandwidth and storage across its users. And then beyond that, I want a web that doesn’t try to lock down the experience of … [more]
beakerbrowser  taravancil  2018  publishing  self-publishing  online  internet  time  longevity  ephemeral  ephemerality  collaboration  technology  design  decentralization  radicalism  web  webdev  webdesign  seeding  p2p  peertopeer  http  dat  decentralizedweb  independence  hashbase  p2ppublishing  p2pweb  selfpublishing  distributed  dweb 
october 2018 by robertogreco
Brutalist Web Design
"Guidelines for Brutalist Web Design
Raw content true to its construction

• Content is readable on all reasonable screens and devices.
• Only hyperlinks and buttons respond to clicks.
• Hyperlinks are underlined and buttons look like buttons.
• The back button works as expected.
• View content by scrolling.
• Decoration when needed and no unrelated content.
• Performance is a feature.

What is Brutalist Web Design?

The term brutalism is often associated with Brutalist Architecture, however it can apply to other forms of construction, such as web design. This website explains how.

The term brutalism is derived from the French béton brut, meaning “raw concrete”. Although most brutalist buildings are made from concrete, we're more interested in the term raw. Concrete brutalist buildings often reflect back the forms used to make them, and their overall design tends to adhere to the concept of truth to materials.

A website's materials aren't HTML tags, CSS, or JavaScript code. Rather, they are its content and the context in which it's consumed. A website is for a visitor, using a browser, running on a computer to read, watch, listen, or perhaps to interact. A website that embraces Brutalist Web Design is raw in its focus on content, and prioritization of the website visitor.

Brutalist Web Design is honest about what a website is and what it isn't. A website is not a magazine, though it might have magazine-like articles. A website is not an application, although you might use it to purchase products or interact with other people. A website is not a database, although it might be driven by one.

A website is about giving visitors content to enjoy and ways to interact with you.

The design guidelines outlined above—and detailed below—all are in the service of making websites more of what they are and less of what they aren't. These aren't restrictive rules to produce boring, minimalist websites. Rather these are a set of priorities that put the visitor to your site—the entire reason your website exists—front and center in all things."
webdev  webdesign  brutalism  design  guidelines  web 
october 2018 by robertogreco
LOW←TECH MAGAZINE: How to Build a Low-tech Website?
"Our new blog is designed to radically reduce the energy use associated with accessing our content."



"Static Site…
Dithered Images…
Default typeface / No logo…
No Third-Party Tracking, No Advertising Services, No Cookies…"

[Update: See also:
https://www.fastcompany.com/90246767/the-future-of-web-design-is-less-not-more
https://walkerart.org/magazine/low-tech-magazine-kris-de-decker ]
webdev  webdesign  publishing  sustainability  web  online  internet  energy  low-techmagazine  lowtech  low-tech 
september 2018 by robertogreco
Dat Project - Welcome!
"A distributed data community
Dat is a nonprofit-backed data sharing protocol for applications of the future."
distributed  p2p  sharing  data  collaboration  beaker  hashbase  dat  beakerbrowser  webdev  webdesign  p2ppublishing  decentralizedweb  p2pweb  online  web  internet  dweb 
august 2018 by robertogreco
itty.bitty
"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 Codepen.io - 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
Below the Surface - Archeologische vondsten Noord/Zuidlijn Amsterdam
"The archaeological project of the North/South metro line

Urban histories can be told in a thousand ways. The archaeological research project of the North/South metro line lends the River Amstel a voice in the historical portrayal of Amsterdam. The Amstel was once the vital artery, the central axis, of the city. Along the banks of the Amstel, at its mouth in the IJ, a small trading port originated about 800 years ago. At Damrak and Rokin in the city centre, archaeologists had a chance to physically access the riverbed, thanks to the excavations for the massive infrastructure project of the North/South metro line between 2003 and 2012.

Rivers in cities are unlikely archaeological sites. It is not often that a riverbed, let alone one in the middle of a city, is pumped dry and can be systematically examined. The excavations in the Amstel yielded a deluge of finds, some 700,000 in all: a vast array of objects, some broken, some whole, all jumbled together. Damrak and Rokin proved to be extremely rich sites on account of the waste that had been dumped in the river for centuries and the objects accidentally lost in the water. The enormous quantity, great variety and everyday nature of these material remains make them rare sources of urban history. The richly assorted collection covers a vast stretch of time, from long before the emergence of the city right up to the present day. The objects paint a multi-facetted picture of daily life in the city of Amsterdam. Every find is a frozen moment in time, connecting the past and the present. The picture they paint of their era is extremely detailed and yet entirely random due to the chance of objects or remains sinking down into the riverbed and being retrieved from there. This is what makes this archaeological collection so fascinating, so poetically breathtaking and abstract at one and the same time.

In the following pages the scope and methods of the excavations are explained with special reference to the special nature of the River Amstel as an archaeological site, the specific goals of the research at Damrak and Rokin and the digital processing of the hundreds of thousands of finds, resulting in the website belowthesurface.amsterdam and the catalogue Stuff which presents 11,279 photographs of finds of the North/South metro line archaeological project."
amsterdam  history  museums  archaeology  rivers  cities  webdev  archives  time  timelines  collections  classideas 
june 2018 by robertogreco
Micro.blog
"Today's social networks are broken. Ads are everywhere. Hate and harassment are too common. Fake news spreads unchecked.

There's a better way: a network of independent microblogs. Short posts like tweets but on your own web site that you control.

Micro.blog is a safe community for microblogs. A timeline to follow friends and discover new posts. Hosting built on open standards.

Use Micro.blog from the web or with native apps for iOS and macOS. Learn more about why I created Micro.blog."

[See also: "Why I created Micro.blog"
http://help.micro.blog/2015/why-i-created-this/ ]
via:ayjay  web  online  microblogs  onlinetoolkit  indieweb  socialnetworking  socialmedia  publishing  blogging  blogs  webdev  webdesign 
may 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.

[image]

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.”

[image]

“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
Web Accessibility: What You Say vs. What I Hear | Think Company
"AVOID CREATING BARRIERS FOR PEOPLE

While the following list isn’t comprehensive, it could be a starting point for thinking about accessibility in your work and organization. Consider how you could unintentionally make it difficult for people to access your content and begin by shifting your perspective.

1. Think about accessibility from the very beginning. Communicate it across business, design, development, and testing.

2. Make accessibility a priority, a business case, and a part of your organization’s definition of “done.”

3. Include people with disabilities in your user personas and conduct research and studies with real people.

4. Make sure everyone gets accessibility training. Learn how to use assistive technology.

5. Think about multiple methods to convey information and interact with user interface.

6. Apply proper keyboard support and think about tab order. This will ensure a baseline level of accessibility for various assistive technology.

7. Design and develop according to the latest standards.
Create internal accessibility standards and requirements.

8. Let’s change the dialogue around accessibility. People want to hear what you’re saying."
via:dirtystylus  accessibility  advocacy  webdev  webdesign  web  online  internet  mikeyilagan  standards  disabilities  disability  assistivetechnology  technology 
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.

Shortcodes
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
Robot Hugs on Twitter: "hey twitter - there's a lot of good awareness now about the fact that all users can add image descriptions to twitter for people who use scr… https://t.co/9E8wJipMaK"
"hey twitter - there's a lot of good awareness now about the fact that all users can add image descriptions to twitter for people who use screen readers. Here's some tips on how to do this well:
(This is my job)

you generally don't have to say 'image of' or 'photograph of'. Just describe what the image is conveying - what the user is intended to get out of seeing it. Some examples:

Tweet: Don't worry TO, It's going to get better soon!!
Unhelpful description: Toronto weather forecast
Helpful description: Forecast for Toronto temperatures, showing -18 Celsius today improving to -1 Celsius by Tuesday.

weet: Tired of going to conferences where the speaker lineup looks like this
Unhelpful description: headshots of featured conference speakers
Helpful: 8 headshots of featured conference speakers that are all white and male
(Don't @ me, this is to demo intent)

Tweet: "U of T's new building has some accessibility issues..."
Unhelpful description: staircase with pillar in the middle
Helpful description: a blind man collides with a large pillar that interrupts a handrail going up the middle of a large staircase

so: Don't overthink it. Make it as short as possible while describing what the photo is trying to convey. Any description is better than no description.

Note: these guidelines are what i use after doing research and consulting with visually impaired users for my work. Opinions on the best kind of description may differ - accessible design is a diverse field! I encourage you to do your own research as well.

oh, in response to a question: It's ok to mention colour if it's relevant to an image! Many screen-reader users are partially signed and use descriptions to clarify blurry/indistinct images. Also folks do understand the concept of colour...

here are some more potential examples because i love you all:

charts are hard! my attempt:
tweet: We have a new prime number and it’s 23 million digits long
Description: graph showing length of known prime numbers over time, starting at under 10 digits 1588 and increasing dramatically since mid 1900s to over 10 million digits in early 2000s

trying to conveying the joke/meaning?
description: dogs outside looking around. one dog is looking suspiciously with narrowed eyes at the picture taker.
(if you see your tweet don't feel called out! It's just an example)

oh! I should amend this - if it's a personal thing you don't have to be impersonal about it! This could read 'my dogs are looking around outside. Ruffles is looking suspiciously at me with narrowed eyes'.

ANYWAYS if anyone wants me to show the kind of description i might add to a particular image or example just @ me and I'll do my best!

i really want to reiterate that for social media in particular, personal/opinion descriptions are ok (as long as they describe the intent of the image!). i might post a selfie with description 'a selfie of me where i think my purple hair looks really cute today'

i think there's a misconception that accessibility always has to be formal and stiff. When doing 3rd party/pro content, it should err on objective, but social media is also an emotion and expressive space and image descriptions can try to capture that

seriously everyone don't stress just do your best. it will become more natural with time, i promise. you're all great!

Good moooorning everyone. I'm going to add a few more notes here based on some questions I got yesterday.

1) people pointed out that I didn't explain how to enable this setting,. My bad! On your computer or device, go to settings and privacy>accessibility and 'compose image descriptions' is an option. There will then be a field when you add an image. (not supported on tweetdeck)

2) the reason you don't need to write 'image of Bart Simpson on a skateboard' is that screen readers already know that there's an image. They typically announce something like 'image: (the description you wrote)", so 'image: image of Bart Simpson' is redundant.

3) You won't see the description after you've added it to an image, but it has become a part of the image info that screen readers see. If you want to see the description attached to an image ("alt text") on an image from your computer...

Chrome/firefox: right click on image, choose 'inspect' or 'inspect element' and the "alt=...' text in the highlighted field will be the description attached.

There are also a bunch of extensions you can add to your browser to make them visible if you want to get an appreciation for how little people actually do proper alt text across the internet and how good you are for trying!

(4) If you want to go even deeper, you can play around with some screen readers! Android has Voice Assistant found in setting > accessibility > vision, and it has a fun tutorial you can work through.

Apple products use VoiceOver. NVDA is also a free screen reader you can install and play around with, and Windows 7 and later have Narrator.

Google any of these for examples on how people use them and how to play around with them!

accessibility is a super rewarding and deep topic, and if you're interested there are tons of resources to check out. But you don't have to be an expert to do your part! Being a thoughtful poster and taking an extra 30 seconds to add descriptions puts you well ahead of the pack."
accessibility  captions  web  online  screenreaders  2018  twitter  images  webdev 
january 2018 by robertogreco
Publish good looking Google Docs
"Google Docs are nice, but they look ugly when published to the web. Well... not anymore!"



1 Edit your document in the google doc A4/Letter document interface
2 Publish it to the web...
3 Ohhh snap, the style is completely broken
4 Thanks to gdoc.pub, you get to publish it decently"



"YOUR ARTICLE
Google Docs becomes a WYSIWYG editor instantly

YOUR RESUME
Bring your good looking resume online instantly

YOUR COVER LETTER
Edit it as a document and changes apply immediately

YOUR SPREADSHEET NEW
Works with a live dashboard or any table you like

This project is open source"

[via: https://gdoc.pub/doc/e/2PACX-1vTkYJ0qIfbMDSSPYiRoIkwcags8BV610Qf7Rt0P83Y91j2o1u9eVzcqcyNA3AYr0nf1b8UjnrvSJtaD ]
webdev  onlinetoolkit  googledocs  opensource  formatting  web  online  wysiyg  publishing  epublishing 
january 2018 by robertogreco
Stencil
"Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

Virtual DOM
Async rendering (inspired by React Fiber)
Reactive data-binding
TypeScript
JSX
and then generates standards-based Web Components with these features baked in.

Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components. Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

Compared to using Custom Elements directly, Stencil provides extra APIs that makes writing fast components simpler. APIs like Virtual DOM, JSX, and async rendering make fast, powerful components easy to create, while still maintaining 100% compatibility with Web Components.

The developer experience is also tuned, and comes with live reload and a small dev server baked in to the compiler.

Why Stencil?
Stencil was created by the Ionic Framework team to help build faster, more capable components that worked across all major frameworks.

While Ionic primarily targeted Cordova apps, the emergence of Progressive Web Apps as a rapidly growing target for web developers demanded a different approach to web app development performance. With Ionic's classic use of traditional frameworks and bundling techniques, the team was struggling to meet latency and code size demands for Progressive Web Apps that ran equally well on fast and slow networks, across a diversity of platforms and devices.

Additionally, framework fragmentation had created a web development interoperability nightmare, where components built for one framework didn't work with another framework.

Web Components offered a solution to both problems, pushing more work to the browser for better performance, and targeting a standards-based component model that all frameworks could use.

However, Web Components by themselves weren't enough. Building fast web apps required innovations that were previously locked up inside of traditional web frameworks. Stencil was built to pull these features out of traditional frameworks and bring them to the fast emerging Web Component standard."
webcomponents  javascript  web  generator  onlinetoolkit  webdev 
january 2018 by robertogreco
Tome PressDigital Academic Publishing Tool
"Tome is for scholars and students to write online with media and community in mind

SIGN UP FOR TOME
Digital academic writing poses new opportunities and challenges. While there is no substitute for good writing, digital formats affect the ways we write and read on screens. Can long, scholarly arguments be sustained online? Rich media offers us ways to capture movement, sound, and other forms of 'live' practice that could not previously be included in print publications. Online and collaborative writing additionally build their own communities of readers, reaching audiences that previously did not have access to many important materials. Over the past 10 years, we have worked closely with scholars and students to develop books, dossiers, journals and other forms of online publications.

Why Tome?
Tome features MLA and Chicago referencing, academic type formatting, interactive Google maps, audio, galleries, chat, comments, blog, and annotations in a powerful but intuitive platform built on the WordPress framework. Easily manage your chapters or essays, media library, and bibliography. Share, and invite others to write and contribute for broader course projects. Publish and flatten your book when finished to preserve the material.

Do it Together
With the ability to invite multiple users, write multilingual chapters, keep blogs and easily create and manage a large, 5GB online archive, it is easy to create class-wide collaborative writing and digital humanities projects. We have created pilot programs with professors and libraries at Columbia, NYU, NYU Abu Dhabi, University of Colorado Boulder, USC, and UCSB and University of Miami to explore the role of technology in pedagogy. We have consulted with hundreds of students and scholars to create quick essays, continuing publication series, published books, and collaborative class projects.

Who We Are
We are dedicated to developing the next generation of academic writing tools and techniques. By working hands on with students, authors, librarians, archivists and visual artists, we hope to expand familiarity and participation in the digital humanities. Our interests include preservation, meta-data, tags, and accessibility. Tome's research team has involved students, professors, authors, designers, film makers, and activists. Our designers have created digital books for 10 years."
hemipress  tome  webdev  publishing  mla  annotation  digital  digitalpublishing  writing  onlinetoolkit  archives 
january 2018 by robertogreco
HemiPress –
"HemiPress is the Hemispheric Institute’s digital publications imprint, created to house and centralize our diverse publication initiatives. Using a variety of customized open-source digital humanities platforms, HemiPress includes the Gesture short works series, the Duke U.P./HemiPress digital books, stand-alone essays, and the Institute’s peer-reviewed journal emisférica, alongside interviews, Cuadernos, and other online teaching resources. It also provides state-of-the-art multilingual publication capacities and immersive formats for capturing the “live” of performance, as well as a digital “bookshelf”—the interface that houses all of the Institute’s publications and connects communities of readers across the Americas."

[Digital Books:
https://hemi.press/digital-books/

"The Hemispheric Institute's focus on embodied practice requires both methodological and technological innovation. Through our Digital Books initiative, which utilizes both the Scalar and Tome publication platforms, we seek to create media-rich scholarly publications in order to produce and disseminate knowledge across geographic, linguistic, disciplinary, and mediatic borders. Staging a unique intervention in the field of academic publishing, Digital Books allows authors to utilize not only images and video, but also multilingual subtitles, maps and geotags, audio recordings, slideshows, and photo-essays, alongside other interactive features. Whether solo-authored, collaboratively written, or compiled as an edited volume, this critical initiative invites scholars, artists, activists, and students to explore the expansive possibilities of digital publishing in a hemispheric context."



"Tome [http://tome.press/ ] is an online authoring tool that facilitates long-form publishing in an immersive, media-rich environment. Built on the WordPress framework and in collaboration with the Hemispheric Institute, Tome features a suite of custom plugins that empowers scholars, students, and artists to create innovative born-digital work. Recent Tome publications include El Ciervo Encantado: An Altar in the Mangroves (Lillian Manzor and Jaime Gómez Triana), Art, Migration, and Human Rights: A collaborative dossier by artists, scholars, and activists on the issue of migration in southern Mexico, Villa Grimaldi (Diana Taylor), and six gestures (peter kulchyski)."



"Scalar [https://scalar.me/anvc/ ] is a free, open source authoring and publishing platform that’s designed to make it easy for authors to write long-form, born-digital scholarship online. Scalar enables users to assemble media from multiple sources and juxtapose them with their own writing in a variety of ways, with minimal technical expertise required. Scalar also gives authors tools to structure essay- and book-length works in ways that take advantage of the unique capabilities of digital writing, including nested, recursive, and non-linear formats. The platform also supports collaborative authoring and reader commentary."]

[See also: emisférica
https://hemi.press/emisferica/

"emisférica is the Hemispheric Institute’s peer-reviewed, online, trilingual scholarly journal. Published biannually, journal issues focus on specific areas of inquiry in the study of performance and politics in the Americas. The journal publishes academic essays, multimedia artist presentations, activist interventions, and translations, as well as book, performance, and film reviews. Its languages are English, Spanish, and Portuguese."



"Dossier: Our dossiers are organized around a given theme and feature short texts, interviews, artworks, poetry, and video."



"Essays: We publish invited essays, essays submitted through our open calls, and translations of significant previously published works."



"Reviews: We review books, films, and performances from throughout the Americas"



"Multimedios: Multimedios are digital modules that feature the work of individual artists, artist collectives, curatorial projects, and activists movements. These video and photography, interviews, catalogue texts, essays, and critical reviews."]
publishing  americas  latinamerica  ebooks  epublishing  opensource  español  spanish  portugués  portuguese  digital  digitalpublishing  books  journals  multimedia  photography  poetry  video  art  wordpress  webdev  onlinetoolkit  scalar  hemipress 
january 2018 by robertogreco
Online Portfolio Website Made Easy - Format
"Attract potential clients and brand new opportunities with a portfolio that truly represents your work. Build your professional portfolio in just a few clicks — without learning to code."
webdev  portfolios  webdesign 
december 2017 by robertogreco
Building Flexible Design Systems // Speaker Deck
[via: "I’ve quoted from this deck more than any other this year. “No hypothetical situations” applies to all kinds of problem sets—not just design. https://twitter.com/yeseniaa/status/925840684715782145"
https://twitter.com/tangentialism/status/925842143540805638

"(Also, one reason I love this framing is that it calls implicitly for close listening and observation to unearth hidden problems)"
https://twitter.com/tangentialism/status/925848643550183424 ]
design  webdesign  webdev  yeseniaperez-cruz  listening  obsrvation  systemsthinking  flexibility  systems  layout  scenarios  patterns  christopheralexander  donellameadows  audience  content  modularity  customization  designsystems 
november 2017 by robertogreco
Why cards are the future of the web - Inside Intercom
"Cards are fast becoming the best design pattern for mobile devices."



"In addition to their reputable past as an information medium, the most important thing about cards is that they are almost infinitely manipulatable. See the simple example above from Samuel Couto Think about cards in the physical world. They can be turned over to reveal more, folded for a summary and expanded for more details, stacked to save space, sorted, grouped, and spread out to survey more than one.

When designing for screens, we can take advantage of all these things. In addition, we can take advantage of animation and movement. We can hint at what is on the reverse, or that the card can be folded out. We can embed multimedia content, photos, videos, music. There are so many new things to invent here.

Cards are perfect for mobile devices and varying screen sizes. Remember, mobile devices are the heart and soul of the future of your business, no matter who you are and what you do. On mobile devices, cards can be stacked vertically, like an activity stream on a phone. They can be stacked horizontally, adding a column as a tablet is turned 90 degrees. They can be a fixed or variable height.

Cards are the new creative canvas

It’s already clear that product and interaction designers will heavily use cards. I think the same is true for marketers and creatives in advertising. As social media continues to rise, and continues to fragment into many services, taking up more and more of our time, marketing dollars will inevitably follow. The consistent thread through these services, the predominant canvas for creativity, will be card based. Content consumption on Facebook, Twitter, Pinterest, Instagram, Line, you name it, is all built on the card design metaphor.

I think there is no getting away from it. Cards are the next big thing in design and the creative arts. To me that’s incredibly exciting."
cards  web  webdesign  webdev  userinterface  ux  userexperience  ui  design  mobile  pauladams 
september 2017 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
Statistics on flag colors
[via:

"what's the least common colour used on web pages?"
https://twitter.com/v21/status/911963557763407872

"digging into this a little reveals no real answers, but did turn up this lovely page on colours in flags: http://www.crwflags.com/fotw/flags/xf-csts.html "
https://twitter.com/v21/status/911970920394346497 ]
flags  color  data  statistics  webdev 
september 2017 by robertogreco
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
"HTML5 UP
... makes spiffy HTML5
site templates that are:
Fully
Responsive Built on intelligent
HTML5 + CSS3 Super
Customizable100% Free under the
Creative Commons"

[via (used here): http://www.jessamyn.com/ ]
webdev  html5  responsive  webdesign  html  free  templates 
september 2017 by robertogreco
Economy
"An easy, powerful, and flexible authoring system for websites that grow with your organization."



"Magic modules

Each site begins with a bespoke set of beautifully designed modules, created for you by the design studio Linked by Air. These modules have programmatic and interactive intelligence as well as good looks. Your authors combine them in any order to create millions of possible pages. This visual grammar becomes a functional language your website can use for years."



"Responsive layouts

Pages automatically optimize themselves for display on smartphones and tablets, and just as important, for use on the go. On desktop, images and layouts stretch to immerse users with the largest displays, while preserving great typography."



"Fun and easy to use

Economy is powerful, but its interface is beautifully simple and foolproof. With just a couple satisfying gestures you know almost everything you need to create and improve pages. Many users describe a feeling of “flow,” and Economy might be the only content management system that is often called “fun to use.”"



"Version history

Economy encourages experimentation and continuous iteration. When content or a site area no longer meets your requirements, improve it. A complete visual history is kept of every page, including an automatic screenshot of each version. All edits are attributed to the user who made them, and a page can be rolled back to any previous version. Drafts can be created which are only visible to staff – not yet to the public."



"Bring in data

You can craft pages one by one using your flexible kit of magic modules, but sometimes you need a more structured approach to your data. Economy features beautiful indexes and forms that give you access at a glance to all your calendar events, exhibitions, books, products, artworks, artists, users… or almost anything else."



"Smart automation

Your site can run itself. Pages update automatically to feature the latest Twitter posts, today’s events, upcoming exhibitions, or content relevant to the logged-in user. Use the time you gained to dream up new projects. Or get some fresh air."



"Commerce as content
For sites with e-commerce, Economy has handled shops with as few as ten distinct products, and as many as 40,000. Economy integrates product delivery throughout the site, in addition to a distinct “shop” area. For example, purchasing a printed exhibition catalog is as seamless as reading a text online, and either can be done directly on a relevant exhibition page or blog post. In this way, all the amazing content on your site helps support your sales conversions. At the same time, users will value your physical products for their substance, not only as merchandise. Products are integrated with all other search results. A visible shopping cart appears throughout the site once a user has selected the first product for purchase, and Economy’s checkout flow is best of breed and highly customizable. Economy is a great mobile commerce solution, and can also integrate with an in-store point of sale system for unified inventory management."

[See also:
https://www.linkedbyair.net/
https://www.youtube.com/watch?v=YhOnOzAj5wY ]
via:caseygollan  cms  webdev  webdesign 
august 2017 by robertogreco
hello world | metaflop
"metaflop is an easy to use web application for modulating your own fonts. metaflop uses metafont, which allows you to easily customize a font within the given parameters and generate a large range of font families with very little effort.

with the modulator it is possible to use metafont without dealing with the programming language and coding by yourself, but simply by changing sliders or numeric values of the font parameter set. this enables you to focus on the visual output – adjusting the parameters of the typeface to your own taste. all the repetitive tasks are automated in the background.

the unique results can be downloaded as a webfont package for embedding on your homepage or an opentype postscript font (.otf) which can be used on any system in any application supporting otf.

various metafonts can be chosen from our type library. they all come along with a small showcase and a preset of type derivations.

metaflop is open source – you can find us on github, both for the source code of the platform and for all the fonts."

[See also:
https://en.wikipedia.org/wiki/Metafont
http://www.servinglibrary.org/journal/1/a-note-on-the-type ]
via:caseygollan  design  typography  fonts  webfonts  metafont  webdev 
august 2017 by robertogreco
18F Design Presents — Language: Your Most Important and Least Valued Asset - YouTube
"Have you ever felt like differences in language were holding your project back? Perhaps you have tried to standardize language across parts of your team only to find you have opened a huge can of worms?

The experiences we make for our users are made of language choices. We also depend on language to collaborate with the people we work with. Yet language is most often only tended to when you talk about things like content and copy.

Controlling your vocabulary is one of the murkiest messes you can take on, but it also might be one of the most impactful ways you could impact your organization’s ability to reach its goals.

In this online event, we ask information architect Abby Covert to share some strategies and tactics that could help us to pay closer attention to language choices we make."

[via: https://twitter.com/nicoleslaw/status/893280169439264769 ]
language  content  design  18f  contentstrategy  2017  informationarchitecture  abbycovert  information  webdev  webdesign  communication  vocabulary  misinformation  clarity  welcome  hospitality  audience  sfsh  mentalmodels  context  culturallyresponsivedesign  tone  nouns  verbs  wordchoice  duplicity  controlledvocabulary 
august 2017 by robertogreco
NewSchool
"NewSchool

• state-approved alternative school
• all-day school (secondary education)
• ethical, socio-critical, ecological and sustainable orientated
• inter-year groups
• interdisciplinary
• individualized project plans
• based on students’ needs
• cooking and eating together
• located in an entrepreneurial environment
• very realistic approach
• strong bonds with experts / between experts and NewSchool
• co-operations with companies, institutes, academies ecc.
• social engagement “social service”
• stays in nature on a regular basis

Listen, laugh and learn!

Especially during puberty, for many students going to school means trying to avoid schoolwork and commitments, or trying to escape all the “shoulds” they hear from parents and teachers. It seems like the only goal is getting to the next grade. We founded our school to give young people a chance of a fulfilled, enjoyable school experience that helps them to feel equipped for and to be curious about life.

Our school is a laboratory, a studio where Talents are given the chance to experiment. Each Talent will explore their strengths and find out what drives them. This is done through listening, cooperating, approaching challenges in a curious way, and following unique paths. Emotional intelligence, critical thinking, and problem-solving skills are essential for us at the NewSchool. Everyone learns from everyone else.

That’s why we go out into the real world. We experience nature, visit businesses, and go wherever the action is. We also gain new inspiration through communicating with experts (e.g. via Skype) from all over the world. Entrepreneurs, artists, managers, artisans – all of these experts are welcome at our school, no matter their ethnicity or religion. They provide information and support, or give us an insight about what their real life is like.

In cooperation with teachers, coaches, and experts, Talents develop projects, which they can pursue in a creative, engaged, interdisciplinary way working in inter-year groups. Young people and adults work together equally throughout the process, one that inspires them rather than constricting their ideas. We do learn by doing. It is our actions that spur our desire to engage with issues, groups of people, nature, and ethical questions. Talents get to know their strengths in close collaboration with others, then continue to develop them with passion.

We want to discover new things together, and to be bold in adjusting learning methods to meet today’s changed circumstances. Together, we grow to meet challenges, trust life, and allow learning to begin with the needs of the student. Old school was the past – the future is NewSchool.

NewSchool – It’s my way!"
germany  berlin  schools  education  sfsh  webdev  interdisciplinary  alternative  lcproject  openstudioproject  community  experientiallearning  place-based  middleschool  webdesign  place-basededucation  place-basedlearning  place-basedpedagogy 
august 2017 by robertogreco
Y-Fi
"Experience Loading Animations / Screens in wifi speeds around the world. This website was inspired by this conversation I had on twitter. I was home (Nigeria) for a bit before I started work and was annoyed at how long I had to look at loading animations. I wondered how long people wanted to wait around the world screaming.

Notes / How this works

• Data about wifi speeds is from: Akamai's State of the Internet / Connectivity Report.

• I chose countries based on what suprised me and to get diversity across speeds.

• To get most data about loading times, I used a combination of Firefox DevTools and the Network Panel on Chrome DevTools. For Gmail I used this article on Gmail's Storage Quota.

• The wifi speeds and sizes of resources are hard-coded in so you can see them and the rest of the code at the repo.

• Any other questions / thoughts? Hit me up on twitter!"

[via: https://twitter.com/YellzHeard/status/890990574827851777 via @senongo]
omayeliarenyeka  internet  webdev  webdesign  wifi  broadband  nigeria  loading  speed  diversity  accessibility  paraguay  egypt  namibia  iran  morocco  argentina  india  southafrica  saudiarabia  mexico  china  chile  greece  ue  france  australia  russia  kenya  israel  thailand  uk  us  taiwan  japan  singapore  hongkong  noray  southkorea  perú 
july 2017 by robertogreco
Designed lines. — Ethan Marcotte
"We’re building on a web littered with too-heavy sites, on an internet that’s unevenly, unequally distributed. That’s why designing a lightweight, inexpensive digital experience is a form of kindness. And while that kindness might seem like a small thing these days, it’s a critical one. A device-agnostic, data-friendly interface helps ensure your work can reach as many people as possible, regardless of their location, income level, network quality, or device.

The alternative is, well, a form of digital disenfranchisement. Disenfranchisement that’s outlined—brightly, sharply—by our design decisions."

[See also: "The Unacceptable Persistence of the Digital Divide"
https://www.technologyreview.com/s/603083/the-unacceptable-persistence-of-the-digital-divide/ ]
broadband  empathy  internet  performance  kindness  webdev  webdesign  2017  digitalredlining  digitaldivide  us  access  accessibility  inequality  ethanmarcotte 
july 2017 by robertogreco
Unsplash | Beautiful Free Photo Community
"Beautiful, free photos.
Gifted by the world’s most generous community of photographers."
free  photography  webdev  webdesign  resources  stockphotography 
july 2017 by robertogreco
Design Resources
"Select websites, tools, assets, and readings for working in and learning about design.

[categories]
Accessibility resources
Books and zines
Browser features
Brushes
Colors and color palettes
Fonts
Icons and emoji
Inspiration and criticism websites
Mockups
Prototyping tools
Stock graphics
Stock photography
User testing and interactive feedback tools
Design Resources
Select websites, tools, assets, and readings for working in and learning about design.

made by @skullface · view/contribute on GitHub
Accessibility"
design  resources  reference  jessicapaoli  fonts  icons  emoji  webdesign  webdev  color  palettes  stockphotography  stockgraphics  graphics  browsers  zines  extensions  chrome  prototyping 
july 2017 by robertogreco
The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art) | Reliable
"How this post came to be

I have to be honest - I love the concept of Google fonts, but I find the execution to always be somewhat... lacking. I don't know. When compared to classics like Futura, Bodoni, Garamond - even Helvetica - they just fall short, and I rarely, if ever, end up using them.

Can you relate?

Again, I love the concept of Google font pairings: the fast download of cool fonts (and even cute fonts) from their high-speed library is great, and has brought far more unique, web friendly fonts and font pairs to the internet than ever before. They sort of broke us out of the standard web fonts and web safe fonts we were all chained down to a few years back of Arial and Verdana and even the Times New Roman font (remember those days? Can you believe they were just a few short years ago?).

But because of that feeling of something "lacking" - I've stayed away from Google fonts. Until now.

A while ago, my partner and co-founder of Reliable, David Tendrich, challenged me to do something about it.

"Make Google fonts work," he said.

And so that's how this post was born.

I wanted to create the best font pairings Google has to offer that even high-end agency designers would be tempted to use. I wanted to assemble Google font pairs that even I would have trouble turning down.

So I combed through Google's vast library and tested hundreds of font combinations, from their most famous and top fonts like the Roboto font, Railway font, Montserrat font, Lato font, Oswald font, Lobster font, and more, to more obscure, funky ones you may have never even seen before this post.

The wonderful Rijks collection

It was also about this time that I came across the Rijks Museum's online art collection. In short, it's a beautiful collection of both classical and modern art that is 100% royalty free and available for any use you'd like. (Can you say "aaaamazing?")

I took my favorite pieces from the Rijks collection and combined them with my Google font pairings to create a truly beautiful display of Google fonts that really work. We've also organized them by filters to help you find a font to fit that project you're working on right now. You'll find dozens of font pairings you can re-use time and time again for different clients and projects.

But that's not all!

I undertook one more challenge in this project: To express these font pairings through profound, time-tested quotes on design from world-renowned designers of all styles. So we have beauty in art, functionality in fonts, and wisdom in quotes.

If you too have had trouble finding great Google fonts and combinations, this might win you over to the Google Fonts Team like it won me over. Or maybe not! The beauty of design is that, at the end of the day, our own preferences and styles are what truly matter.

One last thing:

To help you find font pairings, we organized them in two ways: Style (Serif, Sans Serif, Both), and Mood (Any, Modern, Striking, Eccentric, Classic, Minimal, Neutral, Warm).

Here's a brief explanation of each of these moods:

Modern: Feels like it was made for the 21st century, and wouldn't make sense in any other period. Typically clean, more on the minimal side, and great for projects that require a more polished feel.

Striking: Impact. Boldness. Weight. These font pairs reach out and grab you and pull you into their message.

Eccentric: Quirky. Odd. Different. These fonts communicate uniqueness in various ways. Great for personal blogs, companies in a crowded marketplace that need to be set apart, and more.

Classic: These font combinations feel like they could have existed for generations. They're reminiscent of classic, time-tested and weathered fonts that last. Great for projects that need to project confidence, reliability, style.

Minimal: These minimal font pairings say so much, with a whisper. They almost try to blend into the background and get out of the way to help you more purely take in the message. Clean. Concise. Polished.

Neutral: Some brands are like the friendly local baker who greets everyone with a smile. Others are more professional, cerebral. These neutral fonts are more on the cerebral side - conveying professionalism and cleanliness above all else. Think Helvetica, but for Google fonts.

Warm: For brands who are the "friendly local baker," these fonts are for you. They convey heart, creativity, openness. They say, "Come talk to me, let's be friends." Great for brands that have that personal touch.

So there you have it!

Beautiful fonts and combinations from Google you can use to fuel your personal and client projects. They're completely web safe fonts, and due to their vast use worldwide, I think it's safe to say Google fonts are the new standard web fonts.

(By the way, we've made this entire collection of Google font pairings into a downloadable PDF that you can easily reference at any time. You should see a small yellow tab at the bottom of your screen - click that to download the post now!)

I hope displaying them on top of various colors, with various beautiful works of art behind them, helped you envision how they might work in your projects. That was one of my biggest goals in creating this post.

An important lesson

That's actually a lesson that was greatly reinforced in me throughout this Google font quest - that how fonts are used are just as important, if not more so, than the fonts themselves.

I think often Google fonts are strewn across designs that are lacking the fundamentals of good design. They're the cool, hip thing to use - and as a result, so many people us them. But design is a spectrum ranging from bad to great, and as bell curves go, few designs are truly great.

By simple math, most designs using Google fonts need improvement. Perhaps that's where my initial bias against Google fonts came from. Design is something I take so seriously, and am so passionate about, that when I see bad or lazy design, it hurts. From seeing so much sub-par design riddled with Google fonts, I associated Google fonts with sub-par design.

A new perspective

But undertaking this challenge to create this collection forced me to see Google fonts from a new perspective. Namely, it forced me to throw away my previous conceptions and see them anew. When I did, I simply viewed them like I would anything else in a design - as an asset to be used and manipulated to achieve an end-goal.

When I had no choice but to make them work, I viewed them as something that actually "could" work. And that's where the creativity and magic began.

That leads me to another important lesson I became re-acquainted with in this process - that when we think something won't work, it won't work. And when we truly think it can, we really can make it work.

Strategies for choosing font pairs

I also wanted to talk about some of the strategies behind these Google font combinations to help you create even more of your own. Because while I have 50 here, I'm certain there are dozens more waiting to be made.

If you'll notice, there's a pattern to nearly every pair: The headline is very bold and impactful, and then the body font is very light and airy. This contrast creates a nice tension and context for the fonts. It makes it very interesting as you scroll. Our eyes and brains desire constant change and flux and small contrasts like this deliver.

Another reason the body fonts are very light and airy is that they have to be palatable and legible to the eye over the course of a long piece of text. If I throw a bold, impactful font at you for more than 10 or so words - your eye will go crazy. It's like talking on the phone with someone who only screams.

When you go from a louder headline font to a body font, there's almost a feeling of relief. The headline was a nice, momentary burst of excitement - but then the eye is relieved to handle something easier and less demanding.

Serif & Sans

In addition, still in line with that concept of contrast, I often paired a serif headline with a sans serif body, or vise versa. Again, this just emphasizes contrast and keeps things interesting.

It also takes things a step further and shifts the feel. Serif fonts tend to feel more grounded, conservative and calm. Sans serif fonts tend to feel more modern, daring, progressive. By paring the two together, you get a great balance that's interesting to the mind and the eye.

Work with what you (don't) love

Finally, in line with the attitude shift I mentioned above, in going from "Google fonts don't work" to "Let's make them work" - I purposefully chose some fonts I simply thought I'd never like or want to use in any context. If I looked at a font and felt like it was a "heck no" - I felt compelled to give it a try.

This is so important for the creative process. Often, without even realizing it, we confine ourselves to our creative comfort zones, which slowly shrink over time. But when we step outside and try something we thought we'd never like - we often have our biggest breakthroughs."
font  typography  fonts  design  google  googlefonts  free  loulevit  2017  webdev  graphicdesign  via:lukeneff  webdesign 
july 2017 by robertogreco
Spotlight: Senongo Akpem — Responsive Web Design
"We talk a lot about how designs transform across devices. Senongo Akpem talks to us this week about how his design and illustration work explores a multicultural story across different societies."
senongoakpem  2017  design  webdesign  culturalresponsiveness  webdev  culture 
june 2017 by robertogreco
Static Site CMS - Forestry.io
"A full-featured CMS for your static site with support for Jekyll, Hugo and Git"
cms  webdev  jekyll  hosting  web  static  via:jarrettfuller  webdesign 
june 2017 by robertogreco
Siteleaf - A friendly CMS for your static site
"Built for developers, Loved by everyone
Siteleaf is a content management system designed for a better web.

Develop with existing tools
Code offline with Jekyll, sync with GitHub

Edit in the cloud
Easy for non-technical clients, writers, and producers

Free your content
Access by API or generate static sites to S3, GitHub, FTP"
cms  webdev  jekyll  hosting  web  static  via:jarrettfuller  webdesign 
june 2017 by robertogreco
« earlier      
per page:    204080120160

Copy this bookmark:





to read