teleren/devto huggingface dataset:
CSSBattle | #20 Ticket
Tags: css, challenge, cssbattle, ticket
Published: 2022-07-01 23:34:45

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #20 Ticket](https://cssbattle.dev/play/20) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Ticket Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7h936668pnzvih9kjhb.png)

---

> #### Solution:

```html
<div class="container">
  <div class="ticket-transparent">
    <div class="round-dot lg top-left"></div>
    <div class="round-dot lg bottom-left"></div>
    <div class="round-dot sm top-center"></div>
    <div class="round-dot sm bottom-center"></div>
    <div class="round-dot lg top-right"></div>
    <div class="round-dot lg bottom-right"></div>
    <div class="ticket">
      <div class="yellow-side"></div>
      <div class="orange-side"></div>
    </div>
  </div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #62306d;
    position: relative;
  }
  .ticket,
  .ticket-transparent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
  }
  .ticket {
    display: flex;
  }
  .yellow-side {
    width: 70%;
    background: #f7ec7d;
  }
  .orange-side {
    width: 30%;
    background: #e38f66;
  }
  .round-dot {
    position: absolute;
    z-index: 10;
    background: #62306d;
    border-radius: 50%;
  }
  .lg {
    width: 40px;
    height: 40px;
  }
  .sm {
    width: 20px;
    height: 20px;
  }
  .top-left {
    transform: translate(-20px, -20px);
  }
  .bottom-left {
    bottom: 0;
    left: 0;
    transform: translate(-20px, 20px);
  }
  .top-center {
    top: 0;
    left: 70%;
    transform: translate(-10px, -10px);
  }
  .bottom-center {
    bottom: 0;
    left: 70%;
    transform: translate(-10px, 10px);
  }
  .top-right {
    right: 0;
    transform: translate(20px, -20px);
  }
  .bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(20px, 20px);
  }
</style>
```

---

> #### Key Takeaway(s):
- using transparent element behind the scenes to control position of children elements, so in this case, `.ticket-transparent` is just a transparent placeholder to position all the dots in the correct places

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Typescript Numeric Literal Types How To X^N (Exponentiation)
Tags: typescript, programming, tutorial, webdev
Published: 2022-07-01 23:00:44

---
series: Typescript Basic Arithmetic with Numeric Literal Types
---

In this post, we are going to try to raise x to the power of n

x and n are both numeric literal types

