teleren/devto huggingface dataset:
What does your week look like?
Tags: watercooler, webdev, dotnet, freelance
Published: 2020-04-15 01:20:57

---
title: What does your week look like?
published: true
description: Weekly routine during Covid-19
tags: watercooler, webdev, dotnet, freelance
---
I'd like to walk you through my current week and would love to hear about yours.

## Variables
1. 2 small children, a toddler and a student which is _now_ being homeschooled.
2. Part-time Development Manager due to scheduling conflicts with variable #1 and company budget.
3. Freelancing to make up for the loss of salary due to variable #2.


## Daily Morning Routine
Most days start the same, hitting snooze 2 or 3 times and _finally_ rolling out of bed at 07:55.  I open the blinds in my "office", which was once the guest room, and I start the coffee machine. While I sip away at the fresh cup of joe :coffee:, I get the laptop booted and start clearing out the inbox.


## Monday - Friday
I start the week by planning and setting the goals to achieve for the week.  I’ll check in on the team, answer any questions, update Jira tickets and handle the occasional support requests.  The rest of the work week is providing guidance, making sure tasks are on track and executing on my action items.

After clocking out around noon we have a family lunch and afterwards we prepare for homeschool.  We’ll browse through the class schedule and assignments, so my wife and I can be prepared to guide our child.  Luckily our school district is proactive and has provided the necessary resources to help guide us through this _new world_.  Depending on the daily chaos of having 2 children at home, my wife and I take turns on homeschooling and entertaining our toddler to not distract the other :stuck_out_tongue:.

On a good day, before sunset, we go on a walk around the neighborhood to help relax and wear down the kids :wink:.

In the evenings, once the kids are in bed, it’s time to clock in for the 3rd shift :clock8:; freelancing and prospecting.  Sites like [Upwork](https://www.upwork.com/fl/claro) and [Moonlight Work](https://www.moonlightwork.com/app/users/5137) have made this possible and I’m grateful to have a skill set that has decent freelance pay.


## Weekend
Saturdays are reserved for family, :no_entry_sign: no work allowed :no_entry_sign:!  Sundays are for freelancing/prospecting and winding down.  If we are lucky enough, we will watch a show or movie together as a family.


## Conclusion
For better or worse, things have changed in our lives during the Covid-19 pandemic.  For me it’s brought family unity and the chance to work on freelance projects.  Stay safe out there and take care of each other.
HOW TO SETUP MSSQL ON MAC/LINUX OS USING DOCKER AND AZURE DATA STUDIO
Published: 2020-04-15 10:39:37

Ensure you have docker setup on your machine. Follow this link to setup docker on your machine [docs](https://docs.docker.com/docker-for-mac/install/).

Pull the mssql ubuntu image from the docker hub.

`sudo docker pull mcr.microsoft.com/mssql/server:2019-CU3-ubuntu-18.04`

After that then enter the following command

`sudo docker run -e "ACCEPT_EULA=Y" -e "SA_PASSWORD=<YourStrong@Passw0rd>" \
   -p 1433:1433 --name sql223 \
   -d mcr.microsoft.com/mssql/server:2019-CU3-ubuntu-18.04
`

Ensure you replace `<YourStrong@Passw0rd>` with your password

-p indicates your port
--name specifies the name of your container

Run the command below to view all containers currently running on your machine.

`sudo docker ps -a`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4racpb360iz9p3zvf8ue.png)


The GUI tool we'll be using is [Azure Data Studio](https://docs.microsoft.com/en-us/sql/azure-data-studio/download-azure-data-studio?view=sql-server-ver15)

Follow the link and download the azure data studio.

currently, these are our details.
Password: This is what we declared in SA_PASSWORD as earlier.
Username: this value is `sa`
Server: localhost

Then fill out these details in Azure data studio.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eqp9uq7v9juch2ctr53d.png)

Lastly, since we might want to create a new database in the azure data studio
Enter the following in the `new Query section` of the dashboard.

```
IF NOT EXISTS (
   SELECT name
   FROM sys.databases
   WHERE name = N'DemoDB'
)
CREATE DATABASE [DemoDB]
GO
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rv66meq4mslnf5kf2a1w.png)

The above command creates a database called DemoDB. you can connect to this database and run various actions like migrations.

To connect to the DemoDB database we created, below is a typical connection string.

```
      String connectionString = @"
      Server=127.0.0.1;
      Database=DemoDB;
      User Id=sa;
      Password=yourPassword
   ";
