[{"data":1,"prerenderedAt":683},["ShallowReactive",2],{"project-12166687":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":15,"tier":17,"category":18,"subcategory":19,"format":20,"keywords":21,"reception":26,"sentiment":27,"stance_mix":28,"scored_comments":33,"aspects":34,"strip":47,"post_text":50,"what":51,"said":74,"maker_in_thread":177,"shape":179,"grid":183,"attempts":645,"same_week":646,"maker_shows":44,"maker_hidden":675,"reader_version":676,"card":677},"12166687","Web Design in 4 minutes","title","Show HN: Web Design in 4 minutes","http:\u002F\u002Fjgthms.com\u002Fweb-design-in-4-minutes\u002F","jgthms.com","bbx",1469549862,2016,1624,152,1,2264,"legend","learning_science","web design tutorial","web_app",[22,23,24,25],"web design","css typography","html tutorial","responsive layout","debated",0.145,{"positive":29,"neutral":30,"mixed":31,"critical":32},33,21,13,24,91,{"design":35,"performance":38,"privacy":40,"execution":41,"idea":43,"docs":46},{"positive":36,"critical":37},6,16,{"positive":15,"critical":39},0,{"positive":39,"critical":15},{"positive":42,"critical":42},2,{"positive":44,"critical":45},10,4,{"positive":42,"critical":39},[42,39,42,15,39,39,39,39,42,39,48,39,39,49,15,42,45,49,48,48,49,15,15,15,42,45,45,42,48,15,48,45,49,49,48,45,48,48,48,49],5,3,null,{"problem":52,"audience":64,"pricing":50,"motivation":50,"time_to_build":50,"stack":72,"openness":73,"stage":73,"team_size":73},{"value":53,"source":54,"evidence":55},"Beginners don't know how to style a basic web page","inferred",[56,60],{"id":57,"by":58,"text":59},"12168291","SmellTheGlove","For a web noob like me, I thought this was pretty awesome. I'm trying to build myself a website now, in 2016, when the last time I legitimately did it was 1999. This actually…",{"id":61,"by":62,"text":63},"12167306","johnm1019","Love this! Step by step explanation of how to do something which literally shows rather than tells.",{"value":65,"source":54,"evidence":66},"Web novices learning basic web design",[67,68],{"id":57,"by":58,"text":59},{"id":69,"by":70,"text":71},"12166918","reimertz","Ha, such a smart way of introducing web design for a novice. Nice work homie!",[],"unknown",{"praise":75,"objections":97,"requests":131,"questions":139,"alternatives":147},[76,89],{"value":77,"source":78,"evidence":79},"Clear, simple step-by-step explanation that shows rather than tells","commenter",[80,84,85],{"id":81,"by":82,"text":83},"12167109","mknocker","Clear, quick and simple. It would be interesting to have such elegant introduction for other topics. Well done !",{"id":61,"by":62,"text":63},{"id":86,"by":87,"text":88},"12167341","pitchups","Wonderful! For a moment at the start though, I wondered how such a poorly designed page, could teach anything about web design. Then I clicked the first link... :)",{"value":90,"source":78,"evidence":91},"Helpful for web beginners",[92,93],{"id":57,"by":58,"text":59},{"id":94,"by":95,"text":96},"12169183","rralian","This is really well done, kudos! It actually feels a little like I'm learning by doing here as the design firms up in place as I proceed. Very cool idea!",[98,113,124],{"value":99,"source":78,"evidence":100},"Low contrast gray body text hurts readability and accessibility",[101,105,109],{"id":102,"by":103,"text":104},"12167366","primigenus","This is a pretty nice demo of the process of turning a basic page into a \"design\" (in the sense that applying positioning, spacing, contrast, and things like typography is visual…",{"id":106,"by":107,"text":108},"12167452","virtualized","> Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read. No, it doesn't. The low…",{"id":110,"by":111,"text":112},"12167718","antisthenes","I could not agree with this more. As someone with less than perfect vision, I've seen far too many websites embrace the \"greyness\" in design, employing far too light shades of…",{"value":114,"source":78,"evidence":115},"Navigation and back button are broken",[116,120],{"id":117,"by":118,"text":119},"12167255","konschubert","The back button is broken. Also, not sure if changing the fragment identifier is the right abstraction.",{"id":121,"by":122,"text":123},"12167425","chejazi","Love it except when I came back here to upvote the navigation was totally broken!",{"value":125,"source":78,"evidence":126},"Specifying Arial\u002FHelvetica in font-family is a poor choice",[127],{"id":128,"by":129,"text":130},"12167758","tracker1","Please, do not specify \"Arial\" or \"Helvetica\" in your font-family... just use \"sans-serif\" by itself... Just use sans-serif as your main fallback font after specific web-font.…",[132],{"value":133,"source":78,"evidence":134},"Use a serif or monospace font for code instead of gray blocks",[135],{"id":136,"by":137,"text":138},"12168690","vegabook","Very nice, but I have to disagree on two points: First using grey blocks for code, while widespread, in my opinion is a visual interruption to reading flow. Indentation is…",[140],{"value":141,"source":78,"evidence":142},"Why not split into multiple pages?",[143],{"id":144,"by":145,"text":146},"12167641","webscalist","Can't go back. Usability points: -1 Why not make it into multiple web pages?",[148,159,166],{"value":149,"source":78,"evidence":150},"Motherfucking Website and Better Motherfucking Website",[151,155],{"id":152,"by":153,"text":154},"12167278","Cbeck527","Reminds me of a Motherfucking Website[1], and a Better Motherfucking Website[2] [1] - http:\u002F\u002Fmotherfuckingwebsite.com\u002F [2] - http:\u002F\u002Fbettermotherfuckingwebsite.com\u002F",{"id":156,"by":157,"text":158},"12167312","K0nserv","Lovely! Definitely like the style here and the focus on content first. Like other people have said it's similar to Motherfucking Website[1], and a Better Motherfucking…",{"value":160,"source":78,"evidence":161},"Typography.js",[162],{"id":163,"by":164,"text":165},"12168164","kylemathews","I've been working on a related project — Typography.js that vastly simplifies web design. It ships with 30 pre-built designs and I'm working on tools to make it really simple to…",{"value":167,"source":78,"evidence":168},"Bulma and Tachyons CSS frameworks",[169,173],{"id":170,"by":171,"text":172},"12168079","cel1ne","A good framework to help you build response, accessible design with proven typography: http:\u002F\u002Ftachyons.io\u002F",{"id":174,"by":175,"text":176},"12168712","abglassman","His longer tutorial http:\u002F\u002Fmarksheet.io is great, and his CSS framework, http:\u002F\u002Fbulma.io, is also really handy.",{"comments":39,"answered":39,"key":178},[],{"commenters":180,"max_depth":181,"maker_replies":39,"first_comment_mins":32,"lifespan_hours":182},125,9,145,[184,186,189,192,196,198,201,204,208,209,212,215,218,222,225,229,233,236,239,241,244,247,249,252,255,257,260,262,265,267,270,273,276,279,282,285,288,291,293,297,300,303,306,309,312,315,318,321,325,329,332,335,337,340,343,346,349,352,355,358,360,362,363,366,369,371,374,378,381,384,386,389,392,394,398,401,404,406,410,414,415,418,421,423,425,427,430,432,433,435,438,442,446,449,453,455,458,462,466,470,471,473,477,479,482,486,489,492,496,498,502,504,507,510,513,516,518,521,523,527,529,531,535,538,542,547,551,554,557,560,564,569,571,573,577,579,583,587,591,595,599,603,607,611,615,619,623,627,629,633,637,641],[102,39,15,185,103,39],"project\u002Fcritical\u002Fdesign",[187,39,49,188,157,39],"12167418","project\u002Fmixed\u002Fdesign",[190,39,49,188,191,39],"12167493","epidemian",[193,39,39,194,195,39],"12167770","commenter\u002Fneutral\u002Fdesign","sdegutis",[197,39,39,194,191,39],"12167907",[199,39,39,194,200,39],"12167926","ry_ry",[202,39,39,194,203,39],"12168106","cpeterso",[205,39,49,206,207,39],"12168249","project\u002Fneutral\u002Fdesign","jda0",[110,39,15,185,111,39],[210,39,49,206,211,39],"12168083","ethanbond",[213,39,49,188,214,39],"12168122","theGimp",[216,39,15,185,217,39],"12168616","mynegation",[219,39,39,220,221,39],"12168208","other\u002Fneutral\u002Fdesign","coldpie",[223,39,39,220,224,39],"12168424","jakub_g",[226,39,39,227,228,39],"12168552","other\u002Fneutral\u002Fnone","edejong",[230,39,39,231,232,39],"12169823","commenter\u002Fneutral\u002Fnone","richforrester",[234,39,39,231,235,39],"12173617","tripzilch",[237,39,39,231,238,39],"12175744","cpmsmith",[240,39,39,231,232,39],"12177184",[242,39,39,227,243,39],"12168803","jarcane",[245,39,39,227,246,39],"12170717","semi-extrinsic",[248,39,39,220,221,39],"12169061",[250,39,39,220,251,39],"12169890","overloaded",[253,39,39,194,254,39],"12171828","jablan",[256,39,39,194,235,39],"12173295",[258,39,39,227,259,39],"12179314","brennebeck",[261,39,39,220,221,39],"12172886",[263,39,39,220,264,39],"12171252","majewsky",[266,39,39,231,235,39],"12173214",[268,39,39,220,269,39],"12168598","patrickburke",[271,39,15,185,272,39],"12167985","CM30",[274,39,49,206,275,39],"12168089","ladzoppelin",[277,39,49,206,278,39],"12168201","Nadya",[280,39,39,194,281,39],"12168484","sp332",[283,39,39,194,284,39],"12169217","kuschku",[286,39,39,194,287,39],"12169485","fsck--off",[289,39,39,194,290,39],"12169613","hiou",[292,39,39,194,281,39],"12169666",[294,39,48,295,296,39],"12204234","project\u002Fpositive\u002Fdesign","sontek",[298,39,39,231,299,39],"12168139","unethical_ban",[301,39,39,220,302,39],"12168237","rtcoms",[304,39,39,220,305,39],"12168399","Osiris",[307,39,39,231,308,39],"12168495","Retr0spectrum",[310,39,39,194,311,39],"12169176","suchow",[313,39,39,194,314,39],"12169179","CognitiveLens",[316,39,39,220,317,39],"12168405","DigitalJack",[319,39,39,227,320,39],"12169244","KevanM",[322,39,39,323,324,39],"12170215","other\u002Fcritical\u002Fdesign","Silhouette",[326,39,39,327,328,39],"12171842","other\u002Fpositive\u002Fdesign","jstimpfle",[330,39,49,206,331,39],"12168262","chris_va",[333,39,39,194,334,39],"12168776","NDT",[336,39,39,194,331,39],"12169020",[338,39,39,194,339,39],"12169994","caffeinewriter",[341,39,39,220,342,39],"12170206","rangibaby",[344,39,15,185,345,39],"12168640","matejn",[347,39,15,185,348,39],"12168816","zodPod",[350,39,15,185,351,39],"12170087","collinmanderson",[353,39,49,206,354,39],"12171439","e_proxus",[356,39,15,185,357,39],"12172484","crispyambulance",[359,39,49,188,235,39],"12172817",[361,39,39,194,296,39],"12204214",[156,15,48,295,157,39],[364,15,49,188,365,39],"12168127","Normal_gaussian",[367,15,49,368,157,39],"12168354","maker\u002Fneutral\u002Fdesign",[370,15,15,185,365,39],"12168673",[372,15,49,206,373,39],"12169788","Siilwyn",[375,15,48,376,377,39],"12168275","project\u002Fpositive\u002Fperformance","jff",[379,15,49,380,157,39],"12168347","maker\u002Fneutral\u002Fprivacy",[382,15,39,383,377,39],"12168560","commenter\u002Fneutral\u002Fprivacy",[385,15,39,383,157,39],"12171808",[387,15,48,295,388,39],"12168375","exolymph",[390,15,49,391,157,39],"12168393","maker\u002Fneutral\u002Fnone",[163,42,39,393,164,39],"other\u002Fneutral\u002Fidea",[395,42,48,396,397,39],"12168204","project\u002Fpositive\u002Fnone","dengar007",[399,42,49,400,164,39],"12168230","project\u002Fneutral\u002Fexecution",[402,42,48,295,403,39],"12169071","splatcollision",[405,42,39,227,164,39],"12170330",[407,42,15,408,409,39],"12169662","project\u002Fcritical\u002Fidea","andrewmcwatters",[411,42,48,412,413,39],"12170217","project\u002Fpositive\u002Fidea","nojvek",[106,49,15,185,107,39],[416,49,39,194,417,39],"12167599","Tloewald",[419,49,39,194,420,39],"12167845","NoGravitas",[422,49,39,231,417,39],"12170965",[424,49,39,194,324,39],"12170297",[152,45,49,426,153,39],"project\u002Fneutral\u002Fidea",[428,45,15,408,429,39],"12167515","seang",[431,45,39,227,388,39],"12168382",[128,48,15,185,129,39],[434,48,39,194,278,39],"12167858",[436,36,15,185,437,39],"12168856","qznc",[439,440,49,426,441,39],"12167308",7,"drchiu",[443,444,48,412,445,39],"12167485",8,"achairapart",[447,181,39,220,448,39],"12168949","int_handler",[450,44,15,451,452,39],"12168223","project\u002Fcritical\u002Fnone","Procrastes",[144,454,15,185,145,39],11,[456,454,49,400,457,39],"12168245","kolme",[459,454,48,460,461,39],"12168831","project\u002Fpositive\u002Fexecution","chestervonwinch",[463,454,49,464,465,39],"12169649","project\u002Fmixed\u002Fexecution","random28345",[467,468,49,464,469,39],"12167248",12,"mattherman",[170,31,39,227,171,39],[81,472,48,412,82,39],14,[474,475,49,206,476,39],"12168359",15,"TheAceOfHearts",[478,475,49,206,388,39],"12168381",[480,475,49,206,481,39],"12170028","mjrbrennan",[483,475,15,484,485,39],"12170523","project\u002Fcritical\u002Fprivacy","GrinningFool",[487,475,39,231,488,39],"12170161","soared",[490,37,49,206,491,39],"12187132","juanuys",[493,494,49,188,495,39],"12166978",17,"aban",[61,497,48,412,62,39],18,[499,500,48,295,501,39],"12166872",19,"willemwijnans",[57,503,48,412,58,39],20,[505,30,15,408,506,39],"12168689","baliex",[117,508,15,509,118,39],22,"project\u002Fcritical\u002Fexecution",[511,508,15,509,512,39],"12167428","tantalor",[174,514,48,515,175,39],23,"maker\u002Fpositive\u002Fnone",[517,514,39,227,488,39],"12170165",[519,32,39,227,520,39],"12167773","jyotiska",[522,32,39,227,437,39],"12168761",[524,525,15,185,526,39],"12168138",25,"qwertyuiop924",[86,528,48,412,87,39],26,[530,528,48,295,485,39],"12170535",[532,533,49,188,534,39],"12167289",27,"Frank2312",[536,533,49,400,537,39],"12167322","addedlovely",[539,540,15,185,541,39],"12167679",28,"noisem4ker",[543,544,48,545,546,39],"12168444",29,"project\u002Fpositive\u002Fdocs","DLA",[548,549,49,206,550,39],"12168198",30,"daveheq",[552,549,39,194,553,39],"12168296","mbrock",[555,549,39,194,556,39],"12168794","kqr",[558,549,39,194,559,39],"12169533","fiatjaf",[561,562,48,412,563,39],"12167606",31,"TheMagicHorsey",[565,566,48,567,568,39],"12173282",32,"maker\u002Fpositive\u002Fdocs","atoko",[69,29,48,570,70,39],"maker\u002Fpositive\u002Fidea",[94,572,48,412,95,39],34,[574,575,48,460,576,39],"12168321",35,"chm",[121,578,49,464,122,39],36,[580,581,49,188,582,39],"12168890",37,"asp_net",[584,585,49,188,586,39],"12172677",38,"skaplun",[588,589,48,396,590,39],"12185634",39,"tugberkk",[592,593,48,396,594,39],"12167839",40,"muhammadusman",[596,597,48,412,598,39],"12167010",41,"dwenzek",[600,601,48,515,602,39],"12167781",42,"gabrielcsapo",[604,605,49,400,606,39],"12167519",43,"JustSomeNobody",[608,609,48,396,610,39],"12180832",44,"daxro",[612,613,48,515,614,39],"12169036",45,"Capira",[616,617,48,396,618,39],"12167447",46,"ajroas",[620,621,48,515,622,39],"12167429",47,"rsyntax",[624,625,48,396,626,39],"12171275",48,"vanglen",[136,628,49,188,137,39],49,[630,631,15,185,632,39],"12168002",50,"cloudjacker",[634,635,15,408,636,39],"12167730",51,"SonicSoul",[638,639,48,396,640,39],"12167920",52,"bttf",[642,643,48,396,644,39],"12167264",53,"ChicagoBoy11",[],[647,652,657,662,666,671],{"id":648,"name":649,"points":650,"category":651},"12136011","Riko",283,"languages",{"id":653,"name":654,"points":655,"category":656},"12159249","Kubernetes Certificate Manager",186,"infrastructure",{"id":658,"name":659,"points":660,"category":661},"12163689","github-widget",176,"dev_tools",{"id":663,"name":664,"points":665,"category":651},"12175830","sha256-simd",156,{"id":667,"name":668,"points":669,"category":670},"12166370","EventQL",90,"data",{"id":672,"name":673,"points":674,"category":661},"12137698","kilo",85,false,"v2",{"id":678,"name":5,"line":5,"ai":675,"cat":18,"year":12,"points":13,"comments":14,"rec":26,"s":679,"top":15,"kw":680,"maker":10,"domain":9,"tier":17,"attempts":39,"strip":681,"url":8,"mix":682,"praise":77,"objection":99,"sub":19},12166687,0.14,[22,23,24,25],"2021000020500312435531112442515433545553",[29,30,31,32],1793990945716]