teleren/devto huggingface dataset:
Visibility Hidden Vs Display None
Tags: css, webdev, beginners
Published: 2023-03-13 15:09:16



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgh8jd6lbefu1gt6k3e9.png)In this [YouTube video](https://youtu.be/JzgbsXyh4ok), we  will explore the difference between two commonly used CSS properties: visibility:hidden and display:none. As a web developer, it's essential to understand the difference between these two properties and when to use them appropriately.
The video begins by introducing the two properties and their basic functions. We then dive deeper into the properties and demonstrate the difference between them with the help of a simple program. This program applies the properties to two separate images and allows us to toggle them on and off with a JavaScript program.
During the video, we showcase the differences between the two properties using real-time examples. We explore how visibility:hidden affects the layout of the page and how display:none does not. We also demonstrate how using visibility:hidden on an element with a large amount of content can significantly slow down the page rendering and affect the user experience.
The video also provides an in-depth explanation of how to use the dev tools to toggle the values of the two properties and see how the elements behave. We demonstrate how visibility:hidden still takes up space in the document, while display:none does not.
The video concludes by summarizing the key differences between the two properties and reiterating the importance of choosing the right property based on the specific needs of your web page.
Overall, this YouTube video provides an informative and easy-to-understand explanation of visibility:hidden and display:none properties in CSS. It's a must-watch for web developers who want to improve their understanding of these essential properties. Don't forget to download the simple program using the link in the video description and experiment with these properties yourself!
I re-created my portfolio using Nuxt3
Tags: nuxt, javascript, vue, programming
Published: 2023-03-13 14:53:28

I have been working with Vue a lot. And When nuxt3 came out, I started trying it out. And the first thing I do was change my portfolio website using Nuxt. I am amazed at how fast it is now compared to the older version of Nuxt.

I created my portfolio website with blogs, which is why I made the decision to use Nuxt because it supports Server-Side Rendering. And we all know that SSR is good for SEO, and I like my blogs to be searchable on the internet and can be crawled by internet crawlers.

Here is my Portfolio website, I know their are things to improve.
http://brojenuel.com/
Inicio como Front End
Published: 2023-03-13 14:53:25

Galera, depois de quase 10 anos longe do mercado de programação mais especifico Fron End ( antigo Web Designer ) resolvi retornar e estou buscando informações por onde começar estudar novamente para se atualizar e aprender as novas linguagens de programação e como tudo é feito nos dias atuais. Se alguém puder compartilhar dicas de por onde começar os estudos ficaria super grato.
VanillaJS Cookie Yönetimi
Tags: javascript, vanillajs, webdev
Published: 2023-03-13 14:49:45


Bir cookie.js dosyası oluşturup, içerisine yazıp unutmalık iki fonksiyon.

Bazı zamanlarda front-end tarafında cookie okuyup, yazmak gerekebiliyor.

```
function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");

        if (name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }

    return null;
}

function setCookie(name, value, expiryMin) {
    var cookie = name + "=" + encodeURIComponent(value);

    if (typeof expiryMin === "number") {
        cookie += "; max-age=" + (expiryMin * 60);
        document.cookie = cookie;
    }
}
```

**Cookie okumak için;**
_Cookie yoksa **null** değer döner._

```
$ console.log(getCookie('BenimAdim'))
# Kuki
```

**Cookie tanımlamak için;**
_Son parametrede dakika cinsinden ne kadar süre cookie tutmak istediğimizi belirliyoruz._

```
$ setCookie('BenimAdim', 'Kuki', 1440)
$ console.log(getCookie('BenimAdim'))
# Kuki
```
Use case and syntax differences between JavaScript and Python
Published: 2023-03-13 14:42:43

Python and JavaScript are two of the most popular programming languages in use today. While both languages are widely used in web development, they differ significantly in their syntax and use cases. In this blog post, we will explore the syntax and use case differences between Python and JavaScript.

Syntax Differences:

- Indentation: One of the most noticeable differences between Python and JavaScript is the way they handle indentation. Python relies on indentation to indicate blocks of code, while JavaScript uses braces {}. For example, in Python, you would write:

`if x > 5:
    print("x is greater than 5")
`

In JavaScript, you would write:

if (x > 5) {
    console.log("x is greater than 5");
}

- Variables: In Python, you do not need to declare the data type of a variable. The interpreter determines the data type based on the value assigned to the variable. For example:

x = 10  # integer
y = "hello"  # string

In JavaScript, you need to declare the data type of a variable using the var, let, or const keyword. For example:

var x = 10;  // integer
let y = "hello";  // string

- Functions: In Python, you define a function using the def keyword. The function body is indented, and the function ends when the indentation level returns to the previous level. For example:

def add(x, y):
    return x + y

In JavaScript, you define a function using the function keyword. The function body is enclosed in braces {}. For example:

function add(x, y) {
    return x + y;
}


Use Case Differences:

1. Web Development: JavaScript is primarily used for web development, whereas Python can be used for a wider range of applications. JavaScript is used to create interactive web pages, handle user input, and perform client-side validations. Python is used for backend development, data analysis, machine learning, and scientific computing.

2. Data Analysis: Python is widely used for data analysis and scientific computing. It has a rich ecosystem of libraries such as NumPy, Pandas, and Matplotlib, which make it easy to work with data. JavaScript, on the other hand, is not well-suited for data analysis, as it lacks the libraries and tools necessary for this task.

3. Artificial Intelligence and Machine Learning: Python is the preferred language for artificial intelligence and machine learning. It has libraries such as TensorFlow, Keras, and PyTorch, which are widely used for these tasks. JavaScript does not have a robust ecosystem for machine learning, although there are some libraries such as Brain.js and TensorFlow.js that are gaining popularity.

In conclusion, Python and JavaScript are both powerful programming languages that have their own strengths and weaknesses. Python is a versatile language that can be used for a wide range of applications, while JavaScript is primarily used for web development. While there are some syntax differences between the two languages, the biggest differences lie in their use cases. Whether you choose to use Python or JavaScript will depend on the specific requirements of your project.
Use Cases of Graph Databases (Part 2)
Published: 2023-03-13 14:41:15

**Impact on Supply Chains:**

Among the lasting effects of the coronavirus pandemic has been the realization that global supply chains can be alarmingly fragile. With or without disruption, manufacturers are acutely aware of how complicated many supply chains are to maintain and optimize.

Consider the day-to-day challenges faced by auto manufacturers. The first requirement is to accurately forecast customer demand to determine the number and types of parts to order — down to the various models and options buyers are expected to choose. Those predictions need to sync with the availability of parts from hundreds of suppliers, along with estimates of manufacturing efficiency and supplier risk.

Jaguar Land Rover (JLR) chose a graph database solution because it could span the many data silos that needed to be tapped for supply chain analysis — and explore the matrices of relationships among data elements. The primary goals were to increase the average profit per unit sold and to reduce aged inventory, along with minimizing the effects of supplier disruption. Some key supply-chain planning queries at JLR now take 45 minutes as opposed to weeks and, more importantly, management can answer questions it never had the opportunity to ask before.

**Improving the accuracy of fraud detection:**

We’ve all witnessed the evolution of fraud detection through our bank, credit card and telecom companies. Early rule-based efforts tended to miss dubious transactions or flag innocent transactions as fraudulent. When the financial industry adopted graph databases to augment their AI/ML efforts, however, the accuracy of fraud detection improved noticeably.

Graph databases coupled with AI/ML improve the accuracy of fraud detection, reducing false positives and detecting anomalies that might otherwise be missed. Machine learning must draw on many different data types to model a customer’s normal behavior — location, device, payment type, authentication method and so on. Plus, what’s defined as normal behavior patterns must be adjusted on the fly in response to legitimate change. Graph databases support that dynamism and enable AI/ML to traverse customer interactions to identify significant variances.   

Financial services giants JP Morgan Chase and Intuit have both adopted graph databases to boost their AI/ML fraud detection efforts. JP Morgan Chase uses a graph database to help protect more than 60 million households in the U.S. According to Intuit, graph-based machine learning has enabled the company to detect 50% more potential fraud events and has reduced false positives by approximately the same percentage.



Want to extract all the benefits of PostgreSQL along with Graph features look at:
[Apache AGE](https://age.apache.org/)
[Apache AGE Github](https://github.com/apache/age)
🔐How to decode and use 2FA code generated by TOTP Algorithm 🤖
Published: 2023-03-13 14:39:04

You may have entered a 6-digit code from a 2FA app like Google Authenticator 😬, but where did this code come from? The answer lies within the QR code and the inner workings of the Time-based One-time Password algorithm (TOTP) 🔍.

In this article, we will decode a QR code, explain the TOTP algorithm, and show how the HOTP value is calculated to generate a time-based 2FA code.
Setting up the sample

We will use the example of enrolling a work email account for a 2FA app, we will use Microsoft Authenticator app and scan the following QR code.
Decoding the QR

First, we must decode and make sense of the QR code.

To decode the QR code, we can use a decoder. We can see the following URI:

otpauth://totp/work-email-stevemc%40work-email.com?secret=BL5IVV7PKMI5KPIJ&issuer=Work%20Email

From this, we can see some of the fields which are displayed by the app. In the order of appearance, this is the issuer, account name, and issuer again. There are also some information which are intended to be read by the app. Here, it is the type of OTP algorithm (TOTP), and secret.
The time

Time undoubtedly plays an important role in the TOTP algorithm, which is defined as TOTP = HOTP(K, T), where K is the secret key and T = (Current Unix Time - T0) / X, with floor division being applied (the remainder of the division is ignored).

Current Unix Time is an integer counting the number of seconds (excluding leap seconds) since the Unix Epoch (January 1st, 1970).

To generate a code, the app takes the current time and divides it by the interval, in this case, 30 seconds. The app then hashes the result of this division with a secret key and truncates the result to create a 6-digit code.
HOTP

From before, we have K = BL5IVV7PKMI5KPIJ and T = {Current Unix Time / 30}. By default, HOTP uses HMAC-SHA1. Taking K (key) and T (counter value), HMAC-SHA1 produces an irreversible fixed-size value (a hash) from the input.

Substituting in the converted values, we can compute the HMAC. This hash is represented in hexadecimal (base 16), which uses the digits 0-9 and A-F to represent values from 0 to 15.

Next, we follow a dynamic truncation algorithm to extract a section of the hash.

    Given the 20 byte hash String, extract the “low-order 4 bits of String[19]” as Offset. When splitting the hash into 20 segments, String[19] is the last segment.

    Convert the 4 bits into a number.

    Return the last 31 bits of String[Offset]...String[Offset+3]

Finally, the last 6 digits of the result are taken as the TOTP value.
CentOS 7 NodeJS Kurulumu
Tags: centos, node, npm, pm2
Published: 2023-03-13 14:31:25

CentOS 7 sunucu üzerinde NodeJS ve npm kurulumu gerçekleştirmek için aşağıdaki yönergeleri izleyebilirsiniz.

**NodeJS 16 kurmak için;**

```
yum install -y gcc-c++ make
curl -sL https://rpm.nodesource.com/setup_16.x | sudo -E bash -
```

**NodeJS 18 kurmak için;**

```
yum install -y gcc-c++ make
curl -sL https://rpm.nodesource.com/setup_18.x | sudo -E bash -
```

Ardından aşağıdaki komutu uygulayarak kurulumu tamamlayabilirsiniz.

```
yum -y install nodejs
```

Kurulu NodeJS sürümünü görmek ve teyit etmek için;

```
node -v
```
_Çıktı: v16.19.1_

Kurulu npm sürümünü görmek ve teyit etmek için;
```
npm -v
```
_Çıktı: 8.19.3_

### PM2 Kurulumu (Bonus)

Aşağıdaki komutu uygulayarak pm2'yi global olarak kurabilirsiniz. 

```
npm install pm2@latest -g
```

PM2, Nodejs projeleri için işlem yöneticisi paketidir. Aşağıya bıraktığım link ile kullanımına dair gerekli bilgileri edinebilirisiniz. Yakında PM2 ile ilgili bir yazı hazırlamayı da planlıyorum.

Link; [https://pm2.keymetrics.io/docs/usage/quick-start/](https://pm2.keymetrics.io/docs/usage/quick-start/)
FetchApi().innerHTML = "dive into it"
Tags: javascript, webdev, frontend
Published: 2023-03-13 14:29:48

As a frontend developer this can never happen that you would be not playing with APIs. Building APIs and Showing the data from those APIs to the user, both comes from a very different backgrounds but both of them are equally important.

We can call APIs by different methods out there, but using and starting with one of the most popular methods is important and that is "fetch" method.


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

Let's understand this with a simple piece of code.


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


So, in this code we are using a free public Api.
As you can see we are using _two params_ in the fetch method and first one is "URL of the API".

Now, as the second params we are passing an Object which has some props like method, headers and body.

1)method:
In the method prop we pass different type of HTTP request methods (specifically only that method which is suitable for that particular logic)

First understand about HTTP Methods,
HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. 

GET
The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

POST
The POST method submits an entity to the specified resource, often causing a change in state or side effects on the server.

PUT
The PUT method replaces all current representations of the target resource with the request payload.

DELETE
The DELETE method deletes the specified resource.

and more methods.

2)body:

In this we pass the key-value pairs which we wanna pass to the API.
but the data are in JSON form so, it will demand a method i.e., JSON.stringify().

3)headers: 

As we are passing JSON data so we need to tell API that in which form we are passing data.
So we give "content-type" property and in this case it is "json"

Read more at:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Hope it helps :)
How To Become A Front-End Developer 🎯💯.
Tags: webdev, frontend, beginners, css
Published: 2023-03-13 14:27:41