```
Deploying a MERN stack
Tags: mern, deploy, heroku, aws
Published: 2020-04-15 15:27:30

Solution 1: Heroku (https://www.heroku.com/)

Positives: Easy set up. Uses Docker containers within Amazon EC2 instances so that you only pay for what you use (PAAS).
Negatives: Costs £7 a month. Free tier times out your container after 30 mins of inactivity.



Solution 2: Amazon AWS EC2 Linux Instance.

Positives: This is a full machine (not a container) so you can configure it to your hearts content. This is available in the Amazon Free Tier for 12 months.

Negatives: Costs £14 a month after the first 12 months. You have to set up the server yourself, but you would be surprised how easy this is to do with NGINX or Apache. This article shows you how to set one up using NGINX https://link.medium.com/SvBPqJdXH5


Solution 3:
Amazon Lightsail

Positives: £3.50 a month so cost effective. MERN environment and apache server already set up. 

Negatives: A restricted machine - but will allow a vast majority of what you need for Web Development. It is essentially streamlined EC2 machine with everything you should need for web development already set up.
What's the story behind your first money made with software?
Tags: software, discuss, memories, career
Published: 2020-04-15 17:17:11

---
title: What's the story behind your first money made with software?
published: true
description: Do not be shy! Tell us how you first got into the world of commercial software?
tags: software, discussion, memories, career
---

Can you remember the very first person **brave enough** to pay for a piece of code made by you? 🙆‍♂️

What was it that you have done? 

Was it really bad?
...or were you bursting with pride? Both perhaps? :) 

You simply cannot be bothered with material goods and never made a single penny with software? I want to hear from you *too*.

--- 

My first time took place roughly around 11 years ago - can you remember when these money-management, space-war browser games like OGame were on fire? No? Well, that's fine. 😬

I was learning PHP at the time and eventually I conceived a dream - my very own OGame clone, only better! 💪
I spent couple of weeks putting together a truly horrible codebase and went on to publish it on a free hosting. 
Needless to say, it was not resembling anything like a completed game.

Spamming various message boards I managed to find around 100 players to join the game (and put the free server down as a result) but what happened next shocked me... (no clickbait)

I received an email from someone offering to buy the game from me as it seemed *"promising"*! 🤯
Now, that was something new to me - I thought for couple of minutes and accepted the whopping offer of the equivalent of **$40**... 

...hey, for a regular teenager from Eastern Europe that was a **pile of cash** at the time. It went quick from there - I got paid by wire transfer, sent the source files via email (who would have thought one can have a git repo) and that was it - never heard of it again. 😭

---

🎼 🎷 ...Money for nothing, and chips for free... 🎧

---

Tell me your story! 🔥 I am sure there will be a few fun, *brutal* or unusual memories to share.
How do you handle database migrations ?
Tags: database, sql, help, ask
Published: 2020-04-15 17:25:54

At work, we use flyway to manage our database migrations. We have multiple test environnement and multiple staging version of our applications. Every Sunday, a script download and install a fresh database backup from the prod. How do you handle your migrations in this scenario ? Every time you install a new version, you downgrade to the prod version ?
How to handle surprise changes within the project 😌🙌
Tags: webdev, beginners
Published: 2020-04-16 03:42:11

---
title:How to handle surprise changes within the project 😌🙌
published: true
description: 
tags: help, webdev, beginners
---
_Web development field has been growing over time, the community frequently contributes and strengthens new and early technological generations, each person, each taste is divided into back or front, each a fundamental part of the other, darkness and light as fundamental as the same existence._

If you do front-end development, you must understand that the needs that are established by the design team are the most important to guarantee a correct, excellent and primordial user experience providing clear contents and designs that fit the requirements. This seems easy and as end users or consumers we usually categorize the pages depending on its design and web usability, which includes the ease with which a user navigates through a website; to achieve this you must build a simple, intuitive and fluid navigation. It is even possible to say that it is of little use to have a good design if the texts are very long or not very explanatory.

For those who are independent developers, whose approach to the client is constant and who do not have any knowledge of the design or internal functioning of a website, __do not despair__, they want both the project they commissioned and their tastes to be reflected in the website they want. The changes they will ask you for as the project develops will increase, some changes will be simple while others will be tedious and unnecessary, _in these cases patience will be a great companion_, try to mitigate, if not eliminate, the discussions that arise from changes in functionality and design, either by color, by position, by size, and so on. This type of changes will be present throughout the life cycle of the project.

I can assure you that those moments will be very impertinent, but that is why must be clear from start to end, explaining to the client in a common way the steps that you are going to follow, the life cycle that you will carry in the project, showing him periodic progress and letting them know what you are going to develop after showing what you already achieved. It is important to establish documents where you specify how you will design the page (look and feel) so the client knows how it will look at the end, that way, your process will be very comfortable. Do not be impatient, at the beginning this can be annoying, but it will help you build a skill that will increase your professional capacity.

##Go for it!😉
How do I freeze columns in Data Table?
Published: 2020-04-15 18:00:21

As the headline says, I would like to freeze columns in my mat-table... I would like to write the function myself instead of using [sticky] or css.

I already designed a small function where the selected column is set to disabled... I would like to freeze the behaviour and the selected column, can you please help me?

// MyInterface
export interface SusaColumn {
  attribute: string;
  name: string;
  mobile: string;
  object?: any;
  frozen?: boolean; //
}

private displayedColumns: SusaColumn[] = [
    { attribute: 'accountNumber', name: 'Konto', mobile: 'Konto:', object: null, frozen: false },
    { attribute: 'name', name: 'Erlöse / Kostenarten', mobile: 'Erlöse / Kostenarten:', object: null, frozen: false },
    { attribute: 'kag', name: 'KAG', mobile: 'KAG:', object: null, frozen: false }

  ];

private freezeColumn(attributeName: string) {
    if (attributeName) {
      const displayedColumn = this.displayedColumns.find((c) => c.attribute === attributeName);
      if (displayedColumn) {
        displayedColumn.frozen = !displayedColumn.frozen; // here i make the column disabled
        const columnIndex = this.columns.findIndex((c) => c === attributeName);
        if (columnIndex > -1) {
          this.columnFilters.controls[columnIndex] = new FormControl({ value: '', disabled: displayedColumn.frozen });
        }
      }
    }
  }
Build an Event Planner App with Vue.js, Firebase, and Auth0's Passwordless
Tags: javascript, vue, firebase
Published: 2020-04-15 18:59:51

---
title: Build an Event Planner App with Vue.js, Firebase, and Auth0's Passwordless
published: true
description: Quickly build an event planner application that utilizes Auth0's Passwordless feature!
tags: #javascript #vuejs #firebase
canonical_url: https://auth0.com/blog/build-an-event-planner-app-with-vuejs-firebase-and-auth0s-passwordless/
---
TL;DR: To date, passwords and passcodes remain the most used means of gaining access to our protected accounts on the online platforms we love. However, if you are like me with loads of accounts across various online platforms, remembering all passwords can quickly become a herculean task mentally especially when certain online platforms require you to provide strong passwords with special characters, capitalized words, and numbers like you're trying to gain access to Fort Knox. Wouldn't it be wonderful not to have to remember passwords when logging into an application? That is the type of application we will be building in this article.

[Read on 📖](https://auth0.com/blog/build-an-event-planner-app-with-vuejs-firebase-and-auth0s-passwordless/?utm_source=dev&utm_medium=sc&utm_campaign=vuejs_passwordless)
Aprendendo do zero a criar uma aplicação desktop com JavaScript, Electron Js e Vue.Js
Tags: beginners, javascript, vue
Published: 2020-04-15 23:36:28

> Fonte de Estudos: Casa do Código
> Livro: VueJs Construa Aplicações Incríveis

- Instalando o CLI do Vue.Js em modo Global
```javascript
npm i -g @vue/cli
```

- Criando um projeto Vue.Js
```javascript
vue create <nome do app>
```

- Iniciando um servidor no Vue.Js
```javascript
npm run serve
```

- Na instalação vai aparecer a pergunta abaixo. Eu costumo deixar em "default" e pressionar ENTER.
```sh
Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)  
  Manually select features 
