Using React-Bootstrap frontend with Webpack and REST backend (django)

I’ve been toying with React in frontend web-dev as a hobby. It’s a very good abstraction in terms of controlling client-side state and doing a dependency based re-rendering. I’ve started a simple Todo application with a friend doing a backend and it is going pretty well so far. One mistake I made was trying to use latest stable React and Bootstrap 4 beta from CDNs. This was flying too close to the Sun and when trying to do anything dynamic (anything that requires bootstrap.js and therefore modifying DOM by anything other than React), it failed. The failure was Modal. While there exists a workaround, it’s for sure not a clean abstraction that a purist in me would like.

So I attempted to look at alternatives and I recalled using React-Bootstrap from the github project. Basically, it’s bootstrap components that are re-implemented using React framework. Unfortunately, it’s still in development towards 1.0.0 release and is based on stable Bootstrap v3. So I did what is most rational. I made an attempt to change to using React-Bootstrap components instead of using pure React and Bootstrap CSS. The Re-architecting surprisingly went well without much headache because most that I had to do was just replace the JSX components. Of course the CSS made the sites look difference and that was expected.

Initially, I created a project that was a generic copy of the React’s create-react-app, but using externalized npm components. I used the webpack it used to compile and emit the bundle.js file. I basically leveraged that to emit bundle.js from the bag of js files, and used that bundle.js file in the static folder under django root directory. It is definitely not a standalone webpack framework to compile just what I need since it was meant to be a standalone React, Express server, but for my purposes it did its job (there is a bug where webpack –watch fail with ENOENT but that’s just an annoyance). Someday I’ll create just a webpack project that makes the bundle.js file that I need to supply for frontend.

I switched from using CDN to using actual components in my js files. The pros and cons for this is pretty common sense so I won’t describe them here. The end result is that everything works as expected using React-Bootstrap components. It worked pretty much too well to my surprise (after some weird ES2015 things not working like Object Destructuring) and that bodes a good news to develop further without much headache down the road. Looking to make the best todo app!

Advertisements

Blog

I got a ChromeBook the other day. I want to be able to dev using Browser based IDE that supports windows tiling and collaborative editing. I think it may be doable using Chrome App…

Cookware

I’ve made terrible purchases since living alone. I should’ve avoided non-stick cookware from the beginning. I bought a non-stick wok which I used for everything (what a terrible mistake that was) and it just failed to do a proper job at anything as expected. Non-stick coating quickly wore off and seasoning it was a nightmare, not to mention unsafe. Then I bought a non-stick pan which was fine for a while, until I made the mistake of leaving it empty on stove that was on medium for 30 minutes. It had what looked like melted non-stick coating marks all over, which I tried to clean with salt WITHOUT OIL. I rubbed too hard with the salt DRY which got most of the stains off, but I think it completely ruined the pan (which I suspect was already ruined).

Then I bought a stainless steel pan, larger one for stir-fry and general purpose. First attempts at frying egg ended up in terrible mess with egg sticking everywhere. Then I tried seasoning it with veggie oil at high heat and I had almost the non-stick -like pan without all the teflon. Seasoning is pretty delicate thing — I am still learning how to make a good seasoning. I will probably trash the non-stick wok and pan I bought since they’re not only terrible at their jobs but also dangerous in my health because of the residues that go into the food. I learned that adding stir-fry sauce and simmering is not that great for the seasoning. Subsequent cooking of egg on the stainless steel pan was not that great. I don’t know if this is because of acidic properties of soy sauce or my scrubbing was too hard with hot water.

However, I like stir-frying and it seems like the pan can’t do both. I might just get another stainless steel pan for frying eggs :/.

Making Compiler: Lexer (Continued) and Parser

Latest progress…  I’m well into the parser now, for which I estimate I’ve done 35%-ish. It’s actually gotten a lot more fun as it feels like coding building blocks that work together nicely. The hand written, recursive descent parsing takes a bit of effort for debugging ambiguities and understanding what is going on, but at least it is fun. Initially I suspected recursion depth _might_ be a problem, but seeing the testcases, I suppose it’s not that big of a deal (at least from my unit tests).

Some excerpts:

Screenshot from 2015-03-14 02:32:02 Screenshot from 2015-03-14 02:32:48 Screenshot from 2015-03-14 02:32:53Screenshot from 2015-03-14 02:35:53

Compiler: Motivation for my own toy language and Handwriting Lexer

https://github.com/choikwa/Rekt

I wanted a language that combined the likeable features of Python, C, and functional programming. I replaced somethings in Python such as ‘:’ and indent for braces and kept heterogeneous element containers. I especially liked how Python exposes fundamental container data types so natively, so I kept all the brace notations such as [],(),{},set(). Grammar is still being worked out, to add more desirable features that Python lacked such as operator overloading (variable length operator too!), complex switch statement, and perhaps more functional list comprehension which I dubbed as iterator, which works more like Mathematical set notation.

Imagine if you could write code like

for {float f| |f| < 10, stepSize(0.01), isReal, otherFilters}
{
//do stuff with f
}

I had to revive my old memories about writing a lexer, from days of university. At the same time, I wanted to practice using C++11 features. I decided to handwrite a lexer using C++11 features. I unfortunately did not implement the main logic using NFA->DFA transformation for additional performance, but I suspect this won’t be a typical performance bottleneck in the pipeline.

Screenshot from 2015-03-08 01:59:51