Becoming a front-end developer requires a combination of technical skills, experience, and creativity. Here are some steps you can take to become a front-end developer:

**Learn the basics**: Start by learning the basics of HTML, CSS, and JavaScript. These are the building blocks of front-end development, and you'll need to have a strong foundation in these areas to be successful.

**Take online courses or attend coding bootcamps**: There are many online courses and coding bootcamps that can help you learn front-end development. Look for programs that offer hands-on experience and real-world projects to build your skills.

**Build a portfolio**: To showcase your skills to potential employers, it's important to have a portfolio of projects that demonstrate your front-end development skills. Start by building simple projects and work your way up to more complex projects.

**Join online communities**: Joining online communities of developers can help you stay up-to-date with the latest trends and best practices in front-end development. Participate in discussions, ask questions, and seek feedback on your work.

**Find a mentor**: Finding a mentor who has experience in front-end development can be incredibly helpful. They can offer guidance and advice on how to improve your skills, as well as introduce you to new opportunities.

**Stay current**: Front-end development is a constantly evolving field, so it's important to stay up-to-date with the latest trends and technologies. Attend conferences, read industry blogs, and continue to learn and improve your skills.
🔭 2 Tips on How to Discover Yourself
Tags: productivity, future, career, beginners
Published: 2023-03-13 14:18:09

