teleren/devto huggingface dataset:
PowerShell Core | Raspberry Pi
Tags: powershell, raspbian, raspberrypi, linuxtutorial
Published: 2019-11-17 17:26:32

---
title: PowerShell Core | Raspberry Pi
published: true
date: 2019-08-19 11:01:01 UTC
tags: powershell, raspbian, raspberrypi, linuxtutorial
canonical_url: 
---

### PowerShell Core| Raspberry Pi

Instalação PowerShell Core em um Raspberry Pi (Raspian).

![](https://cdn-images-1.medium.com/max/1024/1*7tgm3p6cYE0v20BEJb5nyw.jpeg)<figcaption>Banner artigo PowerShell + Raspberry Pi. Ewerton Jordão</figcaption>

E ae, beleza pessoal? falando um pouco sobre PowerShell no Linux, só que dessa vez em um dispositivo que dispõem de 1Gb de memória RAM, falo do famoso Raspberry Pi, placa de prototipação muito utilizada para ensinar programação a todas as idades por ser um computador completo e de baixo custo.

Mãos a obra, após instalar o **RASPBIAN** (saiba mais em: [https://projects.raspberrypi.org/en/projects/raspberry-pi-getting-started/2](https://projects.raspberrypi.org/en/projects/raspberry-pi-getting-started/2)). Vamos instalar o PowerShell Core 😎 🚀.

No script abaixo exemplifico todos os comandos necessários para efetuar a instalação, primeiro devemos nos certificar que o sistema está atualizado e depois descobrir qual a arquitetura do processador do seu Raspberry Pi, no meu caso e 32-bit.

{% gist https://gist.github.com/EwertonJordao/17da1d1cb668deacaa7a39612bafbe15.js %}

**Obs: Nas imagens abaixo utilizo uma ferramenta chamada scrot ela realiza screen shots no Raspbian, desta forma no seu ambiente não é necessário executar o utilitário. Lembrando também que PowerShell Core para processadores ARM é uma versão experimental, ou seja, não existe um suporte oficial por enquanto.**

![Verificando a arquitetura do processador da Raspberry Pi 3 uname -m](https://cdn-images-1.medium.com/max/871/1*8UGfdVnAuCXLjqAhSyw1PA.png)<figcaption>Verificando a arquitetura do processador da Raspberry Pi 3</figcaption>

![wget https://github.com/PowerShell/PowerShell/releases/download/v7.0.0-preview.2/powershell-7.0.0-preview.2-linux-arm32.tar.g](https://cdn-images-1.medium.com/max/871/1*QJYRfjrIMnxXzxhSIBiefw.png)<figcaption>Resultado após o download utilizando o wget.</figcaption>

após o download (linha 7 do script), criamos um diretório chamado **powershell** no **etc** do SO. Utilizando o tar para descompactar o artefato e a mágica 🧙‍♂️ acontece, temos o PowerShell Core no Raspberry Pi.

![](https://cdn-images-1.medium.com/max/871/1*fvoCiXcY1FUpP1vYxkOObg.png)<figcaption>Resultado após executar a ultima linha do script.</figcaption>

É isso, pessoal. Essa é uma demonstração de como é simples instalar o PowerShell em uma distribuição Linux baseada no Debian. Quer saber como instalar o PowerShell em distribuições RHEL? No link abaixo exemplifico o processo.

[PowerShell Core | Instalação no CentOS](https://dev.to/ewertonjordao/powershell-core-instalacao-no-centos-54pf)

(☞ﾟヮﾟ)☞ Não se esqueça, **PS é vida ** ☜(ﾟヮﾟ☜)
Intro to React Lifecycle Hooks
Tags: react
Published: 2019-08-19 03:02:30

This post is a simple introduction to the concept of lifecycle hooks in React! The focus here will be on what lifecycle hooks are and what they do. If you are already familiar with the topic, then you won't get much out of this. But, if you are a beginner, this post will help you understand what you might use lifecycle hooks for.

#Lifecycle
Lifecycle simply refers to how long a React component exists in the DOM. If you're unfamiliar with the basics of React components: https://reactjs.org/docs/react-component.html
Otherwise, I'll assume you understand the basics but want to know a little bit more....

After a component is created and inserted into the DOM, if it is at some point removed, then it is destroyed. This action ends its lifecycle. So, lifecycle simply refers to the rendering, re-rendering(however many times it happens) and eventual removal and deletion of a component.

#Hooks
A hook is a function/method/action that you can attach to a specific action/moment. The idea of a hook isn't unique to React. They're a concept that is widely used in coding. Basically the idea is that if something happens, you can attach some code to it. Example: If a component is rendered for the first time then do.....something().

#Some Basic React Lifecycle Hooks
1. componentDidMount()
   This hook lets you attach functionality to a component that has been mounted to the DOM. It's a good place in the lifecycle to make external requests for data that in turn update the component's state. In other words, sometimes you have components that need data that may take time to get. If the entire page is dependent on that data being loaded, everything will be paused until it happens. This hook allows you to do something like load static data and then update the component once the external data becomes available.
If you use gmail, you may be able to see something like this happening when your inbox loads. The inbox info will load, but the hangouts section in the bottom left corner will take a moment to populate...The element for hangouts exists, but it's blank, until the data has been gathered.

2. componentDidUpdate()
   If a component is ever updated, this hook allows you to activate functions that will respond accordingly. If a components props or state changes then you can use componentDidUpdate to make changes at that moment.

3. componentWillUnmount()
   This allows you to attach functions to a component at the time of its removal from the DOM. Suppose that a component is dependent on a background process in order to function correctly, like a clock being displayed. If that component's lifecycle ends, the process will remain running in the background. In this example, componentWillUnmount would allow you to attach code to the clock component to end the clock background process.

#Conclusion

That's all for my intro to lifecycle hooks! There are more hooks that can be used to increase the functionality/efficiency of your webpage/webapp, but these are a good place to start in order to start understanding the concept.!
Flask with OPC Server
Tags: flask, python, opc
Published: 2019-08-19 10:44:38

Hello Everyone, I am new to Python / Server development but experienced with PLC. I would like to create a Flask Python server to serve for a Mobile App / Web server as visualization for Data from PLC. I do not know how to connect Flask Server with another script and to exchange Data between it in full duplex. Is it possible to do it over Sqlite ? Can I write / read a data to the same DB from 2 scripts / servers ? I draw some explanation of my problem (first picture is a problem and a second one may be the possible solution ?/ thanks in advance for your experienced suggestions)
Easily Answer 5 Top Tech Interview Questions
Tags: vue, humor, interview
Published: 2019-08-19 10:39:34

---
title: Easily Answer 5 Top Tech Interview Questions
published: true
description: A template for answering 5 typical tech interview questions easily without either cramming or stumbling. NOTE: This is a personal project built with Vue.js. The project is not meant as being serious.
tags: vue, humor, interview
cover_image: https://redonion.se/wp-content/uploads/2019/08/project-interview-thumb-1.jpg
---

##What's this?
A template for answering 5 typical tech interview questions easily without either cramming or stumbling.

**NOTE: This is a personal project built with Vue.js. The project is purely for fun and not meant as being serious.**

Try it here: [interview.redonion.se](https://interview.redonion.se/)

##Background:
There sometimes seems to be a gap in between skills that are vetted in the job interview process, and the skills that are actually needed to manage the job advertised.

I'm simply having a little bit of fun with a few of the typical (sometimes not very effective) job interview questions that people in the tech industry have come across.

##How?
This is a Single Page Application (SPA), where the user stays on a page that dynamically reloads its content. 

Transition animations add to the native app like look and feel.

Wikipedia’s open API, some advanced mathematics, and a few lesser known HTML elements work together to form the main features of this little tool.

For more information about the technology used when building this app, have a look at [“Vue.js – Building an Interview App”](https://redonion.se/en/vue-js-building-an-interview-app/).
Azure pipelines: How to restore local nuget packages
Tags: azure, azurepipelines, dotnet, dotnetcore
Published: 2019-08-19 10:16:33

###Why would I want to restore local nuget packages?
_Please note that it is recommended to pack and [publish all packages] (https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/package/nuget?view=azure-devops#push-nuget-packages) and reference them by adding the URL as a new packageSource in your Nuget.config_

With that out of the way, there might be times when you have local `.nupkg` packages and wish to restore these packages during the build stage in your Azure pipeline. In my case, I had to quickly setup Azure pipeline for a client and they were still figuring out their private nuget package repository, so I set it up in such a way that it  was possible for them to add the new package repository URL when they were done.

###What problems will I encounter?
For the purpose of this article, I’ll be using the `azure-pipeline.yml` file method (instead of the GUI method). In your `azure-pipeline.yml` file, you might have something that looks like this:  {% gist https://gist.github.com/raznerdeveloper/f4dc769d3b12a598d43aaef77987ee97 file=before_restore.yml %}

With the above, if you only have referenced packages from api.nuget.org, the build pipeline should run fine. However, the moment you add references to local packages, you’ll get an error that looks like this: 
``` error NU1101: Unable to find package Company.Connect.Shared.Logging. No packages exist with this id in source(s): nuget.org Build failed ```

###How can I solve the problem?
That’s why you’re here, right? To solve this problem, you need to add an extra step to your azure-pipeline.yml file called the the `Restore` step before your `Build` step. Now your azure-pipeline.yml should look like this:

{% gist https://gist.github.com/raznerdeveloper/f4dc769d3b12a598d43aaef77987ee97 file=after_restore.yml %}

With this, your Azure pipeline first does a `dotnet restore` fetching all packages including the local ones before going ahead to `build`. At this time, during build, the local packages will then be available.

Thanks for reading :D
How do you discipline yourself? Idea and tools
Tags: discuss, productivity, planning
Published: 2019-08-19 10:08:56

---
title: How do you discipline yourself? Idea and tools
published: true
description: Tips and tools to improve productivity
tags: #discuss, #productivity, #planning
---

So lately I'm trying to be more organized and I'm trying to work more on personal projects (app, blogging, learning ...). But sometimes I just can't get my planning right And end up spending time doing the wrong stuff.
I will like to know how you keep motivated and focused on the right thing? what are the tools you use? What helped you in being more organized and focused.


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wd5mjhp449dw3zi6672w.jpg)
Difference between Bootstrap 3 and Bootstrap 4
Tags: bootstrap, difference, frontend, framework
Published: 2019-08-19 09:36:13

In this article, we’ll discuss What the Difference between Bootstrap 3 and Bootstrap 4. Currently, Bootstrap 4 is the latest version of Bootstrap. Bootstrap new version has come up with some significant changes, adding new components, eliminate others.

Probably Bootstrap is the first choice of front-end developers. As we know Bootstrap is a trusted open-source framework to develop a modern website and applications quickly. A most popular HTML, CSS, and JS framework for developing responsive websites.

Bootstrap provides the basic structure of HTML and CSS with predefined classes, which help you to build functionality quickly and easily with device responsiveness. Thus, It saves plenty of times. For example, no need to start developing from scratch.

<B>Main Differences between Bootstrap 3 vs Bootstrap 4</b>

<h3>1. Global Changes</h3>
Switched from LESS to SASS for source CSS files. Because SASS is more potent than LESS. For example, SASS has functionality like logical operators, loops, nested media queries, mixin, class extend, and many others. Thus, SASS gives better comfort. SASS help you to keep large stylesheets well-organized and makes it easy to share design within the project. You can also read about the <a href="https://sass-lang.com/documentation/">SASS official tutorial</a>.

<h3>2. Grid Systems</h3>
<h3>3. Navigation</h3>
<h3>4. Images and Media Objects</h3>
<h3>5. Tables</h3>
...
...
...
<h3>15. Other Components</h3>

Read full article on <a href="https://speedysense.com/difference-between-bootstrap-3-and-bootstrap-4/">here</a>
Software Architecture Patterns Essential - GDGBangla
Tags: architecture, patterns, gdgbangla
Published: 2019-08-19 09:10:53

---
title: Software Architecture Patterns Essential - GDGBangla
published: true
description: Software Architecture Patterns Essential - GDGBangla 
tags: #SoftwareArchitecture #Patterns #GDGBangla
---

## [Online Live Session](https://www.youtube.com/watch?v=TmGhGV0uC1w)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ww7ff8q6g9bnaz3nby5l.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3xss1cab141d3gsc1sx0.jpg)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f17jht0v2a20wpaaeesk.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cpbim6psy1uhmzrvhhui.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zfj2ix76e11yusjlebwn.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/18ryl9o825js15mnqmho.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jvldg6zkuo7uyprv4c0d.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pwsjeemb24x66jd6y3ov.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rqumehhfi73mpi529fxd.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/d4wk9xiw9t9nz5bmdm14.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/svpdai8qtxrm8iwpiv2s.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jg3ot7tmkyvcqyrfjy6g.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4fvk93yhf1m7fky0deor.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3d8ze6ghqwosc7mnxmvr.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nwe717vny6gh86owzftb.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ul7mt648t96fbvaau1rv.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g0amipuvk286674qjtls.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o0dzilkf2obhed38ycpv.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zvsqwo53wzo58s8n6h81.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/264y62kt9gx5eae76xk2.JPG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1zfk4wij14eoabsrmz08.JPG)
I released a new Visual Studio Code Extension for CSS files!
Tags: vscode, productivity, webdev, html
Published: 2019-08-19 09:05:55

Today I released a new extension for Visual Studio Code that works with CSS, Less, Sass and SCSS files.

With it you can see the initial values for every single CSS property.
It's an easy to use extension: you have to just hover your mouse point on a property and you see the initial value from that property.
It helps to understand issues on your UI or just to know the initial value of a property.

To document the properties, the extension uses the official database from Mozilla Development Network released on GitHub: https://github.com/mdn/data/blob/master/css/properties.json

The initial value property it's supported in (almost) every browsers.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/52qmi3ru3ot2rl07je7a.PNG)

Check it out on caniuse.com: https://caniuse.com/#feat=css-initial-value

Below you can see a working demo of the extension.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z82qc5asghiyac580dae.gif)

If you want to understand more deeply the initial value property is and what this property can do, follow this link to an interesting blog post: https://css-tricks.com/getting-acquainted-with-initial/

## Feedback
Please, share your feedback directly here or in the GitHub repository.

## Download

You can go on the Visual Studio Marketplace at this link: https://marketplace.visualstudio.com/items?itemName=emanuelebartolesi.css-initial-style-value or you can search in the extension panel in Visual Studio Code: CSS Initial Style Value.

## Source Code

You can find the source code of the extension on GitHub.
Add new features to this extension with your contribution!!!

https://github.com/kasuken/vscodeextensions/tree/master/css-initial-style-value


Thank you and happy coding!
Styled Web Components
Tags: javascript, webcomponents, css, showdev
Published: 2019-08-19 08:58:50

[Styled Components](https://www.styled-components.com/) for React is awesome.
Why can't we style web components to?

With [masquerades](https://github.com/alfredosalzillo/masquerades) we can do that.

## Pros
With styled web components:
* We can write CSS in js files, using tagged string
* we can write reactive CSS based on props value
* no need to think about unique class names or id
* we can style native web components and custom web components
* generated styled-web-components can be used inside light and shadow root, without manual manage stylesheet adoption

## Example
Create a styled Native Button:


```javascript
import styled from 'masquerades';

// Create the button
const StyledButton = styled.button`
  background: ${({ disabled }) => (disabled ? 'grey' : '#f1c40f')};
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font: 24px "Margarine", sans-serif;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
  ${({ disabled }) => disabled && styled.css`
    border-radius: 15px;
  `}
`
// set up observedAttributes
  .observeAttributes(['disabled']);

// Define the styled button as extension of the native button
customElements.define('styled-button', StyledButton, {
  extends: 'button',
});
```

and use it

```html
<button is="styled-button">Styled Button</button>
<button is="styled-button" disabled>Styled Button</button>
```

## In the end

Styled components are awesome and are so useful why not use them whit web-components?
Google Container Engine ”Essential”- GDGBangla
Tags: gdgbangla, googlecloud, gke, docker
Published: 2019-08-19 08:21:42

---
title: Google Container Engine ”Essential”- GDGBangla
published: true
description: Google Container Engine ”Essential”- GDGBangla
tags: #GDGBangla, #GoogleCloud, #GKE, #Docker
---

## [Online Live Session](https://www.youtube.com/watch?v=NoFVDnkHmLs)


![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide1.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide2.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide3.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide4.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide5.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide6.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide7.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide8.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide9.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide10.PNG)

![Google_Container_Engine](https://github.com/mesadhan/gdg-bangla-workshop/raw/master/slide/Slide12.PNG)

## References:
- [Google Cloud Overview](https://cloud.google.com/docs/overview)
- [Products](https://cloud.google.com/products)
- [Cloud-platform-services](https://cloud.google.com/docs/overview/cloud-platform-services)
- [Kubernetes-basics](https://kubernetes.io/docs/tutorials/kubernetes-basics)
- [Docker Download](https://www.docker.com/products/docker-desktop)
- [Docker Hub](https://cloud.docker.com)
 



#  Run and Test Live Demo Application

- [ ] First Install Docker Application.
- [ ] Now, follow below steps,

> Download Application

    $ git clone https://github.com/mesadhan/blog-gdg-bangla.git

> Running multi-container in single command in the background

    $ docker-compose up -d
    
> install libs, migrate application tables and seed data

    $ docker-compose run --rm blog-gdg-bangla composer install
    $ docker-compose run --rm blog-gdg-bangla php artisan migrate:fresh --seed


 
>  Open your browser and check your application result
- [localhost:8000](http://localhost:8000)
- [localhost:8000/getName](http://localhost:8000/getName)


>  Stop running multi-container
    
    $ docker-compose down


> Thanks, Everyone.!
A portfolio template made with Gatsby 
Tags: javascript, gatsby, career
Published: 2019-08-19 08:16:35

A while back I came across a cool project that allows you to quickly create your own portfolio site:
https://github.com/imfunniee/gitfolio

I've been using Gatsby recently and I'm a big fan. I decided to port gitfolio over to use gatsby as its a perfect fit for a static site generator.

Clone the repo to get started on your own:
https://github.com/collinstommy/gitfolio-gatsby

Demo:
https://collinstommy.github.io/gitfolio-gatsby/
Magento 2 Ajax Add to Cart Extension
Tags: magento, php, webdev
Published: 2019-08-19 07:35:54

This [Magento 2 Ajax Add to Cart](https://www.mageants.com/ajax-add-to-cart-for-magento-2.html) extension allows the customer to add products to their cart without refreshing the page. It configures the number of products, type, and its block title, etc. It also used to promote related items. This extension comes up with the smoothest and fastest add to cart process. It helps in displaying stylish Magento 2 AJAX cart pop-ups. It configures the animation effects as well as the time for the pop-ups.  

**Key Features**

Magento 2 Ajax Add to Cart extension configures the things to customize your popups. 
By configuring your selling options, it helps you in delivering a better shipping experience. 
It designs your Magento 2 Ajax shopping cart on your online store.
It customizes your pop-ups with different positions, flying image effects, and colors.