DEV Community: Aline Ebone

React Basics

Aline Ebone — Tue, 07 Feb 2023 03:51:29 +0000

React is a Javascript library used to build interfaces.
It was built on Facebook and it’s largely used by companies like Apple, Airbnb, Microsoft, Payal, etc.

React Developer Tools

Before starting, it’s recommendable to install the React Developer Tools. It can be found here.
The extension is already enabled for regular web sites, but it’s important to make it available for file URLs, in case you create an HTML page and simply open it in the browser. To do it, open the url chrome://extensions/ in the browser, find the React Developer Tools extension and click on Details, and enable the item Allow access to file URLs.

Creating elements

To start using React, we can just create a simple HTML page and add the following scripts:

<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>

Now, before the end of the body tag, open a script and add the React code:

    ReactDOM.render(
      React.createElement("p", null, "Hello World"),
      document.getElementById("root")
    );

ReactDOM.render will render the following code in the DOM. The first parameter is the .createElement and the second is where we are going to load the content, in this case in the <div id="root">.
The .createElement function will create the React element, the first parameter is this element is the element we want to create, the second is any attribute we want to pass, like style. The third one is the children.

The final result:

    <!DOCTYPE html>
    <html>
    <head>
      <title>React</title>
      <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
    </head>
    <body>
    <div id="root"></div>
    <script>
         ReactDOM.render(
          React.createElement("p", null, "Hello World"),
          document.getElementById("root")
        );
      </script>
    </body>
    </html>

We can also render multiple elements adding another .createElement as children:

    ReactDOM.render(
      React.createElement(
        "p", 
        null, 
        React.createElement(
          "li", 
          { style: { color: "red" }},
          "list item"
        )
      ),
      document.getElementById("root")
    );

This approach, of course, is not viable in a real-life project. We would have to nest a lot of .createElemet to make a real page. That's where the JSX enters.

But to JSX code run properly, we need to add another script: the Babel library. Babel makes the browser understand JSX:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> We also need to add type="text/babel" in the script.

Now we don’t need the .createElement anymore. We can just add the JSX/html as the first parameter of the .render method:

    <script type="text/babel">
      ReactDOM.render(
        <p>Hi</p>,
        document.getElementById("root")
      );
    </script>

JSX is similar, but it's not equal to html. We can add Javascript code inside JSX using curly braces ({}):

    <script type="text/babel">
      var city = "Lisbon"

      ReactDOM.render(
        <p>Hi {city}</p>,
        document.getElementById("root")
      );
    </script>

To add a css class in a tag, we add the className attribute. Because class is a reserved word in javascript. Ie: <p className="title">.

React components

A component is a piece of independent UI that can be reused in an application.
Components can be created using functions or classes. An example function component is:

      const Greeting = () =>
      <div>
        <h1>Hello, stranger!</h1>
      </div>

Note that a div is wrapping the h1.
It's required to wrap the content in a father element.

Another important thing is that we can embrace the function component with parenthesis () or curly braces {}.
But if we use curly braces, we need to add the return key. Ie:

    const Greeting = () => {
      return <div>
        <h1>Hello, stranger!</h1>
      </div>
    };

We add _ _in the code to call this component.

Also, React requires the component starts it name with an uppercase letter.

To use properties along with components, we use the props keyword. This allows us to create dynamic content.
To pass a prop, we add in the component call the prop key and the value. Ie. <Greeting name="Stranger"/>.
To retrieve it, we have to add the props key as the function parameter and to use it, add props.key inside the jsx using curly braces {}. The result is:

    const Greeting = (props) => 
          <div>
            <h1>Hello, {props.name}!</h1>
          </div>

      ReactDOM.render(
        <Greeting name="Stranger"/>,
        document.getElementById("root")
     );

For brevity, we can replace the props keyword with curly braces {} and call directly the property key.

     const Greeting = ({name}) => 
      <div>
        <h1>Hello, {name}!</h1>
      </div>

To start to make it real, we can define a root component called App, and play composing components:

    const App = () =>
        <div>
          <Greeting name="Stranger"/>
          <Greeting name="Aline"/>
          <Greeting name="Alien"/>
        </div>

    const Greeting = ({name}) =>
          <div>
            <h1>Welcome, {name}!</h1>
          </div>

    ReactDOM.render(
          <App/>,
          document.getElementById("root")
        );

