1. 17

    For me, it’s the “bundling” situation. I’ve never worked on a production project where “the webpack” wasn’t the most hated part of the stack. Webpack’s source code is a rat’s nest, so I feel very unmotivated to understand the situation or improve it from within. There’s tons of projects in this space that seek to simplify, but they never seem low-risk enough to migrate to: what if I actually do need to customize?

    So, I’ve been stuck with webpack pains for far too long. Maybe Airbnb or Facebook will open-source their Metro (FB bundler used for React Native) configs one day and we can escape…

    1. 7

      at $WORK we have swapped to Rollup for most of the browserland stuff I work with because it’s so much less headache, the entire codebase is grokable, and you can trivially extend it to do custom stuff if needed.

      I do agree bundling is problematic, but for me the worst part is Babel. I’d rather write ES5 than work with Babel and their constant breaking changes everytime I upgrade something.

      1. 3

        I seldom do front-end work, but bundling is my biggest frustration. Yeah, how come I do what I think is the exact same set up for a new project, and webpack fails me. Sometimes I yarn a particular version, it works, sometimes it doesn’t. Sometimes install –dev sometimes not. Eventually get the new project working, but never know how. Repeatability seems illusive.

        1. 1

          Babel could be all or some of my problems as well…

        2. 2

          Parcel has been nice to work with wrt packaging

          1. 1

            very astute observation. The whole build pipeline for non-trivial webapps is just slightly better than the world of no-packages (eg like C++).

            FB’s metro perhaps is also not a panacea, it does not let me, for example, have source files in directory folders I want (instead it is tied to node’s source file search algorithm).

            1. 1

              From the outside, I have a bit of trouble even understanding what bundling is all about. What does Webpack to that Grunt doesn’t? And then, what does Grunt do that make doesn’t?

              1. 6

                While you can bundle with both Grunt and Webpack, they are entirely different approaches to the problem, and unless you are working on something with only trivial Clientside JS, Webpack’s approach is superior.

                In short, Webpack (and other modern bundlers) understands require and import statements, so once it is given the location of your entrypoint JS, it walks the dependency tree to convert all needed dependencies into an optimized bundle for the browser. With Grunt, you can provide a list of files, but you need to manually manage the order of any cross-file dependencies, because it will fundamentally only concatenate the files together.

                1. 1

                  I’ll just add that this even a non-“trivial Clientside JS” project can pull this off well enough with grunt, but when you get to a big project with many people most of which have no idea what is all this about, it becomes a problem.

            1. 3

              Several of the people involved in early node figured out early on that package management for node would be very useful, and started writing package managers. Yes, more than one– there were several competitors.

              dang, that makes me feel old.. I remember I used one with YAML files for package descriptions, I think it was called kiwi or something :D

              Every package-lock file npm has ever seen is sitting in an s3 bucket somewhere, chock-full of interesting data nuggets about what you’ve been up to.

              How did that data, out of all the datas, become valuable to the data capitalists? What profitable insights could possibly be extracted from package lock files?

              Facebook’s social graph is mined because relationships between people and stuff can be used to figure out which stuff to advertise to which people to make them more likely to click. FOSS package dependency graph is mined to.. do what? What can you do with a dependency graph to make money? Figure out which packages to advertise commercial support or commercial alternatives for??

              1. 2

                Well, package-lock.json would contain references to internal libraries as well, potentially giving npm a way to track down new customers for enterprise offerings (to replace artifactory and similar.)

                1. 1

                  Yeah, that’s the first thing that comes to mind. If I make a proprietary tool that replaces/augments an open source solution, or if I sell consulting services for a particular tech stack, being able to buy instant lists of potential customers sounds pretty useful.

                1. 5

                  Personal:

                  • Resuming my GTD weekly planning habit
                  • Getting the house back under control (5 year old + 4 year old + 7 month old + wife’s injured ankle mean I need to put some extra work in there!)
                  • Writing a new section of Prose for Programmers for the first time in a while

                  Work:

                  • Convince Product to drop IE11 support in the next couple of months
                  • Do more work on our backend services (historically I’ve been more on the UI side)
                  1. 4

                    Getting the house back under control (5 year old + 4 year old + 7 month old + wife’s injured ankle mean I need to put some extra work in there!)

                    Dude, just let it go, ‘cause it’s gone. You can look forward to having a clean house again in about 18 years. ;)

                    1. 3

                      Oh, I’m not trying to have a clean house, that’s just ridiculous! Hoping to have one that’s a bit less of a disaster, though. :-)

                  1. 9

                    This is a clickbaity summary of Edward Tufte’s [excellent] work which you should read in preference to this (in fairness the author links to it too). Available here:

                    https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001yB

                    1. 18

                      One man’s “clickbait” is another man’s succinct summary.

                      1. 2

                        If the other man comes away concluding that seven people died because of a powerpoint slide, as stated in the “summary”’s title, I can only hope his succinct engineering lessons are applied to a field where lives don’t matter. Tufte’s original work is more nuanced and therefore more appropriate for actual engineers making actual engineering decisions that can hurt actual people. It’s worth having to read a jpeg or whatever enormous hardship the sibling post complains about.

                      2. 14

                        I disagree. I find Edward Tufte’s website basically unreadable.

                        Problems that I have reading it

                        • Two giant images advertising courses at the very top, taking up most of my screen
                        • Body of content is actually pictures, not text
                        • Body has multiple columns and jumps between layouts making it hard to follow
                        • There are slides embedded with tiny print in the references column
                        • The block quotes are in a smaller font than the surrounding text
                        • Where does the content for “PowerPoint Does Rocket Science–and Better Techniques for Technical Reports” end? This page is so tall that Superman would have trouble leaping over it.
                        1. 4

                          I understand where you’re coming from, but it’s worth pointing out that the webpage here is nothing but a holder of pages of the books - which all the formatting you reference is oriented towards. He spends a lot of thought on his layout and I don’t begrudge him not redoing his book as a webpage (with all the accompanying differences), or just presenting the text by itself.

                          1. 2

                            C’mon now “basically unreadable”, if you don’t care enough to go through the text don’t. I guess that’s why super summarised articles are read more often than the actual papers.

                            1. 2

                              Have you tried reading it on a phone? I imagine desktop is more pleasant, but for mobile, I have to agree that it is basically unreadable.

                          2. 1

                            I’ve now read the original. This summary is far, far better.

                            The original puts the emphasis on a particular way of constructing high information low comprehension slides, with all the nesting layers, and titles only those opposed to decisions could love. That’s not a problem just with PowerPoint.

                            The original cites this way of thinking as the reason PowerPoint always sucks for technical content. He is wrong. PowerPoint “simply” has to be used with low density slides. He is right: I won’t read a dense side now or ever. That doesn’t condemn all PowerPoint presentations.

                            I think this slide alone could have been just 3 bullet points, with no sub points. And it could have made the important point that had to be made.

                            The problem is not with any particular tool. It’s with engineers failing to communicate what they clearly know, and are trying to say. The summary focuses on the slide design and why it sucks, and that’s why I prefer it.

                          1. 1

                            This whole article is basically just a strawman. Ignoring that, the simple fact of the matter is firefox and chromium are the only browsers I can reasonably test against as both can be run heedlessly and controlled by something like selenium. The other browsers are either extremely fringe, like palemoon; outdated, also like palemoon; require a specific nonfree os with specific license costs, like IE; or require racks of devices, safari.

                            Anecdotally, for internal use webapps I’ve only ever got complaints from someone using a 4 year out of date chrome and one person who for some reason uses palemoon. I don’t see a reason to include a whole compatibility toolchain like babel or the financial times polyfills for these individuals.

                            Even in customer facing web applications, there are some things that cant be trivially polyfilled. I’ve experienced this with some canvas apis and safari, because safari for some reason lags severely behind firefox and chrome at implementing web standards. It’s not easy for me to test this browser, because as I said above, it requires specific hardware and software licenses that are not “free.”

                            1. 4

                              the simple fact of the matter is firefox and chromium are the only browsers I can reasonably test against as both can be run heedlessly and controlled by something like selenium.

                              There used to exist a SAAS tool (hehe) for testing layouts across multiple browsers. Don’t know if it still exists and if it supports modern js-heavy sites thought.

                              That said, as I pointed out in the post: if you actually test in Firefox it will typically also work in Chrome and other browsers.

                              1. 2

                                There are several such services, with BrowserStack and Sauce Labs being quite popular.

                                1. 1

                                  That said, as I pointed out in the post: if you actually test in Firefox it will typically also work in Chrome and other browsers.

                                  the vice versa is usually true as well and firefox has its own quirks that chromium does not support. e.g. select > option onclick handlers, instead of just a select onchange handler.

                                  Firefox isn’t exactly a saint in this regards either and it’s just as easy to build “firefox” apps too.

                                  1. 2

                                    probably correct but for some reason I rarely see that happen in practice.

                                    When was the last time you came across across a website that only worked in Firefox?

                                2. 4

                                  The simple fact is, competent websites run on any browser because competent websites don’t use weirdo bizarre technologies like ActiveX or whatever the modern equivalent might be. Toy websites might get away with only supporting the specific software setup on the author’s desk, but websites which support people using assistive technologies, people in the Third World, and, most importantly, people trying to give the website owner money will be as accessible as possible, for much the same reason Walmart doesn’t install a ten-foot freeclimb wall in front of their main entrance.

                                1. 1

                                  Does anyone know why the month in native javascript date objects is 0 indexed, and also if there are other languages with that behavior? Also why aren’t the days also 0 indexed for consistency?

                                  1. 3

                                    My guess is it’s because the number of days in a month or year can vary, but the number of months in a year is fixed. getDay is also fixed (day of week) and is also 0-indexed.

                                    1. 2

                                      Java as well. I believe JS copied the behavior directly.

                                      1. 2

                                        The JS APIs were thrown together (along with the language and implementation) by Brendan Eich in ~10 days.

                                        There wasn’t a lot of time for careful thinking - it had to ship.

                                        1. 1

                                          It shares this behavior with (among others) Perl, which gets it from C:

                                          https://perldoc.perl.org/functions/localtime.html

                                          https://www.tutorialspoint.com/c_standard_library/c_function_localtime.htm

                                          At least in Perl’s case it’s easy to map an integer from localtime’s month to a list of month names (as mentioned in the documentation). Same goes for day of week.

                                          Days of the month in Western calendars are generally not referred to by name (at least not since the French Revolutionary calendar) so not having to add +1 to it each time they are referenced is helpful.

                                        1. 4

                                          I’m still surprised how many people in the JS/PHP (does this happen for other scripting language communities?) worlds do live-install of dependencies (i.e. they don’t update/review/commit new dependencies in their own repo, they {git,hg}ignore them, and install on as part of the deployment process. After the various craptacular events related to NPM, I’d have thought at least some people would have realised it’s a shitty approach.

                                          But, stories like this also highlight the other point: funding. I’m able to publish things my company does as OSS because the projects themselves aren’t what make us money - they’re tools to make life easier, but no one is paying specifically for them. Most projects (as evidenced by the post) are not like that though. They’re donating their time, and often non-inconsiderable amounts of their own money to run a project that the community benefits from.

                                          I recently organised to pay about a months hosting costs for a project, in exchange for a slight priority bump on an issue that would make things easier for a client/future clients/internal projects. The maintainer was a delight to talk with about it, understood that businesses can fund things, but usually have their own slightly less than altruistic reasons, and everyone seems happy with the result. I understand not everyone is in the position to donate, or buy optional licences etc from OSS projects, but if you can, I think it’s worthwhile.

                                          Ultimately, what is ~half a day’s billable hours for one person, compared to supporting (both the financial aspect and the appreciation that goes with it) a project you rely on for your business?

                                          1. 2

                                            The problem in the JS world is npm itself. npm by default will actually upgrade packages when you run npm install even when the package.json or package-lock.json have a version specified.

                                            1. 3

                                              To clarify, npm install will respect the versions in package.json (possibly updating if allowed by the specified ranges), but will update subdependencies and write a new package-lock.json. If you want to exactly follow the lockfile, you should use npm ci instead.

                                              1. 2

                                                I think the approach taken by a significant portion of the JS (and probably PHP) community adds to the problem.

                                                “Left pad” was bad enough - but then you had that “isEven” bullshit. An entire NPM module, do do return var % 2 === 0, and then another module called “isOdd” to literally do return ! isEven(var)..

                                                This approach to writing code (or more specifically, not writing it, and using someone else’s “package” or “module” for everything) is ridiculous and needs to stop.

                                                1. 1

                                                  But isn’t isEven a battle-tested module with unit tests? And isOdd just building upon that? (code reuse) If I were to write that code, I might introduce bugs (because it’s not battle tested code; because programmers can’t) , and it becomes a liability to my organization! (code is not an asset) And I’m wasting company time reinventing the wheel (code use again).

                                                  Okay, sarcasm aside, where does one draw the line? I’m somewhat struggling with this myself with Lua. Yes, I have code that will parse IP addresses, but I also have code (not released) that returns the default editor (checks $VISUAL, $EDITOR then /bin/vi [1]. That’s all the module does. Is it worth having a two line module that matches an ASCII character? Or a twelve line module that matches non-ASCII, non-control UTF-8 characters? [2] It’s for reasons like “Left Pad” that I haven’t fully published some of these modules.

                                                  [1] Or should that be /bin/ed? I might have to fix that one …

                                                  [2] Both are required when using the general UTF-8 module [3]—LPEG allows one to combine parsing expressions to build up more complex expressions.

                                                  [3] Yes, Lua 5.3 has some support for UTF-8, but the code I’ve written also handles the so called ANSI control sequences [4], which is itself a module.

                                                  [4] So called because a lot of people call them that, but they’re really an ISO standard (ECMA-48).

                                                  1. 1

                                                    It’s a judgement call. An IP parser clearly makes sense as a “library” function - whether you publish it or just include it in projects you work on is a different discussion really. One that checks if a character “is ascii” is probably useful if the code to do it isn’t ridiculously short and obvious. I’m not familiar enough with Lua to know how obvious that expression is, but I’d hope var mod 2 === 0 to test for even-ness would be pretty clear to anyone doing anything remotely serious in a programming language.

                                                    Pretty much every project I work on, ends up introducing some kind of app-internal “library” or “utility” functions/classes. Unless they’re particularly domain specific I will often then re-implement the logic (or get permission to just copy it) to be generic enough for general use in other projects etc, and include it in existing libraries of functionality I rely on (currently I maintain a PHP library/framework and a Shell library) for internal/client projects.

                                                    1. 1

                                                      Before we go further, let me clarify what I mean by “release.” Just as JS has NPM, Ruby has jems, Lua has rocks—using luarocks to install Lua modules is very common, and I have modules I’ve released as rocks. I also have modules available via Github but not luarocks. It’s a bit more work to install those. Then I have modules that aren’t publicly available at all, and some of these are little more than return os.getenv("VISUAL") or os.getenv("EDITOR") or return "/bin/vi". At what point is such a module stupid? That’s what I’m struggling with.

                                                      My “is ascii” code uses LPEG (Lua parser expression grammars) and the one line is about as obvious as var mod 2 === 0 to anyone who knows ASCII or LPEG.

                                                      1. 1

                                                        I guess part of this is from this recent (from my POV, maybe I just didn’t see it before) push towards releasing tiny “micro libraries” that literally do one thing. “Composition” I guess the cool kids call it. I’d probably just call it “compost” because it smells pretty similar to me.

                                                        I don’t think the problem is reusing code, specifically - I have some pretty short and sweet functions in my shell library and some pretty short methods in the PHP code too - e.g. comparing to see if floats are essentially the same (https://bitbucket.org/koalephant/bamboo-framework/src/f1985d371e804ac05b411eef7a356aea70989bb9/src/koalephant/bamboo/types/numberhelper.php#lines-370) but I wouldn’t release that (either as its own repo or as a PEAR module or a Composer package) on its own - it’s part of the larger framework.

                                                        For some of this stuff it sounds more like you have a collection of pre-written functionality that you can copy into a project as-needed, but aren’t necessarily releasing on its own to be used.

                                            1. 0

                                              A sane versioning scheme […] That was easy.

                                              No, semver is probably not the final solution.

                                              From what I understood one problem is when you want to order versions. For example, you specify a dependency as “>=2.7”. Now is that condition fulfilled for “2.7-beta”? Is “2.7-beta” earlier or later than “2.7-rc3”?

                                              Also, there is CalVer which uses dates. Example: Ubuntu 18.04 (meaning April 2018). Also ComVer a simplified SemVer.

                                              1. 3

                                                Semver uses 3 .-separated decimal numbers. -rc3 isn’t semver.

                                                1. 2

                                                  Exactly. If you want to use a beta or rc release, you should vendor it or select a git commit, as in Cargo.

                                                  1. 2

                                                    -rc3 isn’t semver, because it should be -rc.3, see SemVer#9. SemVer has rules governing pre-releases.

                                                  2. 2

                                                    There’s also ConVer (content versioning) which uses git commit hashes, although the fact that I can no longer find a link to the site/article probably speaks to how popular that idea is.

                                                    1. 2

                                                      In practice, the answer to those questions is no, and earlier respectively.

                                                      And there is work on making those things official: https://words.steveklabnik.com/what-s-next-for-semver

                                                      1. 2

                                                        SemVer#11 lists the ordering. >= 2.7 is not satisfied by either of your examples. As for their ordering, 2.7-rc.3 > 2.7-beta.1, as specified by SemVer.

                                                      1. 3

                                                        With HTTP/2 many small files is not a problem. Just ship ES Modules directly to browsers. More granular caching, less dev tools.

                                                        1. 1

                                                          yeah, the small files problem was more relevant in 2016

                                                          1. 1

                                                            It’s not as big of a problem if you know all of them up front. But ES modules don’t let you know this without using a bundler or bundler-like tool. See this post for why http/2 doesn’t solve the problem: https://engineering.khanacademy.org/posts/js-packaging-http2.htm

                                                            1. 2

                                                              Use modulepreload to preload all the module files:

                                                              https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload

                                                              1. 2

                                                                Thanks for the pointer! I hadn’t seen this before and haven’t been able to find good information on browser support yet. Do you know how well supported it is?

                                                                Additionally, it fails to solve two of the problems with just serving ES modules:

                                                                1. You still need to provide a static list of modules, so you’ll need a tool to convert your dependency graph into that list (a bundler?)

                                                                2. By splitting everything into multiple files, you lose compression efficiency. Assuming you need everything anyway, shipping as a single (or small number) of bundles will produce the best results.

                                                                1. 1

                                                                  Yeah it seems to be a little difficult to find information on. I know there’s support in Chromium, but not sure it’s in the others just yet. I’ve only experimented with this a little on small projects and nothing in production so I’m still trying to get my head around how it would work when things get larger and more complex! In that case bundling probably will always be a good idea. Also agree with the point about compression. Below a certain size it’s probably not a big issue, but there will definitely be a point where you need to consider that.

                                                                  My hope is just that eventually I will be able to use this and avoid complex build steps for smaller projects with a manageable number of modules.

                                                          1. 2

                                                            I too used to use Makefiles for js. But the truth is it’s not the right tool.

                                                            The author cites a few problems but forgets the most important one: the slowness.

                                                            Most real JS applications imply a lot of successive operations (transpiling, linting, concatenating, minifying, localizing, etc.) and using make means you read and write many files many times which is a major optimization killer. Modern build tools are able to work on streams, only writing files at the end. And I’m not even speaking of complex target computation, which is very slow if you’re relying on files as intermediate structures.

                                                            I switched to gulp for that reason only, typically dividing my compilation time by more than ten.

                                                            1. 3

                                                              …What?

                                                              What’s stopping you from using pipes in your Makefile? Or delegating to bash scripts?

                                                              1. 2

                                                                Because then you lose dependency computation between steps of your transformation ? Because the streams must be merged and splited depending on the transformations ?

                                                                1. 1

                                                                  But get the dependencies right, and a parallel make will speed things up on today’s multicore systems.

                                                                  1. 1

                                                                    I think I would have to see an example. It’s hard for me to argue this stuff in the abstract.

                                                                2. 1

                                                                  It would be interesting to see a version of make designed to work with streams. It could work quite nicely.

                                                                  1. 1

                                                                    My experience is the opposite: I switched away from gulp to rake and cut build times to a tenth of what they were. I’m also building on a 16-core machine, and taking advantage of the parallelism in rake/make.

                                                                    Gulp/grunt/broccoli/webpack/etc all feel really foreign to me, but DAG-based build tools feel like home.

                                                                    1. 1

                                                                      I might be mistaken, but aren’t webpack and broccoli DAG-based?

                                                                  1. 2

                                                                    Synk associates with a known sexual harasser and racketeer. Take it elsewhere.

                                                                    1. 4

                                                                      For those like me who have no idea who any of these people are: care to expand?

                                                                      Quite aside from which, ‘is guilt by association suitable grounds for exclusion from lobsters’ is far from a settled question afaik.

                                                                        1. 3

                                                                          I’m unaware of any sexual harassment allegations against Tom.

                                                                          He was fired for failing to stand up to his wife (who was making his employees miserable). Now, that’s perfectly reasonable grounds to remove a CEO, but I don’t understand how that makes him a monster.

                                                                      1. 2

                                                                        …and you drive an SUV so even if you say something interesting nobody should be allowed to listen, and your wife eats meat so she should be shunned, your best friend went on a long flight to some sunny destination so ban him, his wife has her money in a bank which invests in nuclear energy so make sure she never gets a job, etcetera.

                                                                        These discussions can an should be had in a different context. If Synk did something onerous by all means take them up on it but don’t do that by calling out the mob on and trying to create pariahs out of everyone and every institution which does not fit your moral standards as all that leads to is a balkanised society.

                                                                        1. 2

                                                                          I have no idea what you’re talking about, and searching didn’t turn up any results. If you’d like to have me not submit their stuff in the future, at least a little bit of evidence would be nice.

                                                                        1. 1

                                                                          Nice post. Thank you sharing. I’,m not sure if I understood your object equality dilemma. Can you not compare objects using a double equal instead of a triple?

                                                                          > {x: 1, y: 4} == {x: 1, y: 4}
                                                                          true?
                                                                          
                                                                          1. 3

                                                                            Double equals stands for “loose equality” rather than “structural equality” in JS; all it does is cast the values to a common primitive type before comparing.

                                                                            1. 2

                                                                              Double equals and triple equals both evaluate to false for that comparison. Object comparisons are by reference, not by the contents of the object. And each side is a separate instance of Object.

                                                                              1. 1

                                                                                Just ran it in console :) I find this behaviour odd.

                                                                            1. 9

                                                                              This is the second Facebook project (after Jest) to announce switching from Flow to TypeScript in the past week or two. 🤔

                                                                              1. 3

                                                                                The 2nd we know of.

                                                                                1. 2

                                                                                  Do you happen to have a link to the other announcement handy? We use Flow at $WORK and today I had a great time banging my head against the wall because it was both not happy with me adding a custom matcher in Jest so that internal DateRange type tests would produce some better failing output and also had to be instructed to not freak out about jsverify so that the aforementioned tests could be property-based.

                                                                                  And documentation for Flow built-in types like $ReadOnlyArray simply not existing is its own level of awfulness and.. if a bunch of high profile projects are missing maybe I can get leverage to push for Typescript internally, too.

                                                                                  1. 2

                                                                                    I suppose that would be Jest? (edit: sorry, I misread the OP, it is Jest) (Accepted) Proposal thread here: https://github.com/facebook/jest/pull/7554

                                                                                    1. 1

                                                                                      Got it, thanks! Somehow wasn’t able to find this through google

                                                                                1. 6

                                                                                  Oh my, that private syntax is hideous. I really hope that doesn’t make it in. People have been using _methodName and _property for private for ages and I hated that as well. I’m just not a big fan of sigils, I guess. Adopt the private keyword and leave it at that.

                                                                                  I don’t even understand why someone would suggest a static keyword but leave out private. If you’re going to use a sigil, use it everywhere. If you’re not, then don’t use it anywhere.

                                                                                  1. 7

                                                                                    The ability to crack open and get at private members has saved people’s butts on numerous occasions. I’m not really sure why it’s needed to add a private field mechanism, unless they’re just continuing to roll up features from other languages.

                                                                                    1. 5

                                                                                      Yes, exactly this. When I moved from from JS and C# to Python I found the “we’re all adults here” approach to variables really refreshing. Having mostly moved back to JS land I’m baffled by these changes, especially when so much of the focus of the rest of the language (and it’s advocacy) seems to be on functional approaches - React developers claim that classes confuse both people and machines. I don’t get who’s benefitting from getting private, static etc into JS, or doing any kind of expansion for class-based programming.

                                                                                    2. 2

                                                                                      That was my initial reaction as well, but the rationale made perfect sense after I read the FAQ on the subject: https://github.com/tc39/proposal-class-fields/blob/master/PRIVATE_SYNTAX_FAQ.md

                                                                                    1. 5

                                                                                      Why is the first two pages just a picture of a fox

                                                                                      Like it doesn’t have anything to do with the content, even if you stretch, it’s just a picture of a fox

                                                                                      A 2000x1,200px picture of a fox

                                                                                      1. 3

                                                                                        If it makes you feel better, people will still worry more about minifying their production code while doing stuff like that.

                                                                                        1. 1

                                                                                          Hmm. It’s pretty reasonably sized on mobile. I guess Medium just makes it scale up until it’s wide enough to fill the browser width?

                                                                                          1. 2

                                                                                            Yup, welcome to Medium’s idea of a responsive web page.

                                                                                        1. 5

                                                                                          CSS will gracefully continue on failure

                                                                                          Can be rephrased to “CSS fails silently.”

                                                                                          allow you to write global and scoped code

                                                                                          Unless you are using Shadow DOM (an extremely new technology which requires JavaScript), CSS doesn’t have the ability to scope your code with anything other than selectors.

                                                                                          A popular “critique” of CSS is that “you can’t build components that scale efficiently”. This, my friends, is utter poppycock. Thanks to methodologies such as BEM, SMACSS and Atomic Design, there’s a plethora of solid, tested options for doing exactly that.

                                                                                          Those methodologies all depend crucially on human beings following naming conventions to prevent style leakage. This can certainly work. I’ve used BEM extensively, but CSS-in-JS solutions make style-leak-prevention automated rather than requiring human discipline.

                                                                                          I think CSS is great, but I think this post is being overly dismissive about the contributions CSS-in-JS can make to maintainability and bug prevention. I’m currently using Emotion with TypeScript, so my styles get some basic sanity checking automatically. YMMV.

                                                                                          1. 2

                                                                                            CSS has a lot of positive qualities but it is just plain wrong that CSS allows you to write scoped rules. It’s biggest pain point is the global nature and handling this at scale requires careful discipline and perfect adherence to a methodology.

                                                                                            Shadow Dom helps but comes with it’s own set of challenges around compatibility, understand-ability.

                                                                                            1. 1

                                                                                              One good alternative which I think sits between CSS-in-JS and humans following naming conventions is having identifiers generated and checked at compile time, if your tech stack supports it.

                                                                                              Yesod/Shakespeare does this quite nicely, and I’ve been leaning on this quite a lot lately. To give an example from a project I’m working on, here’s some backend code which generates random identifiers and gives them names we use to refer to them with:

                                                                                              footer :: Widget
                                                                                              footer = do
                                                                                                cityscapeClass <- newIdent
                                                                                                finePrintClass <- newIdent
                                                                                                $(widgetFile "footer")
                                                                                              

                                                                                              In your markup, you have something like this, where we use those identifiers:

                                                                                              <.#{cityscapeClass}>
                                                                                              <p.#{finePrintClass}>Some fine print text here
                                                                                              

                                                                                              And then in your stylesheet, the same idea:

                                                                                              .#{cityscapeClass} { /* styles.. */ }
                                                                                              
                                                                                              .#{finePrintClass} { /* styles.. */ }
                                                                                              

                                                                                              This gives you some sanity checking that the selectors match in all places (also works in JavaScript [named Julius]), and it also allows you to remove dead styles which is a problem I know I face when writing normal CSS. I’m never sure if I’ll break something by removing some CSS, so it just lingers. This approach also means all the style stuff doesn’t have to go through the JavaScript interpreter.

                                                                                              Also, I agree the author is being overly dismissive. CSS has its own set of challenges, and there’s nothing wrong with exploring ways to mitigate those challenges. The debate these days seems to be mostly between people who don’t know CSS and refuse to learn it, and people who do know CSS but refuse to learn anything else. But, that’s anecdotal and probably super biased.

                                                                                              1. 2

                                                                                                In a former job I worked on just such a feature to implement scoped css as a compile step in a templating language. It proved quite valuable to a very large html/javascript codebase but it’s non-trival to do correctly without breaking all the things that interact with classes and id’s on an html tag. If you have a tool that does it well then the payoff can be very large for large codebases.

                                                                                                1. 2

                                                                                                  In Ur/Web, class names are special values generated with the style keyword, while ids are more or less randomly generated at runtime in a similar way to your newIdent function. (It doesn’t actually manage/typecheck the CSS though.)

                                                                                              1. 5

                                                                                                This is what the internet is like at my parents’ house. Even rural America is affected.

                                                                                                https://youtu.be/_m8brM_9YeU

                                                                                                1. 4

                                                                                                  There are places one hour outside of Washington D.C. that don’t have access to broadband internet at all.

                                                                                                  1. 3

                                                                                                    This is the same with them—they have to hot spot their cell phones for internet. Otherwise the only option would be dial-up.

                                                                                                1. 5

                                                                                                  I reckon HTML and CSS deserve better than to be processed, compiled, and spat out into the browser, whether that’s through some build process, app export, or gigantic framework library of stuff that we half understand.

                                                                                                  I don’t understand this sentiment at all (excepting that, yes, you should understand your tools). The post reads like a request for people to stop trying to improve CSS/HTML. Perhaps it’s not surprising coming from the author of a site which presumably makes money by educating people on “tricks” to make CSS work.

                                                                                                  While I don’t find HTML itself particularly bad to work with directly, I think I’m more efficient and I definitely find it more enjoyable now that I rarely have to write entire HTML documents by hand. CSS (particularly pre-css-grid and pre-flexbox) on the other hand is pretty unwieldy. I find it’s much nicer when complemented by transpiled languages or frameworks such as tachyons. I’m really grateful for all the work that’s gone into tooling around HTML and CSS to make them more ergonomic.

                                                                                                  1. 1

                                                                                                    Perhaps it’s not surprising coming from the author of a site which presumably makes money by educating people on “tricks” to make CSS work.

                                                                                                    FYI, the article author is not the site owner, and appears to just be contributing an opinion piece.

                                                                                                    1. 1

                                                                                                      Thank you for the correction. Do you think the point stands nonetheless, since the site owner chose to publish it? Perhaps the standard ‘RTs are not endorsements’ disclaimer holds.

                                                                                                  1. 3

                                                                                                    I have the original Surface Book (2016) and I really like it. I use the screen-flipping feature and the pen a lot (for reading old books in Drawboard and making notes on them). The aspect ratio is nice too (3:2).

                                                                                                    1. 1

                                                                                                      This is what I have as well. The build quality and aspect ratio are fantastic, and since I’m the rare developer who prefers Windows it’s a perfect fit for me. I don’t use the pen all that often, but it’s handy for annotating screenshots occasionally.