Discovering yourself and choosing a career path accordingly is a vital thing for today’s world. A hobby that you’re so invested in might not be a viable career. However, the field you will be working in and the work you will be doing for the rest of your life should be fulfilling for you to a certain degree.

It will help you keep your motivation and get rid of the feeling of waiting for your shift to be over every single day. You’ll contribute to the company you’re part of and feel good about it.

When I started college, I had various opportunities to find what I like doing. The first one was an ROV competition. ROVs are vehicles that operate underwater for objectives such as boat inspection. We participated in competitions every year and I got to develop different sides of the vehicle.

I developed embedded system software, designed its PCB, and coded the piloting interface.

I found embedded systems to be annoying. PCB design was cumbersome. I had the most fun coding the interface with Node.js.

I realized it wasn’t about Node.js itself. It was about high-level programming. I liked seeing the immediate result of the work I’m doing, and I found it to be more intuitive.

Beware, though, that this is my opinion, and your experience will differ. That’s exactly why you should hunt down opportunities to try doing different things.

Here’s what you can do:

1. 🥇 **Get your competitive juices flowing by participating in hackathons and other competitions.** Not only will they challenge you to solve complex problems using the latest tools, but they'll also allow you to network with a dynamic community of like-minded individuals, including some of the brightest minds in your field.

