teleren/devto huggingface dataset:
My javascript / tech / web development newsletter out later today 26-12-2020
Tags: javascript, tech, webdev, discuss
Published: 2020-12-26 03:13:37

---
title: My javascript / tech / web development newsletter out later today 26-12-2020
published: true
description: 
tags: javascript, tech, webdev, discuss
---
Another edition of my weekly newsletter out later today, lots of great javascript / tech / web development links.

Sign up to have it automatically sent to your email inbox every weekend.

https://markjgsmith.substack.com
CSS Flexbox: align-items
Tags: css, beginners, todayilearned, codenewbie
Published: 2020-12-26 02:16:21

Hello Fellow Codenewbies 👋

By default, flex is stretching the height of the items based on the highest item.

![default.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608035336738/hz54YX3AS.jpeg)

But when we need to, we can control the vertical position (*cross axis*) of the items with [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).

---
# Controlling The Vertical Position of Flex Items

`align-items` property is good to be applied when we have an element that has background color/shadow/borders so we can see the effect.

## The Values of `align-items`

### flex-start
It aligns the items on the ***top*** (start) of the flex container, and the height of each item is maintained as it is.
⭐ This value is used most often to control the vertical position of flex items.

![flex-start.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608113330122/VurycDF5d.jpeg)

### center
It aligns the items vertically on the ***center*** of the flex container.

![center.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608113771712/j6HQ_ZxPX.jpeg)

### flex-end
It aligns the items on the ***bottom*** (end) of the flex container.

![flex-end.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608113936114/Gu3AruN1V.jpeg)

### stretch
This is the **default** value of `align-items`.
It stretches the height of the items based on the highest item.
Usually, it is used if we need to reset or override an applied value.

![stretch.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608114514346/lMZW16-81.jpeg)

### baseline
It aligns the items ***based on the first line of texts*** to be in line with each other.
This value is barely used and we only can see the effect when we have elements with text in them.

![baseline.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608114837348/mBzJoUMYH.jpeg)

#### Playground
I provide here the Codepen for you to play around with.

{% codepen https://codepen.io/adiati/pen/eYdZYWO %}

## Conclusion

- `align-items` property works with *cross axis* (vertical position) and is used when we want or need to control the vertical position of flex items in a flex container.

- The values of `align-items` that we need to know are:
  - flex-start
  - center
  - flex-end
  - stretch (***default***)
  - baseline
Laravel Sanctum  No 'Access-Control-Allow-Origin'
Published: 2020-12-26 01:59:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7alk3xds8fl4v34wig0k.jpg)

Hello, i have this error, I dont know if my configuration is bad, or is correctly. 
File config\cors.php

```
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => [
        'api/*', 
        '/*',
        'register',
        'sanctum/csrf-cookie', 

    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [''],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

```
config\sanctum.php
```
  'stateful' => explode(',', env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost, 127.0.0.1'
       // 'localhost,localhost:8080,127.0.0.1,127.0.0.1:8080,::1'
    )),
```
Kernel.php
```
  protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];
```

Model user.php I add HasApitokens and my file .env i have:
```
SESSION_DOMAIN=localhost:8080 
SANCTUM_STATEFUL_DOMAINS=localhost:8080
```
I use too only localhost, in my project file main of vuejs i have this:

```
Vue.config.productionTip = false
Vue.prototype.$http = axios
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000/'

Vue.use(VueCountryCode);

new Vue({
  router,
  vuetify,
  store,
  render: h => h(App)
}).$mount('#app')
```
and in the methods to send the form i have this
```
 sendRegister(){
         this.$http.get('sanctum/csrf-cookie').then(() => {
           this.$http.post('register', this.form).then(res=>{
              console.log(res)
           })
        });
      },
```
And i have the error that show you in the images, what is my error in this configuration :/
Can a Wallpaper Break Your Android Phone?
Tags: android
Published: 2020-12-26 01:57:09

# Summary