to do this, we need to utilize [multiplication type](https://dev.to/tylim88/typescript-multiply-two-numeric-literal-types-28fd) with a slight modification:

```ts
type CreateArrayWithLengthX<
    LENGTH extends number,
    ACC extends unknown[] = [],
> = ACC['length'] extends LENGTH
    ? ACC
    : CreateArrayWithLengthX<LENGTH, [...ACC,1]>

type Multiplication<X extends number, Y extends number, Z extends number[] = [], V extends unknown[] = []> = 
    [...CreateArrayWithLengthX<Y>]['length'] extends Z['length']
    ? V // modified
    : Multiplication<X,Y,[1,...Z],[...CreateArrayWithLengthX<X>,...V]>
```

ok, we have the building block now, let's do it

```ts
type Exponentiation<X extends number, N extends number, Counter extends number[] =[], Acc extends unknown[] = [1]> =
    Counter['length'] extends N 
        ? Acc['length'] 
        : Exponentiation<X, N, [1, ...Counter], Multiplication<Acc['length'],X> >

type A = Exponentiation<2,0> // 1
type B = Exponentiation<2,1> // 2
type C = Exponentiation<2,10> // 1024
type D = Exponentiation<3,7> // 2187
type E = Exponentiation<21,3> // 9261
```

[playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAwgThAhsCBBOdEgOoEtgAWAMhAHYDmhAGgDwBQUjURAogHIDiAKgBJQQAPFKQAmAZyikArgFsARhDgAaBk1QwY-IWXFQppANakA9gHdSAbQC6UALxRrKgHx2o6mBYDkAGzKUCnjaCwrqsnLyqjAD8bhqRUABcsAjIaBhYeIQkFNQ0Ydw8Sg4AdKXuSgCMVk50dKCQUACyUt7AuGDeuADGyLjGpDRUWiES0vKKRQCawzqjsgrKUABaM6Jz43DWro5QAGqruvpGZpY29tYu9vEWpcXwSCjomDj4xH65k05WXr45AUHaNbLH7vf7xGK7eJJZqtdqdHptfqDJSTJQWCpKW5LKxo273VJPDKvbL+WhUJyY0q7aq1OrgaAsARgfpkNq9JFDYKzSTzCZQNgHdYLIowYz6FBwQU8jZbWw7VBdLpSo4mcyyhxVS7xUXixQgv6BKUC+JMKAxBVdfX+Q0mphJRnM0is3DsgZUIpsIroop4sWkCU4potNodbqumgWq2EQJKclQGp0hqoVwOln+l2IgYAJiUAAYXAB6AtQCqJ6AAIRTTLTbMzNBzFULxazZdgVcdzvDDfzUCLJdzWYALK2ACLtmsZvoDADMSgA7E2oFmKgAOOetljjp3prsY6eLgCcWYAbBUgA)

limitation: the result cannot exceed 9999 because the max tuple size is 9999

there is also some limitation to n, depending on the value of x
if x is 2, then n cannot exceed 10 (2¹⁰ is the first time exponential of 2 exceed 1000)

if x is 3, then n cannot exceed 7 (3⁷ is the first time exponential of 3 exceed 1000)

at this point, x^n is larger than 1000 and it is not possible to create an array with a length larger than 1000 for the next n  because the max recursion depth is only 1000
SBC ORACLE ACME PACKET HA IN AWS
Tags: voip, resilience, sbc, acmepacket
Published: 2022-07-01 22:58:21

To configure the HA utility of the Acme Packet SBCs in AWS, we must make use of the script pre-installed in the OS of our SBC, we do not need to make any changes to this script, but if we want to consult it we can access it by entering the SHELL of the SBC, writing our password, which we previously had to define for shell access:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvt5w5pgr4ofscx7iebr.png)

Once inside we can consult the script:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxe9jylo8d02i3y9z9cz.png)

Analyzing the script, we can see that it uses a variable to check the status of the SBC and assign which interfaces are active at that moment, so that AWS will assign the IPs to that machine, we can see in the AWS console that the IPs assigned change from one machine to another in the cluster, depending on whether one or the other is the active node.

The prerequisites for this to work are to have DHCP activated in the SBC (we will assign a static IP from the AWS console), for this we must not configure IPs in Bootparam:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96lumy3fbtq6597jahia.png)
 
and we must confirm that we have the AWS DNS server IP in the SBC /etc/resolv.conf file (accessed from the shell):
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as19joiql6cy354u06oe.png)

Once these points have been confirmed, for this change to be possible we need to assign a specific IAM role and a specific IAM Policy to the 2 EC2 of the node, where we need to define the variables that AWS will use to know which of the 2 cluster machines it should assign to. the IP's.
Once the IAM Role is created, we must paste this JSON code in the IAM Policy, so that AWS can work with the script developed by Oracle for HA in AWS. 

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "ec2:DescribeAddresses",
                "ec2:DescribeNetworkInterfaces",
                "ec2:DescribeNetworkInterfaceAttribute",
                "ec2:DescribeInstanceAttribute",
                "ec2:DescribeSubnets",
                "ec2:AssignPrivateIpAddresses",
                "ec2:AssociateAddress",
                "ec2:DescribeSecurityGroups",
                "ec2:DescribeInstanceStatus"
            ],
            "Resource": "*",
            "Effect": "Allow"
        }
    ]
}
```
We save this information and we can now test if by changing the active/passive node, all our additional IPs as well as the elastic IPs must balance between the different nodes, always being assigned to the active node at that moment.
Also comment that at the time of assigning the additional IP's as well as the elastic IP's we must make sure that the node in which we are assigning the IP's is active.

Enjoy
CSSBattle | #19 Cube
Tags: css, challenge, cssbattle, cube
Published: 2022-07-01 22:56:35

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #19 Cube](https://cssbattle.dev/play/19) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Cube Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en22bhxowx8epqesyb6a.png)

---

> #### Solution:

```html
<div class="container">
  <div class="diag-square"></div>
  <div class="rect skew-left"></div>
  <div class="rect skew-right"></div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #0B2429;
    position: relative;
  }
  .diag-square {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #F3AC3C;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -15%) rotate(45deg) 
  }
  .rect {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
  }
  .skew-left {
    background: #1A4341;
    transform: translate(0px, -70px) skew(0deg, 45deg);
  }
  .skew-right {
    background: #998235;
    transform: translate(-70px, -70px) skew(0deg, -45deg) ;
  }
