One place for hosting & domains

      Styles

      Angular – Shortcut to Importing Styles Files in Components


      In a typical Angular project, you’ll have many components. Each components has it own stylesheet (css, scss, less, etc). It’s quite often that you might need to include global styling files (especially variables file) in your component.

      We’ve talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI

      Let’s explore another option for importing style files:

      A Sass Variables Sample

      Let’s say you have a _variables.scss in your src/stylings folder:

      // your folder structure
      - src
          - app
              - app.component.ts
                  - hello
                      - hello.component.html
                      - hello.component.scss
                      - hello.component.ts
              - ...
          - stylings
              - _variables.scss
      
      // your _variables.scss file
      $brand-color: #800000;
      

      Reference to the Variables file

      Below is our hello.component.html file, let’s style the header with our brand-color.

      <!-- hello.component.html -->
      <h1>
        Hello World!
      </h1>
      

      The $brand-color variable is in stylings/_variables.scss file. We need to import the file in order to use it:

      // hello.component.scss
      @import "../../../stylings/variables"; // this is not cool!
      
      h1 {
          color: $brand-color;
      }
      

      See the ../../../stylings/ syntax? Do you like it?

      Imagine you need to repeat this ../../../stylings/ in another tens or hundreds of components and you need to remember the relative path. This is not cool. Let’s fix this!

      Shortcut with Angular CLI configuration

      If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in .angular.cli.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.

      For example, in our case, let’s add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      With this, we can update our hello.component.scss to just @import "variables". Sweet!

      // hello.component.scss
      @import "variables"; // change to just variables, say goodbye to ../../../stylings/
      
      h1 {
          color: $brand-color;
      }
      

      What if you have duplicated file name in paths?

      Imagine you included two styling paths in .angular.cli.json, both have _variables.scss file. Guess what will happen? Will the CLI pick up both files or throw errors?

      Let’s test it out together!

      // your folder structure
      - src
          - ...
          - stylings
              - _variables.scss
          - stylings2 // add this
              - _variables.scss
      

      In stylings2/_variables.scss, you have the following styles,

      // stylings2/_variables.scss
      $brand-color: blue;
      $font-size-large: 40px;
      

      Update your .angular.cli.json configurations, to include styling2 folder path.

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "./stylings",
                    "./stylings2"
                  ]
              }
      
          }]
      }
      

      Update your hello.component.scss file,

      // hello.component.scss
      @import "variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Restart your dev server. Wait for a while, and you should expect… Error!
      Error, Undefined variable

      Tell me why!

      Turn out, if there are multiple files with same name, Angular CLI will pick only the first file that match the name. In this case, it will pick the stylings/_variables.scss file. That’s why it could not get the variable $font-size-large, because it’s in styling2/_variables.scss file.

      But… I really need two files with the same name!

      Well, there are cases where you have multiple files with the same name and you really need it, and you would like to have shortcuts as well. The workaround would be including the parent path. For example, in our case, both stylings and stylings2 folders parent are src.

      We can update the .angular.cli.json configuration to the following:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    "."
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to both variables file like the following,

      // hello.component.scss
      @import "stylings/variables";
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      Well, it’s not perfect, slightly more words to type, but better than ../../../ right? Also, it might be rare scenario that you have multiple style files with same name in the same project, I guess?

      Another shorter workaround would be including parent path and one styling path:

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings"
                  ]
              }
      
          }]
      }
      

      You can save a few lines in your hello.component.scss.

      // hello.component.scss
      @import "variables"; // shorter, don't need styling/ as it's one of the configured paths
      @import "stylings2/variables"; 
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
      }
      

      What about including paths in node_modules?

      The Angular CLI configuration is applicable to files in node_modules as well. Let’s say you are using your custom styling npm package, for example bootstrap-sass module.

      npm install bootstrap-sass --save
      

      Here is the folder structure of bootstrap-sass:

      - node_modules
          - bootstrap-sass
              - assets
                  - stylesheets
                      - bootstrap
                          - ...
                          - _grid.scss
                          - _variables.scss
      

      Let’s say you would like to use the bootstrap’s _variables.scss, you can update your .angular.cli.json file to include bootstrap path,

      {
          ...
          "apps": [{
              "root": "src",
              ...
              "stylePreprocessorOptions": {
                  "includePaths": [
                    ".",
                    "./stylings",
                    "../node_modules/bootstrap-sass/assets/stylesheets"
                  ]
              }
      
          }]
      }
      

      Then, in your hello.component.scss, you can refer to the bootstrap variables file like the following,

      // hello.component.scss
      @import "variables";
      @import "stylings2/variables"; 
      @impoer "bootstrap/variables";
      
      h1 {
          color: $brand-color;
          font-size: $font-size-large;
          font-family: $font-family-serif;
      }
      

      Summary

      Let’s remove the relative path hell (../../../) with this useful Angular CLI configuration!

      That’s it. Happy coding!



      Source link

      IT Pros Pick the Household Pets Most Representative of Their Work Styles in New INAP Survey


      Millions of us who have shifted to work from home situations during this challenging time find ourselves adjusting to new “coworkers”—some of whom are of the four-legged variety. Are the personalities of your new office colleagues affecting your work style? Do your pets remind you of any of your actual coworkers?

      It just so happens that INAP polled 500 IT pros to determine which household pets best replicate their on-the-job personas. Respondents were asked to choose their primary from a list of household and exotic pets and corresponding characteristics. Since most people don’t fit perfectly in a box, participants were given the option to select a secondary persona, as well. The results aren’t very scientific but are revealing, nevertheless.

      Pet Personality Types

      It’s easy for those outside of IT to lump the entire profession into one persona. Pop culture tropes are likely to blame. (Thanks, Jimmy Fallon.) But we know, like any discipline, there’s a spectrum.

      Have you ever met a sysadmin whose go-it-alone attitude is suspiciously cat-like? Or a network engineer who is as loyal and enthusiastic as a golden retriever? How about a hot-aisle-loving D.C. tech who can camouflage their emotions with iguana-like deflection?

      Check out the descriptions for the eight pets featured in the survey below and consider where you and your coworkers might fall.

      • Dogs

        IT dogs always appear happy. They thrive off positive feedback and incentives. They are loyal, but oftentimes to a fault.

      • Cats

        IT cats need little direction and prefer to work independently. They often come across as aloof or standoffish, despite a hidden soft side.

      • IGUANAS

        IT iguanas are experts at adapting to whatever the work environment throws at them. However, they often camouflage their true opinions during conflict, making them tough to pin down.

      • Fish

        IT fish are experts at swimming through the backlog. However, they tend to always sleep with their eyes open in anticipation of the next problem at work.

      • TARANTULAS

        IT tarantulas, with eyes on everything, never miss a chance to seize an opportunity at work. They are respected, but often intimidate colleagues and subordinates.

      • PARROTS

        IT parrots are highly intelligent and absorb knowledge fast. But they’re also commonly viewed as arrogant and are prone to occasionally sh***ing all over colleagues.

      • TURTLES

        IT turtles work slow and steady, but often get the job done better than anyone at the office. However, they would rather hide in their shell than engage in a workplace conflict.

      • HEDGEHOGS

        IT hedgehogs work diligently through the night. However, they can become reclusive and prickly if not managed to their liking.

      Results: Pet Personas in the Workplace

      The IT pros participating in the survey reviewed the choices and selected their primary and secondary pet personality types.

      Pet Persona Primary Secondary Table

      Dog took the No. 1 spot, with 34 percent of survey takers choosing it as their primary persona. In fact, 31 pros selected this as their only pet persona. Interestingly, senior IT leaders are 17 percent more likely to be dogs than non-senior leaders. Perhaps that loyal streak took them a long way.

      Optimism also abounds with these IT pros. IT Dogs are 41 percent more likely than IT Cats to think their infrastructure strategy deserves an “A” grade.

      Cat finished second, with 26 percent of IT pros selecting it as a primary persona. With an ability to work independently with little direction, 14 percent of respondents selected cat as their secondary persona, a statistic that might be heartening to managers.

      With dogs and cats ranking as the No. 1 and No. 2 “most popular pets in America,” it shouldn’t be surprising that we identify their traits in ourselves.

      Iguana took the No. 3 spot, with 12 percent of IT professionals identifying with the ability to adapt to whatever their work environments throw at them. That’s a terrific trait to have in an ever-shifting tech landscape where it’s challenging to predict what might come next.

      IT iguanas tied for the most common secondary persona, with 16 percent of respondents selecting it. Interestingly, non-senior IT leaders are 70 percent more likely to be Iguana primaries than senior leaders.

      Fish claimed the No. 4 spot overall, with 9 percent of IT professionals selecting it as their primary persona. And as a secondary persona, fish tied for No. 1 with 16 percent. It was also the most common secondary persona for non-senior IT infrastructure pros. This is good news, as the field needs pros who are experts at swimming through the backlog in order to move forward.

      At No. 5 overall, tarantula was selected as a primary persona by 8 percent of IT pros, and it tied with fish for the No. 1 spot as a secondary persona. With eyes on everything, ready to seize opportunities, Senior IT leaders are twice as likely to be tarantulas than non-senior leaders.

      Parrot claimed the No. 6 spot, with 5 percent of IT pros willing to admit that, at times, and despite their high intelligence, they can have a tendency to s**t all over their colleagues. That’s some high-level introspection and honesty in our book. As secondary personas go, 12 percent of survey takers selected parrot. Parrots are equally likely to be leaders as non-leaders.

      Known for quality work output at a slow and steady pace, turtle was selected as a primary persona by 4 percent of IT professionals, bringing it to the No. 7 spot. Only 6 percent selected turtle as their secondary persona, which ranks 8 out of 8. Interestingly, non-senior leaders were twice as likely to be turtles as non-senior leaders, which begs the question: Is conflict required to lead? Based on these survey results, it seems likely.

      And finally, hedgehog secured the last spot, at No. 8, with 2 percent of IT professionals selecting it as their primary persona. Hedgehog came in 7 out of 8 for secondary personas. These IT third-shifters work diligently through the night.

      Top Animal Persona Pairings

      Below is a breakdown of the top pet persona pairings across the entire sample. The primary persona is listed first in each pairing.

      Pet Persona Pairing Table

      Laura Vietmeyer


      READ MORE



      Source link

      How To Modify Attributes, Classes, and Styles in the DOM


      Introdução

      No tutorial anterior nesta série, “Como fazer alterações no DOM,” falamos sobre como criar, inserir, substituir e remover elementos do Modelo de Objeto de Documentos (DOM) com métodos integrados. Ao ampliar sua capacidade de gerenciar o DOM, você se tornará mais capacitado para utilizar as funcionalidades interativas do JavaScript e modificar elementos Web.

      Neste tutorial, vamos aprender como fazer mais alterações no DOM, modificando estilos, classes e outros atributos de nós do elemento HTML. Isso dará a você uma maior compreensão sobre como manipular elementos essenciais no DOM.

      Revisão de seleção de elementos

      Até recentemente, a biblioteca de JavaScript chamada jQuery era a mais usada para selecionar e modificar elementos no DOM. O jQuery simplificou o processo de selecionar um ou mais elementos e de aplicar alterações a todos eles ao mesmo tempo. Em “Como acessar os elementos no DOM,” analisamos os métodos DOM para apreender e trabalhar com nós no vanilla JavaScript.

      Para revisão, o document.querySelector() e o document.getElementById() são os métodos usados para acessar um único elemento. Ao usar um div com um atributo id no exemplo abaixo, poderemos acessar aquele elemento de qualquer maneira.

      <div id="demo-id">Demo ID</div>
      

      O método do querySelector() é mais robusto no ponto de que ele pode selecionar um elemento na página por qualquer tipo de seletor.

      // Both methods will return a single element
      const demoId = document.querySelector('#demo-id');
      

      Ao acessar um único elemento, podemos atualizar facilmente uma parte do elemento como o texto dentro dele.

      // Change the text of one element
      demoId.textContent = 'Demo ID text updated.';
      

      No entanto, ao acessar vários elementos por um seletor comum, como uma classe específica, precisamos percorrer todos os elementos na lista. No código abaixo, temos dois elementos div com um valor de classe comum.

      <div class="demo-class">Demo Class 1</div>
      <div class="demo-class">Demo Class 2</div>
      

      Vamos usar o querySelectorAll() para captar todos os elementos com demo-class aplicado a eles e usaremos o forEach()para percorrê-los e aplicar uma alteração. Também é possível acessar um elemento específico com o querySelectorAll() da mesma forma que você utilizaria um array — usando a notação entre parênteses.

      // Get a NodeList of all .demo elements
      const demoClasses = document.querySelectorAll('.demo-class');
      
      // Change the text of multiple elements with a loop
      demoClasses.forEach(element => {
        element.textContent = 'All demo classes updated.';
      });
      
      // Access the first element in the NodeList
      demoClasses[0];
      

      Esta é uma das diferenças mais importantes que você deve saber ao passar do jQuery para o vanilla JavaScript. Muitos exemplos de modificação de elementos não irão explicar o processo de aplicação desses métodos e propriedades a vários elementos.

      As propriedades e métodos neste artigo serão, muitas vezes, anexadas aos event listeners para responder aos métodos de seleção via cliques, passar o mouse ou outros gatilhos.

      Nota: os métodos getElementsByClassName() e o getElementsByTagName() retornarão coleções do HTML que não têm acesso ao método forEach() que o querySelectorAll() tem. Nestes casos, será necessário usar um padrão para for loop iterar na coleção.

      Modificando atributos

      Os atributos são valores que contêm informações adicionais sobre elementos do HTML. Normalmente, eles vêm em pares de nome/valor e podem ser essenciais dependendo do elemento.

      Alguns dos atributos do HTML mais comuns são os atributos src de uma tag img, o href de uma tag a, class, id e style. Para obter uma lista completa de atributos do HTML, veja a lista de atributos na Rede de Desenvolvedores da Mozilla. Os elementos personalizados que não fazem parte do padrão do HTML serão anexados no início com o data-.

      No JavaScript, temos quatro métodos para modificar atributos do elemento:

      Método Descrição Exemplo
      hasAttribute() Devolve valores lógicos boolianos do tipo true ou false element.hasAttribute('href');
      getAttribute() Retorna o valor de um atributo especificado ou null element.getAttribute('href');
      setAttribute() Adiciona ou atualiza o valor de um atributo especificado element.setAttribute('href', 'index.html');
      removeAttribute() Remove um atributo de um elemento element.removeAttribute('href');

      Vamos criar um novo arquivo de HTML com uma tag img com um atributo. Vamos vincular uma imagem pública disponível através de um URL, mas você pode trocá-la por uma imagem local alternativa se estiver trabalhando offline.

      attributes.html

      <!DOCTYPE html>
      <html lang="en">
      <body>
      
          <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
      
      </body>
      
      </html>
      

      Quando carregar o arquivo de HTML acima em um navegador Web moderno e abrir o Console do desenvolvedor integrado, deverá ver algo assim:

      First rendering of classes.html

      Agora, podemos testar todos os métodos de atributo rapidamente.

      // Assign image element
      const img = document.querySelector('img');
      
      img.hasAttribute('src');                // returns true
      img.getAttribute('src');                // returns "...shark.png"
      img.removeAttribute('src');             // remove the src attribute and value
      

      Neste ponto, você terá removido o atributo src e o valor associado ao img, mas poderá redefinir aquele atributo e atribuir o valor para uma imagem alternativa com o img.setAttribute():

      img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
      

      Second rendering of classes.html

      Finalmente, podemos modificar o atributo diretamente atribuindo um novo valor ao atributo como uma propriedade do elemento, definindo o src de volta para o arquivo shark.png

      img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
      

      Qualquer atributo pode ser editado desta maneira, bem como com os métodos acima.

      Os métodos hasAttribute() e getAttribute() são normalmente usados com declarações condicionais, e os métodos setAttribute() e removeAttribute() são usados para modificar diretamente o DOM.

      Modificando as classes

      O atributo classe corresponde aos seletores de classe CSS. Não pode ser confundido com as classes ES6, um tipo especial de função do JavaScript.

      As classes CSS são usadas para aplicar estilos a vários elementos, ao contrário das IDs que só podem existir uma vez por página. No JavaScript, temos as propriedades de className e de classListpara trabalhar com o atributo de classe.

      Método/Propriedade Descrição Exemplo
      className Obtém ou define o valor de classe element.className;
      classList.add() Adiciona um ou mais valores de classe element.classList.add('active');
      classList.toggle() Liga ou desliga uma classe element.classList.toggle('active');
      classList.contains() Verifica se o valor de classe existe element.classList.contains('active');
      classList.replace() Substitui um valor de classe existente com um novo valor de classe element.classList.replace('old', 'new');
      classList.remove() Remove um valor de classe element.classList.remove('active');

      Vamos fazer outro arquivo de HTML para trabalhar com os métodos de classe, com dois elementos e algumas classes.

      classes.html

      <!DOCTYPE html>
      <html lang="en">
      
      <style>
          body {
              max-width: 600px;
              margin: 0 auto;
              font-family: sans-serif;
          }
          .active {
              border: 2px solid blue;
          }
      
          .warning {
              border: 2px solid red;
          }
      
          .hidden {
              display: none;
          }
      
          div {
              border: 2px dashed lightgray;
              padding: 15px;
              margin: 5px;
          }
      </style>
      
      <body>
      
          <div>Div 1</div>
          <div class="active">Div 2</div>
      
      </body>
      
      </html>
      

      Quando abrir o arquivo classes.html em um navegador Web, receberá uma renderização parecida com a seguinte:

      First rendering of classes.html

      A propriedade className foi introduzida para evitar conflitos com a palavra-chave class encontrada no JavaScript e outras linguagens que têm acesso ao DOM. É possível usar o className para atribuir um valor diretamente à classe.

      // Select the first div
      const div = document.querySelector('div');
      
      // Assign the warning class to the first div
      div.className = 'warning';
      

      Atribuímos a classe warning definida nos valores CSS de classes.html para o primeiro div. Você receberá o seguinte resultado:

      Second rendering of classes.html

      Note que se alguma classe já existir no elemento, isso irá substituí-las. É possível adicionar várias classes com espaço delimitado usando a propriedade className, ou usá-las sem operadores de atribuição para obter o valor da classe no elemento.

      A outra maneira de modificar as classes é através da propriedade ](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)classList[, que vem com alguns métodos úteis. Estes métodos são semelhantes aos métodos do jQuery addClass, removeClass e toggleClass.

      // Select the second div by class name
      const activeDiv = document.querySelector('.active');
      
      activeDiv.classList.add('hidden');                // Add the hidden class
      activeDiv.classList.remove('hidden');             // Remove the hidden class
      activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
      activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
      

      Após realizar os métodos acima, sua página Web se parecerá com esta:

      Final rendering of classes.html

      Ao contrário do exemplo className, usar classList.add() adicionará uma nova classe na lista de classes existentes. Também é possível adicionar várias classes como strings separadas por vírgula. Também é possível usar o setAttribute para modificar a classe de um elemento.

      Modificando os estilos

      A propriedade estilo representa os estilos embutidos em um elemento HTML. Muitas vezes, os estilos serão aplicados aos elementos através de uma folha de estilos, como fizemos anteriormente neste artigo. Porém, às vezes precisamos adicionar ou editar diretamente um estilo embutido.

      Vamos fazer um exemplo curto para demonstrar a edição de estilos com o JavaScript. Abaixo está um novo arquivo de HTML com um div que tem alguns estilos embutidos aplicados para mostrar um quadrado.

      styles.html

      <!DOCTYPE html>
      <html lang="en">
      
      <body>
      
          <div style="height: 100px;
                      width: 100px;
                      border: 2px solid black;">Div</div>
      
      </body>
      
      </html>
      

      Quando aberto em um navegador Web, o styles.html se parecerá com isso:

      First rendering of styles.html​

      Uma opção para editar os estilos é com o setAttribute().

      // Select div
      const div = document.querySelector('div');
      
      // Apply style to div
      div.setAttribute('style', 'text-align: center');
      

      No entanto, isso removerá todos os estilos embutidos do elemento. Uma vez que este provavelmente não é o efeito desejado, é melhor usar o atributo style diretamente.

      div.style.height = '100px';
      div.style.width = '100px';
      div.style.border = '2px solid black';
      

      As propriedades CSS são escritas em kebab-case, que são palavras minúsculas separadas por traços. É importante notar que as propriedades CSS em kebab-case não podem ser usadas na propriedade de estilo do JavaScript. Em vez disso, elas serão substituídas por seu equivalente em camelCase, que é quando a primeira palavra é minúscula e todas as palavras subsequentes são maiúsculas. Em outras palavras, em vez de text-align, vamos usar textAlign para a propriedade de estilo do JavaScript.

      // Make div into a circle and vertically center the text
      div.style.borderRadius = '50%';
      div.style.display = 'flex';
      div.style.justifyContent = 'center';
      div.style.alignItems = 'center';
      

      Após completar as modificações de estilo acima, sua versão final de styles.html mostrará um círculo:

      Final rendering of styles.html

      Se muitas alterações estilísticas tiverem que ser aplicadas a um elemento, o melhor a se fazer é aplicar os estilos para uma classe e adicionar uma nova classe. No entanto, existem alguns casos nos quais será necessário ou mais direto modificar o atributo estilo embutido.

      Conclusão

      Os elementos do HTML têm, frequentemente, informações adicionais atribuídas a eles na forma de atributos. Os atributos podem consistir em pares de nome/valor e alguns dos atributos mais comuns são de class e style.

      Neste tutorial, aprendemos como acessar, modificar e remover atributos em um elemento HTML no DOM usando o JavaScript simples. Também aprendemos como adicionar, remover, alternar e substituir as classes CSS em um elemento e como editar estilos de CSS embutidos. Para saber mais, verifique a documentação sobre atributos na Rede de Desenvolvedores da Mozilla.



      Source link