A bug found in android color space converter software that causes the conversion for a certain pixel of a photo buggy and causes the converter software to crash. The issue becomes more critical if you tried to set this picture as a background, thus the converter will be triggered each time and also fail, so basically, you will stuck in an infinite loop of failures without fault management. In the end, you will have to erase/wipe your phone to restore its functionality.

# Fix?
In Android 11 this should be fixed as per the video.

# Link to the Video 

https://www.youtube.com/watch?v=iXKvwPjCGnY
4G Vinaphone - Trang chủ dịch vụ 4G VinaPhone | 4GVinaPhone.Com

Published: 2020-12-26 01:52:18

4GVinaphone.Com gói cước 4G là website cung cấp thông tin dịch vụ 4G Vinaphone trên toàn quốc, các thông tin khuyến mãi, sản phẩm dịch vụ Vinaphone mới nhất 2021

Thông tin liên hệ:
Địa chỉ: 270 Lý Thường Kiệt, Phường 14, Quận 10, Thành phố Hồ Chí Minh
Phone :0911160160
Email :4gvinaphone.dichvu@gmail.com
Santa's Regex to Town
Published: 2020-12-26 00:54:59

To the bewilderment of my friends and co-workers, regex (or regular expression)is one of my favorite things in the world. Not only is writing them fun (think ciphers!), but they can be extremely useful as well! Today we're going to see how we can use it to help out our pal Santa Clause. 