</style>
```

---

> #### Key Takeaway(s):
- using skew property within transform in CSS to skew rectangle or square like shapes

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Creating a Better CTO Playbook w/ Dama Financial's CTO Zach Goldberg
Tags: podcast, leadership, devops, productivity
Published: 2022-07-01 22:56:19

Fact: There are guidebooks for everything in programming except for actually leading, managing and inspiring programmers.

That’s why I was so happy to have my friend Zach Goldberg on the podcast.

Someone who has made learning and self-improvement a core pillar of his professional and personal life, Zach Goldberg is someone who I turn to when I need to know who smart CTOs are turning to.

In this great conversation, Zach talks about the most important things he’s learned in separating signal from noise in the realm of engineering leadership. He also provides some amazing guidance on who you should be listening to (when you’re not listening to us). Enjoy.

{% spotify spotify:episode:6L9z2LUXsVWVE4E29stRie %}

## Episode Highlights Include:
* (2:20) There are few truths in software engineering
* (11:45) How [Audible](https://www.audible.com/) changed Zach's life
* (17:22) The teachings of [Martin Fowler (https://martinfowler.com/)
* (21:09) Applying [ship/show/ask](https://martinfowler.com/articles/ship-show-ask.html) to your team
* (32:05) Transformation: shipping once a month to daily
* (47:11) Imperative engineers be fluent in architecture

## Engineering Insights before anyone else....
_The Weekly Interruption is a newsletter designed for engineering leaders, by engineering leaders. We get it. You're busy. So are we. That's why our newsletter is light, informative and oftentimes irreverent. No BS or fluff. Each week we deliver actionable advice to help make you - whether you're a CTO, VP of Engineering, team lead or IC  - a better leader._

_It's also the best way to stay up-to-date on all things Dev Interrupted - from our podcast, to trending articles, [Interact](https://devinterrupted.com/event/interact/) & our [community Discord](https://discord.com/invite/devinterrupted)._

***[Get interrupted.](https://devinterrupted.com/subscribe/)***

![The Weekly Interruption](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bc8rd0his88xm1hbjqxb.png)
This Week In Python
Tags: python, discuss
Published: 2022-07-01 22:38:00


**Fri, July 01, 2022**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 


## Python Articles

- [Don't let dicts spoil your code](https://roman.pt/posts/dont-let-dicts-spoil-your-code/)
- [REPL Python programming and debugging with IPython](https://lukeplant.me.uk/blog/posts/repl-python-programming-and-debugging-with-ipython/)
- [My Python testing style guide](https://blog.thea.codes/my-python-testing-style-guide/)
- [Logging in Python like a Pro](https://guicommits.com/how-to-log-in-python-like-a-pro/)
- [Python Lazy Imports With Cinder](https://developers.facebook.com/blog/post/2022/06/15/python-lazy-imports-with-cinder)
 


## Projects

- [packj](https://github.com/ossillate-inc/packj) – The vetting tool 🚀 behind our large-scale security analysis platform to detect malicious/risky open-source packages
- [svg.py](https://github.com/orsinium-labs/svg.py) – Type-safe and powerful Python library to generate SVG files
- [rich-bench](https://github.com/tonybaloney/rich-bench) – A little benchmarking tool for Python
- [numpy-100](https://github.com/rougier/numpy-100) – 100 numpy exercises (with solutions)
- [py-webengine](https://github.com/nathants/py-webengine) – browser testing should be easy
📺 Last week : abortion in the medias 👭
Tags: datascience, news, career, discuss
Published: 2022-07-01 21:52:36

## ❔ About

The last week I heard terrible news about freedom and abortion rights.

So I wanted to get a video retrospective of the week to see what medias say about abortion.

👉 **This post is dedicated to show I could achieve the job so you can get your own weekly retro too.**


## ☝️ Intro

First, let's remind the why by quoting :

{% twitter 1541658904911904768 %}


## 📈 Trending hashtags

The news are here...

{% twitter 1540405961025798144 %}

[By Thursday afternoon](https://thehill.com/blogs/blog-briefing-room/news/444134-womens-rights-hashtags-trend-on-twitter-following-alabama/), [`#AbortionIsAWomansRight`](https://twitter.com/search?q=%23abortionisawomansright) and [`#WomensReproductiveRights`](https://twitter.com/search?q=%23WomensReproductiveRights&src=typed_query&f=top) were among top U.S. trends on Twitter, with the former topping the list **with over 154,000 tweets**.