A component class will work in the same way, but we don’t need to pass the props parameter, the props object is already there, the only thing we need to do is to call this.props.key.
We also need to extends React.Component, use the render() function to render the jsx, and always use the return key.
To refactor the Greeting component to be a class component we do:

    class Greeting extends React.Component {
      render() {
        return <div>
          <h1>Welcome, {this.props.name}!</h1>
        </div>
      }
    }

States

State is an important part of React, it’s where the magic happens.
The state is an object containing data. Every time we change a state, the page will reload and the content will update.

To create it, we use the state keyword: state = {city: "Lisbon"}. To change it, we have to di it with the setState function: this.setState({city: "Lisbon"}). Finally, to call it, we use this.state.city.
We can use it this way only in class components.

Events and Enhanced Rendering

Events are an important part of React development. One important event is the onClick. Here's how to use it in a button element: <button onClick={logIn}>Log in</buton>, now the logIn function we are passing:

    logIn = () => {
      this.setState({ loggedIn: true })
    }

We can also conditionally render components:

    {this.state.loggedIn ? <OneComponent> : <AnotherComponent>}

To render an array, we can use the map function:

    const names = ["Stranger", "Aline", "Alien"];

    names.map( name =>
      <p>name</p>
    )

When rendering a map or any other type of list, we need to add a key. To do it, we can pass the second parameter in the map function, which is an index: names.map((name, index) =><p key={index}>name</p>).
We can do it with an array of objects, if a name object has an id, we can call it in the map using name.id.

Tooling

Create React App is a tool that will generate and set a React project for us. We have to install npm and node before using it. Then, we type npx create-react-app name-of-my-app in the terminal.

Inside the package.json we can see all the dependencies that Create React App installed for us, including react, react-dom, and react-scripts (which includes babel and webpack).
All the components live inside the src folder.

npm run build will create a fast build to put on prod if we want to. To check in the browser, install the serve library npm install serve, then serve -s build, this will be the optimized production version.

Building a React ecosystem from scratch

Aline Ebone — Tue, 07 Feb 2023 03:21:06 +0000

What do we need?

An entry point
Support ES6 and JSX
Building and serving with Webpack
React-hot-loader

An entry point

Create a folder to hold the project
Go to this folder and run npm init -y to initialize a new npm package
Create a public folder to hold our static code
Create a src folder to hold our React code
Create an index.html file inside the public folder. This is what is sent to the client when a request to our website is made by the user.
Create a div with id="root" in the index.html. This div will receive the React content.
Add a script tag to load the React code: <script src="../dist/bundle.js"></script> (it doesn't exist yet)

Support ES6 and JSX

Install Babel compiler npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
Create a .babelrc file in the root of the project to tell Babel which presets and plugins should be used to transpile the code
Insert a json object inside this file with preset-env (transform ES6 in VanillaJS) and preset-react (understands JSX): {"presets": ["@babel/preset-env", "@babel/preset-react"]}

Building and serving with Webpack

Install react and react-dom to be able to run a React project: npm i react react-dom
Create the index.js and App.js files inside the src folder to start coding the application

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App/>, document.getElementById("root"));

App.js

import React from "react";

const App = () => <div>Hello</div>;

export default App;

Install webpack to build and serve the project npm i --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
Create a webpack.config.js file in the root directory and add:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'public/'),
    port: 3000,
    publicPath: 'http://localhost:3000/dist/',
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

Run the server npx webpack-dev-server --mode development. It will run in the port 3000.
To make it easier, add the following script in the package.json file: "dev": "npx webpack-dev-server --mode development"

React-hot-loader

Enable auto-reload installing react-hot-loader npm i --save-dev react-hot-loader
Add import {hot} from "react-hot-loader" and export default hot(module)(App) in the App.js file

Project Link: Github

Kotlin Basics: Data Types

Aline Ebone — Tue, 07 Feb 2023 02:57:06 +0000

Mutable and immutable variables

Before proceeding, it’s important to know that Kotlin has two kinds of attributes:

var - it's mutable (variable)
val - it's immutable (constant)

Why is val preferred?

Legible: as the value doesn’t change, the developer doesn’t need to look for that variable in other places. It’s easier to understand, less complex.
Testable: it’s easier to test because it minimizes state changing.
Thread-safe: it doesn’t allow to be changed in another thread

Now, let’s move on :)

Data Types