```

- Logo em seguida vai começar a instalação do repositório git e a instalação do CLI plugins conforme abaixo.
```sh
Vue CLI v4.3.1
✨  Creating project in /mnt/c/Users/Fantasma/Desktop/web/VueJs/teste.
🗃  Initializing git repository...
> ejs@2.7.4 postinstall /mnt/c/Users/Fantasma/Desktop/web/VueJs/teste/node_modules/ejs
> node ./postinstall.js

added 1195 packages from 852 contributors and audited 25249 packages in 292.71s

40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

�🚀  Invoking generators...
�📦  Installing additional dependencies...

added 54 packages from 39 contributors and audited 25532 packages in 54.138s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project teste.
�👉  Get started with the following commands:
 
 $ npm run serve
```

- Acesse a pasta do projeto criado.
```javascript
$ cd teste
```

- Instalando a Lib Vuetify (Eu deixo como Default(recomendado))
```javascript
vue add vuetify
``` 

- Instalando o electron ao seu projeto 
```javascript
vue add electron-builder
```

Obs: Quando estiver instalando vai fazer as seguintes perguntas abaixo. Usei a versão 5.0.0

```javascript
? Still proceed? (y/N) Yes
? Choose Electron Version (Use arrow keys)
4.0.0
5.0.0
6.0.0
```
Patrones de diseño en #javascript - Singleton
Tags: javascript, design, designpatterns, codenewbie
Published: 2020-04-16 06:53:29

El patrón **Singleton** está diseñado para restringir la creación de objetos pertenecientes a una clase. **instancia única**.

Veamos un ejemplo:
```javascript
const alumnos = {
     // Todos los alumnos
     listaAlumnos : [],

     // Obtener un alumno
     get: function(id) {
          return this.listaAlumnos[id]
     }, 

     // Crear un alumno
     crear: function(datos) {       
          this.listaAlumnos.push(datos);
     }, 

     // Listar todos los alumnos
     listado: function() {
          return this.listaAlumnos;
     }
}

