Just want to see the code? Jump straight into the template repository and follow the instructions.

Introducing the ReasonReact Starter

github.com/cironunes/reasonreact-starter

Why should you use my template repository instead of the official bsb themes?

The official ReasonReact template comes with a lot of unnecessary things I always delete and it doesn’t have much set up in terms of testing and building for production. So I decided to create an opinionated template that does that all for me.

  • Less steps to get started (clone the repo, install the dependencies and go)
  • Faster build (Parcel FTW)
  • Only one index.html file
  • Not official
  • Less intuitive (you have to go to my GitHub profile to find it)

Getting Started

  1. Clone the repository from GitHub…


This is not a technical post as I usually write, but rather something funny that happened to me and I wanted to share with you:

I have been to Romania and got my card stuck in the ATM machine. A simple UX improvement could have prevented that!

Last year I presented at the GDG DevFest Romania and took the opportunity to take some time to rest over there.

The conference was awesome: great venue and speakers, beautiful city and what really took my attention, really warm and welcoming people! …


Embracing Observables and Immutability FTW

The HttpClientTestingModule makes it easier to mock requests using the HttpTestingController service. In this post we’ll learn how to setup our tests and see real examples of how it can be used.

Series

This post is part of the HttpClient API series:

  1. The new Angular HttpClient API
  2. Testing with the Angular HttpClientTesting API

Demo

We will create a simple GitHub API service that can get users and make searches. More precisely we will:

  • Create the GithubApiService and write tests for it.
  • Consume the service created in our GithubComponent to list users and make searches and write tests for it. …


Giving us back the control

Control room where all the HTTP requests are handled :)


do desenvolvimento Front-end

Essa história foi escrita durante a preparação da palestra “Angular 2 e o futuro do desenvolvimento Front-end”. Nela eu explico porque a nova versão do Angular está sendo criada.

Angular 1

O AngularJS simplificou o Front-end extendendo o HTML para criação de aplicações dinâmicas, o que torna o processo de desenvolvimento extremamente rápido.

Features como a separação de preocupações (estrutura MVC/MVWhatever), dependency injection, data-binding, rotas, animações e muitas outras que facilitaram a testar o código e desenvolver aplicações profissionais em um curto espaço de tempo.

Além disso, o Angular se tornou um ecossistema composto por várias ferramentas. …


Frequentemente em conferências, listas de discussão e no Twitter, escuto algumas afirmações sobre o AngularJS que não fazem o menor sentido. Resolvi escrever este post para esclarecer alguns destes mitos.

Disclaimer 1: As opiniões deste post são baseadas em minha experiência trabalhando com o framework e envolvimento com a sua incrível comunidade.

Disclaimer 2: EU NÃO SOU O DONO DA VERDADE! Caso não concorde com quaisquer um dos esclarecimentos aqui feitos, deixe o seu comentário e terei o maior prazer em reavaliar os meus argumentos.

#1: “A Google não dá tanta importância para o projeto”

Mais de 1600 aplicações internas…


A11y made easy with angular-aria

The ARIA attributes are designed to improve the accessibility of Rich Internet Applications. A more know example is the tabindex:

<form ng-submit="signUp()">
<input type="text" ng-model="name" tabindex="1">
<input type="text" ng-model="email" tabindex="2">
<button tabindex="3">Sign up</button>
</form>

The tabindex attributes in the HTML elements, guide the user through the different controls of the form, making it accessible and also fun to interact with ☺.

Introducing the ngAria

In the 1.3.0-rc3 the angular-aria module was added to the project as a separate module. The ngAria makes a11y easy, adding ARIA attributes automatically to the elements.

Currently, the following ARIA attributes are implemented:

  • aria-hidden
  • aria-checked
  • aria-disabled
  • aria-required
  • aria-invalid


Quick tips to avoid issues with custom directive names

AngularJS directives allow us to use our own vocabulary to create semantic HTML components. To take advantage of that we should be aware of how it works to avoid some annoying and hard to find issues.

Differences between defining and using

Before start digging into the best practices, let's understand the fundamentals. Let's see how to define and then, how to use an directive.

To define a new custom directives all we need to do is use the directive method which expects two parameters: a name and a constructor function.

angular.module('myDirectives', []). directive('myAwesomeDirective', function() { return…


Diretivas nos permitem estender o HTML e criar nossos próprios elementos. Podemos definir como esses elementos vão se comportar em cada caso usando atributos, bem parecido com os Custom Elements. Neste post vamos entender o que é isolate scope e como ele funciona.

Scope

No objeto de definição de uma diretiva, temos a propriedade scope que pode se comportar de três formas de acordo com o seu valor:

Por padrão as diretivas não criam um escopo, ou seja, ela utiliza exatamente o mesmo escopo de onde ela for inserida, podendo modificar seus valores.

Quando definido como true é definido um novo


You could use decorators to enhance any kind of AngularJS module. Unit testing a decorator is all about testing the kind of service that you’re dealing with and making sure that the expected behaviour is what actually happens. So, if you’re decorating a service you’ll write tests for services, if you’re decorating directives you’ll write tests for directives (make sense, huh?).

In this article we will see how to decorate an Angular core directive and unit test it.

Let’s suppose that we want to augment the $rootScope service to log the number of times that the $apply method were called.

Ciro Nunes

👨‍👩‍👧, 🇧🇷, 🇦🇺, ⚽️, web development, js, functional programming, haskell, ocaml, reasonml, rust, entrepreneurship, martial arts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store