DEV Community: Huy Tr.

TIL: JavaScript replace() command with callback

Huy Tr. — Fri, 04 Jan 2019 05:13:07 +0000

Of course, this is not new, it's already here centuries ago in the document https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace, but I never have to do any replacement complicated enough to use it, so I pay no attention to it until I read a pull request from a teammate today.

The replace() command in JavaScript has a callback that provided you with some more information such as the matched content, the index, and the original string. What you return in that callback will be replaced to the matched content.

This allows you to have a more complicated replacement, for example: you want to replace just the second occurrence of the letter "a" in "abcabc"to the letter "$".

How would you write a regex for that? What if we change the requirement
to any nth occurrence? Even if you find a regex solution, is it
elegant enough to not making any other developer vomit when they had to maintain your code?

Using replace() with a callback, we can just write:

"abcabc".replace(/a/g, (matched, index, original) => {
  if (index !== 0) {
    return "$";
  } else {
    return matched;
  }
});

That's it, stop writing complicated regexes, start using replace()
with callbacks, it makes things easier. You and your teammates, all have a life to live, and sanity to save.

Emacs from scratch

Huy Tr. — Sat, 30 Jun 2018 06:55:48 +0000

Original posted on my blog

Spacemacs is the first Emacs version I used, so I'm kind of attached to
the evil-mode and SPC mnemonic key binding.

But I always have a feeling that something is not right, Spacemacs hides
a lot of things under the hood, and it loads a lot of stuff that I do
not need during the startup. This would be a huge waste, and I need to
have a fresh setup that I can control every single thing in my editor.

So I created my own Emacs configuration, it's surprisingly easier than
as I thought.

In this post, I'll go through the steps I built a minimal
Spacemacs-like version, with some basic key binding:

General:
  SPC /     : ripgrep
  SPC TAB   : previous buffer
  SPC SPC   : Open M-x

Files:
  SPC p f   : find files

Buffers:
  SPC b b   : buffers list

Window:
  SPC w l   : move right
  SPC w h   : move left 
  SPC w j   : move down
  SPC w k   : move up
  SPC w /   : split right
  SPC w -   : split bottom
  SPC w x   : close window

Other:
  SPC a t   : open terminal in the current buffer

Configuration file

First, we need to create a init.el file:

$ mkdir -p ~/.emacs.d
$ touch ~/.emacs.d/init.el

Now, Emacs will start with the ugly tools bar and status bar, just like
any editor that I would uninstall right away. Let's change this.

Minimal UI

Now, we need to disable all the ugly stuff and make Emacs just as clean
and clear as Vim or Sublime, Atom,... or whatever modern editor today
has.

Put these to the beginning of your init.el:

;; Minimal UI
(scroll-bar-mode -1)
(tool-bar-mode   -1)
(tooltip-mode    -1)
(menu-bar-mode   -1)

Next, we'll add a package manager to start installing themes/packages.

Package Manager

By default, Emacs is configured to use ELPA package archive, we'll
need to add more repository such as GNU ELPA, MELPA,...

Put this to the beginning of your init.el:

;; Package configs
(require 'package)
(setq package-enable-at-startup nil)
(setq package-archives '(("org"   . "http://orgmode.org/elpa/")
                         ("gnu"   . "http://elpa.gnu.org/packages/")
                         ("melpa" . "https://melpa.org/packages/")))
(package-initialize)

Next, we'll use use-package
to configure our packages better, in case you don't know, this package
provides a macro to allow you to easily install packages and isolate
package configuration in a way that is both performance-oriented and
tidy.