const infoAlumno = {
     nombre: 'Jesus', 
     edad: 30
}
const infoAlumno2 = {
     nombre: 'Juan',
     edad: 20
}

alumnos.crear(infoAlumno);
alumnos.crear(infoAlumno2);

const listado = alumnos.listado();
console.log(listado);
//(2) [{…}, {…}]
//0: {nombre: "Jesus", edad: 30}
//1: {nombre: "Juan", edad: 20}

const alumno = alumnos.get(0);
console.log(alumno);
//{nombre: "Jesus", edad: 30}
```

**Singleton permite la creación directa de objetos.**
Uno de los patrones más comunes y fáciles de usar en proyectos pequeños.
Introduction: styled-off-canvas
Tags: javascript, react, styledcomponents
Published: 2020-05-28 10:49:14

As a big fan of [styled-components](https://www.styled-components.com/), I always had the need for an Off-Canvas or Burger-Menu in my projects. 

When working with styled-components, it feels unpleasant to use one of the plain CSS based menus. You have to import `.css` files, you probably have to overwrite some styling, your styling is divided in 'two worlds': plain CSS and styled-components. So I wrote [styled-off-canvas](https://github.com/marco-streng/styled-off-canvas).

## Demo

Yes, there is a [DEMO](https://styled-off-canvas.netlify.app/)

## Components

[styled-off-canvas](https://github.com/marco-streng/styled-off-canvas) comes with three components: `<StyledOffCanvas />`,` <Menu />` and `<Overlay />`.

`<StyledOffCanvas />` is a wrapping component which provides all settings/properties.

`<Menu />` is the off-canvas menu itself. You can pass anything you want as children (e.g. styled list of react-router links)

`<Overlay />` is an optional component which renders a semi-transparent layer above your app content.

## Implementation

This is a simple example of how to use [styled-off-canvas](https://github.com/marco-streng/styled-off-canvas). You can also find a code example [here](https://github.com/marco-streng/styled-off-canvas/tree/master/example).

```jsx
import React, { useState } from 'react'
import { StyledOffCanvas, Menu, Overlay } from 'styled-off-canvas'

