recentpopularlog in

inrgbwetrust : javascript   524

« earlier  
Margin considered harmful
w/r/t components

shoutout to Seek's 'Braid' component library, looks nice (flexbox for all things ish)
webdesign  react  css  organization  code  javascript  flexbox  commentary  optimization  styleguide  management 
6 days ago by inrgbwetrust
Two Steps Forward, One Step Back | Jxnblk
dude behind Basscss & Tachyons lays out some hindsight and changes his tune

“While CSS-in-JS libraries help with a lot of issues, some of the key benefits to libraries like Basscss and Tachyons got lost in the mix. Instead of using design constraints to define styles, developers are left with open-ended tools that tend to encourage one-off styles. The learning curve was reduced, but developers were left with more choices to make.”

styled-system, theme-ui, rebass, styled-components, etc
webdev  css  code  commentary  reference  javascript  ui  productivity  organization  architecture  react 
24 days ago by inrgbwetrust
svelte musings
from twit-mattdesl, author of other great sketch scaffolding
code  javascript  webdev  svelte  generative  art  reference 
25 days ago by inrgbwetrust
The Design Graph | Jxnblk
“I get a lot of questions about how Theme UI is different from Styled System or Rebass. I think the Design Graph might be the best way to explain this”

Q: “Isn’t Theme UI is an evolution of both? No?”
A: “I think you could say that as well”

(from basscss/tachyons crew member)
styleguide  organization  css  architecture  webdev  webdesign  ui  reference  code  javascript 
5 weeks ago by inrgbwetrust
BlurHash
very cool...blur-up images in 20-30 chars

gatsby integration progress: https://github.com/gatsbyjs/gatsby/pull/16419
images  optimization  webdev  gatsbyjs  plugin  code  javascript 
5 weeks ago by inrgbwetrust
OpenChakra
visual editor for react components
webdev  webdesign  react  javascript  tools  prototyping  ui 
6 weeks ago by inrgbwetrust
Rough.js
neat sketchy diagrams, like paperjs w/out the animation
javascript  svg  library  webdev  webdesign  prototyping  illustration  canvas  generative  code 
9 weeks ago by inrgbwetrust
All – Tiny Helpers
A collection of free single-purpose online tools for web developers
css  javascript  html  tools  webdev  webdesign  accessibility  color  ui  ux  code 
9 weeks ago by inrgbwetrust
Cole Townsend | Product Designer
simple/fun design, like "last updated X days ago" badges on items
gatsbyjs  static  javascript  inspiration  portfolio  webdesign 
10 weeks ago by inrgbwetrust
Making of: Best of 2019 – Johan Ronsse
svelte anecdotes; some glaring holes vs gatsby (responsive images, markdown), some 'coming soon' gotchas (nav to page goes to top)
javascript  webdev  static  framework  reference  tutorial  code  opensource  svelte 
december 2019 by inrgbwetrust
Riot.js — Simple and elegant component-based UI library
react competitor with deliciously readable templating (fuck jsx) ...also smaller payloads
javascript  framework  webdev  code  reference 
november 2019 by inrgbwetrust
Marguerite Roth | Designer & Developer
uses her gatsby starter 'Prist' which hooks up to Prismic.io and looks nice. related src here?: https://github.com/margueriteroth/flagg (peep bookshelf component)
gatsbyjs  theme  javascript  webdev  portfolio  inspiration  reference  code  webdesign 
november 2019 by inrgbwetrust
BRAID
inspired by styled-system (of basscss guy), see intro: https://www.youtube.com/watch?v=jnV1u67_yVg

'Playroom' lets you quickly prototype pages using your own components across multiple viewport sizes
opensource  styleguide  ui  react  javascript  webdev  resources  library  productivity 
november 2019 by inrgbwetrust
Mike Wagz (@mike_wagz) / Twitter
check in with this guy's feed re: smutty js animation libraries and fucked up scroll-smoothing websites (see also @baptistebriel)
javascript  webdev  animation  interactive  webdesign  library  reference  inspiration 
october 2019 by inrgbwetrust
Using and customizing official Gatsby themes from scratch without starter sites - DEV Community 👩‍💻👨‍💻
thorough walk-thru from scratch, not with a gatsby-provided starter; good intro to shadow components

see part 4 for graphql intro
gatsbyjs  theme  tutorial  code  javascript  webdev  static  nodejs  ui  react 
october 2019 by inrgbwetrust
Generative Design
nice big gallery of p5.js example sketches (w/ links to GH) from a book
art  book  code  generative  design  webdev  tutorial  javascript  gallery  inspiration 
october 2019 by inrgbwetrust
GitHub - mattdesl/workshop-p5-intro: Intro to Creative Coding workshop with p5.js and Tone.js
“Resources & course notes for students attending my Intro to Creative Coding workshops, demonstrating p5.js and Tone.js”

‘Further Reading’ section is a goldmine of design books/videos/etc