;; Bootstrap `use-package`
(unless (package-installed-p 'use-package)
  (package-refresh-contents)
  (package-install 'use-package))
(require 'use-package)

Vim key binding with Evil Mode

Now that you have package manager setted up, let's install our first
package: evil-mode, this package allows you to use Vim-like key
binding in Emacs.

;; Vim mode
(use-package evil
  :ensure t
  :config
  (evil-mode 1))

That's it! Now restart your Emacs, you'll see the mode line displaying
the current Vim mode, and you'll be able to navigate with hjkl.

Installing Theme

One of the best themes for Emacs I could found is doom-themes package,
that has a lot of cool themes. The following code will install this
package and load its flagship theme doom-one:

;; Theme
(use-package doom-themes
  :ensure t
  :config
  (load-theme 'doom-one t))

Installing Helm

Helm is a framework for
incremental completions and narrowing selections in Emacs. Many people
prefer ivy because it's much lighter, for me, it's doesn't matter.
I find helm is easier to use and config.

The following snippet will install helm and configure fuzzy
matching:

;; Helm
(use-package helm
  :ensure t
  :init
  (setq helm-mode-fuzzy-match t)
  (setq helm-completion-in-region-fuzzy-match t)
  (setq helm-candidate-number-list 50))

Installing Which Key

In Spacemacs, when you press SPC or any other key sequence, a small
buffer will be popped up to show the list of features you can do next,
installing which-key will give you this.

;; Which Key
(use-package which-key
  :ensure t
  :init
  (setq which-key-separator " ")
  (setq which-key-prefix-prefix "+")
  :config
  (which-key-mode))

Custom Key Binding

Finally, you can start config your custom key binding with general
package, this is my config, the prefix is SPC just like in Spacemacs:

;; Custom keybinding
(use-package general
  :ensure t
  :config (general-define-key
  :states '(normal visual insert emacs)
  :prefix "SPC"
  :non-normal-prefix "M-SPC"
  ;; "/"   '(counsel-rg :which-key "ripgrep") ; You'll need counsel package for this
  "TAB" '(switch-to-prev-buffer :which-key "previous buffer")
  "SPC" '(helm-M-x :which-key "M-x")
  "pf"  '(helm-find-file :which-key "find files")
  ;; Buffers
  "bb"  '(helm-buffers-list :which-key "buffers list")
  ;; Window
  "wl"  '(windmove-right :which-key "move right")
  "wh"  '(windmove-left :which-key "move left")
  "wk"  '(windmove-up :which-key "move up")
  "wj"  '(windmove-down :which-key "move bottom")
  "w/"  '(split-window-right :which-key "split right")
  "w-"  '(split-window-below :which-key "split bottom")
  "wx"  '(delete-window :which-key "delete window")
  ;; Others
  "at"  '(ansi-term :which-key "open terminal")
))

Matching Titlebar color on MacOS

If you're using Emacs on macOS, you can add this to have your titlebar
color changed and matching your color theme:

;; Fancy titlebar for MacOS
(add-to-list 'default-frame-alist '(ns-transparent-titlebar . t))
(add-to-list 'default-frame-alist '(ns-appearance . dark))
(setq ns-use-proxy-icon  nil)
(setq frame-title-format nil)

From here, you can continue customizing Emacs as you need, for example,
add projectile package for
project management, add more language supports, customize your mode
line,...

I hope you'll find this post helpful and will be able to build your own
Emacs configuration. Also, you can check my customized configuration
here.

Why do you use web-based Terminal emulators?

Huy Tr. — Wed, 02 May 2018 23:35:20 +0000

Just curious, not here to make a flame war.

I saw so many people using and recommending web-based terminal emulators such as Hyper.

Personally, I actually gave it a try but totally disappointed when comparing to iTerm or Alacritty. I would not think about running tmux, vim or reading log files with less in it.

For those who still using it, I want to hear your opinions, is there any specific reason that you prefer Hyper over iTerm or anything else?

A note on Dynamic Programming

Huy Tr. — Fri, 15 Dec 2017 02:57:53 +0000

This is a quick note about Dynamic Programming from The Algorithm Design Manual book. I found it really helpful.

Why dynamic programming is so hard?

Until you understand dynamic programming, it seems like magic.

You must figure out the trick before you can use it.

The trick

Dynamic Programming is a technique for efficiently implementing a recursive algorithm by storing partial results.

The trick is: seeing whether the naive recursive algorithm computes the same subproblems over and over again.

If so, storing the answer for each subproblem in a table to lookup instead of recomputing.

Start with a recursive algorithm or definition. Only once we have a correct recursive algorithm, do we worry about speeding it up by using a result matrix.

The advice on how to learn

Dynamic programming is best learned by carefully studying examples until things start to click

Re-Implementing Facebook’s Reaction Animation

Huy Tr. — Wed, 06 Dec 2017 02:02:58 +0000

Originally posted on my blog

Disclaimer: I’m not a Facebook engineer, and I don’t know how did they make it. This is just my own implementation. It may not have the best performance and I’m just tested on Chrome 😅

Facebook’s Reaction Popup — or whatever it called

If you are a Facebooker, chance you will use this popup every day.

In this blog post, we will learn how to implement it. In HTML/CSS and a bit of JavaScript.

Breaking down the animation

OK. Let’s break it down step by step, so we will see and understand the animation in detailed.

There are 2 phases of the animation: Show up phase and Mouse hover phase.

For the sake of simplicity, this is the simplified version of a feed, on your News Feed. The green rectangle is where the Like button stays, you hover your mouse over it and a yellow popup (in reality, it‘s white) show up.

Then, the emoticons ascend, one by one. The red arrows here tells us the animation direction of the emoticons.

If we look carefully into each emoticon, you will see it has the easing effect in its animation, like this:

When all emoticons finish its animation, phase 1 (Show up) finished.

Phase 2 (Mouse Hover) begins when the user hovers his mouse on an emoticon.

The selected emoticon will scale up a bit, and a black label appears on the top to tell us what is the name of this emoticon.

Not so complex, huh?

Raw implementation

Now, we start the implementation. In the beginning, we just implement the raw HTML structure, add some basic actions with CSS, no animation here in this part.

It’s recommended to use Codepen.io for prototyping, so we have the live preview, SCSS compiling on the go,…

But you can write code on your local machine, it’s up to you. All we need is: HTML, SCSS, and jQuery (or you can convert the jQuery code at the end of this post to vanilla JS or whatever you want)

Prototyping the news feed post

So we want to create a news feed item, and add a Like button to it.

HTML Code:

<div class="feed"> 
  <a class="like-btn"></a> 
</div>

CSS (SCSS):

html,
body {
    padding: 20px;
    font-family: sans-serif;
}
.feed {
    width: 500px;
    height: 473px;
    background-image: url(<path-to-placeholder-image>);
    position: relative;
    .like-btn {
        width: 44px;
        height: 25px;
        background: #D0D0D0;
        position: absolute;
        bottom: 13px;
        left: 13px;
        cursor: pointer;
        &:hover {
            background: #718C00;
        }
    }
}

You can copy the URL of the image below and replace to <path-to-placeholder-image>, or use the uploaded image on Imgur.

Copy this image URL as a placeholder image

Now you have your news feed prototype, try to hover over the Like button, see? It’s green! It’s cool now, isn’t it?

Display the reaction box

The next step is adding the reaction box. This will be a 312x55 pixels rectangle with rounded corners.

Reaction box will only show up when the user hovers on the Like button.

OK, let’s create a div, the class name is reaction-box, put it inside the Like button.

HTML Code:

<div class="feed"> 
  <a class="like-btn"> 
    <div class="reaction-box"></div> 
  </a> 
</div>

Our reaction box will be hidden, so we set its display attribute to none. And in Like button’s :hover event, we set it back to block.

CSS (SCSS):

.like-btn { 
  ... 

  .reaction-box { 
    position: absolute; 
    width: 312px; height: 55px; 
    background: #F0C674; 
    border-radius: 28px; 
    left: -25px; bottom: 25px; 
    display: none; 
  } 

  &:hover { 
    ... 

    .reaction-box { 
      display: block; 
    } 
  } 
}

This is the result:

Adding the emoticons

Now we have the reaction box displayed, let’s add some emoticons so it will look like the real Facebook 🤗

Because we’re just prototyping, so, just use the small circles to represent our emoticons.

This is the HTML structure for an emoticon:

<div class="reaction-icon"> 
  <label>Like</label> 
</div>

We also need a label inside, so we can show the user what’s the name of this emoticon.

Let’s add 6 reaction icons to represent the real Facebook’s reactions: Like, Love, Haha, Wow, Sad and Angry. Put them inside reaction box.

Then we use CSS transform to scale up these emoticons on mouse hover event.

HTML Code:

...
<div class="reaction-box">
    <div class="reaction-icon">
        <label>Like</label>
    </div>
    <div class="reaction-icon">
        <label>Love</label>
    </div>
    <div class="reaction-icon">
        <label>Haha</label>
    </div>
    <div class="reaction-icon">
        <label>Wow</label>
    </div>
    <div class="reaction-icon">
        <label>Sad</label>
    </div>
    <div class="reaction-icon">
        <label>Angry</label>
    </div>
</div> 
...

Insert this CSS inside reaction box:

CSS (SCSS):

.reaction-box {
  ...
  // insert here
  .reaction-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    background: #8959A8;
    border-radius: 20px;
    margin: 8px -1px 0 8px;
    text-align: center;

    label {
      padding: 3px 5px 3px 5px;
      position: relative;
      top: -24px;
      border-radius: 10px;
      font-size: 11px;
      color: #FFF;
      background: #333;
    }
  }
}

And insert this inside :hover event of the Like button.

&:hover {
  ... 

  .reaction-box {
    ... 

    .reaction-icon:hover {   // changed here!
      transform: scale(1.4);
      transform-origin: bottom;
    }
  }
}

We scale up the emoticon 1.4 times when the user hovers his mouse to Like button. We also set the transform-origin attribute to bottom, so the origin of the scale-up effect will be on the bottom edge of the emoticon.

And this is the result:

Did you see a bug?

You may notice that the reaction box is too close to the Like button, it should not. How about moving it up a bit?

Okay, since reaction box has an absolute position, let’s change its bottom attribute from 25px to 35px (10px upper)

.reaction-box { 
  ... 
  left: -25px; bottom: 35px; 
  ...

Looks better now, right? But wait! WT*?? It’s broken! I can’t hover my mouse to the reaction box anymore!! What did you do??? Why you break my code???

OK. Calm down. Let’s take a step back, and look at the code.

The reason is that the distance between reaction box and Like button now increased to 10px, so, when you tried to move the cursor to reaction box, it will go out of Like button’s hover region, so it triggers the mouse out event. If you look at the CSS rules, you can see we display the reaction box based on Like button's hover event. On mouse out, reaction box will be back to its original state (display: none)

The solution is: Increase the hover region of Like button, so it can fill the distance to reaction box.

There are many ways to do it, we will take the simplest way: Add the ::before pseudo-element to Like button, it will be a box with the size of 44x10, and it’s transparent, so user can’t see it but it will fill the distance to reaction box.

.like-btn { 
  ... 

  &::before { 
    content: "."; 
    opacity: 0; 
    display: block; 
    width: 44px; height: 10px; 
    position: absolute; 
    top: -10px; left: 0; 
  }

Now you can refresh the page. It should be fine now :)

Display emoticon’s label only on mouse hover

The next thing to do is to hide all emoticon’s labels and display them when user hover on each emoticon.

label { 
   ... 
   visibility: hidden; 
}

Then display them in :hover event of reaction icon (emoticon).

.reaction-icon:hover { 
   ... 
   label { 
      visibility: visible; 
   } 
}

This is the result:

Alright, let’s take a break here. It’s a long post and you need some rest, so do I =]]

You can revise the full code for this raw implementation phase here: Codepen — Facebook Reaction Animation — Part 1.

Adding Animation

Now, let’s the pain begin. In this part, we will implement some animations to give the better feeling for users.

Emoticon zooming animation

Let’s start with the simplest one. We will slowly zooming the emoticon by adding transition: all 0.3s; attribute to emoticons:

CSS (SCSS):

reaction-icon { 
   ... 
   // Animation 
   transition: all 0.3s;

By adding transition with all and 0.3s parameters, we tell the browser that all of the emoticon’s attributes can be animated (slowly changing) in the duration of 0.3 seconds.

So this is our first animation:

If you have no idea about transition, you may want to read this article Using CSS transitions — MDN.

Emoticon’s show up animation

Let’s take a look at the show-up animation again:

This animation can be represented in a graph:

As you see, the y-axis represents emoticon’s y position over time.

The function that represents the graph above is also the way we can control how the attributes change over time, they called: easing functions (or timing functions).

In CSS transition, we can set the timing functions for an element by using transition-timing-function attribute.

You should read more about timing function here Timing Function — MDN.

The timing function we gonna use here is easeOutBack, it’s a bezier that can be defined in CSS by using cubic-bezier() function.

We will use the predefined cubic-bezier() function for easeOutBack from here Easing Function — easeOutBack.

cubic-bezier(0.175, 0.885, 0.32, 1.275)

Add this function to reaction-icon’s transition attribute:

.reaction-icon { 
   ... 
   // Animation 
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

The emoticons will appear with the starting opacity is 0, scaling is 0 and the position is 100px away from the desired position — we call this is the first state.

.reaction-icon { 
   ... 
   // Animation 
   opacity: 0; 
   transform: translate(0, 100px) scale(0);

Now we add a new class to define the final state of its animation, let’s call it .show, and put it in the :hover event of Like button:

&:hover { 
   ... 
   .reaction-box { 
      ... 
      .reaction-icon { 
         &.show { 
            opacity: 1; 
            transform: translate(0, 0) scale(1); 
         }

So, what will happen here? When the user hovers on the Like button, we search for the emoticons and assign the class .show to activate the animation. We can do it with JavaScript (jQuery - lol, it's okay, you can use anything else):

$(function() {
    $(".like-btn").hover(function() {
        $(".reaction-icon").each(function(index, element) {
            setTimeout(function() {
                $(element).addClass("show");
            }, index * 100);
        });
    }, function() {
        $(".reaction-icon").removeClass("show")
    });
})

You may notice the setTimeout(), we use it to delay the addClass action on each emoticon, based on its index. From the first emoticon (index = 0) to the last one (index = 5), we have the particular delay time is 0, 100ms, 200ms, 300ms, 400ms and 500ms. So we have the chasing effect of emoticons show up.

Now refresh and see:

We’re done!

If you get lost somewhere in the middle of this post, don’t panic, let’s head to this page to see the source code: Codepen — Facebook Reaction Animation — Part 2.

What’s left to be done is reskin the elements to get more realistic result like this:

See higher resolution video here https://gfycat.com/ZigzagForthrightCob.

If you want more improvement, you may want to consider Amazon’s Magic Triangle (and its implementation here) to get more stable when moving your cursor.

Hope you like this post. If you spot any error or have any question, feel free to leave a comment so we can discuss.

See you in the next posts. Happy CSSing ^^

Turning off the syntax highlighter

Huy Tr. — Thu, 12 Oct 2017 19:08:57 +0000

Well... first of all, this is a well-known topic that widely discussed everywhere already.

So I started turning off my Vim's syntax color from May this year, it's 5 months already.

There some real benefits for it that I can confirmed now:'

Getting more focus on the work, that mean, more productivity
Read/understand the code better, and even faster
Vim run faster as well
~~Being way more cooler~~, my colleagues now look at me as a guy from Mars

Is there anyone doing the same thing?

P/S: This is the color scheme I'm using for my vim https://gist.github.com/huytd/8394f21bda3a08be025813c060d64e75

Coder's Life Comic 003: RegEx

Huy Tr. — Sun, 08 Oct 2017 20:04:50 +0000

The risk of overusing RegEx in your project ðŸ˜‚

Coder's Life Comic 002: Learning JavaScript

Huy Tr. — Sun, 08 Oct 2017 20:02:06 +0000

Being a JavaScript developer these days is tough...

Coder's Life Comic 001: Algorithm

Huy Tr. — Sun, 08 Oct 2017 19:59:49 +0000

Don't you think npm got everything we need?

Setup Travis CI for Rust Diesel project

Huy Tr. — Fri, 06 Oct 2017 22:43:06 +0000

Rust is supported on Travis CI, there are three main channels of Rust you can use: stable, beta and nightly. You can just follow their instruction to get your Rust project build smoothly.

But when it come to diesel.rs, it will be a bit tricky.

The reason is, in order to build a diesel-based project, you will need to have:

A database on your build machine
A .env file with a configuration to connect to that database
diesel-cli installed to run migration

So, it will require some more configuration.

Let's create a .travis.yml file in your project's root folder.

Step 1: Rust version

You can select any version of Rust in your Travis CI, put this to your config file:

language: rust
rust:
  - nightly
  // or
  - 1.22.0
  // or
  - stable

Step 2: PostgreSQL (or what ever database you use)

Next, we need to add PostgreSQL as an extra service:

services:
  - postgresql

If you're using a different database, just change it. For the complete list of supported database, please take a look at this document.

Step 3: Init your database and migration

Now we need to do a lot of things, create a databse, install diesel-cli, create a database and run migration, let create a before_script section:

before_script:
  - psql -c 'create database build_db;' -U postgres
  - echo "DATABASE_URL=postgres://postgres@localhost/build_db" > .env
  - cargo install diesel_cli --no-default-features --features=postgres
  - diesel migration run

Step 4: Build and Test

Finally, build and test your project with cargo:

script:
  - cargo build --verbose --all
  - cargo test --verbose --all

That's all you need!

If you are too lazy to follow the four steps, this is a gist for you.

P/S: It's worth to mention that due to a lot of cargo run, the build time is so freaking slow, with the above gist, my project took approximately 8 to 9 mins per build.

You might want to add some caching for cargo in your .travis.yml:

cache: cargo

See more about dependencies caching here.

Rust for the web

Huy Tr. — Mon, 02 Oct 2017 20:39:17 +0000

Original posted on my blog

"Can we create web apps in Rust?" - Many people asked. So am I.

My primary goal when I started learning Rust is to make a move from my ducky JavaScript tech stack (Node.js Express), that means, to make web apps in Rust.

And after a year, I learned something. So I write this post to tell you my journal into Rust Web Programming.

There are many approach to creating web apps in Rust, for example, compile Rust code to client-side JavaScript, writing a RESTful API, or building an isomorphic web app just like it's 2012. I'll go one by one.

Client-side JavaScript in Rust

The first thing that came to my mind is to have component-based architecture just like React. This mean, you need to find a way to run Rust code on the web browser.

Thanks to ASM.js and WebAssembly, this is possible, with a quick setup, you can compile your Rust code to ASM.js/WebAssembly in few minutes.

Now, for the component-based architecture, I just created some macros to wrap over the stdweb crate and rendering HTML elements via browser's DOM API.

https://github.com/huytd/rust-webapp-template/blob/master/src/main.rs#L13-L58

Don't be scared if you think I just posted an alien language. The component! macro is used to define a custom element. The mount_component! macro is used to append an element to the document, and html! macro is to create an element from HTML string.

Here is how I use it:

component!(AppComponent => {
    init: {
        let e: Element = html!("
        <div>
            <p>
                <span>Hello</span>
                <span>World</span>
            </p>
            <GreenButton />
        </div>
        ");

        let mut button = GreenButton::new();
        mount_component!(e, "GreenButton", button);

        e
    },
    render: |this: &Element| {
    }
});

component!(GreenButton => {
    init: {
        let button = document().create_element("button");
        button.add_event_listener(move |_: ClickEvent| {
            js! {
                alert("Yo! This is the Green Button!");
            }
        });
        button
    },
    render: |this: &Element| {
        this.set_text_content("This is a button");
    }
});

fn main() {
    stdweb::initialize();

    let mut app = AppComponent::new();
    mount_component!(document(), "#root", app);

    stdweb::event_loop();
}

Who need React anymore when you can even write an onClick event in your Rust code :D (just kidding).

You might want to take a look at the full project to see in details how to use stdweb with these macros.

RESTful API in Rust

If you don't want to give up your JavaScript frontend, this is the better approach: Just write an API server in Rust to make it work with your exist frontend.

There are a handful number of frameworks available for you to choose. Let's take a look at AreWeWebYet.

For people who prefer to have slimmer framework, tiny_http is the best choice.

For simplicty, you can use nickel.rs, it's one of the most lightweight framework in Rust that inspired by Node's Express.

For HTTP/2 support, solicit is the only choice you have right now.

Personally, I prefer to use Rocket as it is a very good framework that has many features, but still keep your code simple, with very elegant syntax. It also added built-in TLS support recently. The only minus point for this framework is it required to use nightly Rust version.

This is the simple route handler for a GET method in Rocket.

#[get("/posts", format = "application/json")]
fn get_posts(page: i64) -> Json<Value> {
    Json(json!({
        "result": []
    }))
}

I usually let Rocket serve the static files for me, just like what I did in Express:

#[get("/")]
fn index() -> io::Result<NamedFile> {
    NamedFile::open("www/index.html")
}

#[get("/<file..>", rank = 5)]
fn files(file: PathBuf) -> Option<NamedFile> {
    NamedFile::open(Path::new("www/").join(file)).ok()
}

So I can put all my frontend code inside www folder, and access it along my RESTful API. For example, a typical project struct will be:

â”œâ”€â”€ Cargo.toml
â”œâ”€â”€ README.md
â”œâ”€â”€ src
â”‚   â”œâ”€â”€ main.rs
â”‚Â Â  â””â”€â”€ ...Rust code here...
â””â”€â”€ www
    â”œâ”€â”€ index.html
    â”œâ”€â”€ main.js
    â”œâ”€â”€ package.json
    â”œâ”€â”€ webpack.config.js
    â””â”€â”€ ...JavaScript code here...

To work with database, it's a good idea to use Diesel.

If you want to see a Rocket + Diesel + React project in action, I will shamelessly plug one of my side project here and its source code on Github.

Please feel free take a look or use it if it good enough for you.

Isomorphic web app in Rust

The last one, my favorite one, like it's 2012, when I started my programming career with my first PHP job.

No more single page applications, no more client-side rendered UI. No more broken web pages when people disabled JavaScript on their browsers.

Rocket and many other frameworks has the ability to render the HTML templates after binding some data into it.

#[get("/")]
fn index() -> Template {
    let news = fetch_from(RSS_URL).ok().expect("Could not read RSS");
    Template::render("index", &news)
}

I recently built a Hacker News reader using Rocket + Handlebars templates, you can take a look at its source code here (hey, I know, it's a shameless PR again).

I hope the three approaches I listed here will be helpful if you're the one who asking: "Can Rust make webs?". Each one has pros and cons, and depends on your project, you can pick one of them or mixing them all together.

Please feel free to leave a comment on Hacker News or Reddit to share your thoughts.

Recursive type problem in Rust

Huy Tr. — Mon, 02 Oct 2017 20:36:48 +0000

Original posted on my blog

After spending much time reading about Rust, I decided to give it a
try.

It was a very simple implementation of Binary Tree Traversal algorithm.
Surprisingly, by doing it, I learned a lot of Rust’s basic concepts!

Rust tell us what’s wrong in our code

One of the first things that the smartass Rust compiler threw to my face was the lovely error message:

$ rustc binary_tree.rs -o binary_tree
error[E0072]: recursive type `Node` has infinite size
 --> binary_tree.rs:1:1
  |
  |
  = help: insert indirection (e.g., a `Box`, `Rc`, or `&`) at some point to make `Node` representable
error: aborting due to previous error

So yes, this is the code:

struct Node {
    value: i32,
    left: Option<Node>,
    right: Option<Node>
}

This code is a very obvious way to implement a binary tree node in other
programming languages like C/C++ or Java. However, Rust compiler just doesn’t agree with us. Also, this is the interesting part.

Take a closer look. The error message said that our Node struct is a
recursive type and it has infinite size. What does it mean?

In Rust, all values are allocated in stack by default. So the compiler needs to
know the size of each. The size of a struct is the sum of all its fields size.

For example, with this struct:

struct Point {
    x: i32,
    y: u8
}

So the size of Point struct is:

size_of::<Point>() == size_of::<i32>() + size_of::<u8>()

Back to our implementation, how do we calculate our Node’s size?

size_of::<i32>() + 2 * size_of::<Option>() + 2 * size_of::<Node>()

Let’s expand this equation:

Hey hey! Hey! Stop it! You can do this for all day long. There’s no way to stop the expanding process.

So, the size of Node would be infinite and become impossible for Rust
compiler to calculate.

And Rust also tell us how to fix it

Let’s take a look at the error message again. You can see the kindness of Rust when it tries to teach us how to repair the broken:

$ rustc binary_tree.rs -o binary_tree

error[E0072]: recursive type `Node` has infinite size
 --> binary_tree.rs:1:1
  |
1 | struct Node {
  | ^ recursive type has infinite size
  |

error: aborting due to previous error

If we follow the hint and add Box to our implementation, the problem will be solved:

struct Node {
    value: i32,
    left: Option<Box<Node>>,
    right: Option<Box<Node>>
}

However, what is Box? How does it solve our recursive reference problem?

Box is a **pointer **that pointed to a heap allocated memory space.

So when we declare a reference to Node using Box, the size of this reference is the size of a pointer, not the size of the Node type, and it is defined, so Rust compiler now aware how much memory needed to allocate for a Node. And the recursive type problem now solved!

I hope you enjoy the post and now understand the problem of recursive type, how to fix it.

Please feel free to leave a comment if you want to discuss or subscribe to my blog to keep updated about my next posts in Rust (and other technical stuff, of course).