const App = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <StyledOffCanvas
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
    >

      <button onClick={() => setIsOpen(!isOpen)}>Toggle menu</button>

      <Menu>
        <ul>
          <li>
            <a onClick={() => setIsOpen(false)}>close</a>
          </li>
          <li>
            <a href='/about'>About</a>
          </li>
          <li>
            <a href='/contact'>Contact</a>
          </li>
        </ul>
      </Menu>

      <Overlay />

      <div>this is some nice content!</div>
    </StyledOffCanvas>
  )
}

export default App
```

## Customization

There are a lot of properties to customize the menu, like for example: colors, position, size or transition-duration.
Additionally you can use the styled-components `css` property on every component.

## Plans for the future

[styled-off-canvas](https://github.com/marco-streng/styled-off-canvas) should stay lightweight and simple. So I don't want hundrets of options and possibilities. Currently I'm thinking about adding some transition to the page content. 

## Suggestions or feedback
If you got any kind of feedback, suggestions or ideas - feel free! Write a comment below this article or fork/clone from GitHub. There is always space for improvement!
Specify XCode version for GitHub workflows
Tags: xcode, github, workflows
Published: 2020-04-16 17:02:42

---
title: Specify XCode version for GitHub workflows
published: true
description: The build process on GitHub failed when I used the XCTUnwrap function. This feature was added in XCode 11. I updated the workflows yml file to specify the XCode version.
tags: xcode, github, workflows
canonical_url: https://monicagranbois.com/blog/swift/specify-xcode-version-for-github-workflows/
---

I wrote a unit test that used the [XCTUnwrap](https://developer.apple.com/documentation/xctest/3380195-xctunwrap) function. This feature was added in XCode 11 and 

> "Asserts that an expression is not nil and returns the unwrapped value." 

However, when I pushed my code to GitHub, the build broke with the following error.

> error: use of unresolved identifier 'XCTUnwrap'

<!--more-->

To fix this I updated my `.github/workflows/swift.yml` file to include the XCode version.  I found the solution from [this GitHub Community Forum Post](https://github.community/t5/GitHub-Actions/Selecting-an-Xcode-version/m-p/31105). You can specify the version in the `env` using the `DEVELOPER_DIR` tag. GitHub maintains a list of available XCode versions [here.](https://github.com/actions/virtual-environments/blob/master/images/macos/macos-10.15-Readme.md#xcode)


Here is what my `swift.yml` file looks like. This is for a swift package that is included in other iOS projects.


```yml
name: Swift

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
env:
  DEVELOPER_DIR: /Applications/Xcode_11.4.app/Contents/Developer

jobs:
  build:

    runs-on: macos-latest

    steps:
    - uses: actions/checkout@v2
    - name: Build
      run: swift build -v
    - name: Run tests
      run: swift test -v
```
Open source in 2020
Tags: opensource, in, 2020, githubteam
Published: 2020-04-16 19:55:14

Open Source Projects
For over 20 years the Open Source Initiative (OSI) has worked to raise awareness and adoption of open source software, and build bridges between open source communities of practice. As a global non-profit, the OSI champions software freedom in society through education, collaboration, and infrastructure, stewarding the Open Source Definition (OSD), and preventing abuse of the ideals and ethos inherent to the open source movement.














Open source works
Inspiration
Today the IT era is running and generation is very interested in working remotely to the home

What it does
The huge platform for the Tech geeks and the developers related to IT and data science and development to work remotely and earn the money

How I built it
It is a large story starting with my whole documentation and the needed and the resources that I want to do that project and what understanding to do .working on the different libraries of the java and scala on a single platform to reduce the hard code and make understandable approach for everyone .and working more efficiently as possible

Challenges I ran into
there were big changes that I faced during the designing face and after the design it was very tuff to implement all the interfaces and use multi-purpose API and lib to do smoothly and the backend was very horrible job that was the biggest challenge after it was the face of testing and reducing the chances of the bug and make as proficient as possible

Accomplishments that I’m proud of
today I have a global platform especially for Pakistani to work remotely and earn as they want on their projects without any difficulties all the payments and the resources and tools are free

What I learned
I can do anything if want to do nothing is impossible

What’s next for FREEMEET APPLICATION
I will try to give my mega project to digital Pakistan program as they can especially work on my project on for the development of my beloved country Pakistan

Built With
javafxml
jquery
location api
mongodb
netbeen
scala
springboot

A description of the project and the works presented.

Let’s build something together.
Get in touch!