teleren/devto huggingface dataset:
CSSBattle | #21 SitePoint Logo
Tags: css, challenge, cssbattle, sitepointlogo
Published: 2022-07-02 19:36:52

Welcome to CSSBattle Challenges!

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

---

> #### Challenge:

![SitePoint Logo Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c6ip464scknffem3n5s.png)

---

> #### Solution:

```html
<div class="container">
  <div class="bar orange"></div>
  <div class="bar blue"></div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #222;
    position: relative;
  }
  .bar {
    position: absolute;
    width: 100px;
    height: 80px;
    background: transparent;
    top: 50%;
    left: 50%;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 5px;
  }
  .orange {
    transform: translate(-62px, -64px) rotate(-45deg);
    border-left: 30px solid #F2994A;
    border-top: 30px solid #F2994A;
  }
  .blue {
    transform: translate(-40px, -16px) rotate(135deg);
    border-left: 30px solid #2D9CDB;
    border-top: 30px solid #2D9CDB;
  }
</style>
```

---

> #### Key Takeaway(s):
- using border properties to create "L" like shapes

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Getting started with React
Tags: react, beginners, tutorial
Published: 2022-07-02 19:17:05

Running React on my system for the first time was not a great experience, so here I am sharing how to do it quickly for anyone out there wanting to get started with it.

**Steps:**

- **Install** nvm (**nvm-setup.exe**) from here -> (https://github.com/coreybutler/nvm-windows/releases)

```
//Check nvm version
> nvm --version 
```
- Use terminal in administrator mode;

- Now, Install the LTS version of npm.

```
> nvm install latest
```

- Check npm version
```
> npm --version
```

- **Install** Node.js https://nodejs.org/en/download/

- Check it's version:
```
> node --version
```

---

_Now we can set React application locally, _
Open terminal in VScode and write:

```
> npx create-react-app my-app

> cd my-app

> npm start
```
(my-app is the name of react project, this can be changed)

Voila!
The browser will open itself with the react app running, now you can change according to your wants. 

Additionally, write

```
> npm start
```

whenever you need to run the application again after you closed the entire code.
Yet another 2d tile map editor
Tags: codepen
Published: 2022-07-02 19:07:47

<p>Ever since my first go at creating a super simple tiny isometric map editor I wanted to do something a little bit more advanced. Although its missing of some necessary features such as saving, loading, toggling whether a layer should be a "blockage"-layer or not.  It's  almost a complete map editor for both standard 2d (top-view or platform) and isometric tiles.</p>

<p>But man it was fun to create!</p>

<p>As it has become sort of a little baby I might update this and add the missing features and even fix some bugs and issues as well for some optimizations (right now if you create a too big map, it will really slow things down)</p>

{% codepen https://codepen.io/harunpehlivan/pen/YzaXYyK %}
Leetcode Solutions: Remove All Adjacent Duplicates In String
Tags: leetcode, programming, python, tutorial
Published: 2022-07-02 19:05:48

You are given a string s consisting of lowercase English letters. A duplicate removal consists of choosing two adjacent and equal letters and removing them.

We repeatedly make duplicate removals on s until we no longer can.

Return the final string after all such duplicate removals have been made. It can be proven that the answer is unique.

Here is the solution: 


```py
class Solution(object):
    def removeDuplicates(self, s):
        """
        :type s: str
        :rtype: str
        """
        
        stack = []
        
        for char in s:
            if stack and stack[-1] == char:
                stack.pop()
            
            else:
                stack.append(char)
        
        
        return "".join(stack)

```
AWS Amplify - Deploy your application in minutes.
Tags: aws, webdev, production, amplify
Published: 2022-07-02 18:46:28

In this blog I would like to provide a guide on how you can deploy your web application whether it be static or dynamic using **AWS Amplify.**

#####Before moving on let's basically understand what is Amplify:
In simple words Amplify is a framework that consists of Libraries, UI components, and CLI interfaces to build and deploy mobile and web applications.

#####1. Search for Amplify on AWS console and you'll land in a page like this:

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpub5l6lsf05o2ujhtf9.png)

#####2. Click on the **New app** dropdown and select **Host web app**.

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hq7isyx5eskm9epxz6c.png)