Before we get started... What is regex?: [a sequence of characters that define a search pattern](https://en.wikipedia.org/wiki/Regular_expression). A lot of programming languages either have regex built in or usable through libraries. Today we're going to use Ruby!
  - Why is it useful?: When we use regex to define a search pattern, we can save ourselves a ton of time. It's efficient to write and efficient to run. 

We all know that Santa Clause is an incredibly busy man. His eyesight isn't what it used to be though. (He still knows who has been behaving though!) This year the elves forgot to split the list into two, one for nice children and one for naughty. Santa needs our help to see who all of the good children are before he heads out to deliver toys.

Let's say this is our list of children: 
`all_kids = "Ronnie - Nice, Candice - Nice, Michael - Naughty, Elsa - Naughty, Blake - Nice, Jer - Nice, Helen - Naughty, Anthony - Nice, Nicholas - Naughty, Joseph - Naughty"`

Santa would like to know how many nice children are on the list this year so he can make sure that he's got enough time to get to everyone.

We can use Ruby's `.scan` method for this one. It will return an array of each occurrence of our search pattern. 
```
def nice_length(kids) 
  kids.scan(/\b(nice)/i).length
end 
```
`nice_length(all_kids)` would return `5`. Neat! 

Santa asks us to give him a list of only the nice children so that he can make sure all of the gift tags are correct.
`all_kids = ["Ronnie - Nice", "Candice - Nice", "Michael - Naughty", "Elsa - Naughty", "Blake - Nice", "Jer - Nice", "Helen - Naughty", "Anthony - Nice", "Nicholas - Naughty", "Joseph - Naughty"]`

```
def nice_list(kids)
  kids.map{|kid| kid if kid.match(/\b(nice)/i)}
end
``` 

Running this method returns this array: `["Ronnie - Nice", "Candice - Nice", "Blake - Nice", "Jer - Nice", "Anthony - Nice"]`

Awesome! We just made Santa's job way easier. Hopefully this keeps us on the nice list for next year!

Here are two great resources for practicing regex: [Rubular.com](https://rubular.com/) and [Regular-Expressions.info](https://www.regular-expressions.info/).
Lojinha WoMakersCode! 🦋
Tags: community, meetup
Published: 2020-12-26 00:48:51

---
title: Lojinha WoMakersCode! 🦋
published: true
description: Conheça a lojinha da WoMakersCode e colabore com os nossos projetos de apoio à mulheres na tecnologia!
tags: community, meetup
cover_image: https://images.unsplash.com/photo-1468421870903-4df1664ac249?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3052&q=80
---

A WoMakersCode é uma comunidade de tecnologia que oferece diversos projetos de capacitação gratuitos para mulheres, como cursos, mentorias e meetups ([veja mais sobre nosso trabalho](https://womakerscode.org/projetos)) e para nos ajudar a manter nossas atividades, abrimos a lojinha para você que sempre que sempre quis uma camiseta nossa e também ajudar nossos projetos 🙌

Nossa coleção de **#brusinhas**, é confeccionada em Algodão Fio 30.1 penteado, um tecido super confortável, que não faz bolinhas e não desbota. As compras podem ser feitas por Mercado Livre (que já calcula o valor do frete), PicPay ou PIX. No caso de escolher PicPay ou PIX, você deverá enviar um e-mail para `info@womakerscode.org` com o seu CEP, para que possamos calcular o valor do frete (PAC ou Sedex).

Na compra de uma blusa, você ganhará um adesivo de brinde. Na compra de 2+ mais blusas, você ganhará adesivo, bottom e um bloquinho de anotações. Promoção por tempo limitado!

## Baby Look Preta `Women + Tech = <strong>`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ys59rdfp8oj8xyy0phwp.png)

[Disponível no Mercado Livre neste link](https://bit.ly/3rt8IaW)

## Camiseta Branca `This Girl Can`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sv8vnzm7q1s2trinnuij.png)

[Disponível no Mercado Livre neste link](https://bit.ly/3w8mIKO)

### Fique por dentro
Se você tem interesse em conhecer mais sobre nosso trabalho, acesse nosso site [womakerscode.org](https://womakerscode.org/), visite nossas redes sociais, [GitHub](https://github.com/womakerscode) e canal do [YouTube](https://www.youtube.com/womakerscode).
First Impressions ANNE PRO 2
Tags: mechanickeyboards, keeb
Published: 2020-12-26 00:42:22

What better way to test a new keyboard than actually typing on it? My friend lent me his Anne Pro 2, and so far, this little keyboard has amazed me with its power.

It uses brow switches and four fully customizable layouts, and the possibilities are endless. Its compact size makes it perfect for travel or working-from-home adventures into different rooms (aka the kitchen.)

I saw tones of tutorials where people share their setups for the different layers. Still, I first need to get used to the super tall keys it has compared to my Apple Magic Key before venturing myself with configurations.

That's it for me, guys! As I said, this was my very first test on the new keyboard, and so far, my impressions are excellent.
Typescript interface file name conventions
Tags: discuss, typescript
Published: 2020-12-26 00:25:15

Ok, so I have read out there that _we shouldn't use the prefix `I` in our interfaces_. I like the prefix `I` for my interfaces, but I can avoid using it if it is a "best practice". But what about file names? If you have a `Foobar` interface, what should be the name of the file? `foobar.ts`? `foobar-interface.ts`?
Deploy a site to GitHub Pages from multiple branches using GitHub Actions
Tags: todayilearned, web, github
Published: 2020-12-27 02:25:21

---
title: Deploy a site to GitHub Pages from multiple branches using GitHub Actions
published: true
date: 2020-12-26 00:00:00 UTC
tags: TIL,Web,GitHub
canonical_url: https://tigeroakes.com/posts/til-github-pages-two-branches-github-actions/
cover_image: https://tigeroakes.com/posts/til-github-pages-two-branches-github-actions/banner.png
---

I’ve been moving many repositories over to GitHub Actions to automate deployment and testing. One of my projects uses GitHub Pages, but includes data from two different branches:

- The `main` branch contains the bulk of the website
- The `app-challenge` branch contains a second site that appears under a `/heleon/` path

Using GitHub Actions, I set up the site pull from both branches before deploying. The script looks like this:

```
name: Deploy from two branches

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # Checkout the `main` branch
      - uses: actions/checkout@v2
      # Install Node.js
      - uses: actions/setup-node@v2-beta
        with:
          node-version: '14'
      # Install npm dependencies
      # (similar to npm install)
      - run: npm ci
      # Run code to build the site files inside the `big-island-buses` folder
      - run: npm run build

      # Checkout the `app-challenge` branch
      - uses: actions/checkout@v2
        with:
          ref: app-challenge
          # Put the checked out files inside the `big-island-buses/heleon` folder
          path: big-island-buses/heleon
          clean: false
      # Delete the .git folder from `big-island-buses/heleon`
      # This turns the files into a plain folder instead of a git repository
      - run: rm -rf big-island-buses/heleon/.git
      # Deploy the `big-island-buses` folder to GitHub Pages
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: "./big-island-buses"
          user_name: 'github-actions[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'

```

The first sequence of steps checks out the `main` branch, installs Node.js and npm dependencies, then runs the build script. The files created by the build script end up in a folder named `big-island-buses`.

The second sequence checks out the `app-challenge` branch, and places the files inside a folder named `heleon`, which is a subfolder of `big-island-buses`. These files are static so they don’t have a separate build script.

However, putting one git repository inside another like this creates problems for the GitHub Pages script. Deleting the `.git` folder turns the git repository into a plain folder.
How to add data to the end of a file synchronously in Node.js?
Tags: node
Published: 2020-12-26 00:00:00

---
  title: How to add data to the end of a file synchronously in Node.js?
  published: true
  tags: Nodejs
  date: Sat Dec 26 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-data-to-end-of-file-synchronously-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-f388e54ed8e004643818bdeede53b6a9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-data-to-end-of-file-synchronously-nodejs)
  
To add to the end or append data to a file synchronously in Node.js, you can use the `appendFileSync()` synchronous function from the `fs` (filesystem) module.

```js
/*🔥 Append data to a file 🔥 */
fs.appendFileSync("file.txt", "Hello World!", "utf-8");
```

For example, Consider a file called `logs.txt` in which we have some log data and we want to add additional data to the end of the file.

```js
// name of file
const file = "logs.txt";

// logs
const logData = "Request status: 200 OK";
```

Now let's use the `appendFileSync()` synchronous function and pass:

- the `path of the file` to append data as the first argument
- the `data` as the second argument
- the `encoding` as the third argument

It can be done like this,

```js
// require fs module
const fs = require("fs");

// name of file
const file = "logs.txt";

// logs
const logData = "\nRequest status: 200 OK";

// add logData to end of logs.txt file
// using fs.appendFileSync() synchronous function
fs.appendFileSync(file, logData, "utf-8");
```

And we have successfully added data to the end of the file! 🔥.

See this example live in [repl.it](https://repl.it/@melvin2016/append-data-to-file-sync-nodejs#index.js).

### Feel free to share if you found this useful 😃.
Solving 1 random codewars challenge in Typescript per day - Day 1
Tags: typescript, challenge, codewars
Published: 2020-12-25 23:32:49

Today's challenge [(direct link)](https://www.codewars.com/kata/587731fda577b3d1b0001196/train/typescript):  
---------------------------  
Write simple .camelCase method (camel_case function in PHP, CamelCase in C# or camelCase in Java) for strings. All words must have their first letter capitalized without spaces.

For instance:
```
camelCase("hello case"); // => "HelloCase"
camelCase("camel case word"); // => "CamelCaseWord"
```

My Solution:  
------------
```
export function camelCase(str: string): string {
  const splitStr = str.split(' ');
  
  return splitStr.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
}
```

Well, this was a really simple one. Just split the original string at every space and then map over that array capitalizing every word.  

Hopefully, we'll get a harder one next time. Have a nice day!
⚡ Tabs Feature For Every Window
Tags: productivity, windows, feature, customization
Published: 2020-12-25 23:08:36

# **Introduction**
Recently I found a Windows program that I think is very useful, my first impressions about it is really good and in this post I'll be explaining why. 
Before getting started this program is paid and only supports Windows 7,8 and 10.

![Groupy Banner](https://cdn.cloudflare.steamstatic.com/steam/apps/912170/ss_7f211e1c19ffbfae5628e75159c36d2893712263.600x338.jpg?t=1596549959)

# **What is Groupy ?**
Groupy is a program that let's you use tabs feature for every window, for example you can use your web browser and code editor with tabs feature or you can use Notion and other programs with tabs feature.

# **Why do I Recommend Groupy ?**
As someone who only uses one monitor Groupy helps me a lot. For example: 
I can group a couple of tabs together and open another window and place one to left and the other to the right, this way I no longer need to dock my programs again and again when opening a program from taskbar, I can open my notepad on one side and I can switch between different tabs on the other side.

And it doesn't use much resouces.
![Power Consumption](https://dev-to-uploads.s3.amazonaws.com/i/8d2635558dezqs11of86.png)
# **Problems**
- In some programs, you can't click where you place your cursor For Example:
In Telegram you click a few pixels below from your cursor position and It's annoying.
- Lowers your FPS when gaming (I only tested with CS:GO and I also use a gaming laptop so I'd recommend disabling it before gaming).

# **Summary**
Although it has some minor problems and requires getting used to, I would recommend this program if you have only one monitor because it definitely speeds up some process.
If you want to buy it you can click [here](https://store.steampowered.com/app/912170/Groupy/)* to buy it. Also It's on sale.

*https://store.steampowered.com/app/912170/Groupy/
What determines the truthiness of an object in Python?
Tags: python, todayilearned, computerscience
Published: 2020-12-25 23:01:20

In Python we have truthy and falsy values. For example 0 is falsy and all other numbers are truthy. In fact, all objects in Python have a truth value. 

By default, all objects are considered to be truthy.

```python
class Foo:
    pass

bool(Foo()) # True
```

If you want to override this default behaviour, you have to implement the `__bool__` method. If an object defines `__bool__`, then Python calls that method to determine its truthiness.

```python
class Bar:
    def __bool__(self):
        return False

bool(Bar()) # False
```

Now all instances of Bar are False.
LGTM Devlog 0: Teaching Git through playing a game
Tags: devjournal, showdev, gamedev, python
Published: 2020-12-25 22:03:04

My new year's resolution for 2021 is to teach as many people git as possible.

# What?
I'd like to teach git. By building a game that someone can play, and in playing it, learn about git and git hosts like GitHub. This will be a major side project of mine in 2021.

Working title for this project is "LGTM", and I'm also going to be "Building in Public". Hopefully it's education, and also helps motivate me to continue.

# Why?

Three reasons:
1. Git and version control in general is an integral part of a software developer's workflow. You start your day with it, you end your day with it, you use it to collaborate with others. It's probably the biggest skill/tool needed outside the act of programming itself for any programming job.
1. Git tutorials are often hard and very dry to learn. I've taken them myself, and particularly for new programmers, the examples are somewhat abstract and hard to relate to.
1. A personal reason: I've been interested in making games for a while, in particular games with narrative. I've dabbled in gamedev, and produced a few games, and have found my strengths and weaknesses - I'm no good at producing fun gameplay, but my technical execution is ok.

# How?

Through doing it. I want to teach people git through making people use git. I don't want to give abstract examples, and expect people to just get what they're doing and why, instead, I'd like to present easy to understand scenarios while teaching git so that people understand why they're doing it.

Because I'd like it to be narrative-based, so that people feel a narrative connection with the task, it is effectively going to be an interactive game, played out through using git. I'm not 100% sure how it will be presented, but I like the idea that the primary interface will be git rather than a game. What better way to focus on teaching git than for all interactions to be through it.

Naturally, a lot of the focus will also be on a git host like GitHub. Even though a git host's features are not really part of git itself, like Pull Requests, I think these things are integral to the act of using source control, that they should be covered, even though it would mean tying the game strongly with a git host. I'll be using GitHub due to it's popularity.

# When?

I'm starting now (ass-end of December), and I'm giving me a year to do it. I might fail - a large proportion of my projects do. But I'd like to see how far I can go with the little time I have with my other work.