The bleeding edge of web development

  • Continuing the discussion from Status thread (sqrt(-1) characters or more or less, post cannot be empty):

    @cartman82 said:


    Hello World with react, babel and webpack, served with auto-reloader dev server. Around 1MB of javascript :-)

    So I've been working on this whole day.

    It's going great!

    I figured out how to add SASS and LESS into my WebPack config. Turns out you don't get separate files, like bundle.css or something, but use your javascript code to inject styles directly into the document. So cool!

    Of course that makes things harder to debug, so I had to figure out how to get WebPack to generate source maps. It's pretty easy actually. There's a cute little DSL you can use inside strings in your webpack.config.js. Stuff like ['style', 'css?sourceMap!', 'less?sourceMap']. Neat-o! Intuitive too!

    Then I worked on the basic styling. I started with a starter template based on the Twitter Bootstrap SASS theme. That turned out to be too rails oriented. All examples and documentation presumes you're using various bloated gems and frameworks. So I pivoted and went with good old LESS instead. I found a nice color theme and figured out how to get them to override bootstrap's default variables.

    Pretty soon I had myself a nice styled page!

    Oh no, except fonts didn't work. Nothing I did seemed to be able to fix the issue. I tried overriding my path, staticPath and icon-font-path a hundred different ways. I googled and googled and googled. In the end, the solution turned out to be dead simple:

    	loaders: [
    		{test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
    		{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
    		{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
    		{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }

    DOH! Why didn't I think of that!?

    Anyway, with my glyphicons now working, I was finally able to start coding with react.

    First things first: redux is all the rage now, so I have to have that. Next, since redux is an abstract library, I needed redux-react bindings, plus the famous redux-devtools package to integrate with webpack-dev-server I set up earlier.

    According to documentation, the idea is to create a tree of reducers, that generate a singleton store, that feeds smart components, which update my tree of dumb components, which trigger action creators which go trough store and back into reducers.

    No problemo. I'll just go through some kind of "best practices" example app, and see how to set all this up like a pro. And wow, where there example apps galore. Each one with its own unique assortment of modules and the way of organizing things. Such great diversity of approaches and ideas brought tears of joy into my eyes.

    And gave me great options too! For example, if I started coding using redux-router, which I saw in one example, and found it completely undocumented and inscrutable, I could simply replace it with similar but slightly different module called react-router and carry on! Freedom, yeah! Stick it to the man!

    With my routing and reducers and smart components figured out, I finally got everything to work together and run with only one deprecation error that I can't get rid off.

    Oh yeah, all my hard work has finally paid off.

    Here is my app, in all its glory!

    Wait a sec.


  • Are you trying to get on the Discourse dev team?

  • Discourse touched me in a no-no place

    ... And here I thought our setup was insane. I can't find anything that weighs over 250kb. But I also can't find anything that takes less than 6 seconds to completely load...

  • You need to stop thinking of HTML as something you write, and start thinking of it as something you compile to :wink: .

  • I have liked your post because I enjoy the ramblings of a web developer's sufferance.

  • @fbmac said:

    Are you trying to get on the Discourse dev team?

    Hey, don't put me in the same category with them. My cool counter button works almost all the time. And it's only a few megs too!


    Next week, @cartman82 just says "Fuck it!", makes a thin wrapper that does just what he needs, it works great, it's fast, it's optimized and mostly bug free.

    At the very next minute, he gets accused of NIH syndrome.

  • area_can


    Have you thought about making a helloworld.js framework?

  • Have you thought about using PHP?

    echo "<h1>Hello World!";

    Screw you moden web devs with your stupid JavaScript! For today, PHP will not be TR­:wtf:!

  • I should write a CGI Hello World webapp in Cool.

  • Discourse touched me in a no-no place

    You know, I think the west coast is ready for CGI again.

  • Discourse touched me in a no-no place

    I was using CGI before it was cool.

  • Do it in Malbolge and I'll be impressed.

  • I was thinking about CGI but I've never seem a "CGI is TRWTF" story here.

  • SockDev

    @ben_lubar said:

    I should write a CGI Hello World webapp in Cool.

    /me muses about the idea of compiling cool to brainfuck for reasons of brainfuck.

  • I have a compiler for Cool to BIT and Brainfuck to BIT, so it shouldn't be too hard. BIT has less stuff in it than Brainfuck, so it'd probably be even easier to write the compiler going the other way.

  • Winner of the 2016 Presidential Election

    @rc4 said:

    Have you thought about using PHP?

    echo "<h1>Hello World!";

    Screw you moden web devs with your stupid JavaScript! For today, PHP will not be TR­:wtf:!

    You know you're doing it wrong when PHP is doing it better than you...

  • SockDev

    PHP: more readable than Perl

    Doing it wrong?

  • area_can

    All you have to do is set up your php script to output the bootstrap script so that the client's browser can initiate the request to your API endpoint to fetch your app's payload, initialising your app and allowing it to create the virtual DOM necessary to display your <h1>. :fa_smile_o:

  • SockDev

    Of course...

    document.write('Hello world!');

  • Winner of the 2016 Presidential Election

    You fool!

    echo "<";
    $script = "script"
    $words = array("document","write");
    echo implode(".",words);
    // wordList.php echos Hello TEMP
    $echo = ob_get_contents();
    $echo =  trim(implode(" ", explode(" ", $echo)));
    $echo = str_pad($echo, strlen($echo)+2, "'", STR_PAD_BOTH);
    echo $echo;
    echo nl2br("\r\n");
    $dec = deconstruct(script);
    $dec .= ">";
    $openbracket = "<";
    $slash = preg_replace("/[HTTPS]*(\0)+.*/i",'$1',$_SERVER['SERVER_PROTOCOL']);
    $result = $openbracket . $slash .$dec;
    class deconstruct{
        $_name = "";
        function __construct($name){ $this->_name = $name; }
        function __toString(){
            return $this->_name;
    function replaceTemps($buffer){
        return str_replace("TEMP", "world", substr($buffer, strpos($buffer," ")+1, strlen($buffer)));

    Thats how you write PHP-code!

    Filed Under: I feel dirty now! Also, since I coded this inside the Discourse-editor there might be some issues. I will leave it to @Arantor to iron them out :trollface:

    Addendum: Also: Why is nobody using JQUERY? :trollface:²

    Also paging @rc4

  • Needs more base64. Also my head hurts and my eyes are bleeding.

  • SockDev

    Hmm, there's some definite :wtf: going on that isn't PHP related; PHP handles teh CGIz for you so you don't have to...

    Also, print ($script) ;)

  • Does it declare HTML 4.01 transitional and use frames and/or tables for formatting? If not, then it isn't enterprisy enough.

  • @Arantor said:

    PHP handles teh CGIz for you so you don't have to...

    Only if you have PHP support built into your Web server. It should be entirely possible to run the CLI version of PHP through a standard CGI interface.

  • SockDev

    PHP 5.4 comes with its own webserver!

  • Discourse touched me in a no-no place

    @rc4 said:

    I've never seem a "CGI is TRWTF" story here.

    Some fish barrels are just too easy to shoot, even for here.

Log in to reply

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.