When declaring variables, it’s not required to pass the type. Kotlin infers it from the value.
All the data types are objects, some of the types like numbers, characters and booleans can be represented as primitive values at runtime. But to the user, they look like ordinary classes.

More info on data types can be founded here.

And the code for these notes can be founded on my Github

Numbers

Integers

If we don’t specify the number type Kotlin infers that it’s an Int, unless the value exceeds the maximum allowed. In this case, it infers that it's a Long.
To explicitly create a Long attribute, just add an 'L' at the end (ie.: val longNumber = 1234L).

It’s possible to use underscores to make numbers more readable: val oneMillion = 1_000_000

Here’s a table with the number types and their range:

Floating points

We can use Float and Double types for floating types.
In general, we use Double because it's more precise.

Double is the default type for floating points, so Kotlin will infer that it is a Double if we don't specify the type. To specify it, we just have to add an 'F' at the end of the number (IE.: var n: Float = 77.9F).

A Float can hold 6-7 decimal digits while Double can hold 15-16 digits. So, if a Float number has more than 7 digits, the number will be rounded. (ie.: 2.7182818284f will be 2.7182817).

Conversion

To convert a number we can use the following functions:

toByte()
toShort()
toInt()
toLong()
toFloat()
toDouble()
toChar()

Note: Kotlin does not convert numbers in function parameters. Therefore, a function with a Double parameter can be called only on Double values.

Boolean

A Boolean type can be only true or false. The operations are:

Disjunction — OR ( || )
Conjunction — AND ( && )
Negation ( ! ) - denies the current result: true equals !false

Characters