comments: https://twitter.com/mattdesl/status/1177136627455537152
generative  art  code  javascript  tutorial  animation  library  links  inspiration 
october 2019 by inrgbwetrust
Explore / Observable
live code examples of code with explanations; excellent
datavis  code  gallery  reference  javascript  d3  webdev  tutorial 
october 2019 by inrgbwetrust
The Modern Front-End Design System Stack | Jxnblk
a good summary/explainer on my 'north star' stack: styled-system (like Emotion or Styled Components but more opinionated), gatsby, markdown etc
react  gatsbyjs  webdev  reference  commentary  javascript  css  static 
september 2019 by inrgbwetrust
How I used Theme UI to build my Gatsby Themes library – Blog | LekoArts
light on details, but otherwise interesting discussion of components, Theme UI, Tailwind, and shadow theme concept to quickly spin up a decent looking site
gatsbyjs  tutorial  css  productivity  library  react  javascript  webdev  code  inspiration  mobile  commentary  static 
september 2019 by inrgbwetrust
Nodes is a new way to create with code
looks verrrrrry interesting; modular pieces can be manipulated visually (rip yahoo pipes)
javascript  3d  nodejs  programming  webdev  generative  design  art  tools  framework 
september 2019 by inrgbwetrust
Why you should definitely learn how to use CSS-in-JS | Jxnblk
If you haven't used React before, or have less experience with JS, I'd recommend checking out the Gatsby tutorial. Once you have a good grasp of the concepts laid out in the tutorial, see the guide on using Using CSS-in-JS.

If you know enough React to get going on your own, I'd recommend checking out Styled Components. Then, once you've got that working, definitely check out Emotion. These are the two most widely used CSS-in-JS libraries at the moment, and between the two of them, they cover a lot of ground.
css  javascript  webdev  code  gatsbyjs  library  reference  commentary  react 
september 2019 by inrgbwetrust
Execute Program
Learn By Doing: It's difficult to learn complex programming tools from a book or blog post. Each of our 1,589 code examples is small and interactive. No dry documentation to read.

built by solid team; $19/mo
javascript  programming  regex  webdev  tutorial  tools  education  code 
september 2019 by inrgbwetrust
Divjoy - The React Codebase Generator
neat concept...pick some options and it spits out a starter project codebase
javascript  react  productivity  nodejs  webdev  resources  templates  prototyping  framework  code 
september 2019 by inrgbwetrust
React Layouts
nice scaffolding for variously-scoped layout bits; code examples for rebass (like basscss), Theme UI (styled-system or styled-components), and Emotion
webdev  reference  code  react  nodejs  library  grid  wireframe  productivity  prototyping  javascript 
august 2019 by inrgbwetrust
Trajectories for the future of software – HackerNoon.com
Harsh dismissals, but not necessarily incorrect. We should be working to blur and eventually eliminate the boundary between code and UI. Echoes of Bret Victor here.

“The problem is that the web invited in two generations of programmers who somehow believed that this perverse ecosystem was sane and that wasting their own time and the resources of the computers their stuff was running on was natural.”

“The difference between a programmer and a non-programmer is fundamentally that the non-programmer was told that some tools were off-limits to them and they believed it.”

“Programming language design is part of user interface design. Not only that, but user interface design is part of programming language design. A user interface is a language with which a user explains their intent to the computer, and a user interface that makes decisions that would not be welcome in a programming language is broken, because a user interface is a programming language.”
webdev  code  programming  ui  commentary  history  browser  html  javascript  internet  software 
july 2019 by inrgbwetrust
Theme UI
progeny of styled-system or styled-components? looks pretty good even though i don't grok it yet
react  library  css  webdev  productivity  prototyping  javascript  nodejs 
june 2019 by inrgbwetrust
I’m super good at CSS and I don’t recommend the cascade, don’t @ me | Simon Taggart - Front-End Engineer and Designer
“We follow these methodologies so that we control the cascade and the effect it can have on the visual appearance of our documents. Don’t you see? That’s our own admission that the cascade kinda sucks.”

not-so-subtle jab at css-in-js/component haters
css  webdev  organization  commentary  code  react  javascript  optimization 
may 2019 by inrgbwetrust
Building a beautiful, reusable button with Styled System
a series of posts around building components from scratch (and iterating on them) using Styled System

(dude also blogs other gatsby/react ish)
javascript  css  react  gatsbyjs  static  webdev  reference  tutorial  code 
may 2019 by inrgbwetrust
Revisiting the rendering tier | Info | The Guardian
"From 62,783 lines of Sass to CSS-in-JS. Introducing the new server rendering layer for theguardian.com"

persuasive thoughts on front end org for large teams
css  javascript  organization  commentary  reference  management  webdev 
may 2019 by inrgbwetrust
pen plotterable circle pack demo with D3 + canvas-sketch + utils https://github.com/mattdesl/canvas-sketch · GitHub
mattdesl example script using his canvas-sketch boilerplate — circle packing with keyboard shortcut to output png and svg
javascript  generative  art  code  reference  software  design  canvas  svg  tools 
april 2019 by inrgbwetrust
Palette | Home
nice and thorough design/component system, with reinforced examples of styled-components — uses https://github.com/damassi/gatsby-starter-typescript-rebass-netlifycms (author also works on are.na, neat)
styleguide  inspiration  react  static  gatsbyjs  javascript  reference  webdev 
april 2019 by inrgbwetrust
« earlier      
per page:    204080120160

Copy this bookmark:





to read