2. 🎥 **Enhance your skills and broaden your horizons with an online course or YouTube series.** These platforms are treasure troves of knowledge and can give you a comprehensive overview of a subject you're passionate about. From edX, Coursera, and Udemy, to Udacity, there's a plethora of free and paid options to choose from. Remember, even the most complex topics may seem daunting at first, but with determination and effort, you'll soon be able to grasp them and put your newfound knowledge into practice.

It should also be considered that most things will look cryptic and hard at first sight. You need to invest some time and try building your idea based on that.

While experiencing different things, you’ll discover your criteria: What makes you feel fulfilled? What can you stand/cannot stand? Is it too physically demanding or is it just sitting at a desk?

🌅 Go on, discover yourself and your criteria, choose your path, and own your career.
Music Monday — What are you listening to? (Underground Edition)
Tags: watercooler, discuss, music
Published: 2023-03-13 14:13:40

_cover image source: [Gunpowder & Sky](https://giphy.com/gifs/gunpowdersky-rap-2zdOmFKKIAy5DlaBmO)_

**According to [Wikipedia](https://en.wikipedia.org/wiki/Underground_music#:~:text=The%20term%20%22underground%20music%22%20has,the%20mainstream%20commercial%20music%20industry.), Frank Zappa described "underground" culture saying "mainstream comes to you, but you have to go to the underground." So, with that in mind, what music do you listen to that doesn't fit the mold of the mainstream? To be clear, it's totally fine if the artist made it popular, I'm just looking more so for folks who go against the grain... whatever feels underground to you, I wanna know what it is and why you think of it that way. As always though, you don't have to follow the theme... we're open to all types of tunes here.**

![cartoon of Frank Zappa rocking out on guitar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t9agtkhdmm17dh86fzj.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

Now, let me hear your favorite underground, lesser known music! _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Really looking forward to listening to y'all's suggestions! 🎶
5 clever💪 design ideas for beginners🎯.
Tags: webdev, beginners, frontend, htmlcss
Published: 2023-03-13 14:04:49



**1. Use Contrast**
Contrast can make a design pop and draw attention to specific elements. Experiment with contrasting colors, shapes, and sizes to create visually appealing designs. For example, pairing a bold, sans-serif font with a delicate script font can create a striking contrast.

**2. Keep it Simple**
Simplicity is key in design. Start with a simple layout and add elements gradually as needed. Avoid cluttering your design with too many elements or too much text. White space can be just as important as the elements on the page.

**3. Play with Typography**
Typography can make or break a design. Experiment with different fonts and font sizes to create a hierarchy of information. Use typography to convey emotion and tone, and to guide the viewer's eye through the design.

**4. Use Grids**
Grids are a helpful tool for organizing design elements and creating a sense of balance and harmony. Start by dividing your design into a grid and use the grid lines to align elements and create a consistent structure.
 
**5. Incorporate Images**
Images can add visual interest and emotion to a design. Use high-quality, relevant images that complement the message of the design. Consider using images as backgrounds or incorporating them into the layout of the design.