- [`#abortion`](https://twitter.com/hashtag/abortion)
- [`#shoutyourabortion`](https://twitter.com/search?q=%23shoutyourabortion)
- [`#rights`](https://twitter.com/search?q=%23rights&src=typed_query)
- [`#abortionrights`](https://twitter.com/search?q=%23abortionrights&src=typed_query&f=top)`
- [`#samesex`](https://twitter.com/search?q=%23samesex&src=typed_query&f=top)
- [`#vote`](https://twitter.com/search?q=%23vote&src=typed_query&f=top)
- [`#law`](https://twitter.com/search?q=%23law&src=typed_query&f=top)
- [`#samesexmarriage`](https://twitter.com/search?q=%23samesexmarriage&src=typed_query&f=top)
- [`#gaymarriage`](https://twitter.com/search?q=%23gaymarriage&src=typed_query&f=top)
- [`#woman`](https://twitter.com/search?q=%23woman&src=typed_query&f=top)


## ✂️ Get & Build videos

```
mkdir abortion && cd abortion
yt-dlp https://www.youtube.com/results\?search_query\=abortion\&sp\=EgYIAhABGAM%253D \
    --write-auto-sub
videogrep --input *.webm --search 'abortion' --resyncsubs 0.1 \
    --output abortion_sentence.mp4
videogrep --input *.webm --search 'abortion' \
    --search-type fragment --resyncsubs 0.1 \
    --output abortion_shorts.mp4
```

### 🎬 Shorts

First, let's get the shorts :

{% youtube N_H_2rHelbw %}

### 📺 Sentences

Then the longer version :

> _"Who says what about abortion ?"_

{% youtube csY-lUAiDRc %}

## ℹ️ US Companies to help

{% twitter 1541873146420002816 %}

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoko5ebcla26ixdu7jo4.png)](https://www-seattletimes-com.cdn.ampproject.org/c/s/www.seattletimes.com/business/microsoft/microsoft-says-employees-will-continue-to-have-access-to-abortion-and-gender-affirming-care-anywhere-in-the-u-s/?amp=1)
How to fix "Must supply api_key"
Tags: question, drf, cloudinary, heroku
Published: 2022-07-01 21:43:35

helo
I'm working on a drf api where i'm using cloudinary to handle image upload, on my localhost i'm using .env file to save all my secret keys including cloudinary api key, and it working perfectly but once i deployed to heroku i keep getting this err message 

```
ValueError at /profile/247de095-6895-4bff-a836-dedfa75cde4b/update

Must supply api_key
```
 

 and i have setup the secret key also using 
`heroku config:set api_key='api_key'` but still it not working, can anyone help out
Easiest Way to Get Started with Perl
Tags: perl
Published: 2022-07-01 21:42:49

The easiest way to get started with Perl is to use <a href="https://perlbanjo.com/">PerlBanjo.com</a>.

Read more:

<a href="https://en.perlzemi.com/blog/20220702062032.html">Easiest Way to Get Started with Perl - Perl ABC</a>
Day 84: no work today
Published: 2022-07-01 21:40:26

Hi!
so I took the break today and didn't write any code for the whole day but I think I was a bad day to take a break as it was a deadline for the sprint but I don't think I could have delivered anything anyway and Afterall health comes first so maybe tomorrow I may catch up.
Today was not bad I watched Man vs bee which is a good show btw, took some sleep but I think I'm still tired maybe I may need to take tomorrow too. I don't have any plans for the weekend so anything can happen :) we will see how tomorrow goes

Signing off...
How web-app creators (that I've tried) fall short still...
Tags: electron, webapp
Published: 2022-07-01 21:17:47

I've been trying to get back to using web-apps as separate apps outside of my browsers for a few weeks. Each of them falls short of me moving away from browsers + profiles, and I thought sharing those would help someone else:

## WebCatalog

- Link handling UX is difficult to use and is REGEX based
- Userscripts UX also hard to use
- Notifications do not always work
- **No tabs** (deal breaker for e.g. Github)

## Unite

- Sometimes new tabs do not work
- New tabs always show the toolbar permanently
- Uneven toolbar UI
- No custom User Agent configuration, Google stuff doesn't work

## Fluid

- Old, hasn't been updated in a long time!
- JavaScript that opens new tabs to URL's not in your whitelist do not get thrown to the external default browser, but instead a new tab is opened

------------

Right now I'm still using Google Chrome profiles for most of the things. For Asana (because I feel it needs to be a separate app, and I have a few custom userscripts), I'm using Webcatalog so it throws new link clicks (handled by JavaScript) to my default browser (Choosy).

Fluid is probably the best of the bunch right now, and I can use tabs (though the UI looks outdated and clunky) e.g. for Github which I feel tabbed browsing is a must.

WebCatalog has the most potential, if only they would find a way to allow tabs!
Mydigicard: Personal project
Published: 2022-07-01 20:36:27

It was a fine evening relaxing with friends chilling in the silhouette and making merry for Friday when a friend complained about a meeting he went for and on rounding up discussions he discovered that he forgot his business card at his office. There and then, I realized that things can be made simpler and easier. Why not just have your details on a QR that stores your information that can be easily scanned. I bet no one forgets their phone these days.
Empowered by this thought, I got my hands dirty and started working on code and I developed this project called [mydigicard](https://mydigicard.netlify.app) with ReactJS which features your basic card information.
This idea can still be improved upon with other integrations like location API and other important day to day information.


Kindly show off your works in the comment section too. This is a form of self appreciation.
How to get a High paying MERN Job
Tags: javascript, webdev, beginners, react
Published: 2022-07-01 20:17:54

Iv you are passionate about **web development** then you are very familiar with **MERN stack**. This is one of the most popular technology stack nowadays. So lets talk about **how to get a high paying MERN job as a fresher**. 

## Why MERN

MERN is a full stack technology based on JavaScript frameworks. MERN consist of Mongo DB, Express JS, React JS and Node Js. Mainly React JS is used in front end. Node and Express are used in Backend and Mongo DB is for database. 

MERN is one of the popular stack technology in India as well as in global. This stack is based on JS. So you not need to learn different languages for Frontend and backend separately. And MERN is suitable for making scalable web apps. 

## How to get a high paying MERN job for Freshers

Well, if you want to be a MERN stack developer and want a high salary package then follow the rules. 

Big product based startups and also service based startups pays MERN stack developers a lot. This tips that I am writing, are from many MERN stack Developers in my network and my friends. You can get 30,000 to 1,00,000 rupees jobs as a **fresher as MERN stack developer**. 

Lets follow the tips given below:

## 1. Strong Fundamentals & Concepts 

JavaScript is easy to learn but it has some concepts that you should know if you are going for MERN stack developer role. You should be clear about this concepts if you are giving an JS interview for a high paying job. 

The some of the important JS concepts are - scope, hoisting, closures, asynchronous JS, higher order functions etc. 

## 2. Build Full Stack Projects 

Build at least 3 full stack projects. Projects are very important for cracking a MERN interview and getting a high salary package. Because projects shows your development skills and knowledge. And companies need it. 

Your projects should be live and codes should be available on Github. So that the interviewer can check your web app and ask questions from that. 

Try to build a clone project like Netflix clone, Instagram clone etc. But try some different touch in UI and don't tell the interviewer that I have made a clone of this app. Rather than tell him I am made OTT streaming app or social media app. Because if you tell them you have made Netflix clone or Instagram clone in many cases they ask system design related questions about the app. 

## 3. Data Structure & Algorithm 

Most of students avoid this. But DS and Algo is very important if you want to crack a medium level start up that will give you a high salary package. Work on your DS and Algo skills. Solve Array and String related questions in Leetcode. 

If you properly follow the above industry inside tips you will get a **high paying MERN stack job in 2022**.