A Char cannot be treated directly as a number. As it happens in the String type, special characters can be escaped using a backslash (\).
To create a Char, you need to use single quotes ('a'), if you use double quotes ("a") it will be a String.
The supported types are character, ASCII (numerical representation of a character - the supported ones are \t, \b, \n, \r, \', \", \\ and \$), and Unicode (provides unique code number for every character):

Strings

Strings represent words or any other group of characters.
We can use templates (${} or just $) to interpolate variables and strings. Ie: val greeting = "Welcome $userName".

The backslash (\) skips special characters as it is in the Char type. If you want to display a dollar sign, it's necessary to use it as \$.

Some string methods:

.length: show the size of the string
.subSequence(1, 3): show the characters between specific index positions

A raw string is delimited by a triple quote (""") and can contain new lines and any other special characters, without escaping:

    val rawString = """
        | I can have special characters $&%#
        | New lines


        | And so on...
    """

Kotlin’s strings are immutable. It never changes the memory allocated to a String, it always creates a new one. To begin it's fine to use String only. But if you have to make a lot of changes in a string, consider looking into the StringBuilder class.

[Clean Code] Comentários

Aline Ebone — Sun, 05 Feb 2023 03:37:39 +0000

[Clean Code] Comentários

Notas de estudo do livro Clean Code de Robert C. Martin.
Capítulo 4 — Comentários

Neste capítulo, Uncle Bob fala como usar comentários da forma correta.

Comentários são um mal necessário, se nossas linguagens de programação fossem expressivas o suficiente ou se tivéssemos o dom de nos expressarmos corretamente com ela, não precisaríamos de comentários.
Quando se encontrar em uma situação que sentir a necessidade de criar um comentário, avalie se não tem como se expressar através do código em si.
Comentários podem gerar uma grande confusão, já que códigos mudam e evoluem. São movidos de um lado para o outro, se bifurcam, se reproduzem, se unem novamente… e os comentários nem sempre acompanham essas mudanças.

Comentários compensam um código ruim

Não gaste tempo criando comentários para explicar o código, gaste tempo melhorando o código.
Explique-se no código.
Em muitos casos, explicar-se no código é apenas nomear a função com o que você escreveria no comentário.

Exemplo:

// verifica se o funcionário tem direito a todos os benefícios if ((employee.flags && HOURLY_FLAG) && (employee.age > 65))

Pode ser substitído por:

if (employee.isEligleForFullBenefits())

Comentários bons

Comentários legais

Por questões legais as vezes precisamos adicionar comentários. Por exemplo, quando adicionamos informações sobre direitos autorais e autoria no início de um arquivo.

Comentários informativos

Um exemplo de comentário informativo é explicar o que um código Regex faz, já que é bem difícil de entendê-lo dependendo da sua complexidade.
Mas ainda assim o ideal seria criar uma classe com o propósito deste código, que pode ser por exemplo, converter formatos de datas e horas.

Alerta sobre consequências

As vezes é útil alertar outros programadores sobre certas consequências como tempo de execução, ou avisar que alguma thread não é segura.

Comentários TODO

Comentários TODOS devem ser evitados, mas se for necessário deixar um código incompleto, ou que deve ser melhorado posteriormente por algum motivo muito especial (evite ao máximo deixar para depois!), comentários TODO são cabíveis.

Javadocs e APIS públicas

Se estiver escrevendo uma API pública, uma boa documentação deve ser feita, mas apenas se for uma API pública! Não faça isso para qualquer projeto.

Comentários ruins

A maioria dos comentários são ruins! Aqui vão alguns exemplos:

Murmúrios, comentários que são esquecidos e deixados para trás.
Comentários redundantes, que explicam o que o código já está explicando.
Comentários enganadores, que dizem que um método retorna algo, mas esse algo só é retornado se uma condição ser verdadeira. Portando o programador pode chamar esse método esperando um retorno que pode nunca chegar.
Comentários longos que parecem diários, é muito difícil manter esse comentário atualizado caso o código mude, sem falar que ele toma a atenção que deveria estar no código e pode confundir o programador.
Comentários ruidosos que não trazem nenhuma informação nova ou relevante. Evite o comentário se é possível gerar uma função com um nome explicativo.
Comentários com marcadores de posição como // Header, // Ações, etc. Defina isso em tags id por exemplo, se for HTML, ou em nomes de classes, funções ou arquivos. Crie uma boa estrutura de projeto.
Comentários ao lado de chaves de fechamento, indicando que é o final de uma função. Se sentir a necessidade de adicionar esse comentário, é provavelmente porque a função está muito grande, tente diminuí-la.
Crédito e autoria, a não ser que seja requisitado.
Código comentado, isso gera acúmulo de lixo na codebase além de deixar outros programadores inseguros para excluí-lo.

Conclusão

Houve um tempo em que era uma boa prática encher o código de comentários, mas hoje isso é vista como bagunça. Invista o seu tempo em criar um código legível.

[Clean Code] Funções

Aline Ebone — Sun, 05 Feb 2023 03:32:14 +0000

[Clean Code] Funções

Notas de estudo do livro Clean Code de Robert C. Martin.
Capítulo 3 — Funções

Neste capítulo, Uncle Bob nos ensina como uma boa função deve ser estruturada.

Pequenas

A primeira regra é que as funções (métodos) devem ser pequenas e fazer apenas uma coisa, nunca ultrapasse as 20 linhas. No cenário ideal, cada função tem 2, 3 ou 4 linhas e possui uma obviedade transparente. Cada uma conta uma história e leva você a próxima em uma ordem atraente. Blocos dentro de instruções if, else, etc. devem conter apenas uma linha, de preferencia uma chamada de função, pois essa função pode receber um nome descritivo.

Um nível de abstração por função

O código deve ser lido de cima pra baixo como uma narrativa, cada função deve ser seguida por outra, no proximo nível de abstração. Ou seja, queremos ler o programa como se fosse uma serie de parágrafos, descrevendo o nível atual de abstração e fazendo referencia ao proximo nível.

Instruções switch

Devemos evitar, pois é quase impossível criar uma instrução switch pequena. Se não pudermos evitar, vamos garantir que cada switch esta em uma classe de baixo nível e nunca é repetido, para garantir isso podemos usar polimorfismo.`

Use nomes descritivos

Para usar nomes descritivos, é importante seguir a regra de ter métodos pequenos e que só ficam uma coisa, assim fica fácil nomear o método. Não tem problema se o nome for grande, um nome grande e descritivo é melhor que um comentário longo e descritivo. Seja consistente nos nomes, use os mesmos verbis, frases e substantivos nos nomes das funções, isso vai manter um padrão r vai facilitar a leitura e manutenção do código.

Parâmetros de funções

A quantidade ideal de parâmetros de uma função é 0, depois 1 e depois 2. Deve-se evitar um método com 3 parâmetros. Se tiver mais que 3, deve-se ter um motivo muito especial para usa-lo. É melhor instanciar um objeto do que passa-lo por parâmetro. Pois assim fica mais fácil de entender o que esta acontecendo. Os parâmetros são mais difíceis ainda do ponto de vista de testes, deve-se escrever muitos casos de teste para se certificar que todas as combinações dos parâmetros estão cobertas. Parâmetros booleanos devem ser evitados sempre, se a função possui um parâmetros booleano, significa que existem duas possibilitas, ou seja, ela está fazendo mais de uma coisa.

Passar um objeto para reduzir o numero de paramentos é uma coisa boa. Se passamos muitas variáveis por parâmetros, temos que prestar atenção se não estamos passando parte de um conceito que mereça uma classe.

A regra para a criação de bons nomes de funções e parâmetros é utilizar um verbo e um substantivo para os parâmetros, por exemplo writeField(name).

Evite efeitos colaterais

Ou seja, evite funções que prometem fazer uma coisa mas acabam fazendo muito mais, como modificar variáveis da própria classe. Se uma função se chama checkPassword(), não faça ela iniciar uma sessão ou qualquer outra coisa após saber o resultado, apenas retorne o valor booleano.

Separação comando-consulta

As funções devem fazer ou responder algo, ou seja, ou ela altera o estado de um objeto (set) ou retorna a informação dele (get). Fazer os dois viola a regra de responsabilidade única de uma função.

Prefira exceções a retorno de códigos de erro

Utilize exceções e não logs para avisar de um erro e separe um bloco try/catch em sua própria função, isso mantem separado o processamento normal do código e o tratamento do erro. Uma função que trata erro, não deve fazer mais nada.

Evite repetição

A duplicação pode ser a raiz de todo o mal no software. A duplicação amontoa e bagunça o código. Se existem trechos de código fazendo a mesma coisa, é um sinal que a estrutura do programa pode estar com problemas. Avalie como a orientação a objetos pode ser usada para resolver o problema.

Criar um software é como qualquer outro tipo de escrita. Ao escrever um artigo, você primeiro coloca seus pensamentos no papel e depois os organiza de modo que fiquem fáceis de ler. O primeiro rascunho pode ficar desastroso e desorganizado, então você, reestrutura e refina até que ele fique como voce deseja.

[Clean Code] Nomes significativos

Aline Ebone — Sun, 05 Feb 2023 03:30:08 +0000

[Clean Code] Nomes significativos

Notas de estudo do livro Clean Code de Robert C. Martin.
Capítulo 2 — Nomes significativos

Uma das coisas que mais fazemos quando programamos é nomear. Nomeamos classes, funções, variáveis, entre outra coisas. Já que fazemos muito isso, é importante que façamos bem.

Use nomes que revelem seu propósito

Escolher bons nomes leva tempo, mas economiza mais. Portanto, cuide de seus nomes e troque-os quando encontrar melhores. O nome de uma variável, função ou classe deve lhe dizer porque existe, como faz e como é usado. Se um nome requer comentário, ele não revela seu propósito.

Exemplos de nomes ruins: a, list, n1, getThem().
Exemplos de nomes bons: age, names, month, getAges().

Evite informações erradas

Devemos evitar palavras cujos significados podem se desviar daqueles que desejamos. Por exemplo, nunca utilize a variável accountList a menos que essa variável seja uma List (palavra específica de muitas linguagens de programação) de verdade. Se não for o caso, utilize outros nomes como accountGroup ou apenas accounts.

Faça distinções significativas

Suponhamos que temos os métodos getActiveAccount() e getActiveAccountInfo(), como saber qual chamar? Também não há como distinguir moneyAccount de money ou customerInfo de customer. Faça distinções de uma forma que o leitor compreenda as diferenças. Se começamos a nomear as coisas de forma parecida, temos que reavaliar se o design do código está da forma que deveria ser.

Use nomes pronunciáveis

Uma das coisas que fazemos como desenvolvedores, é discutir com outros o nosso código. Precisamos usar nomes pronunciáveis para fazer isso de uma forma melhor. Isso importa porque a programação dentro do ambiente de mercado, querendo ou não, é uma atividade social.

Use nomes passíveis de busca

Nomes que possuem apenas uma letra ou números são difíceis de buscar em um código longo. Uma busca pela variável a por exemplo, em qualquer IDE, retornaria milhares de resultados dependendo do tamanho do código.

Evite codificações e prefixos de variáveis membro

Nomes codificados raramente são pronunciáveis, além de ser fácil escrevê-los incorretamente. Exemplos de nomes ruins: m_dsc, IShapeFactory e phoneString.
IShapeFactory é um exemplo muito seguido hoje em dia para interfaces, mas não tem porque enfeitar o nome, o que interessa é que ela é uma ShapeFactory, não precisa incluir o I. Para a implementação, posso usar o nome ShapeFactoryImp.

Evite o mapeamento mental

Certamente um contador de iterações pode ser chamado de i, j ou k, pois isso já se tornou uma convenção, desde que seu escopo seja pequeno e não houver outros nomes que possam entrar em conflito. Mas no geral, um nome de uma letra só é uma escolha ruim. Dificilmente você vai lembrar que um r minúsculo é uma versão da url sem o host, muito menos outro programador que está mantendo o seu código.

Nomes de classes

Classes e objetos devem ter nomes com substantivo, como Customer, Account e AddressParser. Não use verbos.

Nomes de métodos

Os nomes de métodos devem ter verbos como save() e deletePage(). Devem-se nomear métodos de acesso, alteração e autenticação segundo seus valores e adicionar os prefixos get, set e is (padrão javabean). Exemplo: geUser(), setUser() e isAdmin().

Não dê uma de espertinho

Se os nomes forem muito “espertinhos”, apenas pessoas com o mesmo senso de humor irão entender.

Selecione uma palavra por conceito

Escolha uma palavra por cada conceito abstrato e fique com ela. Por exemplo, é confuso ter get, fetch e retrieve como métodos equivalentes de classes diferentes. Da mesma forma é confuso ter um controller, um manager e um driver.

Não faça trocadilhos

Evite usar a mesma palavra para dois propósitos. Por exemplo, você pode ter várias classes com o método add(), contanto que as listas de parâmetros e os valores retornados dos diversos métodos add() sejam semanticamente equivalentes. Se não for o caso, use append() ou insert().

Use nomes a partir do domínio da solução

São programadores que lerão o seu código. Portanto, está liberado usar nomes relativos da área. Nâo é prudente colocar um nome a partir do domínio do problema, pois o programador precisaria consultar o cliente todo o tempo para entender o significado de um nome. Por exemplo, o nome AccountVisitor significa o bastante para um programador familiarizado com o padrão visitor.

Use nomes de domínios do problema somente quando não houver uma solução a la programador, pois pelo menos ele poderá consultar o cliente.

Adicione um contexto significativo

Há poucos nomes que são significativos por si só. Imagine as variáveis street, houseNumber, city e state. Vistas juntas, fica claro que se trata de um endereço. Mas com a variável state sozinha, ficaria mais difícil de entender do que se trata, state pode ser várias coisas. A solução ideal nesse caso, é ter um objeto Address, mas se isso não for possível, pode-se abrir uma exceção e usar o prefixo addr, ficando addrState.

Não adicione contextos desnecessários

Em uma aplicação chamada Gas Station Deluxe (GSD), seria uma péssima ideia adicionar o prefixo GSD em todas as classes. Isso dificultaria a busca (se eu pesquisar G por exemplo, apareceria uma lista enorme com todas as classes). Os nomes accountAddress e customerAddress são bons para instâncias de classes, mas péssimos para as classes mesmo, a classe deve ser apenas Address.

Conclusão

Não tenha receio de renomear as coisas por temer a opinião de outros desenvolvedores. Desenvolvedores profissionais ficam agradecidos quando o código muda para melhor. De qualquer forma, na maioria das vezes, não memorizamos os nomes de métodos e classes. Use qualquer dica acima e note como o código ficará mais legível.

Criar agenda de compromissos usando Rails 4 [outdated]

Aline Ebone — Sun, 05 Feb 2023 03:25:54 +0000

Criar agenda de compromissos usando Rails 4 [outdated]

Uma forma muito legal de agregar uma agenda de compromissos ou eventos no seu projeto é utilizando um calendário. No Ruby on Rails é muito simples fazer isso com a ajuda da gem table_builder.

Crie um novo projeto e gere o modelo de compromisso:

$ rails new AgendaDeCompromissos 
$ rails g scaffold Compromisso titulo:string texto:text date:date 
$ rake db:migrate

Adicione a gem table_builder no arquivo Gemfile para preparar a instalação:

gem “watu_table_builder”, :require => “table_builder”

Depois, no terminal digite:

$ bundle install

Em view/compromissos/index.html.erb crie a tela do calendário:

    <%= calendar_for(@compromissos) do |t| %>
      <%= t.head(‘DOM’,’SEG’, ‘TER’, ‘QUA’, ‘QUI’, ‘SEX’, ‘SAB’) %> 
      <%= t.day do |day, compromissos| %> 
        <%= day.day %> 
        <% compromissos.each do |compromisso| %> 
          <%= h(compromisso.titulo) %> 
        <% end %> 
      <% end %> 
    <% end %>

    <%= link_to ‘Novo Compromisso’, new_compromisso_path %>

Crie um arquivo css para definir o estilo do calendário, assets/stylesheets/calendar.css:

    #calendar table { 
      border-collapse: collapse; 
      width: 100%; 
    }

    #calendar td, #calendar th { 
      font-family: “Lucida Grande”,arial,helvetica,sans-serif; 
      font-size: 10px; 
      padding: 6px; 
      border: 1px solid #999; 
    }

    #calendar th { 
      background: #DDD; 
      color: #666; 
      text-align: center; 
      width: 14.2857142857143%; 
    }

    #calendar td { 
      background: #FFF; 
      color: #777; 
      height: 80px; 
      vertical-align: top; 
      font-size: 16px; 
    }

    #calendar .notmonth { 
      color: #CCC; 
    }

    #calendar #month { 
      margin: 0; 
      padding-top: 10px; 
      padding-bottom: 10px; 
      text-align: center; 
    }

    #calendar #month a, #calendar #month a:hover { 
      text-decoration: none; 
      padding: 0 10px; 
      color: #999; 
    }

    #calendar .today { 
      background-color: #D7F2FF; 
    }

    #calendar ul { 
      margin: 0; 
      margin-top: 5px; 
      padding: 0; 
      list-style: none; 
    }

    #calendar li { 
      margin: 0; 
      padding: 0; 
      font-size: 11px; 
      text-align: center; 
    }

Nessa altura já temos o calendário com estilo criado:

Agora setamos o compromisso em app/controllers/compromissos_controller.rb para receber a data presente:

    def index 
      @compromissos = Compromisso.all 
      @date = params[:month] ? Date.parse(params[:month]) : Date.today 
    end

Para colocar o mês e o ano na tela e incluir os botões de editar e deletar, fazemos o seguinte em app/views/projects/index.html.erb:

    <%= calendar_for(@compromissos) do |t| %> 
      <%= t.head(‘DOM’,’SEG’, ‘TER’, ‘QUA’, ‘QUI’, ‘SEX’, ‘SAB’) %> 
      <%= t.day do |day, compromissos| %> 
        <%= day.day %> <% compromissos.each do |compromisso| %>
          <%= link_to h(compromisso.titulo), compromisso %>
          <%= link_to ‘Editar’, edit_compromisso_path(compromisso) %> | <%= link_to ‘Deletar’, compromisso, method: :delete, data: { confirm: ‘Tem certeza?’ } %> 
        <% end %> 
      <% end %> 
    <% end %>

Adicione as setas para navegar pelos meses no calendário, app/views/projects/index.html.erb:

    <%= link_to 
      “<”, :month => (@date.beginning_of_month-1).strftime(“%Y-%m-%d”) %> <%=h @date.strftime(“%B %Y”) 
    %> 
    <%= link_to 
      “>”, :month => (@date.end_of_month+1).strftime(“%Y-%m-%d”) 
    %>

    <%= calendar_for @compromissos, :year => @date.year, :month => @date.month do |t| %> 
      <%= t.head(‘DOM’,’SEG’, ‘TER’, ‘QUA’, ‘QUI’, ‘SEX’, ‘SAB’) %> 
      <%= t.day do |day, compromissos| %> 
        <%= day.day %> 
        <% compromissos.each do |compromisso| %>
          <%= link_to h(compromisso.titulo), compromisso %>
          <%= link_to ‘Editar’, edit_compromisso_path(compromisso) %> | <%= link_to ‘Deletar’, compromisso, method: :delete, data: { confirm: ‘Tem certeza?’ } %> 
        <% end %> 
      <% end %> 
    <% end %>

    <%= link_to ‘Novo Compromisso’, new_compromisso_path %>

Resultado final:

Código fonte: Github
Demo: Heroku

Obrigada!