nhaliday + form-design   139

What does it mean when a CSS rule is grayed out in Chrome's element inspector? - Stack Overflow
It seems that a strike-through indicates that a rule was overridden, but what does it mean when a style is grayed out?


Greyed/dimmed out text, can mean either

1. it's a default rule/property the browser applies, which includes defaulted short-hand properties.
2. It involves inheritance which is a bit more complicated.


In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.

The rules which are applied to the currently selected element appear in normal text.

If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.

Please note, not the Styles panel (I know what greyed-out means in that context—not applied), but the next panel over, the Computed properties panel.
The gray calculated properties are neither default, nor inherited. This only occurs on properties that were not defined for the element, but _calculated_ from either its children or parent _based on runtime layout rendering_.

Take this simple page as an example, display is default and font-size is inherited:
q-n-a  stackex  programming  frontend  web  DSL  form-design  devtools  explanation  trivia  tip-of-tongue  direct-indirect  trees  spreading  multi  nitty-gritty  static-dynamic  constraint-satisfaction  ui  browser  properties 
october 2019 by nhaliday
Codepip | Learn to code by playing games
I don't really like frontend stuff tbh so this kind of stuff might be path of least resistance to me learning it
puzzles  games  learning  frontend  web  DSL  programming  javascript  tutorial  init  form-design  dynamic  money-for-time  working-stiff 
october 2019 by nhaliday
When to use margin vs padding in CSS - Stack Overflow
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

One key thing that is missing in the answers here:

Top/Bottom margins are collapsible.

