teleren/devto huggingface dataset:
The devil is in the details…
Tags: a11y, webdev
Published: 2022-04-05 11:31:53

---
title: The devil is in the details…
published: true
description: If you show and hide content in your page using JavaScript you can break important functionality, like the "find in page" use case. By using semantic HTML, you can support this.
tags: accessibility, webdevelopment
canonical_url: https://christianheilmann.com/2022/04/05/the-devil-is-in-the-details/
---
It is not that hard to create a script that shows and hides parts of the document, but often we forget about how our visitors use the products we build. Especially when it comes to navigating huge documents, people tend to use the "find in page" functionality of browsers. And when they do and we hid content with JavaScript, browsers would either not find the content or users won't know where in the document it is. 

If you use the HTML elements of [summary and details](https://developer.mozilla.org/docs/Web/HTML/Element/details) you don't have to write any show/hide code yourself and users of Chromium browsers (Edge, Chrome, Brave…) can use "find in page" as the browser will automatically expand the details that contain their search terms.

Here's a quick video showing that on [The VS Code YouTube channel](https://www.youtube.com/watch?v=Nqe4ouM66QM) and [on TikTok](https://www.tiktok.com/@vscode/video/7082954117584260395).

{% youtube pljqLl2eVOM %}

You can see this in action on any page that uses the elements. For example [on this W3C document](https://www.w3.org/WAI/WCAG2/supplemental/) you can open the Developer Tools and see the browser add the "open" attribute to the detail in question when the term was found inside the details. 

![Animation of the browser automatically opening a section when a search term was found inside it."](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pru3ppe6ln5oh7ghq2o5.gif)

More about summary and details:

* [Robin Rendle on use cases](https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/)
* [Chris Coyier on animating the interaction](https://css-tricks.com/how-to-animate-the-details-element/)
* [Greg Gibson on styling problems](https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ )
* [Adrian Roselli on what we shouldn't use details and summary for](https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html)
What Is Google Maps API?
Tags: webdev, programming, javascript, python
Published: 2022-04-05 11:03:48

Google Maps API is an application programming interface that allows developers to add a Google Maps element to their projects. Google has worked with over 500,000 businesses — including some of the world's largest travel sites — using the API to embed maps in their sites and applications. The API makes it easier for users to find directions and location-specific information about a business. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfgb1kmurkn8bqz9cclc.jpg)
The [Google Maps API](https://zenserp.com/) makes updating and improving your mapping experience super easy. With just a few lines of code, you can display maps to your users, add markers or images, and use the rich set of directions data that drives traffic to your business.

•	Location maps
•	Geospatial visualization
•	Mobile apps
•	Customized maps

Zenserp enables you to obtain accurate and geolocated search engine results. You can register a new API key at our developer portal.
curl   
"https://app.zenserp.com/api/v2/search?apikey=YOUR-APIKEY&q=Coffee%20House%20Vienna&tbm=lcl" 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4xm85dbgg7vl2o9em6a.PNG)
Hello World
Tags: webdev, world, hello, beginners
Published: 2022-04-05 11:31:04

A primeira postagem aqui não poderia faltar um **hello word** clássico, decidi fazer essa conta no DEV.to para registar minha evolução como desenvolvedor. Bom me chamo Pedro e comecei a estudar fazem 6 meses, estou no desenvolvimento Web com HTML5, CSS3, Javascript e suas frameworks como React e Node,essa semana  comecei a estudar banco de dados relacionais e não relacionais, no meu projeto atual estou  desenvolvendo usando React no Front  e Node no Back com PostgreSQL e MongoDB, esse vem sendo meu maior projeto já desenvolvido mas sei que após esse virão outros maiores. Estou animado e venho gostando muito da área.
Organização e Versionamento da Base de Dados
Published: 2022-04-05 11:26:10


Actualmente há muitas formas de organizar os componentes de um software. A organização do software facilita a compreensão e manutenção do software. O surgimento de ferramentas de versionamento contribuiu para estes ganhos.

Além dos componentes, um software também possui uma Base de Dados. A base de dados possui o seu código (scripts), que pode organizado e que sofre constantes alterações. Sabemos que em muitos casos a base de dados tem sido excluída dessa organização.


## Como organizar a Base de Dados?
Para organizar a base de dados, devemos separar os principais scripts, tais como:
- Estrutura da Base de dados;
- Modelos: lógico e conceitual;
- Views Materializadas;
- Procedimentos;
- Funções de Cálculo;
- Eventos;
- Scripts de Automação.

**Sugestão**: Os scripts da base de dados também podem ser organizados e versionados para facilitar o controle de alterações. Podemos criar um repositório separado, contendo os scripts da BD ou adicionar no código do projecto.

**Exemplo**: Base de dados para um Sistema de Recrutamento. Vamos apresentar uma solução para a organização e versionamento do banco.

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

Directórios
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5avf6n8qz03jmkd8zai.jpg)

Modelo Conceitual
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f24li1e3r7iczowgl6dw.jpg)

Modelo Físico
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji7y9evh08z677ldnl3n.jpg)

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


Para mais artigos: 
[](https://www.dev.to/ortizdavid)
[](https://www.medium.com/@ortizaad1994)
Creating Games
Tags: gamedev, c
Published: 2022-04-05 10:47:58

Recently, I have found myself wanting more and more to be able to play this game my imagination conjured up, a fast-paced multiplayer strategy game, in which you would be in charge of an entire ant colony, fighting against other ant colonies, gathering resources and becoming the strongest ant colony ever.

The only problem is that unsurprisingly, I couldn't find a game that was similar enough to the one I imagined that could satisfy my peculiar desire to command an army of ants and crush other inferior colonies! This is why, together with my sister and father, I have decided to learn how to create video games.

We are starting by learning how to program in C. Then we intend to develop our skills by making some simple games, and work towards the goal of creating an online multiplayer game based on the ant colony idea. We are writing about our progress here on this blog.

I first got the inspiration for this idea when I was watching a YouTube video made by Kurzgesagt (see below) explaining the life and daily struggle of weaver ants. The weaver ants create cities in the sky, with many castles high in the tree canopy, and bridges connecting to outposts at their borders.

I found it extremely interesting because although each individual is almost mindless, together these incredible ants work as one to accomplish amazing things. The ant colony reminds me of the second most complex system in our bodies, the immune system, where many mindless cells cooperate to defend the body. 

Please follow along if you like the idea or are also interested in making games. Thanks for reading!

{% embed https://www.youtube.com/watch?v=B3QTAgHlwEg %}

Next post: [Deciding on a Programming Language for Game Dev](https://dev.to/gamedev/deciding-on-a-programming-language-13ba), by Sam
Contents: [Game Dev From Scratch](https://dev.to/gamedev/game-dev-from-scratch-2do1)
How do I protect my AdSense account from being banned?
Tags: adsense, google, tutorial, blogging
Published: 2022-04-05 10:38:38

While there are many ways to protect AdSense accounts, there are some common mistakes that you should avoid. For example, if your account suddenly starts getting a high number of invalid clicks, you’re not doing it right. If you want to keep your account protected, follow the tips below. If you see that your traffic or clicks have suddenly jumped, it’s time to change your tactics.

You as a growing blog owner, author or social media influencer, might have to suffer through the issue of your **Google Adsense** being banned or suspended because of invalid traffic, and I know this sucks.

You really don’t have to do complex things to **protect your site** from being banned from Google Adsense, you just have to flow my instructions here, it’s that simple.

**Directly sharing** your site on social media is really a risky task, because a lot of social media traffic is considered as inorganic traffic. That’s why sharing your site on Facebook, Instagram or Twitter should be done properly with proper URL security layers, and for that, we will be using a tool called [Xoomato URL guard](https://xoomato.com/).

Xoomato provides a security layer called `s-l3` with which it makes the traffic organic. This is really an effective tool, that popular blog streamers are also using it.

# How to protect your Google Adsense account?

1. Optimize your site for Google or Bing search, and try to gain as much search traffic as you can.

2. Stop Clicking on Your Own Ads, if you’re doing so.

3. To Avoid Invalid Social Traffic; Go to the Xoomato URL guard, sign it, and get your social-sharable link from the [dashboard](https://xoomato.com/guard).

4. Do not request your audience to click on your own ads.

5. Purge all the Forbidden Content (Adult content, Alc0hol, Copyrights, Gambling and games, Healthcare and medicines, Political content, Financial services and Trademarks) by Google Adsense in your blog.

6. Don’t try to gain paid traffic, that’s not good for the health of your Google Adsense.

# What should be done to further protect your Google Adsense?

1. Promote your blog all over the internet, as much as you can.

2. Keep updating your site, and keep writing new fresh high-quality content

3. Make a connection with your audience via comments and replies

4. Try to optimize your site structure and site speed

5. Make your site look good and smooth

6. Keep monitoring your Adsense Account

## Summary

You should also check your AdSense account daily. Make sure to note your CTR and click-through rate (CTR). If you notice that your ad is getting a lot of invalid clicks, or if your site is getting a lot of direct or referral traffic then using Xoomato Adsense Protector is really very essential. This strategy is highly recommended if you’re worried about your AdSense account being banned.
Swift - Extensions
Published: 2022-04-05 10:36:50

Extensions add new functionality to an existing class, structure, enumeration, or protocol type. 

Extensions in Swift can:

- Add computed instance properties and computed type properties
- Define instance methods and type methods
- Provide new initializers
- Define subscripts
- Define and use new nested types
- Make an existing type conform to a protocol

**_Extensions can add new functionality to a type, but they can’t override existing functionality._**

example Protocol :

``` swift
extension SomeType: SomeProtocol, AnotherProtocol {
    // implementation of protocol requirements goes here
}
```

example Computed Property - extension:

``` swift
extension Double {
    var km: Double { return self * 1_000.0 }
    var m: Double { return self }
    var cm: Double { return self / 100.0 }
    var mm: Double { return self / 1_000.0 }
    var ft: Double { return self / 3.28084 }
}
let oneInch = 25.4.mm
print("One inch is \(oneInch) meters")
// Prints "One inch is 0.0254 meters"
let threeFeet = 3.ft
print("Three feet is \(threeFeet) meters")
// Prints "Three feet is 0.914399970739201 meters"
```

- Extensions can add new convenience initializers to a class, but they can’t add new designated initializers or deinitializers to a class.

- If you use an extension to add an initializer to a value type that provides default values for all of its stored properties and doesn’t define any custom initializers, you can call the default initializer and memberwise initializer for that value type from within your extension’s initializer.

- If you use an extension to add an initializer to a structure that was declared in another module, the new initializer can’t access self until it calls an initializer from the defining module.

example Initializer - extension:

``` swift
struct Size {
    var width = 0.0, height = 0.0
}
struct Point {
    var x = 0.0, y = 0.0
}
struct Rect {
    var origin = Point()
    var size = Size()
}
```

``` swift
extension Rect {
    init(center: Point, size: Size) {
        let originX = center.x - (size.width / 2)
        let originY = center.y - (size.height / 2)
        self.init(origin: Point(x: originX, y: originY), size: size)
    }
}
```

example Method - extension:

``` swift
extension Int {
    func repetitions(task: () -> Void) {
        for _ in 0..<self {
            task()
        }
    }
}

3.repetitions {
    print("Hello!")
}
```

example Subscript - extension :

``` swift
extension Int {
    subscript(digitIndex: Int) -> Int {
        var decimalBase = 1
        for _ in 0..<digitIndex {
            decimalBase *= 10
        }
        return (self / decimalBase) % 10
    }
}
```

example Nested Type - extension :

``` swift
extension Int {
    enum Kind {
        case negative, zero, positive
    }
    var kind: Kind {
        switch self {
        case 0:
            return .zero
        case let x where x > 0:
            return .positive
        default:
            return .negative
        }
    }
}
```
Milestone: A million downloads for VideoLAN packages in the .NET ecosystem
Tags: libvlc, multimedia, opensource, dotnet
Published: 2022-04-05 10:21:04

[The NuGet VideoLAN account](https://www.nuget.org/profiles/videolan) just reached **1 million downloads** in the .NET ecosystem.

![downloads](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab9tmqc1el1xlbvjp95a.PNG)

Today, we actively publish and maintain **16 NuGet packages**, 6 of which actually containing native platform-specific code. The remaining 10 packages are managed C# DLLs composed of the main binding ([LibVLCSharp](https://www.nuget.org/packages/LibVLCSharp/)) and various GUI toolkit integrations for getting users up and running quickly.

- Xamarin.Android
- Xamarin.iOS
- Xamarin.tvOS
- Xamarin.Mac (Cocoa)
- Windows Classic (WPF, WinForms, GTK)
- Windows Universal (UWP for Desktop, mobile and Xbox)
- Linux including desktop, server and Raspberry Pi (GTK)
- Xamarin.Forms
- Uno Platform (UWP, Android, iOS)
- Avalonia (Windows, macOS, Linux)
- Eto Forms

Both [LibVLCSharp](https://code.videolan.org/videolan/LibVLCSharp) and [LibVLC for NuGet](https://code.videolan.org/videolan/libvlc-nuget) received PRs from a few new contributors recently. They helped out on adding support for new GUI frameworks like Eto, perfecting the WPF VideoView integration and making sure the LibVLC native library plays nice with the latest .NET SDK! I'd like to thank each of them for their valuable OSS contributions.

## On-going work

LibVLC 4 is actively being worked on by the core VLC team and we can expect several new LibVLC APIs to surface in LibVLCSharp in the coming months. I am keeping a [personal wishlist for LibVLC features](https://github.com/mfkl/libvlc-feature-requests) on my side and I try to work on it when time allows. If you would like to see a specific LibVLC feature come to life, feel free to reach out!

Plans to investigate LibVLCSharp interop performance further have been made and it will be exciting to leverage new interop performance features from .NET 5/6 with LibVLC.

## Commercial licensing

Almost a year ago, we introduced **[Commercial Licenses for LibVLCSharp](https://videolabs.io/solutions/libvlcsharp/)** through dual licensing (current OSS licenses remain). This was the start of an experiment to try and make the project financially sustainable. I don't believe user donations are a working solution for most OSS maintainers, and if companies contributed financially to the sustainability of their dependencies, I believe the open-source ecosystem would be more _balanced_.


![mrr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfn7ftmetmt0eypw5stj.PNG)

After a needed pricing change, and almost a year in, we now stand at $224 monthly recurring revenue with 11 happy customers and growing! This is certainly better than the donation route but there surely is a way to go still.

If your company uses LibVLCSharp in commercial products, please consider supporting the project by [purchasing a commercial license](https://videolabs.io/solutions/libvlcsharp)!

Feel free to let me know what you think on [Twitter](https://twitter.com/martz2804).
Learn Advanced React JS course with A2n academy
Tags: reactcourse, reactcourseonline, reactcourseinbangalor
Published: 2022-04-05 10:16:15

Learn **[React course online](https://www.a2nacademy.com/course/reactjs-course)** with live classes from A2N Academy, one of the top-tier IT Institutes in Bangalore. Our highly skilled trainers recruited by the academy are industry experts who offer quality-based training on React JS training. We deliver step-by-step guidance to our students to develop their technical skills through our efficient training and get placed in renowned IT companies across the globe.

Our React JS course is developed according to the latest industry standards to help the students analyze and understand the skills and work processes required to be a professional React developer. We train our students by learning by doing approach and assist them to build systematic React applications by mastering the concepts of Redux and React. Our React JS training is a practically driven program, designed and taught by industry experts focusing on experiential learning and a systematic approach to make you Industry ready. With a determined goal to nurture students, we train students from basic to advanced levels of React JS course and avail a maximum payroll for entry-level React developers. The real-world projects help them gain and enhance their practical knowledge to develop React-based applications and develop a better understanding of the web industry, gain corporate level exposure and build their profile effectively. After the completion of the React JS training, the academy will assist to secure a good-paying job.
How to keep EC2 instance running after SSH is terminated?
Tags: aws, productivity, linux, beginners
Published: 2022-04-05 09:59:28

In this blog post, I'm going to list a few commands that will help you to keep the EC2 instance running after SSH is terminated.

## Author
[Akhilesh Thite](https://twitter.com/AkhileshThite_)


## Linux & Mac users
First, Log in to the server with your SSH key.

* **To keep the server running in background**, use the following command.
```
screen -d -m
```

_Let's assume you have a **python web application**, then your command would look like this:_
```
screen -d -m python app.py
```

_Or if you're using **node**, then your command would look like this:_
```
screen -d -m npm start
```

* **To list the available screens**, use the following command.
```
screen -ls
```

* **To restart the session**, use the following command.
```
screen -r [session restart]
```

* **To quit the session**, use the following command.
```
screen -X -S [session you want to kill] quit
```


## Windows (PuTTY) users
First, SSH into your remote box. Type **`screen`**, then start the process you want.

* Press **`Ctrl-A`** then **`Ctrl-D`**. This will detach your screen session but leave your processes running. Now, you can log out of the remote box.

* If you want to come back later, log on again and type **`screen -r`**, this will resume your screen session and you can see the output of your process.


Have any questions or suggestions? Leave a comment down below.
**Thank you!**
Swift - Nested Types
Published: 2022-04-05 09:56:29

enumerations, classes, and structures can be nested within the definition of the type they support. Nested types are purely for use within the context of a more complex type. 

example :

``` swift
struct BlackjackCard {

    // nested Suit enumeration
    enum Suit: Character {
        case spades = "♠", hearts = "♡", diamonds = "♢", clubs = "♣"
    }

    // nested Rank enumeration
    enum Rank: Int {
        case two = 2, three, four, five, six, seven, eight, nine, ten
        case jack, queen, king, ace
        struct Values {
            let first: Int, second: Int?
        }
        var values: Values {
            switch self {
            case .ace:
                return Values(first: 1, second: 11)
            case .jack, .queen, .king:
                return Values(first: 10, second: nil)
            default:
                return Values(first: self.rawValue, second: nil)
            }
        }
    }

    // BlackjackCard properties and methods
    let rank: Rank, suit: Suit
    var description: String {
        var output = "suit is \(suit.rawValue),"
        output += " value is \(rank.values.first)"
        if let second = rank.values.second {
            output += " or \(second)"
        }
        return output
    }
}
```

l

```
let heartsSymbol = BlackjackCard.Suit.hearts.rawValue  // "♡"
```
Webauthn - What if I loose my device?
Tags: auth, webauthn, passwordless
Published: 2022-04-05 09:16:21

If you don't know what webauthn is about, it's basically a passwordless to "login". I invite you to start reading the first post of this serie if you want an introduction.

Basically, the webauthn protocol handles how asymmetric keys are created and verified. They are also bound to the device. If you loose your device, you loose your access key.

The first question that arises is "What happens if I loose my device?! Would I be locked out?!" The simple answer is "yes". That's why it is important to have a way to recover it. 

However, there are plenty of ways how you could deal with account recovery as a provider. Here are some.

1. associate the account to an email/phone and simply send a link to register a new device on demand
2. provide a link or QR code to register a new device that the user can store somewhere safe
3. use recovery passwords
4. register multiple devices
5. video identification / confirmation

All of these recovery methods have their strength and weaknesses, but share the same purpose: to allow to register a new device for the account. Regarding these recovery methods, here are a few more considerations.

1. By sending an email/sms, you implicitely trust that the user has not compromised either.
2. Same goes for the link or QR code, you must be sure it is safely stored and not exposed/stolen.
3. Since passwords are easely forgotten, a question/answer system is sometimes a nice alternative.
4. This requires that the user has multiple devices ...and to not loose them at once.
5. In order to recover the account that way, it must obviously be verified upon registration too.

These methods are also not exclusive. They could be used as alternatives or even combined for increased security.

> Lastly, some more tibits. There was quite some discussions about making "backups" of the credentials in the specifications working group, and baking it into the protocol. Honestly, it sounds to me like opening Pandora's box. The fact that the private key is a secret that only the device knows makes it secure and easy to reason about. Allowing to "share" this key, or a derivative of it, in the name of backups sounds risky to me.