#####3. In the next page you can see the different ways in which you can connect your code and Amplify:

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

For example by authenticating using **GitHub** you can link your corresponding repository and Amplify will do all the things for you, and when you push a new change to GitHub Amplify will automatically start a **new build** and publish the new change.

For this blog we'll select **Deploy without Git provider** which means we can directly upload the code files.

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m3si91wuflv7elnt595.png)

#####4. Now it's time to upload the code files and also you need to provide a **App name** and **Environment name**.

Here I've dragged and dropped my code files, alternatively if you have got the files stored in an **S3 bucket** you can connect to the bucket as well, after uploading click on **save and deploy**.

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

Once the deployment is successful you can click on the **Domain** and access your website.

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of8qrqo38ekw18wf7mrj.png)



That's it we are done with the deployment, hope you guys found it useful **Thank you**.
Pure CSS Pikachu = 20hrs of work. What can you learn with pure css?
Tags: codepen, webdev, css, design
Published: 2022-07-02 18:37:33

<p>Pure CSS Pikachu. About 20 hours of work.</p>
<p>What I have learned:<br>
1. I gained speed with work with linear gradient, radial gradient and transforms<br>
2. I found and learned to debug issues with displaying the clip-path attribute which is poorly supported<br>
3. I work better with shadows<br>
4. Now it is much easier for me to draw 2d abstractions<br>
</p>
<p>What do you think about the pokemon and Pure CSS idea?</p>