So if you have a 20px margin at the bottom of an element and a 30px margin at the top of the next element, the margin between the two elements will be 30px rather than 50px. This does not apply to left/right margin or padding.
Note that there are very specific circumstances in which vertical margins collapse - not just any two vertical margins will do so. Which just makes it all the more confusing (unless you're very familiar with the box model).

[ed.: roughly, separation = padding(A) + padding(B) + max{margin(A), margin(B)}, border in between padding and margin]
q-n-a  stackex  comparison  explanation  summary  best-practices  form-design  DSL  web  frontend  stylized-facts  methodology  programming  multi 
october 2019 by nhaliday
Ask HN: Learning modern web design and CSS | Hacker News
Ask HN: Best way to learn HTML and CSS for web design?: https://news.ycombinator.com/item?id=11048409
Ask HN: How to learn design as a hacker?: https://news.ycombinator.com/item?id=8182084

Ask HN: How to learn front-end beyond the basics?: https://news.ycombinator.com/item?id=19468043
Ask HN: What is the best JavaScript stack for a beginner to learn?: https://news.ycombinator.com/item?id=8780385
Free resources for learning full-stack web development: https://news.ycombinator.com/item?id=13890114

Ask HN: What is essential reading for learning modern web development?: https://news.ycombinator.com/item?id=14888251
Ask HN: A Syllabus for Modern Web Development?: https://news.ycombinator.com/item?id=2184645

Ask HN: Modern day web development for someone who last did it 15 years ago: https://news.ycombinator.com/item?id=20656411
hn  discussion  design  form-design  frontend  web  tutorial  links  recommendations  init  pareto  efficiency  minimum-viable  move-fast-(and-break-things)  advice  roadmap  multi  hacker  games  puzzles  learning  guide  dynamic  retention  DSL  working-stiff  q-n-a  javascript  frameworks  ecosystem  libraries  client-server  hci  ux  books  chart 
october 2019 by nhaliday
58 Bytes of CSS to look great nearly everywhere | Hacker News
Author mentions this took a long time to arrive at.
I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma:

[ed.: lottsa sensible criticism of the above in the comments]
hn  commentary  techtariat  design  form-design  howto  web  frontend  minimum-viable  efficiency  minimalism  parsimony  move-fast-(and-break-things)  tutorial  multi  mobile  init  advice 
october 2019 by nhaliday
Python Tutor - Visualize Python, Java, C, C++, JavaScript, TypeScript, and Ruby code execution
C++ support but not STL

Ten years and nearly ten million users: my experience being a solo maintainer of open-source software in academia: http://www.pgbovine.net/python-tutor-ten-years.htm
tools  devtools  worrydream  ux  hci  research  project  homepage  python  programming  c(pp)  javascript  jvm  visualization  software  internet  web  debugging  techtariat  state  form-design  multi  reflection  oss  shipping  community  collaboration  marketing  ubiquity  robust  worse-is-better/the-right-thing  links  performance  engineering  summary  list  top-n  pragmatic  cynicism-idealism 
september 2019 by nhaliday
An Eye Tracking Study on camelCase and under_score Identifier Styles - IEEE Conference Publication
One main difference is that subjects were trained mainly in the underscore style and were all programmers. While results indicate no difference in accuracy between the two styles, subjects recognize identifiers in the underscore style more quickly.

ToCamelCaseorUnderscore: https://citeseerx.ist.psu.edu/viewdoc/summary?doi=
An empirical study of 135 programmers and non-programmers was conducted to better understand the impact of identifier style on code readability. The experiment builds on past work of others who study how readers of natural language perform such tasks. Results indicate that camel casing leads to higher accuracy among all subjects regardless of training, and those trained in camel casing are able to recognize identifiers in the camel case style faster than identifiers in the underscore style.

A 2009 study comparing snake case to camel case found that camel case identifiers could be recognised with higher accuracy among both programmers and non-programmers, and that programmers already trained in camel case were able to recognise those identifiers faster than underscored snake-case identifiers.[35]

A 2010 follow-up study, under the same conditions but using an improved measurement method with use of eye-tracking equipment, indicates: "While results indicate no difference in accuracy between the two styles, subjects recognize identifiers in the underscore style more quickly."[36]
study  psychology  cog-psych  hci  programming  best-practices  stylized-facts  null-result  multi  wiki  reference  concept  empirical  evidence-based  efficiency  accuracy  time  code-organizing  grokkability  protocol-metadata  form-design  grokkability-clarity 
july 2019 by nhaliday
Computer latency: 1977-2017
If we look at overall results, the fastest machines are ancient. Newer machines are all over the place. Fancy gaming rigs with unusually high refresh-rate displays are almost competitive with machines from the late 70s and early 80s, but “normal” modern computers can’t compete with thirty to forty year old machines.


If we exclude the game boy color, which is a different class of device than the rest, all of the quickest devices are Apple phones or tablets. The next quickest device is the blackberry q10. Although we don’t have enough data to really tell why the blackberry q10 is unusually quick for a non-Apple device, one plausible guess is that it’s helped by having actual buttons, which are easier to implement with low latency than a touchscreen. The other two devices with actual buttons are the gameboy color and the kindle 4.

After that iphones and non-kindle button devices, we have a variety of Android devices of various ages. At the bottom, we have the ancient palm pilot 1000 followed by the kindles. The palm is hamstrung by a touchscreen and display created in an era with much slower touchscreen technology and the kindles use e-ink displays, which are much slower than the displays used on modern phones, so it’s not surprising to see those devices at the bottom.


Almost every computer and mobile device that people buy today is slower than common models of computers from the 70s and 80s. Low-latency gaming desktops and the ipad pro can get into the same range as quick machines from thirty to forty years ago, but most off-the-shelf devices aren’t even close.

If we had to pick one root cause of latency bloat, we might say that it’s because of “complexity”. Of course, we all know that complexity is bad. If you’ve been to a non-academic non-enterprise tech conference in the past decade, there’s a good chance that there was at least one talk on how complexity is the root of all evil and we should aspire to reduce complexity.

Unfortunately, it's a lot harder to remove complexity than to give a talk saying that we should remove complexity. A lot of the complexity buys us something, either directly or indirectly. When we looked at the input of a fancy modern keyboard vs. the apple 2 keyboard, we saw that using a relatively powerful and expensive general purpose processor to handle keyboard inputs can be slower than dedicated logic for the keyboard, which would both be simpler and cheaper. However, using the processor gives people the ability to easily customize the keyboard, and also pushes the problem of “programming” the keyboard from hardware into software, which reduces the cost of making the keyboard. The more expensive chip increases the manufacturing cost, but considering how much of the cost of these small-batch artisanal keyboards is the design cost, it seems like a net win to trade manufacturing cost for ease of programming.


If you want a reference to compare the kindle against, a moderately quick page turn in a physical book appears to be about 200 ms.

almost everything on computers is perceptually slower than it was in 1983
techtariat  dan-luu  performance  time  hardware  consumerism  objektbuch  data  history  reflection  critique  software  roots  tainter  engineering  nitty-gritty  ui  ux  hci  ios  mobile  apple  amazon  sequential  trends  increase-decrease  measure  analysis  measurement  os  systems  IEEE  intricacy  desktop  benchmarks  rant  carmack  system-design  degrees-of-freedom  keyboard  terminal  editors  links  input-output  networking  world  s:**  multi  twitter  social  discussion  tech  programming  web  internet  speed  backup  worrydream  interface  metal-to-virtual  latency-throughput  workflow  form-design  interface-compatibility 
july 2019 by nhaliday
Why books don’t work | Andy Matuschak
hmm: "zettelkasten like note systems have you do a linear search for connections, that gets exponentially more expensive as your note body grows",

I reviewed today my catalogue of 420~ books I have read over the last six years and I am in despair. There are probably 100~ whose contents I can tell you almost nothing about—nothing noteworthy anyway.
techtariat  worrydream  learning  education  teaching  higher-ed  neurons  thinking  rhetoric  essay  michael-nielsen  retention  better-explained  bounded-cognition  info-dynamics  info-foraging  books  communication  lectures  contrarianism  academia  scholar  design  meta:reading  studying  form-design  writing  technical-writing  skunkworks  multi  broad-econ  wonkish  unaffiliated  twitter  social  discussion  backup  reflection  metameta  podcast  audio  interview  impetus  space  open-problems  questions  tech  hard-tech  startups  commentary  postrat  europe  germanic  notetaking  graphs  network-structure  similarity  intersection-connectedness  magnitude  cost-benefit  multiplicative 
may 2019 by nhaliday
Two theories of home heat control - ScienceDirect
People routinely develop their own theories to explain the world around them. These theories can be useful even when they contradict conventional technical wisdom. Based on in-depth interviews about home heating and thermostat setting behavior, the present study presents two theories people use to understand and adjust their thermostats. The two theories are here called the feedback theory and the valve theory. The valve theory is inconsistent with engineering knowledge, but is estimated to be held by 25% to 50% of Americans. Predictions of each of the theories are compared with the operations normally performed in home heat control. This comparison suggests that the valve theory may be highly functional in normal day-to-day use. Further data is needed on the ways this theory guides behavior in natural environments.
study  hci  ux  hardware  embodied  engineering  dirty-hands  models  thinking  trivia  cocktail  map-territory  realness  neurons  psychology  cog-psych  social-psych  error  usa  poll  descriptive  temperature  protocol-metadata  form-design 
september 2017 by nhaliday
« earlier      
per page:    204080120160

related tags

:)  :/  ability-competence  abstraction  academia  accretion  accuracy  acmtariat  advertising  advice  aesthetics  africa  aggregator  ai  akrasia  algebra  alignment  allodium  ama  amazon  analogy  analysis  anglo  announcement  antiquity  aphorism  api  app  apple  applicability-prereqs  applications  architecture  aristos  art  article  asia  atoms  attention  audio  backup  bangbang  barons  beauty  being-becoming  benchmarks  best-practices  better-explained  big-peeps  big-picture  bio  biophysical-econ  blog  books  bots  bounded-cognition  bret-victor  britain  broad-econ  browser  build-packaging  business  c(pp)  calculator  caltech  career  carmack  cartoons  chart  cheatsheet  checking  checklists  chemistry  china  civilization  clarity  classic  clever-rats  client-server  climate-change  cocktail  cocoa  code-organizing  cog-psych  collaboration  commentary  communication  community  comparison  compilers  composition-decomposition  compression  concept  conceptual-vocab  concrete  concurrency  conference  confidence  confluence  constraint-satisfaction  consumerism  context  contiguity-proximity  contrarianism  cool  correlation  cost-benefit  course  cracker-prog  creative  critique  crosstab  crypto  crypto-anarchy  cs  culture  cynicism-idealism  d3  dan-luu  dark-arts  data  data-science  database  dataset  dataviz  dbs  debugging  deep-learning  deep-materialism  definite-planning  degrees-of-freedom  density  dependence-independence  descriptive  design  desktop  detail-architecture  developing-world  devops  devtools  differential  dimensionality  diogenes  direct-indirect  direction  dirty-hands  discipline  discovery  discussion  distributed  distribution  diy  documentation  dropbox  DSL  duplication  dynamic  dynamical  early-modern  earth  econ-metrics  ecosystem  editors  education  efficiency  eh  elegance  elite  embodied  emotion  empirical  energy-resources  engineering  enlightenment-renaissance-restoration-reformation  environment  epistemic  error  error-handling  essay  essence-existence  ethical-algorithms  ethics  europe  evidence-based  examples  exocortex  experiment  expert-experience  explanation  exploratory  externalities  extratricky  facebook  feynman  fiction  film  finance  fintech  flux-stasis  foreign-lang  form-design  forum  fourier  frameworks  free  frontend  frontier  functional  futurism  games  generative  geography  geometry  germanic  giants  git  google  gotchas  government  gowers  graphics  graphs  grokkability  grokkability-clarity  guessing  guide  gwern  habit  hacker  hanson  hard-tech  hardware  hci  heavyweights  heuristic  hg  hi-order-bits  higher-ed  history  hmm  hn  homepage  howto  ide  ideas  idk  IEEE  impact  impetus  incentives  increase-decrease  india  inference  info-dynamics  info-foraging  infographic  infrastructure  inhibition  init  innovation  input-output  insight  institutions  integration-extension  intelligence  interdisciplinary  interface  interface-compatibility  internet  intersection-connectedness  interview  intricacy  intuition  ios  IoT  iron-age  islam  japan  javascript  jobs  judgement  jvm  keyboard  knowledge  language  latency-throughput  latent-variables  latex  law  leadership  learning  lectures  left-wing  len:long  len:short  lens  lesswrong  let-me-see  letters  lexical  libraries  links  list  literature  live-coding  logic  lol  long-short-run  longform  low-hanging  machine-learning  magnitude  maker  management  map-territory  maps  marketing  math  math.CA  math.DS  math.GR  mathtariat  matrix-factorization  measure  measurement  medicine  medieval  mediterranean  MENA  meta:math  meta:prediction  meta:reading  meta:science  metabuch  metal-to-virtual  metameta  methodology  metrics  michael-nielsen  military  mindful  minimalism  minimum-viable  mit  mobile  models  money  money-for-time  mooc  mostly-modern  move-fast-(and-break-things)  multi  multiplicative  murray  music  narrative  nature  near-far  network-structure  networking  neuro  neurons  new-religion  news  nibble  nihil  nitty-gritty  notation  notetaking  null-result  nyc  objektbuch  occident  ocr  oly  oly-programming  oop  open-problems  operational  optimism  org:biz  org:bleg  org:com  org:data  org:edu  org:junk  org:lite  org:mag  org:med  org:popup  org:rec  org:sci  organization  orient  os  oscillation  oss  osx  overflow  p:whenever  papers  paradox  pareto  parody  parsimony  paste  pdf  people  performance  phalanges  philosophy  photography  physics  pic  pinboard  planning  pls  plt  podcast  policy  polisci  politics  poll  popsci  postrat  pragmatic  prediction  presentation  priors-posteriors  privacy  pro-rata  probability  problem-solving  productivity  prof  profile  programming  project  properties  proposal  protocol-metadata  pseudorandomness  psychology  public-goodish  puzzles  python  q-n-a  qra  quantum  quantum-info  questions  quixotic  quora  quotes  r-lang  random  ranking  rant  rationality  ratty  reading  realness  recommendations  reference  reflection  religion  repo  research  research-program  responsibility  retention  retrofit  rhetoric  right-wing  rigor  roadmap  robust  roots  s-factor  s:*  s:**  s:***  sanctity-degradation  scholar  science  scifi-fantasy  search  security  self-control  sequential  shipping  SIGGRAPH  signal-noise  similarity  simulation  sinosphere  skunkworks  sleuthin  slides  social  social-psych  social-science  society  soft-question  software  space  spatial  speaking  speed  sports  spreading  stackex  stanford  startups  state  static-dynamic  stories  strategy  stream  strings  stripe  structure  study  studying  stylized-facts  subculture  success  summary  survey  sv  syntax  synthesis  system-design  systematic-ad-hoc  systems  tainter  tcs  tcstariat  teaching  tech  technical-writing  technology  techtariat  temperature  terminal  the-classics  the-great-west-whale  the-monster  the-trenches  the-world-is-just-atoms  theos  things  thinking  thurston  time  time-preference  time-series  time-use  tip-of-tongue  tools  top-n  traces  track-record  tracker  tradeoffs  trees  trends  trivia  tumblr  tutorial  tutoring  twitter  types  ubiquity  ui  unaffiliated  unintended-consequences  unit  urban-rural  usa  ux  vague  values  vcs  venture  video  virtu  visual-understanding  visualization  visuo  vitality  vulgar  water  wealth  web  webapp  weird  wiki  wire-guided  wisdom  wkfly  woah  wonkish  wordlessness  workflow  working-stiff  world  wormholes  worrydream  worse-is-better/the-right-thing  writing  wtf  yak-shaving  yc  yoga  👳  🔬  🖥  🤖  🦉 

Copy this bookmark: