teleren/devto huggingface dataset:
A New Vue: A PR With Vue.js
Tags: javascript, beginners, opensource
Published: 2022-11-19 09:12:24

## What is it?

This is another contribution to [Cuttle](https://github.com/cuttle-cards/cuttle), which is a card game that utilize poker cards. The goal is to get to certain amount of points to win while disrupting your opponent.

They uses [Vue.js](https://vuejs.org/), a framework for creating interface, which is rather new to me.

## The [PR](https://github.com/cuttle-cards/cuttle/pull/220)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn19v9hwdywxt0gr1bla.png)
For this one, I was asked to wrap the re-connection page's text input fields(account and password) in a `form` element to comply with HTML convention. Also, I needed to add `@submit.prevent="login"` to stop unwanted submission of the form.

## Process
Because this is a new framework for me, it took me some time to grasp how things work from looking at its website.
Some of the code used in the page I was supposed to edit remind me of Bootstrap, where you would see special named elements for rendering a page. As with most new tool, I start from looking at the [getting started](https://vuejs.org/guide/introduction.html) section of the site, which usually has some more beginner friendly information to help you understand the basic.
I tried to grasp some basic, and given that the PR isn't complex, I was able to have some understanding of the code structure to know how to place the `form` element. Using `@submit.prevent="login"` to stop unwanted submission reminds me of use of `e.preventDefault()` from React.js.

## Learning
Depending on how much I work on the repo, I might get more into learning Vue.js. It's always interesting to learn something new, especially you didn't even know it existed. After learning several tools and language, I find I often instinctively compare them and lean on languages and tools I know to help me understand then new ones. "Oh, so This like A but X!"
As far as growth since Hacktoberfest, having been exposed to a new framework definitely counts as growth in my book.
Promises in JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2022-11-19 08:51:53

Promise is basically a JavaScript object that produces some result to represent the eventual completion or failure of an asynchronous operation. Before moving further some prior knowledge of asynchronous JavaScript is required. Let's take a look at the general syntax of promises.

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


JavaScript promises usually consist of producing code and consuming code. Producing code uses "resolve" and "reject" as arguments. On one side, "resolve" is called when the job is finished successfully. On the other, "reject" is called when we have some errors.Consuming code consists of ".then" and ".catch" blocks. The ".then" block is executed when the job is successfully completed. On the other side, ".catch" is executed when we have some errors.

**Promise States:**

- **pending:** This is the initial state of Promise

- **fulfilled:** Promise is said to be fulfilled when it is resolved

- **rejected:** Promise is said to be rejected when we have some 
    error while resolving


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

 
**Implementing Promises:**



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

Initially the promise will be in the pending state. As the consuming code is waiting for the result of producing code(either "resolve" or "reject") which is asynchronous in nature.


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

when the "if" condition becomes true, the promise gets resolved
after 2 seconds, now we can say the promise is fulfilled. The ".then" block of consuming code is executed, and the result will be logged to the console.


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

when the "if" condition becomes false, the promise gets rejected
after 2 seconds, now we can say the promise is in rejected state. The ".catch" block of consuming code is executed, and the result will be logged to the console.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzwws6mxg5g05r55owe6.png)
CSS Battle: #16 - Eye of the Tiger
Tags: css, webdev, beginners, tutorial
Published: 2022-11-19 08:49:40



In this article, I will solve a [Eye of the Tiger](https://cssbattle.dev/play/16) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Eye of the Tiger](https://cssbattle.dev/targets/16.png)

## Solution

So now look at the Solution and how we are going to achieve this. 


### HTML

```html
<p c>
<p l>
<p r> 
```

- `<p c>` : Center Circle
- `<p l>` : Left Triangle
- `<p r>` : Right Triangle


### CSS


```css
* {
  margin: 0;
  background: #0b2429;
}

body {
  display: grid;
  place-items: center;
}

p { position: absolute }

[c] {
  width: 50;
  height: 50;
  border-radius: 1in;
  border: 45px solid #f3ac3c;
  box-shadow: 0 0 0 20px #0b2429, 
              0 0 0 30px #998235;
  z-index: 1;
}

[l], [r] {
  height: 160;
  width: 82;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  background: #998235;
}

[l] { left: 58 }

[r] {
  right: 57;
  transform: scalex(-1);
}

```


><small>Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)</small>

><small>Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.</small>

**Minified Version:**
```
<p c><p l><p r><style>*{margin:0;background:#0B2429}body{display:grid;place-items:center}p{position:absolute}[c]{width:50;height:50;border-radius:1in;border:45px solid #F3AC3C;box-shadow:0 0 0 20px #0B2429,0 0 0 30px #998235;z-index:1}[l],[r]{height:160;width:82;clip-path:polygon(0 50%,100% 100%,100% 0);background:#998235}[l]{left:58}[r]{right:57;transform:scalex(-1)}
```

{% tweet 1593888944537890816 %}

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
Inspection: Enabling Debugging By Default
Tags: javascript, opensource, beginners, gamedev
Published: 2022-11-19 08:43:03

## What is it?

This time, I try to add some contribution to [Cuttle](https://github.com/cuttle-cards/cuttle), which is a card game that utilize poker cards. No expensive or specialized packs to buy...just get some poker cards.
The game can be run locally, but it can also be ran online to match against others.

## The [PR](https://github.com/cuttle-cards/cuttle/pull/221)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wiutks4bdipvuh9q7eg.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xkhv3j1fw415r0xw925.png)
One of the issues was about enabling debugging by default to make development experience better. I took it on to add the `--inspect` flag to `node app.js` command that would be ran by some scripts specified in `package.json`, as well as updating `README.md` to guide devleopers toward using VSCode's node debugger to assist the development experience. This one is more specific toward debugging the backend server.
Once `node app.js --inspect` is ran, one can enter `Debug: Attach to node process` at the top window opened by `ctrl+shift+p` to select a process to watch for to debug.
The documentation is [here](https://code.visualstudio.com/docs/editor/debugging).

## Proces

Because it's a new repo for me, I started by reading the `README.md` and then the `CONTRIBUTING.md`, to familiarize with how to use he tool and setup my environment. 
I then look at issues to understand what need to be done and follow the conversation inside, if any.
After all that, I try tackle the issue and follow requirement lay out by the maintainers and the person filed the issues.

## Learning

From inspecting the code, I got to look at a lot of script that uses in `package.json`. As I'm not familiar with setting up these, it's definitely nice to see how others who do it, especially for a larger project with many contributors. There are also different tool I would not be aware of before this.
For instance, they use [Cypress](https://docs.cypress.io/guides/overview/why-cypress) which allows you to set up certain test cases would normally require user input/interaction. With a click you can automate the specific test instead of having to operate manually. It's pretty neat! I definitely learn more than what I know before. If I learn something new, I consider it a progress from before.
Interfaces and error checking golang
Tags: go, programminglanguages, programmingtips
Published: 2024-06-19 20:25:36

---
title: Interfaces and error checking golang
published: true
date: 2022-11-19 08:34:30 UTC
tags: golang,Go,programminglanguages,ProgrammingTips
canonical_url: https://blog.gkomninos.com/interfaces-and-error-checking-golang
---

Introduction In this post I would like to discuss a mistake that I have seen while I was reviewing a pull request. We are going to talk a bit about golang interfaces in the context of error handling and checking if an error is nil Let's see some code...
How To Make Responsive Image Gallery With HTML CSS JS | Lightbox Image Gallery Design
Tags: html, css, javascript
Published: 2022-11-19 08:27:03

How To Make Responsive Image Gallery With HTML CSS JS | Lightbox Image Gallery Design.

In this video tutorial we will learn How to make Responsive Image Gallery with HTML CSS and JavaScript, you can also say that lightbox Image Gallery. 

It's responsive image gallery, you need to use flex box and align the items, when you will increase or decrease the size of the browser, then image gallery with display perfectly on different devices.

I've used jQuery library to display the lightbox inside the lightbox have image, next, previous, and close button. Also have a image caption left bottom of the image.

So, you will learn step by step usage of HTML, CSS and Also little bit of JavaScript on this project. If you like it, you can add it on your project.

{% embed https://www.youtube.com/watch?v=aVslaasd1NU %}
How to Make a Coming Soon Website Using HTML CSS and JavaScript
Tags: html, css, javascript
Published: 2022-11-19 08:22:36

How to Make a Coming Soon Website Using HTML CSS and JavaScript

in this tutorial, we will learn How to Make a Coming Soon website using HTML CSS and JavaScript.

I've used HTML, CSS, and Also JavaScript to make a coming soon page. Inside the project have a Background Image, Text, and also input fields.

I've mentioned the numbers in the center of the page, So, I've used JavaScript to display the count down timer. I've mentioned the time period of the website will be 1st Jan 2023. 

When the time will complete then, the site will be ready, So, If you want to change the time period you can do that. 

So, you will learn everything step by step, If you are beginner or you've a knowledge in HTML, CSS hope you will get new things from this tutorial.

{% embed https://www.youtube.com/watch?v=MPRyY8ELR_A %}
Bootstrap 5 Footer
Published: 2022-11-19 08:13:20

[Bootstrap 5 Footer](https://bbbootstrap.com/snippets/bootstrap-5-footer-bootstrap-5-75679937) Freebie is an excellent resource to get something to start with your next project. This HTML and CSS-based project have been created via the Bootstrap 4 framework, which is one of the most popular and popular front-end development frameworks.

[Bootstrap 5 Footer](https://bbbootstrap.com/snippets/bootstrap-5-footer-bootstrap-5-75679937) is a set of HTML and CSS UI elements for creating footers and headers for web apps. It’s a great starting point for any new design project. The well-tested components are lightweight, focused on usability, and responsive to the latest web standards: Google’s Material Design Lite style guide and the Bootstrap 4 default grid.

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

The Footer is a project on Bootstrap 5. Footer is responsive and suitable for different screen resolutions. It uses HTML5, Css3, JavaScript framework, and Jquery library.

Our 5 footer is perfect for your next website! Easy to use and install, it can increase the overall readability of your site. Bootstrap was created to help you quickly create quality modern web pages.
How to achieve desired output in JavaScript ?
Published: 2022-11-19 08:06:52

const playerSkills = [
  { name: "Sachin", skill: "Batsman" },
  { name: "Dravid", skill: "Batsman" },
  { name: "Dhoni", skill: "WK" },
  { name: "Bumrah", skill: "Bowler" },
  { name: "Rohit", skill: "Batsman" },
  { name: "Zaheer", skill: "Bowler" },
];



// Desired Output
const skillset = [
  { skill: "Batsman", people: ["Sachin", "Dravid", "Rohit"], count: 3 },
  { skill: "Bowler", people: ["Bumrah", "Zaheer"], count: 2 },
  { skill: "WK", people: ["Dhoni"], count: 1 },
];
Spot The Difference: A PR to Differentiate between the blog URL and the RSS
Tags: javascript, beginners, opensource
Published: 2022-11-19 08:04:12

## Background
[Telescope project](https://github.com/Seneca-CDOT/telescope) is still a work in progress, like most codes are. There is always something to improve. This time, it started with user confusion about what to enter during sign-up on the website. Not everyone knows the differences between a blog URL (blog's root HTML) and the RSS (blog's feed XML), so people naturally try to enter the wrong things and get confused. [My PR](https://github.com/Seneca-CDOT/telescope/pull/3763) was meant to add a bit of explanation to amek it clear.

## Process
I started by looking at the issue from the beginning to understand the full context, then I briefly imagine how the fix can be done at the conceptual level that's not specific to a given code or language before reading the code, like where to add text, how many variables I might need, do I need a loop...and so on, I then look at the code to see what can be done and how, to bridge between the code and my concepts.

I tried quite a number of things. I quickly realized some solutions don't produce the result I want, like adding `\n` and `<br/>` directly to format the text. The webpage will simply print them all out as text. I then tried to add them as separate elements, but someone suggested that use array instead to make it more flexible to allow more or less things to be added as needed.
I did that and use `map()` to render the string elements of the array with <br/>, which saved more space than adding them as separate elements.

TypeScript code:
```
            {promptExamples?.map((example) => (
              <>
                <br />
                {example}
              </>
            ))}
```
If there's no value assigned, nothing gets rendered.

This turned out to be even better, as there is another page that uses the same type I was trying to modify, which would get affected if I didn't go with the suggestion. That page doesn't use any example.

## Learning
This gets me more practice with TypeScript and tyrign to adhere to code structure of other people's work. Something that makes you think harder because you are working with more constrains to your solution. This one is close to some of the PRs I did for Hacktoberfest. As long as I learn something, it's all good.
Top 10 Biggest Data Breaches of 2022 and Learnings From Them
Published: 2024-06-22 09:03:50

---
title: Top 10 Biggest Data Breaches of 2022 and Learnings From Them
published: true
date: 2022-11-19 08:03:58 UTC
tags: 
canonical_url: https://mojoauth.com/blog/top-data-breaches-and-learnings-from-them/
---

Cyberattacks and data breaches have increased with the number of enterprises conducting business online, generating a colossal amount of data. Data breaches have significantly escalated over the past several years, and the current year - 2022 - has been no different. This year, as far as now, data breaches have harmed businesses of all forms, sizes, and sectors, causing millions of dollars in losses for them. A data breach could cause a wide range of harmful impacts on businesses, including physical, financial, material, or non-material damage.
What is a Robots.txt file?
Tags: cybersecurity, enumeration, activerecon, webcrawlers
Published: 2022-11-19 07:58:10


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfcwht22hs4cowlei22h.jpg)
## Introduction

A robots.txt file is a way of controlling access to the list of popular URLs and the list of non-popular pages, based on a variety of security concerns. For example, you may want to enforce HTTPS, or prevent people from searching for private data like your customers’ names and addresses.

A robots.txt file instructs web crawlers on how to access the page, what sections of the page to ignore, and what sections to follow. By controlling which section pages are crawled and indexed by a web crawler, you can specify what content appears in search results for that page.

## Enumerating robots.txt files
To locate robots.txt in any website append the /robots.txt at the end of the web URL example, http://your_dormain/robots.txt. If the website uses robots.txt to instruct web crawlers, your output will look like this.

```
User-Agent: *
Allow : /admin/
Disallow: /
```
From the output above, it is clear the web crawler has been instructed to index files under the **/admin/** directory and ignore the rest.
Using the information gathered from the robots.txt file the attacker can visit https://your_domain/admin/ to find more information that can aid in achieving malicious intentions.
In the scenario above the attacker may be directed to the admin panel login page. This poses a critical security risk since attackers will try all means to access the admin panel.

## Impact
The Robots.txt file does not present any security concerns. However, if the contents of the file reveal sensitive information the attackers can take advantage and access the unauthorized web directories for their advantage. It is always advisable not to list important files/directories in the robots.txt file.

## Prevention
To prevent sensitive information from being displayed under the robots.txt file developers can use **X-Robots-Tag** with appropriate values to instruct web crawlers on whether to index files/directories or not. The **X-Robots-Tag** is placed in the response header section.

```
X-Robots-Tag: googlebot: nofollow
X-Robots-Tag: otherbot: noindex, nofollow

```
The values noindex, and nofollow tell the crawler not to index the Googlebot and other bots.

Let's take a practical look at the following scenario...
If a user uploads images to his or her website, for example, the image could end up on an index page where users may be exposed to adult content. In this case, the developers of the website will want to ensure that no crawlable pages contain adult content by adding a line in their robots.txt file that specifies "noindex,nofollow"

Thanks for reading. Looking forward to your feedback.
The Anatomy of Data Science
Tags: datascience, computerscience, programming, python
Published: 2022-11-19 07:52:56

The Anatomy of Data Science.

The most common definition of a Data Scientist is that of an expert in solving complex problems in different disciplines (finance, marketing, industry, etc.) making use of data analysis with statistical and computer tools.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmygdxxslboyv1qlbsyp.jpg)
Playwright Awesome Selectors
Tags: playwright, beginners, testing, javascript
Published: 2022-11-19 07:48:52

Check out my [short post](https://medium.com/@vibhanshu_jain/playwright-awesome-selectors-6b5460e8d207) on Playwright Awesome Selectors

My personal favourite is `page.getByRole(role, options)`
eg:

```
await page.getByRole('button', { name: 'Sign in' }).click();
```

Do tell me yours...😀
Dealign With A Magical Number: A Follow-Up PR
Tags: beginners, javascript, opensource
Published: 2022-11-19 07:40:08

This one is going to be pretty short. To follow-up on a [previous work](https://dev.to/cychu42/hacktoberfest-week-4-wrap-up-and-overflow-50fk) where I handled some text overflow, I made [a new PR](https://github.com/Seneca-CDOT/telescope/pull/3757) to tackle the magic number I used for max width of an element. The goal was to at least make sure the number comes from somewhere reasonable. Because I can't use real percentage without messing up the UI in some way, I decided to "sort of do" it instead. I look up the closest parent element's and based the max width on the parent element's by a percentage. The parent element's max width was 510px, so I picked 60% of that, which is 306px.

This is my first follow-up PR, which introduce to me the idea of merging a PR and then follow it with related issues arise during the PR. Before, I would lean more toward fixing connected issue in the same PR, but one can just merge the PR if it covers the basci of the goals and then follow-up with more issues/PRs to tackle the rest. 

I try to measure my growth by the complexity and volume of the code I work on, as well as whether I lean something new.
While this is simple, I at least learned something new.
Build your first Smart Contract with "CosmWasm"
Published: 2022-11-19 07:08:29

For the last two weeks, I spend my time following free courses on [Vimeo](https://vimeo.com/user109497220), to build CosmWasm blockchain.

_`screenshot with "donate" function from the contract.rs file:`_

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

**What I have learned:**

- [Rust](https://www.rust-lang.org/) languages, to create CosmWasm Smart Contracts
- Basic tools, library: [cosmwasm-std](https://crates.io/crates/cosmwasm-std), [cw-storage-plus](https://crates.io/crates/cw-storage-plus), [cw-multi-test](https://crates.io/crates/cw-multi-test), ... .
- Contract entry points, state management, migration ... . 
- How to write Unit Tests!

---

- The course focuses on giving you raw knowledge and showing you the best practices to make your life easier in the future!

- My skills in Rust languages increased drastically, I feel like I am confident enough to continue building my own blockchain.

- Next goal is https://cosmonaut.cosmwasm.com/

---

**Resources:**
- video tutorials: https://vimeo.com/user109497220
- my source code: https://github.com/Ebazhanov/cosmwasm-blockchain-smart-contract-example


Have fun!
Flutter: How To Mock Functions For Testing
Tags: flutter, dart, mocking, functions
Published: 2022-11-19 07:37:57

This article explains how to mock top-level functions in Dart for Flutter widget tests. 

https://www.christianfindlay.com/blog/flutter-mock-functions-for-testing

Functions don't have to be second-class citizens in Dart, and you don't have to make a new class every time you want to mock a dependency. Pass your functions into your widgets with dependency injection and replace them with substitutes for testing.