teleren/devto huggingface dataset:
Is Sass worth learning in 2019/20?
Tags: discuss, sass, css
Published: 2019-11-03 19:54:50

---
title: Is Sass worth learning in 2019/20?
published: true
description: 
tags: discuss,sass,css
---

I started looking at the basics of sass a couple of years, but I've never gotten far into learning it apart from some very basic syntax. With the introduction of the likes of CSS variables and browser support increasing fairly quickly is this worth learning? 

I'd be interested in peoples thoughts either way. Anyone use it regularly?
CSS Grid Layout – Holy Grail Angular 9|8 UI Tutorial
Tags: angular, css, holygrailangular, angular98
Published: 2020-02-01 19:34:27

---
title: CSS Grid Layout – Holy Grail Angular 9|8 UI Tutorial
published: true
date: 2019-11-03 19:40:29 UTC
tags: Angular, CSS, Holy Grail Angular,Angular 9|8 
canonical_url: https://www.positronx.io/css-grid-layout-holy-grail-angular-ui-tutorial/
---

The post [CSS Grid Layout – Holy Grail Angular 8/9 UI Tutorial](https://www.positronx.io/css-grid-layout-holy-grail-angular-ui-tutorial/) appeared first on [positronX.io](https://www.positronx.io).

**In this Angular 8/9 UI tutorial, we will learn to create and use CSS Grid layout within the Angular app using the Holy Grail layout pattern.**

**Holy Grail** is a user interface layout pattern for the web pages. It comprises of the following UI components such as: header, main content section, left side fixed-width nav block, middle content section, fixed sidebar and a footer at the bottom.

[Click here to read more](https://www.positronx.io/css-grid-layout-holy-grail-angular-ui-tutorial/)
Learning Python: Week 1
Tags: python
Published: 2019-11-03 18:50:28

I'll post each Monday to keep a track on my progress. 
(And also document my entire journey.)

This week, I am looking into the official Python 3 tutorial from [here](https://docs.python.org/3/tutorial/). The reason I picked this is because of [this](https://www.youtube.com/watch?v=5mJ_Qftw2_0) video. 
 

After this, I'll read this book [Automate the Boring Stuff with Python](https://automatetheboringstuff.com) maybe in the next week.

Let's see how this goes!
HELP // Trying to print even and odd numbers
Tags: javascript, beginners
Published: 2019-11-03 17:39:15

---
title: HELP // Trying to print even and odd numbers
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sx52pt14ojq408jvdrz3.jpg
tags: javascript, beginners
published: true
---

Hey All,

I've just started out with JavaScript and was trying to play around with modifying & printing to the DOM.

My aim was to print the numbers 1 - 100 with a description after explaining if they were even or odd. 

I.e.

_The number 1 is odd
The number 2 is even
The number 3 is odd
.
.
.
The number 100 is even_

This is what I've been trying:

```javascript
const numberDiv = document.querySelector('div#numberDiv');
const numberArray = [];

for ( let i = 1; i <= 100; i++ ) {
  if ( i % 2 == 0 ) {
    numberArray.push(`<p>The number ${i} is even</p>`);
  } else {
    numberArray.push(`<p>The number ${i} is odd</p>`);
  }
}

numberDiv.innerHTML = numberArray;
```

The best way I have found so far is to push the value on each loop to an array and then print the entire array. However, it's now printing a comma on a separate line, like so:

*The number 1 is odd*

,
*The number 2 is even*

,
*The number 3 is odd*

*etc.* 

I know array items are separated by a comma within the array, but thought that they weren't shown when the array was printed -- as normally you'd have to use the .join(', ') method to include the comma.

The two main questions I have are:
 
1) What would be the best solution to this problem?
2) What's going wrong with my code?

Thanks in advance.

✌️
Angular Elements - Intro
Tags: angular, webcomponents, angularelements, microfrontends
Published: 2019-11-03 17:46:48

---
title: Angular Elements - Intro
published: true
description: Introduction to Angular Elements
tags: angular, web-components, angular-elements, micro-front-ends
series: Angular Elements En
---

This series is going to cover how to use [Angular Elements](https://angular.io/guide/elements).

Starting with basic topics, much like the [oficial documentation](https://angular.io/guide/elements), and going to more advanced ones, like routing and micro front-ends.

## Web Components

[Micro front-end](https://www.thoughtworks.com/radar/techniques/micro-frontends) is a hot topic nowadays, but it still not so mature.

One (and most common) way to accomplish that is using [web components](https://www.webcomponents.org/introduction), more specifically [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html).

Although [ever-green browsers](https://caniuse.com/#feat=custom-elementsv1) have support for Custom Elements, sometimes we need to develop for older browsers.

There are already [polyfills](https://www.webcomponents.org/polyfills) to adddress this problem, but we may face another problems like routing, state management, caching, and so on.

## Angular Elements

Like any other development trend, frameworks and libraries are trying to solve all of that for us and making our lifes easier.

Obviously, what we are going to talk about in this series is the work Angular team is doing, [Angular Elements](https://angular.io/guide/elements).

Angular Elements basically works like a bridge between the browser APIs and the [so many features provided by Angular itself](https://angular.io/features).

## How it works

When an Angular Element component is placed on a page, the browser creates an instance and adds it to the [DOM](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM).

After the element is instantiated, Angular takes control and provides it's content, data binding and change detection through [Angular Template Syntax](https://angular.io/guide/template-syntax#binding-syntax-an-overview).

The image below illustrates that:

![Element Instantiation](https://thepracticaldev.s3.amazonaws.com/i/6x7n3axap1184gc5faln.png)

## Conclusion

Using Angular Elements, we can create our own Custom Elements, which behaves just like native elements.

Here, in this first article, I shared a quick introduction, also giving some articles and documentations about the topic.

The next articles will be more code detailed, explaining how to implement it.

If you have any question or concern, just drop a comment. Thanks!
LINK
Published: 2019-11-03 16:54:22

https://jellystyle.com/2012/12/installing-php-extensions-with-mamp

https://torbjornzetterlund.com/disable-mysql-strict-mode-codeigniter/
http://www.goblooge.com/blog/mengubah-sql-mode-secara-permanen/#sthash.oeqtFvYP.dpbs

https://servernesia.com/2575/mematikan-strict-sql-mode-mysql/

https://servernesia.com/3385/mengalihkan-http-apache/
Build a GitHub Stargazer - Get Slack alerts when somebody stars your project in 4 lines of code
Tags: github, opensource, slack, bots
Published: 2019-11-03 16:51:19

All the self-help gurus keep telling you that you should control your instincts and avoid checking your GitHub projects to see if somebody starred any of them in the last 5 minutes. I have the same problem (yes, <a href="https://en.wikipedia.org/wiki/First_World_problem" target="_blank" rel="noopener noreferrer">first world problems</a>). And as usual, **changing the system/environment is easier than changing your own behaviour**. 

That's why I've changed the way to check for *stars counting* **from a pull to a push** approach by using the <a href="https://xatkit.com/" target="_blank" rel="noopener noreferrer">Xatkit</a> bot development platform.

Now, instead of me checking GitHub for new notifications, I have a bot that alerts me automatically every time somebody stars one of my projects, as you can see in the featured image above. By using our (now extended) {% github xatkit-bot-platform/xatkit-github-platform %} creating this bot is as easy as writing the following four lines of code:

{% gist https://gist.github.com/jcabot/a5094e0f288ceb06eaeba057c6245b9f.js %}

Basically, we subscribe to the <em>Star_Event</em> and extract out of the JSON Payload sent by GitHub all the data we want to integrate into our message. The reception of the event, the parsing of the JSON data,... is all done by the <em>GithubPlatform.GithubWebhookEventProvider</em> class. We just take what we need from the processed information. As usual, in this example, we post the result on Slack but this is up to you, just make sure you configure the <em>properties </em>file. 

Note that the bot can also be the bearer of bad news. If some lesser person decides to unstar your repo you'll get also the proper notification. In both cases, the alert is immediate since we process the GitHub events as they come.

<img class="size-full wp-image-118982 aligncenter" src="https://xatkit.com/wp-content/uploads/2019/10/unstar.png" alt="GitHub alert when somebody unstars your repository" width="865" height="308" />

Our Xatkit-GitHub platform is bidirectional. Beyond subscribing to GitHub events we can also call GitHub ourselves to create new issues, add labels, users,... based on a chat conversation taking place on an external platform. We have another example for this: <a href="https://livablesoftware.com/slack-chatbot-github-repositories/" rel="noopener noreferrer" target="_blank">Talk with your repositories – A Slack chatbot for GitHub</a>. See this and other examples in our dedicated <a href="https://github.com/xatkit-bot-platform/xatkit-examples" target="_blank" rel="noopener noreferrer">xatkit examples repo</a>.

I hope these examples show you how powerful this integration between Xatkit and GitHub can be. Surprise me with your own examples!. 

And of course, if you liked it, don't forget to star our repo. You'll made my day if I start getting plenty of *star alerts* from you!

{% github xatkit-bot-platform/xatkit-releases %}
"Haskell for the Front-End" :: Elm vs. PureScript
Tags: requestforpost, elm, haskell, javascript
Published: 2019-11-03 16:47:29

[Elm](https://en.wikipedia.org/wiki/Elm_(programming_language)) and [PureScript](https://en.wikipedia.org/wiki/PureScript) are both strongly-typed, purely-functional, front-end programming languages.

They both [compile to JavaScript](https://www.reddit.com/r/elm/comments/4g3wtk/does_elm_compile_to_js_or_jshtml_if_i_only_use_a/d2esvj3?utm_source=share&utm_medium=web2x), from what I've found online (they don't use [WebAssembly](https://webassembly.org/)).

PureScript seems to resemble Haskell a bit more than Elm, and offers some features that Elm doesn't have, like higher-kinded types. 

Other than that, I can't see any other huge differences between the two languages.

Can anyone with experience in both of these languages speak to the differences between them? (Here's [an old discussion](https://gist.github.com/spicydonuts/0c09596c1f27d517e9fe) related to this topic.)
VSCode tips and tricks
Tags: vscode, productivity
Published: 2019-11-03 16:44:43

**From time to time I spend some time with playing tools I use everyday in order to be more productive. It's easy to keep using the features I already know, even though there is a better way. This week I played with VSCode, here is what I learned.**

## Shortcuts

### Navigation
I usually used the touchpad or <kbd>Cmd + P</kbd> to select a file from the sidebar or navigate between open files, but using shortcuts made it much quicker. You can switch between the editor and the sidebar by pressing <kbd>Cmd + Shift + E</kbd>, then navigate by cursor key and open the selected file with <kbd>Cmd + Down</kbd>. To switch between open tab <kbd>Ctrl + Tab</kbd> or <kbd>Ctrl + Shift + Tab</kbd> can be used.

### Insert line
I did not know that I can insert a new line below or above the current line by pressing <kbd>Cmd + Enter</kbd> and <kbd>Cmd + Shift + Enter</kbd> respectively. Usually I navigated to the end or beginning of the current line and pressed <kbd>Enter</kbd>, but it is much easier with these shortcuts.

### Go to/peek definition
This is not new for me, but I put it here as it is very useful feature. If you press <kdb>F12</kbd> VSCode jumps the definition of the symbol under the cursor. If you press <kbd>Alt + F12</kbd> VSCode does not jumps there, but open the definition as an overlay, so you can have a quick look. It is worth to mention <kbd>Cmd + Shift + O</kbd> that opens a list of symbols, so you can jump to any of them very quickly.

### Others
<kbd>Ctrl + Shift + G</kbd> Show Git
<kbd>Ctrl + K, P</kbd> Copy full path of the current file
<kbd>Ctrl + K, W</kbd> Close all open files
<kbd>Ctrl + K, R</kbd> Reveal current file in explorer
<kbd>Cmd + Ctrl + Shift + Right</kbd> Expand selection
<kbd>Cmd + Ctrl + Shift + Left</kbd> Shrink selection

## Extensions

### Overtype
I always missed overtype mode from VSCode, but finally found [this](https://marketplace.visualstudio.com/items?itemName=adammaras.overtype) extension. It shows the current mode in the status bar and by pressing <kbd>Cmd + Shift + I</kbd> you can switch to overtype mode and back. 

### TODO Highlight
I usually use TODO and FIXME tags in comments to mark what I have to do later, and just use VSCode 'Find in files' function to find these marks later. Of course there is a better way: [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight). It is a very simple, but very useful extension. By default it highlights TODO: and FIXME: in your code, but it is highly configurable: other tags can be added, files can be included or excluded. It also can give you a list of all tags in your project.

Thanks for reading it. Happy coding. ❤

Say hello. 
[LinkedIn](https://www.linkedin.com/in/szib77/) | [Github](https://githib.com/szib) | [Instagram](https://www.instagram.com/szib77/)
[Tutorial] Instalando o Python 3.7 e o IDLE no Linux (Ubuntu/Mint/distros derivadas do Debian) pelo terminal
Tags: python, instalacao, programacao
Published: 2019-11-03 16:21:31

No terminal digite o seguinte comando:

```
$ sudo apt install python3.7 python3.7-dev python3.7-venv python3-pip python3-tk idle-python3.7 build-essential python3-setuptools python3-wheel
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **sudo** serve para pedir permissões de administrador temporariamente.

- **apt** do inglês, *Advanced Package Tool*, em português, Ferramenta de Empacotamento Avançada; é a ferramenta que nos ajuda na instalação, atualização e desinstalação de programas, entre outras funções.

- **install** é o comando de instalar, indicando ao apt o que fazer.

Para verificar a versão instalada, basta digitar no terminal:

```
$ python3.7 -V
```

Agora você pode usar o interpretador no modo interativo com o comando:

```
$ python3.7
```

Ou se desejar executar um **script** com:

```
$ python3.7 nome_do_arquivo.py
```
How to Save Up To 80% on Google Kubernetes Engine Using Magalix KubeAdvisor
Tags: kubernetes, docker, devops
Published: 2019-11-03 16:10:35

Google Cloud Platform (GCP) recently announced the beta launch of Google Cloud Recommenders, and the features and functionality are pretty exciting. The short of it is that with Recommenders in GCP, you can now:

Automatically get analysis of usage patterns to help you determine if resources and policies within Google Cloud are optimally configured
Automatically detect if overly permissive access policies are present, and adjust them based on access patterns of similar users in your organization
Choose the optimal virtual machine size for your workload, because most GCP customers initially provision machines that are too small or too large.
This is all pretty awesome, but in actuality, this is old news.

The Magalix Agent (which can be found in the Google Cloud Marketplace) has been doing this since day 1. Just last week with the release of KubeAdvisor, we now enable developers and DevOps engineers to get continuously generated Recommendations specifically to save money on any cloud provider (including GCP), enact best practices for cluster configuration, and optimize resource usage with application performance.

KubeAdvisor helps you select the right VM type, the right capacity limits and resources, and can even suggest how to optimize your K8s clusters based on the billing model of your cloud provider.

Just like Google Cloud, we’ve found that Kubernetes users are often way over or under-provisioned, and can save as much as 80% on their cloud costs by using KubeAdvisor. In this article, we’ll learn how KubeAdvisor works, and how it can help save on cloud costs while optimizing for app performance on Kubernetes.
SED -Tutorial
Tags: sed, sedtutorials
Published: 2019-11-03 16:09:34

---
title: SED -Tutorial
published: True
description: The sed command is a stream editor.This tutorial means that this is a brief introductory guide to SED that will help give beginners a solid foundation about concrete tasks. http://letsfindcourse.com/tutorials/sed-tutorials/sed-tutorial
tags: #sed #sedtutorials
---
Integrating Dynamic Like Count to Gatsby Blog Site
Tags: help, gatsby, netlify, graphcms
Published: 2019-11-03 15:57:56


Hey, I recently finished creating a blog website using  **Gatsby** and **GraphCMS** and deploying it using **Netlify**.
 
I need help in integrating a feature similar to Medium's clap. 

I will need to store, subscribe and update the blog’s like count.

Steps 

1. On every build store and initialize a new blog with `like` count zero.
2. On the blog page add the feature to update blog `like` count.
3. On the blog page subscribe to blog `like` count.
Firewalls on Linux
Tags: linux, security, ubuntu
Published: 2019-11-03 15:46:14

If you use Linux, you should consider a firewall. The time that <a href="https://www.intezer.com/blog-evilgnome-rare-malware-spying-on-linux-desktop-users/">malware and trojans did not exist for Linux</a> has long passed.

Times have changed, Linux is now a target for criminals. This could be for different reasons, like stealing your bitcoins (if you use a software wallet). What can you do?

You can scan your system with programs like <a href="https://cisofy.com/lynis/">Lynis</a>. But that may not be enough..

What are your options speaking in terms of firewalls?

## Firewall apps (Port level)

Luckily you are not limited by choices here. There are many firewall apps and even complete firewall distributions.

The popular ones are:

* iptables (<a href="https://help.ubuntu.com/community/IptablesHowTo">howto</a>)
* UFW – Uncomplicated Firewall (<a href="https://linuxtoko.com/ubuntu-firewall/">tutorial</a>)

Both of these need command line configuration. UFW can also be configured with a graphical program named `gufw`, but I find this harder and more confusing than the terminal.

<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.wL302DzD4tS9hADdhbvmQQAAAA%26pid%3DApi&f=1">

But, there are many others, here's a list if you want to check them out:

* <a href="http://www.ipcop.org/">ipcop</a>
* <a href="https://www.vuurmuur.org/trac/">Vuurmuur</a>
* <a href="http://www.shorewall.org/">shorewall</a>
* <a href="https://www.pfsense.org/">pfsense</a>
* <a href="https://www.untangle.com/untangle-ng-firewall/">Untangle NG Firewall (distro)</a>
* <a href="https://www.ipfire.org/">IPFire</a>
* <a href="http://www.smoothwall.org/">Smoothwall Express</a>
* <a href="https://vyos.io/">VyOS</a>

## Application level firewall

Most of these do packet filtering based on network port. If you want to do application level blocking, you can use <a href="https://github.com/evilsocket/opensnitch">OpenSnitch</a>

<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F1.bp.blogspot.com%2F-91giTlOwHL8%2FWth-0YTJkaI%2FAAAAAAAAAO4%2FB8Y-FWbelIExZCQtN8g3Tu_LRn26cpXTQCLcBGAs%2Fs1600%2Fopensnitch-allow-firefox.png&f=1&nofb=1">

Yes, this lets you block network access per app. There used to be a firewall named 'Douane firewall' which did the same, but I can't find it anymore.

**Related links:**
* <a href="https://linuxtoko.com/ubuntu-firewall/">Ubuntu's uncomplicated firewall howto</a>
* <a href="https://help.ubuntu.com/community/IptablesHowTo">Iptables Linux firewall howto</a>
* <a href="https://www.bitdegree.org/course/secure-your-linux-server">Course: Secure your Linux server</a>
Skip links
Tags: a11y, webaccessibility, css
Published: 2019-11-03 15:28:47

---
title: Skip links
published: true
description: Make your web app more keyboard friendly by using skip links
tags: A11y, web-accessibility, css
---

Skip links are meant to allow users to jump to different parts of the site easily using keyboard (Even dev.to has skip link reload dev.to and press tab)

![dev.to's skip link](https://thepracticaldev.s3.amazonaws.com/i/qadaaa5aovmxeoqt9vxh.PNG)

The idea is to have anchor tags at the top of the page (Skip links should appear as the first item in the html document inside body) with absolute position and have its **top** set to negative so that is does not appear usually. But when user presses tab the link will get focused and you can use **:focus** css selector to set **top** back to zero so that it appears.

You can have more than one skip link to allow users to jump to different sections of the page. User will go through these skip links by pressing tab key.
[Here](https://rafi993.github.io/Skip-links/) is a demo of skip links and [here](https://github.com/Rafi993/Skip-links) is corresponding source code for the demo.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/iyt3aqk10k49lj7fmxey.PNG)
Dealing with ".json() is not a function" Error
Tags: webdev, javascript, beginners
Published: 2019-11-03 14:50:49

You finished a tutorial about REST API, Ajax, or Fetch and now you're ready to build a new project using API. Cool! You opened a new file in text editor and start typing away until you encounter a problem. When you write <code>.json()</code>, you will get the ".json() is not a function" error.

You could get around by changing it to <code>.text()</code>, however doing this will make it hard to retrieve data you want from API even though it's technically responding. What should you do?

The solution? Use <code>items</code>.

Let me give you a quick example where I used it in my book finder project.

I created a function where it will fetch a data from Google Books API and display the search results in HTML. I simplified the codes just to demonstrated the point.

```javascript
function searchBook() {
  const query = document.querySelector('#search-input').value;
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}`)
      .then((res) => res.json())
      .then((data) => {
        let output = '<h2>Search results</h2>';
        data.forEach(book => {
        // Display search results
      })
  }
```
This code will not work because there is something missing and prevents the data parameters from being accessed . However, if I add <code>items</code> between <code>data</code> and <code>forEach()</code>, it will work:

```javascript
function searchBook() {
  const query = document.querySelector('#search-input').value;
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}`)
      .then((res) => res.json())
      .then((data) => {
        let output = '<h2>Search results</h2>';
        data.items.forEach(book => {
        // Display search results
      })
  }
```

Why this happens? To be honest, I still don't fully understand why it works this way either, so I'd be happy if any of you provide a better explanation in the comments below. For the time being, here's my thoughts:

Firstly, It could be the API itself - Not all APIs will work immediately if you simply put <code>.json()</code> and hoped for the best. Some APIs like [JSONPlaceholder](https://jsonplaceholder.typicode.com/) will work just fine without including <code>items</code>, while others like [Google Books API](https://developers.google.com/books) will require to include it to make it work.

Secondly, the API data will be returned in JSON format and since the objects are wrapped inside the array, you will need to get into the array first before you can access the JSON data from which you can then change it into object using the <code>.json()</code>.

So there you go! Next time when that error appears again, you know what you're gonna do.