Category Archives: General

React: How To – a guide by example

github.com/brunolm/react-how-to is a repository that shows how to do things by example.

Each Pull Request on this repository is a complete guide on how to do something, for example if you want to add redux to your project you can just check this Pull Request and see some instructions and all changes required.

If you want to setup tests check this Pull Request.

Better than just reading some instructions you get a full example and a working project as a guide.

guide

Enjoy!

Advertisements

How I solved Bomberman challenge on HackerRank

I found a challenge called “The Bomberman Game” on HackerRank and I found it pretty interesting.

It boils down to something like this:

The Bomberman Game

Rules

  • Bombs will explode in 3 seconds
  • When a bomb explodes it clears its tile and 1 tile up, down, left, right
  • Bombs that are about to go off explode at the same time
  • There are no chain reactions
  • If a bomb explodes next to another that is not about to go off then the nearby bomb is just cleared

Iteration

  1. Bomberman plants some bombs (you’re given an input with the map)
  2. A second passes
  3. A second passes. Bomberman plants bombs on all empty slots
  4. A second passes
  5. Repeat 3 and 4 until N seconds passes

Input

  • R = number of rows
  • C = number of cols
  • S = number of seconds
  • O = bomb
  • . = empty
R C S
O..
...

Task

Return the map after N seconds have passed.


Solving

The first thing I though was to solve it with a generator (well, there was no real need to use it, but since it is about a game I thought it would be fun to be able to access any state of the game).

Continue reading

Workflowy: A tool for storing your brain

TL;DR; Workflowy is a (free) website where you can take notes and doesn’t matter how big it gets it is still easy to manage. Check it out https://workflowy.com/invite/35df8d82.lnx

Workflowy is a (free) website where you can take notes on lists. It is being really useful for me (and every co-worker) because we can take notes of steps we take to do something then when we need to use it again we can just look at my notes instead of having to figure it all out again.

We can also take notes of commands we run so if we need something crazy again we don’t have to figure it out, it’s already there.

If you want to try it out you can register with this link https://workflowy.com/invite/35df8d82.lnx

Continue reading

Power NVM – A Node Version Manager for Windows

nvm is a popular tool that runs on bash to manager node versions. power-nvm is a version I created for Windows, to install:

Install-Module -Name power-nvm

It has the following commands (for now):

nvm default <Version>   # set version as default
nvm install <Version>   # install version
nvm ls [Filter]         # list installed versions
nvm ls-remote [Filter]  # list released versions
nvm setdir <Path>       # set NODE main dir
nvm use <Version>       # use NODE version

Continue reading

Blazor: Running C# in Frontend (cross-browser)

Blazor is a framework that allows you to code C# for frontend. Github page.

An experimental web UI framework using C#/Razor and HTML, running client-side via WebAssembly

The arrival of WebAssembly creates the possibility of building client-side web applications using languages and runtimes that are more typically used for native app development. Blazor runs .NET code in the browser via a small, portable .NET runtime called DotNetAnywhere (DNA) compiled to WebAssembly.

The programming model will be familiar to anyone who’s worked with Razor (the C#/HTML page format used by ASP.NET MVC and ASP.NET Pages).

Blazor makes your app compact and much faster since it is compiled into code the browser doesn’t have to parse.

It can run on older browsers (ex IE11) because it has polyfills.

The only note here is that it is very early. I mean, it is so early it can’t even be called alpha or anything. It is just an experiment at the moment. (Post written at 2017-08-12)

Continue reading

How it works: Angular Routes

Angular routes allows you to setup how your components are going to show up in the page.

Routes can be guarded (like require a login to access) and they can be nested (you can have components render components in a specific route).

Routes can also be setup as lazy, they will only load the component when needed. And you can delegate the loading to sub modules.

“Full” setup

You can check a “full” setup in this plnkr example – setting up Angular routes with lazy load and child routes.

The basics

export const routes: Routes = [
  // if it hits root then go to fooroute
  { path: '', redirectTo: 'fooroute', pathMatch: 'full' },

  // if it hits this route then render FooComponent
  { path: 'fooroute', component: FooComponent },

  // if no routes were found falls into this one that renders Notfound
  { path: '**', component: NotfoundComponent },
];

Route with parameters

You can use :name to declare parameters in your route.

{ path: 'heroes/:id', component: HeroesComponent },

To create links passing parameters you can pass an array with the route and all parameters, like this:

<a [routerLink]="['heroes', 1]">Saitama</a>

To access the parameters you need private route: ActivatedRoute on your constructor to get route information, and you need to implement OnInit and OnDestroy.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({...})
export class HeroesComponent implements OnInit, OnDestroy {
  id: any;
  sub: any;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.sub = this.route.params.subscribe((params) => {
      this.id = +params['id'];
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Route with guard

A guard is a class that implements CanActivate or CanActivateChild. In a single route (as the examples above) you might want to use CanActivate, but when you have child routes you might want to use CanActivateChild (for example in /admin routes protecting everything inside it).

Both interfaces are do the samething, they have a method that returns true or false and can redirect you to another page (ex: login page).

An example that could be used to protect an admin area, only allow access if the user is logged in.

import { CanActivateChild, Router } from '@angular/router';

import { Injectable } from '@angular/core';

@Injectable()
export class AuthGuard implements CanActivateChild {
  constructor(private router: Router) { }

  canActivateChild() {
    if (localStorage.getItem('user')) {
      return true;
    }

    this.router.navigate(['/login']);
    return false;
  }
}

Route with lazy and children

import { RouterModule, Routes } from '@angular/router';

import { AuthGuard } from 'src/auth.guard'; // see previous example
import { ModuleWithProviders } from '@angular/core';

import { InternalComponent } from 'src/layouts/internal.component';
import { PublicComponent } from 'src/layouts/public.component';

export const routes: Routes = [
  { path: '', redirectTo: 'heroes', pathMatch: 'full' },

  {
    path: '',
    canActivateChild: [AuthGuard], // protects all heroes routes
    component: InternalComponent,
    children: [
      { path: 'heroes', loadChildren: 'src/heroes/heroes.module#HeroesModule' },
    ],
  },

  {
    path: '',
    component: PublicComponent,
    children: [
      { path: 'login', loadChildren: 'src/login/login.module#LoginModule' },
      // { path: 'error', loadChildren: 'src/error/error.module#ErrorModule' },
    ],
  },

  // { path: '**', redirectTo: 'error' },
];

export const router: ModuleWithProviders = RouterModule.forRoot(routes);

Module setup

In app.module

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],

In sub modules (if lazy loading)

@NgModule({
  imports: [ RouterModule.forChild(routes) ],

If I’m missing a piece of configuration here, then check the plnkr example – setting up Angular routes with lazy load and child routes which is working and you can complete the error route for practice. 🙂

How it works: Angular Tests

Angular tests are always in the same place as the code. When you create a component, service, pipe, directive with ng generate it will always also generate a .spec.ts file.

Every file with the extension .spec.ts is a test file that is caught by the testing tool. Each thing is tested in a different way. For a really long documentation on tests check the official documentation here.

Continue reading