teleren/devto huggingface dataset:
Gitlab Ancestor Check Branches
Tags: gitlab, pipeline, ancestor, devops
Published: 2020-12-06 05:23:03

####How to ensure the child branches are always up-to-date with their parent one

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tlvvnz0yc3vettnbhd6i.png)
- From the example above, when `feature` branch is merged to `develop` branch then `dev` branch need to be updated to get latest code from `develop` so it will get no conflict or perform test with integration code when it's merged back to `develop`. Same behavior for `integrate` branch

- Here is the `.pre` job in gitlab pipeline to ensure this
```
stages:
  - build
  - deploy

ancestor_develop:
  stage: .pre
  script:
    - git merge-base --is-ancestor origin/develop HEAD || ( echo "Branch is not an ancestor of develop"; /bin/false )
  only:
    refs:
      - dev
      - feature
      - integrate
  tags:
    - ancestor-check

compile_code:
  stage: build
  script:
    - echo build image
  only:
    refs:
      - dev
      - feature
      - integrate
  tags:
    - runner-build

deploy_test:
  stage: deploy
  script:
    - echo Deploy to test env
  only:
    refs:
      - dev
      - feature
      - integrate
  tags:
    - runner-deploy
```
- `.pre` is highest priority stage in gitlab pipeline, it must be passed in order to continue other stages (build and deploy)
- Ref: [git-merge-base(1) Manual Page](https://gitirc.eu/git-merge-base.html)

**--is-ancestor**
>Check if the first <commit> is an ancestor of the second <commit>, and exit with status 0 if true, or with status 1 if not. Errors are signaled by a non-zero status that is not 1.
Solving LeetCode - Palindrome Number
Published: 2020-12-06 05:03:06

# Question

Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same backward as forward.

Follow up: Could you solve it without converting the integer to a string?

Example 1:
```
Input: x = 121
Output: true
```
Example 2:
```
Input: x = -121
Output: false
Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.
```
Example 3:
```
Input: x = 10
Output: false
Explanation: Reads 01 from right to left. Therefore it is not a palindrome.
```
Example 4:
```
Input: x = -101
Output: false
```
Constraints:

* -231 <= x <= 231 - 1


## Let's Go!

Solve by using [PREP](https://dev.to/phariale/prep-technique-for-algorithms-in-js-5b0g).
* **P** - One parameter. A number _x_
* **R** - Return true or false if palindrome
* **E** - Examples provided by question. (See Above)
* **P** - See Below

```javascript
var isPalindrome = function(x) {
    // IF x is negative, RETURN false

    // Convert x to str and split into array
    // Invoke REDUCE method to reverse array and combine to single str
    // RETURN true or false based on comparing reversed str to x.toString()
};

```

Translate into code...

```javascript
var isPalindrome = function(x) {
    // IF x is negative, RETURN false
    if (Math.sign(x) === -1) return false
    // Convert x to str and split into array
    // Invoke REDUCE method to reverse array and combine to single str
    // RETURN true or false based on comparing reversed str to x.toString()
    return x.toString().split('').reduce((rev, char) => char + rev) === x.toString()
};

```

### Conclusion

& Remember... Happy coding, friends! =)

#### Sources
* https://leetcode.com/problems/palindrome-number/
What is Hacking?
Tags: cybersecurity, beginners
Published: 2020-12-06 04:52:25


A person who is able to discover a weakness in a system and manages to exploit it is called a **hacker** and this process is known as **Hacking**. Hacking is an art. It is the mastery of a system that gives you complete control over it. It is the act of modifying the inner workings of a system, in order to make it do something that it’s original creator never intended.

> That’s the gist of it. But as with all things, the devil is in the details. This is what this website is for.

* * *

I’m going to make a broad claim here: The only thing you need to become a hacker is interest and dedication. But more than anything else, you need a **thirst for knowledge**. You should always be willing to learn something new, always open to new ideas. So come with me, follow along these series of tutorials and before long you’ll see for yourself that the claim has been justified.

* * *

Before moving on, there’s a couple things that we need to address.

First of all, **privacy**. Your data is everywhere, a part of you sitting on some servers around the world. **Privacy is your right to decide who can use that data and how.** The internet as we know it came into being decades ago. At the time, it wasn’t built with privacy in mind. But things have changed now. Not only do we need to protect ourselves against malicious agents but maybe, just maybe, a day may come when we must protect ourselves from those who are meant to be protecting us, our governments. Because of this, hacking no longer means just exploiting or patching up security holes in a system, it is now also **a means of protecting a basic human right** , the right to privacy.

Secondly, these days the only side of hacking that people hear about is the bad one. Credit card theft, identity theft, ransomware, stolen accounts and data and so on. The mere word_hacking_brings with it an inherently negative vibe. It doesn’t have to be this way. We hear about millions of accounts being leaked, attacks on major websites, attacks on individuals but we near really hear about all the attacks that never occurred.

> There is a whole other side to hacking that never quite gets to see the light of day.

* * *

For every major hack that makes the news, many more are prevented by security specialists. These people, these whitehat hackers, possess exactly the same skillset as the blackhats, but they choose to use them for good. No software can ever be completely secure and that makes cyber security a cat and mouse game. A race between whitehats and blackhats. A battle of angels and demons, the stakes of which have never been higher than they are today. The global cost of cyber crime is projected to reach [$2 trillion by 2019](http://www.forbes.com/sites/stevemorgan/2016/01/17/cyber-crime-costs-projected-to-reach-2-trillion-by-2019/#44daa5ac3bb0) and today it crossed that limit far ago.

The question is- [Which side are you on?](https://blog.leewardslope.com/types-of-hackers)

* * *
Publish your first package on npm!
Published: 2020-12-06 04:51:04

### Introduction
This week we are asked to release our work by choosing a release method. To make our work, I decided to release my very first package on NPM. You can also check it out at [here](https://www.npmjs.com/package/link-checker-tool).

### Why NPM?
There are several reasons why I decided to choose NPM as my release method. Firstly, NPM is super popular to the developers all around the world. Therefore, publishing my package on the site would be a good idea. Moreover, since all of the dependencies used in my projects are published on NPM, it gives me a solid reason to go with NPM

### How?
To publish my first ever package on NPM, these are the steps that I took at the time:

* [You need to create an account on npm first.](https://www.npmjs.com/signup)

* After creating your first account, navigate to the root folder of your project. At the terminal, use this command to login:

```
npm login
```

* Next, create a `package.json` file in your folder.

```
npm init
```

You can change the name and the version of your package inside your `package.json` file. Below is what I did in my file:
```
{
  "name": "link-checker-tool",
  "version": "1.0.2",
  "description": "A tool used to check whether an URL is available or not",
  "bin": {
    "lct": "/link-checker.js"
  },
  "keywords": [
    "cli"
  ],
  "scripts": {
    ...
  },
  "preferGlobal": true,
  "author": "Thanh Tien Phat Nguyen",
  "license": "ISC",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}
```

* To make it easy for other people understand how to use your package, update your README.md document which allows users to have some basic knowledge about your package. Below is a piece of my README.md, you can check the full version at [here](https://www.npmjs.com/package/link-checker-tool).

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

* Lastly, publish your package by using this command:
```
npm publish
```
If you get the message below, your package is published successfully.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h9134l7qh48bc7ifpo1u.JPG)

### How to use my package?
My package this is an CLI that checks if a url is available. Some of the features that I have added to this package is:

* Check and print all the good, bad and unknown links in a file.
* Read multiple files at once.
* Check the availability of an URL.
* Give the URL to an archived version of a website.
* Output JSON format of a URL entered.

#### To install my package, please use the command 
```
npm install link-checker-tool

```

```
npm install -g link-checker-tool

```

For more usages of my package, you can read my whole [document](https://www.npmjs.com/package/link-checker-tool) for more information.

### What I learn from this week lab
* How to release a package
* How to improve the workflow by tagging my release.
Chrome DevTools: Grid Explorer
Tags: html, css, tooling
Published: 2020-12-06 04:50:54

I like to look at the "What's New" tab in Chrome Dev Tools every now and then.

This time the update is 87, and I've noted they updated the CSS Grid debugging options!

![Chrome 87 CSS Grid](https://cdn.hashnode.com/res/hashnode/image/upload/v1606803335326/RfWysfbiP.png)

Time to explore what's new and what it can do for us!

## Chrome Dev Tools CSS Grid debugging

First, we need to open the Chrome Dev Tools.

> Mac `Cmd` + `Shift` + `C` or Windows: `Ctrl` + `Shift` + `C`.

Now we can use the `Elements` inspector where we can see all the elements in there you will see the `[grid]` block behind grid elements; this was the existing feature.

![Grid gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1606803606333/g4s4SZB_7.gif)

This little toggle will show us the grid overview, but that is about it.

In the new feature, there is a whole grid explorer under the Layout tab.

You can find the layout tab on the bottom of your dev tools.

![Chrome dev tools - Layout](https://cdn.hashnode.com/res/hashnode/image/upload/v1606803613489/Y948pL_VU.png)

Within this tab you will see all the grids that are on the page. In this case, it's just the one.

You can check the little checkbox before your grid, and it will highlight the grid.

Then next to it is a small color picker so you can change the default red color.

You might think that's not much more than the above `[grid]` block does.

But there are a bit more powerful items above.

You can toggle the following checkboxes:

- Show track sizes: Will show the sizes of each grid block
- Show area names: Show the names of each area you defined
- Extend grid lines: Will render the grid further on the page

As you can imagine, this can help us really well defining which block is rendered where.

I love this new area names function, and I'm sure it will help many of you exploring how grid works.

Thank you Chrome DevTools for making grid debugging even better!

I've made this little gif to showcase what happens when you toggle each option.

![Chrome dev tools CSS Grid options](https://cdn.hashnode.com/res/hashnode/image/upload/v1606803968967/EEPfBXPpb.gif)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Hover CSS?!
Published: 2020-12-06 04:49:12

Sometimes you would hover over a text or picture, or any element on the screen and it would have some kind of reaction. Whether the reaction is a difference in background, it glowing, or popping out, this all can be done with some simple CSS tricks.

Let's start by calling our element a p div

<p>Here</p>

Lets say when you hover over you want its background to change from transparent to blue. All you would have to write in your CSS is add the: hover attribute for example like this.

p:hover {
  background-color: blue;
}
Release Go package
Published: 2020-12-06 04:44:59

# Release Method

For the Go program, I choose [https://pkg.go.dev/](https://pkg.go.dev/) to release my [goURL](https://github.com/yzwdroid/goURL). And the release address [https://pkg.go.dev/github.com/yzwdroid/goURL](https://pkg.go.dev/github.com/yzwdroid/goURL)

## Read the document.

The first thing I do is read google's document for release. It is hard to find a clue, but as a programmer, I did some experiments.

> Visiting that page on pkg.go.dev, and clicking the “Request” button. For example:
https://pkg.go.dev/example.com/my/module

I guess this is meaning my released address should be 

>https://pkg.go.dev/github.com/yzwdroid/goURL

This is hard to guess. But google treated all the programmer knows everything.

I created my first release three months ago. But when I add a new release today, it didn't refresh. Maybe it takes some time to refresh.
Project 18 of 100 - Higher Order Tinder
Tags: react, javascript, 100daysofcode
Published: 2020-12-06 04:31:51

*Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [link](https://100-react-projects-day-18-higher-order-tinder.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-18-higher-order-tinder)

This was one of those simple projects where I ended up running into a ton of roadblocks along the way. The kind of roadblocks where you end up learning a lot about the technology you're using.

##Higher-Order Components
From my understanding, higher order components have been somewhat replaced by broader use of React Hooks. But the general idea is this. From the React website:

>Concretely, a higher-order component is a function that takes a component and returns a new component.

Stated differently, you have multiple components that you want all to have similar capabilities, so instead of recreating that functionality within each component, you create a wrapper which takes an element in as input, and then wrap those elements in the higher order component before exporting it in the child component's JS file.

As mentioned, I thought this one was going to be a walk in the park until I tried to use hooks in my Higher Order Component. In short, you can't directly use useState() in a higher order component.

```
  Line 5:39:  React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

```

Since I'd been working on this for two more days than I wanted to I eventually abandoned the click functionality in the HOC and moved the buttons to the child component. This immediately solved the issue albeit in a pretty unsatisfying way since I was left with a lot of questions about how React Hooks work.

The best answer I could come up with is that HOC's don't return a component, but a function that itself returns a component- therefore React hooks don't work since it's not a React component!

![stackoverflow-screenshot](https://dev-to-uploads.s3.amazonaws.com/i/wdtyvjlr0s4u7j9ttxw7.png)

The explanation makes sense, but like I said it's pretty unsatisfying. How do you trigger a reload of a component from a JSX element in an HOC?

Apparently HOCs aren't that widely used so I didn't stress too much about it but it was still astonishingly annoying. As Elon Musk purportedly said once, 'You don't understand a problem until you've struggled with it.'

Here's a link to the StackOverflow question I asked about it:
https://stackoverflow.com/questions/65163983/reloading-a-child-component-from-within-a-higher-order-component-in-react/65164322#65164322

If you feel like you have a better answer feel free to drop a comment. You'll be doing me a big favor.

That's it for today. Enjoy!
Advent of Code 2020: Day 05 with Python
Tags: adventofcode, python
Published: 2020-12-06 04:11:17

I'm going to keep this one short as I've run out of ways to make this interesting. Posting this for completeness.

# The Challenge Part 1
[Link to challenge on Advent of Code 2020 website](https://adventofcode.com/2020/day/5)

The challenge talks about a weird seating index scheme that uses binary partitioning. However, fancy words aside, they are literally talking about using binary.

One of the examples given was:
```
BFFFBBFRRR: row 70, column 7, seat ID 567
```
ignoring the superfluous information about rows and columns (which don't appear anywhere in the challenge), we just need to know how to convert BFFFBBFRRR into the number 567.

## The only solution, really.
Basically it's binary. if you replace all the B and R with 1, and the F and L with 0, then `BFFFBBFRRR` turns into `1000110111` which is 567 in binary.

We can do the converting into binary using some simple `replace()` functions, and then we can turn the ascii string into binary using python's existing `int(value, 2)` function. The second argument being the base system.

So, quite simply:

```py
int(entry.replace("B", "1").replace("F", "0").replace("R", "1").replace("L", "0"), 2)
```
Will give you the seat number from any given string. We can quickly scan the input data using this and list comprehension:

```py
seats = [int(entry.replace("B", "1").replace("F", "0").replace("R", "1").replace("L", "0"), 2) for entry in open("input.txt").readlines()]
```

The first part of the question asks for the highest seat number in the list. We simply have to do `max(seats)` to find out
```py
print("highest seat", max(seats))
```

# The Challenge Part 2
The second part of the question says that there is a missing seat somewhere in the middle, but to also ignore the missing seats at either end of the range. We can use set comprehension again for this:

```py
print("my seat", set(range(min(seats), max(seats))).difference(seats))
```

Tadaa!
Onwards!
Quick tip: Improve your code blocks with a language tag
Tags: beginners, blogging, quicktip
Published: 2020-12-06 04:09:14

Today I learned something very useful about code blocks on Dev.to (and it probably works on other blogging platforms too) that I immediately wanted to share with the community.

To explain this let me first show the result without the language tag:
```
func calculateHourlyPay(for workingHours: Int, at dayOfWeek: String) -> Double {
    let paymentPerHour: Double = 30

    let normalHours: Double = workingHours > 8 ? 8 : Double(workingHours)
    let overtimeHours = workingHours > 8 ? Double(workingHours - 8) : 0

    var payment: Double = 0

    if dayOfWeek == "sun" {
        payment = normalHours * paymentPerHour * 2
        payment += overtimeHours * paymentPerHour * 2 * 1.5
    } else if dayOfWeek == "sat" {
        payment = normalHours * paymentPerHour * 1.2
        payment += overtimeHours * paymentPerHour * 1.2 * 1.5
    } else {
        payment = normalHours * paymentPerHour
        payment += overtimeHours * paymentPerHour * 1.5
    }

    return payment
}
```

Notice how the code was misinterpreted, with little color distinction. The code block did not understand that I wrote code in Swift. Let's help it understand it by adding the language tag:

```swift
func calculateHourlyPay(for workingHours: Int, at dayOfWeek: String) -> Double {
    let paymentPerHour: Double = 30

    let normalHours: Double = workingHours > 8 ? 8 : Double(workingHours)
    let overtimeHours = workingHours > 8 ? Double(workingHours - 8) : 0

    var payment: Double = 0

    if dayOfWeek == "sun" {
        payment = normalHours * paymentPerHour * 2
        payment += overtimeHours * paymentPerHour * 2 * 1.5
    } else if dayOfWeek == "sat" {
        payment = normalHours * paymentPerHour * 1.2
        payment += overtimeHours * paymentPerHour * 1.2 * 1.5
    } else {
        payment = normalHours * paymentPerHour
        payment += overtimeHours * paymentPerHour * 1.5
    }

    return payment
}
```

Wow, much better!

How to do this? Here's how I wrote the first code block without a language tag:
![without language tag.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607226812670/A-CKOjZ3J.jpeg)

Now the enhanced version with a language tag:
![with language tag.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607226823045/PvCJBidph.jpeg)

## Conclusion
Code blocks are great and very useful for writing sample code in technical articles. But sometimes it can't understand the code language and it is better to explicitly indicate it by adding a language tag.
Advent of Code 2020: Python Solution Day 5
Tags: adventofcode, algorithms, challenge, python
Published: 2020-12-06 03:59:19

This is the 5th day of Advent of Code 2020 and this is more interesting than previous one. But I quickly was able to find the solution. I usually solve solution on next day because I am having hard time managing time. And it is nearly hour left for day 6.
As usual, I have saved text file as `day5.txt` on same directory as my notebook is and my solution notebook is available at [this repository](https://github.com/q-viper/Adevent-Of-Code-2020).
```python
with open("day5.txt", "r") as fp:
    lines = fp.readlines()

lines = [line[:-1] for line in lines]

test = ["BFFFBBFRRR", "FFFBBBFRRR", "BBFFBBFRLL"]

# find row, 
# 0 to 127 rows
# f means lower half (0-63)
# b means upper half (63-127)
# r upper half of column (4-7)
# l lower half of column (0-3)

seat_ids = []
for line in lines:
    #print(f"Current Text: {line}")
    # to get row, take first 7 chars
    r = line[:7]
    start = 0
    end = 127
    row, col = 0, 0
    for char in r:
        #print(f"Char: {char}")
        if char == "F":
            end = int((start+end+1)/2) - 1
        elif char == "B":
            start = int((start+end+1)/2)
        #print(f"Start: {start} End: {end}")
    #print("\n")
    row = start
    
    # to get col, take last 3 chars
    r = line[7:]
    start = 0
    end = 7
    for char in r:
        #print(f"Char: {char}")
        if char == "L":
            end = int((start+end+1)/2) - 1
        elif char == "R":
            start = int((start+end+1)/2)
        #print(f"Start: {start} End: {end}")
    col = start
    # seat ID: multiply the row by 8, then add the column
    sid = row*8 + col
    seat_ids.append(sid)
    print(f"Row: {row} Column: {col} Seat ID:{sid}")
    print("\n")
    
print(f"Solution 1: {max(seat_ids)}")
print(f"Solution 2: {[seat for seat in range(min(seat_ids), max(seat_ids)) if seat not in seat_ids][0]}")
   
```

I write blogs about Computer Vision projects on my GitHub page [q-viper.github.io](https://q-viper.github.io) and if you got some time please share yours too.