{% codepen https://codepen.io/frontendkris/pen/BaYOdVb %}
localhost not point to correct ip address in node 18
Tags: node, javascript
Published: 2022-07-02 17:53:38

Nodejs is becoming very popular among developers for backend development. There are lots of resources to learn it. Recently, I faced an issue when I was running my node application. I am using MySQL for the database and use MySQL npm library to connect to my database and query data. Before you start doing the query, you need to config the MySQL library and then only it can connect to your database. You must pass the IP address where your database is hosted, user name, and password. I was testing locally, so I ran the MySQL server on my machine and used the localhost as the IP address to connect to it. But I was getting the continuous error that the library was not able to make connection to SQL. After research, I found that I am using node 18 in my system and in node 18 localhost is converted to ipv6 instead of ipv4. So I need to add the IP address of localhost i.e 127.0.0.1 to connect to my local SQL server.
Have you heard of function decorators
Tags: javascript, react
Published: 2022-07-02 17:41:51

One advice we usually hear as developers is to do our very best to not repeat code. So what we do is place code which could be used numerous time in its separate function. But sometimes, it isn't so simple. Take try catch blocks for example,

`try {
  console.log("loading...")
  // run some code
  console.log("Finished.")
} catch (error) {
  console.log(error)
}`

JavaScript does have allocation for decorators. But there are only available for class methods and class fields. You can read more [here](https://medium.com/@victortoschi/using-decorators-in-javascript-e80674e4c6fa).
But for now, we will be taking a look at a function decorators. A way to have a decorators for functions outside a class is to use higher function. This is a function that returns a function. This could be designed like a function wrapper

Say you have a function
`function printText(text){
  console.log(`Code says, ${text}`);
}`

And you want to wrap this function code with the try catch block from above. 

`function loggingDecorator(wrappedFn) {
  return function() {
    try {
      console.log("loading...")
      // run some code
      console.log("Finished.")
    } catch (error) {
       console.log(error)
    }
  }
}`
You use the decorator like this
`const wrapped = loggingDecorator(printText);
wrapped("have a good day.");`
Thanks for reading.
How to deal with Technical Debt
Tags: technicaldebt, softwareengineering, productmanagement
Published: 2022-07-02 17:36:04

As per Wikipedia,

> In software development, technical debt (also known as design debt[1] or code debt) is the implied cost of additional rework caused by choosing an easy (limited) solution now instead of using a better approach that would take longer.

As per my opinion and / or experience, there are two kinds of technical debt - intentional and unintentional ones.

The unintentional ones stem from technical decisions that may not take the big picture in mind, where the engineer is unaware of the debt they are creating for the future. These can happen due to lack of context, lack of experience, or lack of proper impact analysis, or you know just plain human error (we are all human). Processes like pair programming, diligent PR reviews, or allocating more time on task design may be a way to mitigate these kind of issues.

The intentional ones are from deliberate engineering decisions. A team or someone decided to implement something they knew they would need to fix or refactor in the future, but decided to go ahead with it anyway due to time / deadline / business constraints. Meaning, if there is a debt, it's there for a reason, and has been put on the back-burner along with the others.

No system is perfect, and in any growing product / software, especially startups, the latter tends to happen for shorter time-to-market. "For now we will do X to solve the problem, but in the future we should do it Y to make it more generic and scalable".

Now, how to manage this debt? Like any other debt, tech debt can and should be paid in instalments. It's important for tech leads and engineering managers to be aware of tech debt, have a prioritized backlog of the same, and try to incrementally get rid of the debt over time by introducing reworks / refactors / implementations within the Sprint or regular development process as a part of normal tasks. The prioritization would happen based on a combination of business need vs which is more likely to degrade system health in the near future.

It is also the responsibility of technical leadership to collaborate with and persuade product managers / business teams on considering the additional time towards tech debt before delivering a requested feature.

For example, let's say there are some new requirements regarding SMS notifications, and the current notification system needs an overhaul. A plea to product managers would be "I know we are trying to achieve ABC with this feature to facilitate growth, however we need some time to refactor our notification system. This will allow us to implement any new notification requirements easily, plus make the notification system more scalable. If we don't do this now, with the growing number of notifications, it will degrade our performance by X hence affecting growth."

At the end of the day, both tech and business parties should work together, and be aware of the importance of technical debt, how it can affect the current system, and hence the current business. The idea is we are all working together towards a common goal.
React JS Gif : Starter Kit
Tags: template, react, gif, javascript
Published: 2022-07-02 17:21:32

---
title: React JS → Gif : Starter Kit
published: true
description: A batteries included starter kit to code a gif in React.
tags: template, react, gif, js
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vctgguy9jig4h23gz481.gif
# Use a ratio of 100:42 for best results.
---

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rooqt0te3v7pgbk9icwm.png">
  <figcaption>The template includes everything you need to get started with a React project in [gif.com.ai](https://gif.com.ai)</figcaption>
</figure>

____
<center>Comes in two parts:</center>
____

##__1) HTML Context__##

The HTML consists of a single __*img*__ tag.

```<img src="http://placekitten.com/200/200" />```

We give you a generic {placekitten} with this confused kitten to look at every time you want to GIF. You can replace the HTML contents with any valid HTML.

![Placekitten Dimensions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwi03fifaxu360ra7zvz.PNG)

The canvas is preset to 200x200 pixels to match the dimensions of the generated image from {placekitten}. You can freely adjust the canvas dimensions manually or through code.

##__2) JS Context__##

```javascript
$.when(
  $.getScript("//unpkg.com/react@17/umd/react.development.js"),
  $.getScript("//unpkg.com/react-dom@17/umd/react-dom.development.js"),
  $.Deferred(function(deferred){
      $(deferred.resolve);
  })
).done(function(){
    
    // code here

});
```

Also included is a library loader with React JS and React Dom hot-loaded using the Universal Module Definition (UMD) versions of the libraries.

You can now code in React but remember __JSX is not supported!__ You'll want to read https://reactjs.org/docs/react-without-jsx.html to know how to code in raw React without JSX.

#### [Open template](https://gif.com.ai?id=QmWdmmrVFHGcdt4w4hqThkST53sFLdsBrCo7kWQpeKFDJv)
What to do in case of Ransomware Attack.
Tags: ransomeware, protection, cybersecurity, itsecurity
Published: 2022-07-02 15:33:53

**

## What to do in case of Ransomware Attack.
**
1.Disconnect the infected computer. Isolate the other suspected computers from the network.
2.Check other computer sand servers on the network for the signs of encryption, altered files. In case of doubt disconnect from network. Then scan from anti ransomware package without connecting to the network.
3.Avoid paying Ransomware.
4.Report attack to law enforcement if required.
5.Rebuild your operating system, put all the latest security patches and update definitions of you AV. Don't put the generic accounts/passwords which were used earlier org wide. Attacker might have got these credentials already and he can come back on the new machine if same credentials are enabled in new machines.
6.Check all directly attached network storage for the infections and disconnect them from network.
7.Check for the data exfiltration.
8.Warn users not to open/click any suspicious email, as this can infect their machine.
9.Conduct detailed study that how the attack had happened and what was the initial infection point, what vulnerability was leveraged to further attack the systems and propagate in the environment.
10.Enable MFA for users, if not enabled. 

For more information you can also reach me out mukesh@eshieldconsulting.com
http://eshieldconsulting.com
Os primeiros passos em javascript
Tags: javascript, webdev, node, html
Published: 2022-07-02 15:05:10

Olá devs no post de hoje vamos listar os melhores lugares para você aprender  javascript.

O javascript é um linguagem de programação dinâmica criada primordial para desenvolviment fron end mais com o passar do tempo e a evolução da linguage começou a migrar para outras áreas da programação tais com back end e mobile. 

Os lugares para aprendejavascrip são os seguintes.

## curso em vídeo 

O curso em vídeo é uma canal do YouTube criado por Gustavo Guanabara que tem como objetivo princípal ensinar os primeiros passos das linguagens de programação para os iniciantes.

Em 2019 o Google patrocínio um curso de javascript para iniciantes no canal curso em vídeo.

O curso de javascript é muito bom ensina os conceitos básicos que todo dev javascript deve saber. Além disso o professor Gustavo Guanabara é um professor incrível e ensina muito bem.

[Link do curso](https://youtube.com/playlist?list=PLntvgXM11X6pi7mW0O4ZmfUI1xDSIbmTm)

## Rocketseat 

A Rocketseat é uma plataforma, um canal do YouTube e uma comunidade que tem como objetivo te transformar em um dev completo.

Na plataforma da Rocketseat tem um curso grátis  chamado discover que te ensina o básico de front end  e back end com foco em javascript.

[Link do curso](https://www.rocketseat.com.br/discover)


## w3schools 

A w3schools é uma plataforma de cursos online com sede nos Estados Unidos que tem como objectivo ensinar programação para todos.

A w3schools tem um cursos de javascript muito completo que te tira do zero ao avançado em javascript.

Mais os curso da w3schools não são em vídeos eles são em artigos.

[Link do curso](https://www.w3schools.com/js/default.asp)


## MDN Mozilla


O MDN Mozilla é a organização que gere o javascript e também é a organização que criou o navegador Firefox.

Na plataforma da MDN Mozilla tem toda a documentação do javascript. 

Se você é uma pessoa que gosta estudar na fonte tem o MDN Mozilla é para você.

[Link do MDN Mozilla](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)

Com esses quarto lugares para vocaprender javascript é garantido que você daqui algum tempo você vai ser um dev javascript muito bom.

[Link do meu blog](https://mao-na-massa.vercel.app)

Si este conteúdo foi relevante para você por favor si inscreve no meu Blog porque todas as semanas vai ter conteúdo novos sobre programação no celular termux vim nodejs reactjs nextjs javascript html css e muito mais até ao próximo post dev. o lema é **Mão na Massa**.
Building a web basic API with Sinatra and Active Record to support a React Front-End
Published: 2022-07-02 14:58:25

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv33zzntjwhbb7h2wo3e.png)
 
## What is Sinatra?
Sinatra is a minimal web framework created to give users the core essentials and abstractions needed to create straightforward and dynamic Ruby web applications. Prior to developing Sinatra applications, it is crucial to have a fundamental understanding of the Ruby programming language.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eogypo4jh587et5ccf46.png)
 
## CRUD Operations
The Front-End component uses Active-Record to interact with the database and API routes built with Sinatra handle several different CRUD actions:

1.  Creating a new to do

2. Reading a to do 

3. Updating a to do 

4. Deleting a to do 

**Basic Active Record migrations setup:**

- Create the **app/models** directory. Here is where your application controller file and database models will be located.

- Create models. File names should be lowercase (for example, task.rb). Class names should be singular and with the first letter capitalized. For example, **class Task**

- Create new migration files with the following command (replace create_models with a name of your choosing, and make sure _models is plural): bundle exec rake db:create_migration NAME=create_models

- table names should be lower case, and plural versions of their corresponding models. For example, model name = task, and table name = tasks

- Run migrations with the following command: **bundle exec rake db:migrate** .After migrations complete, check your schema.rb file.

- In db/migrate folder in **seeds.rb** file, fill out seed data. Ruby Faker Gem might be useful. Using and run the following code to populate your database with dummy data. **bundle exec rake db:seed**

- Run bundle exec rake console to view and manipulate data from your database

**In Conclusion**, With Active Record and Sinatra, a straightforward API can be easily created. Because so much complexity has been abstracted away by these Ruby Gems, getting started requires very little code.
Can You Solve This Simple Python Challenge?
Tags: python, beginners, challenge, programming
Published: 2022-07-02 14:44:03

You are running a lottery company, and you have distributed 100 tickets. Now, as the head of the company, you know that the winning ticket number has 7 as the last digit. You made an automatic portal for users to check whether they have won or not.
How will you fetch the last digit of the lottery number? Let's say The lottery number is 5678927, and you want to display Hurray. You won the lottery as your last digit is 7 

**PS: Solve this using only Arithmetic Operators**

**For Solution [Click Here](https://www.youtube.com/watch?v=6_7OkZpOEXE) and [Subscribe for more challenges](https://www.youtube.com/channel/UCQ8FDc6mi2BxxUSz8zcsy-A)**
Set a div or block to its content's width in CSS
Tags: css, javascript, webdev, tutorial
Published: 2022-07-02 14:24:12

In HTML we use `block` elements to take up the full with of a page. These differ in properties from `inline` elements, which are typically found within text flow. 

## Learn about the Box Model
Both `inline` and `block` elements are important components of CSS. [To learn about the box model in CSS, click here](https://fjolt.com/article/css-box-model).

When we create a new `div` or other `block` element, it takes up the full width of the page - but what if we want a `div` or any other `block` DOM element to only be the width of its contents and no more? To make an HTML `block` element like a div take up no more space than its content, we can use the `fit-content` keyword.

For example, here is a `div` containing some dummy text with a background. Even though the content is short, the `div` takes up the whole page:

![Full width div block element in CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqhl6f1ehgqffzppo42c.png)
 

If we want this div to now only take up the same width as its content, we can add `fit-content`:
```css
div {
    width: fit-content;
}
```
Now our `div` is much smaller, and only as large as the content it contains:

![How fit-content works in CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43h3dklnmof3wzewd1mn.png)

## Conclusion and Support

Support for `fit-content` is quite broad, but it will not work in Internet Explorer. Similarly, some browsers will only support it for `width`, and not for other properties. In any case, you can be pretty confident using this property with `width`, but there may be some caveats when applying it to other CSS properties. [A full list of support can be found on caniuse.com](https://caniuse.com/?search=fit-content).

[If you want to learn more about CSS, click here](https://fjolt.com/category/css).