teleren/devto huggingface dataset:
Simple Bootstrap Lightbox
Tags: showdev, bootstrap, codepen, javascript
Published: 2022-07-03 20:33:12

Just a simple lightbox with Bootstrap that uses Animate.css for image animations, and imagesLoaded to preload images. No jQuery, lightbox script or additional CSS is needed, just some pure JavaScript. All styles and positioning of elements were implemented using pure Bootstrap classes.

{% codepen https://codepen.io/typo3-freelancer/pen/mdxJoVz %}

## Using the Bootstrap standard classes
The example is to show that you can build a quite functional lightbox without an additional lightbox plugin, using the Bootstrap standard classes and scripts. 

Of course, you can still optimize it a lot and create your own CSS animations with a few simple steps, for example, to save the use of Animate.css.

## Libraries I have used, with great thanks to the respective developers

- Bootstrap 5 Framework
https://getbootstrap.com/

- ImagesLoaded
https://github.com/desandro/imagesloaded

- Animate.css
https://animate.style/

- Picsum Photos
https://picsum.photos/

## Your feedback is appreciated
If you like this Simple Bootstrap Lightbox, feel free to leave your feedback. Also, I'm always very happy when others can use my work as the basis for great projects.

What would you improve, add, or do differently?

## More Stuff
My website
https://simon-koehler.com

Let's connect on GitHub
https://github.com/koehlersimon

MASK.CSS
https://koehlersimon.github.io/maskcss/
Know Your Value & Add Tax
Tags: career, devjournal, mentalhealth, beginners
Published: 2022-07-03 20:24:42

What does this quote actually mean? Just a pretty cliche Instagram caption? No. It never is. There's always meaning behind everything, but only if you're willing to look behind the face value.

This is about treating yourself how you want others to treat you. It's about knowing that you matter and what you're worth. It's about not making yourself smaller in a room despite who else is standing next to you, whether it be your clients, bosses, colleagues, or friends. It's not feeling privileged but it's about knowing you deserve the space to grow, to develop, to own who you are in your own skin.

It's the fact that you should be valued for what you are worth. You are not the mistakes you have made in the past. No one is. We are constantly growing and changing and developing into a better person each and every day. Know that, own it, and hold your head high. You're doing the work and it will shine through you.

In reality, no one knows what it takes to be you. Your struggles, your stresses, your feelings and emotions are your own and no one can truly relate and be YOU. Hence, your experience is unique. You are one of a kind. Own it.

Your hard work is what got you to where you are today. And maybe you aren't where you want to be, maybe it's not your dream job or your dream circumstance, but you're getting there. You're putting in the work and the small steps will one day add up. The compound effect will be apparent in every aspect of your life. Don't give up.

This is your life. This is your future. This is your worth. You deserve the life you dream of. Know it, own it. Build towards it.

Happy coding!
System Design 101
Tags: beginners, tutorial, systems, performance
Published: 2022-07-03 20:24:32

## What is system design?
To define the term **system design**, we need to take a closer look at the term itself, which has two parts- *system* and *design*.

### System
A system can be loosely defined as an architecture or a collection of technologies that work together to serve a particular purpose. This purpose always has a set of users that have a certain or even specific requirements. 

An easier way of understanding this is to relate this to real-world systems like a restaurant.

A restaurant is a system with many different components. We have a *kitchen* that is responsible for cooking the food, the *wait staff* is responsible for the customer's experience, the *cleaning staff* is responsible for supplying the kitchen with clean dishes and maintaining the retaurant, the *manager* is responsible for the overall functioning of the restaurant. 

In layman's terms, that's exactly how a system behaves. A collection of components that work together in harmony to produce some sort of useful output which in the restaurant's case is delicious food with an equally fulfilling dining experience. 

### Design 
Coming back to the example of a restaurant, we can see that we have to setup each component in such a way that it produces the optimal output. 

If we're setting up a fast food restaurant, we can get rid of the wait staff for self-service counters and drive-throughs. The kitchens have machines that prepare higher volume of food so that customers won't have to wait long for their meals. 

Even though a Michellin-star restaurant and a fast food joint have roughly the same, basic components, the way they have been set up or *designed* has made all the difference. 

Thus, we can define **design** as the process of understanding the user's requirements and selecting/modifying the software modules and technologies so that they can better serve the need of the user. 

### What's the point of all this?
By now, you must having a rough idea of what happens in system design. And you might be wondering, "what is the exactly the point of all of this?"

Personally, I'm used to just building projects and publishing them on GitHub, not caring about UI/UX, performance, etc. But we must remember that developers, in a way are engineers. 

Sure, we may love programming and building stuff and writing about it. However, at the end of the day we're building products for other people to use and, like any good craftsman, an engineer must know about all the tools he has at his disposal, and knowing which ones to use when and where makes all the difference. 


Stay tuned for more articles about system design!
🇺🇸 DALL-E mini hand made USA Presidents
Tags: ai, digital, machinelearning, showdev
Published: 2022-07-03 20:09:10

## ❔ Context

A few weeks ago I saw a meme that intrigated me :

{% twitter 1540878699804901377 %}

Wired dedicated this excellent article : 

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9exzanuscct9pifk4mm.png)](https://www.wired.com/story/dalle-ai-meme-machine/)
 

Then I saw this tweet that brought me some inspiration :

{% twitter 1542972673826951169 %}

I decided to build something on it to celebrate it in an original way.

## 🎆 Happy 4th of July

I decided to create a slideshow that puts in perspective USA presidents.

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znp2qwz4r4oy6yw5cijg.png)](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/)

## 🍿 Enjoy the slideshow

I have implemented the Slideshow with [reveal.js](https://github.com/hakimel/reveal.js/) so people can enjoy it on a wide variety of devices.

> For each president I've asked to `DALL-E mini` to create me the picture of a "hand made president".

Here is what I got :

{% youtube 49uAKyAVNX8 %}

Also the experience on tablet is really nice :

{% youtube qjALL5EdYCQ %}

## 📑 USA Presidents indexed

The slideshow is organized in a way it makes it possible to get the n.th president by it's position.

👉 For exeample, to get :

- The `first` president : simply [`dall-e-mini-hand-made-usa-presidents/1`](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/1)
- Thomas Jefferson is the `third` president, so : [`dall-e-mini-hand-made-usa-presidents/3`](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/3)
- [Abraham Lincoln](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/16)
- Some surprise on the [20 th.](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/20)
- [F. Roosevelt looking awesome](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/32)
- Fantastic looking [R. Nixon](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/37)
- Nice looking [Bill Clinton](Bill Clinton)
- Gorgeous [Barack Obama](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/44)
- Colorful [Donal Trump](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/#/45)

## 🤓 Source code

Here is the source code so you can modify it to you own convenience :

{% github adriens/dall-e-mini-hand-made-usa-presidents %}

## 🔖 Resources

- [Slideshow](https://adriens.github.io/dall-e-mini-hand-made-usa-presidents/)
- [DALL·E 2 demos](https://openai.com/dall-e-2/#demos)
- [`@craiyonai`](https://twitter.com/craiyonai)
Hackerrank-Grading Students in kotlin
Published: 2022-07-03 19:59:54

**problem**
HackerLand University has the following grading policy:
   

- Every student receives a grade in the inclusive range from 0 to 100 .
- Any grade less than 40 is a failing grade.

Sam is a professor at the university and likes to round each student’s grade according to these rules:

- If the diﬀerence between the grade and the next multiple of 5 is less than 3, round grade up to the next multiple of 5.
- If the value of grade is less than 38, no rounding occurs as the result will still be a failing grade.

Examples

- grade = 84 round to 85 (85–84 is less than 3)
- grade = 29 do not round (result is less than 40)
- grade = 57 do not round (60–57 is 3 or higher)

Given the initial value of grade for each of Sam’s n students, write code to automate the rounding process.

Function Description

Complete the function gradingStudents in the editor below.
gradingStudents has the following parameter(s):
 
-  int grades[n]: the grades before rounding

Returns

- int[n]: the grades after rounding as appropriate

Input Format
The ﬁrst line contains a single integer, n, the number of students. Each line of i the n subsequent lines contains a single integer, grade[i].

Sample Input

```
4 
73 
67 
38 
33
```

Sample Output

```
75 
67 
40 
33
```

**Answer :**

```

  fun gradingStudents(grades: Array<Int>): Array<Int> {

        var listOfGrade: MutableList<Int> = ArrayList()

        for (grade in grades) {

            if (grade >= 38 && (grade % 5) > 2) {
                var number = grade + (5 - (grade % 5))
                listOfNumber.add(number)
            } else {
                listOfNumber.add(grade)
            }
        }

        return listOfGrade.toTypedArray()
  }
```
Open Source Adventures: Episode 66: Crystal Z3 Solver for Mosaic Puzzle
Tags: crystal, z3
Published: 2022-07-03 19:45:14

[Mosaic Puzzle](https://www.puzzle-minesweeper.com/mosaic-10x10-easy/) is really close to Minesweeper Puzzle we did in the previous episode.

Logically the only difference is that hint cells can also contain mines. And for that reason, instead of "mines" it talks about black and white cells.

The difficulty we'll have will be with the output, not with the solver.

### `shard.yml`

First we need to load Z3:

```yml
name: mosaic-solver
version: 0.0.1

dependencies:
  z3:
    github: taw/crystal-z3
```

### Solver

The solver is almost identical to the one for Minesweeper we did in the previous episode. The only difference in the solver part is that `@vars[{x, y}]?` is included in `neighbourhood(x, y)`, and we no longer assert that hint cells must be empty.

```crystal
#!/usr/bin/env crystal

require "z3"

class MosaicSolver
  @data : Array(Array(Nil | Int32))
  @ysize : Int32
  @xsize : Int32

  def initialize(path)
    @data = File.read_lines(path).map{|l| l.chars.map{|c| c.ascii_number? ? c.to_i : nil}}
    @ysize = @data.size
    @xsize = @data[0].size
    @solver = Z3::Solver.new
    @vars = {} of Tuple(Int32, Int32) => Z3::BoolExpr
  end

  def each_coord
    @ysize.times do |y|
      @xsize.times do |x|
        yield(x, y)
      end
    end
  end

  def neighbourhood(x, y)
    [
      @vars[{x, y+1}]?,
      @vars[{x, y}]?,
      @vars[{x, y-1}]?,
      @vars[{x+1, y+1}]?,
      @vars[{x+1, y}]?,
      @vars[{x+1, y-1}]?,
      @vars[{x-1, y+1}]?,
      @vars[{x-1, y}]?,
      @vars[{x-1, y-1}]?,
    ].compact
  end

  def neighbourhood_count(x, y)
    neighbourhood(x, y).map{|v| v.ite(1, 0)}.reduce{|a,b| a+b}
  end

  def call
    each_coord do |x, y|
      @vars[{x, y}] = Z3.bool("#{x},#{y}")
    end
    each_coord do |x, y|
      c = @data[y][x]
      if c
        @solver.assert neighbourhood_count(x, y) == c
      end
    end
    ...
  end
end

solver = MosaicSolver.new(ARGV[0])
solver.call
```

### Printing solution

OK, let's get to the complicated part, printing the solution. It's complicated because we need to use different colors and still print the number hints.

We could use a fancy library for it, but terminal codes aren't all that complicated, so I just hardcoded them.


```crystal
    if @solver.check
      model = @solver.model
      @ysize.times do |y|
        @xsize.times do |x|
          v = (model[@vars[{x, y}]].to_s == "true")
          c = @data[y][x] || " "
          if v
            print "\e[30;104m"
          else
            print "\e[30;102m"
          end
          print c
        end
        print "\e[0m"
        print "\n"
      end
    else
      puts "No solution"
    end
```

### Result

Here's what it looks like:

![Episode 66 screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev6tuu9teydekdr555rb.png)

### Story so far

[All the code is on GitHub](https://github.com/taw/open-source-adventures).

### Coming next

Over the next few episodes I'll code a few more puzzle game solvers in Crystal and Z3.
JiraCLI: Interactive command line for Atlassian Jira reached v1.0.0
Tags: go, opensource, productivity, showdev
Published: 2022-07-03 19:33:24

[JiraCLI](https://github.com/ankitpokhrel/jira-cli) v1.0 supports a wide variety of new commands, authentication with [personal access tokens (PAT)](https://medium.com/r/?url=https%3A%2F%2Fconfluence.atlassian.com%2Fenterprise%2Fusing-personal-access-tokens-1026032365.html), OS keychain & [.netrc](https://medium.com/r/?url=https%3A%2F%2Fwww.gnu.org%2Fsoftware%2Finetutils%2Fmanual%2Fhtml_node%2FThe-_002enetrc-file.html) for accessing credentials, custom fields, and many more.

My goal with Jira CLI was to build a simple tool based on my personal Jira workflow that would allow me to seamlessly complete the most common developer workflows end-to-end in the terminal.

{% embed https://github.com/ankitpokhrel/jira-cli %}

The project started as an experiment over the weekends with the idea of making issue search and navigation as straightforward as possible. Over the course of several months, I switched teams/companies, worked with different kinds of workflows, and kept improving the tool to adapt to various use cases.

The tool is far from perfect, and I would not consider it complete. But it has all the necessary features to improve your workflow with Jira. The app supports both cloud and on-premises Jira instances. Regardless of the differences between these installations, I've tried to keep the overall experience as similar as possible.

The project has gained some traction over the past months, and I think this was a great time to release a stable version. I believe that this will allow everyone to integrate the tool into their daily workflows/pipelines confidently.

Moving forward, the focus will be on fixing [some of the long-standing bugs](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fankitpokhrel%2Fjira-cli%2Fissues), adding more features, and revamping the TUI to add more actions. [Any sort of contribution](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fankitpokhrel%2Fjira-cli%23support-the-project%3D) is heartily welcome.
Lastly, huge thanks to all contributors. This would not have been possible without all the help.

View the [release notes](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fankitpokhrel%2Fjira-cli%2Freleases%2Ftag%2Fv1.0.0) or [install and start using JiraCLI](https://github.com/ankitpokhrel/jira-cli).
[Conceito] - Acoplamentos Aferente e Eferente (Software e Times)
Published: 2022-07-03 18:31:09

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1543662061095227392)

---

Ei dev,

Já parou pra pensar que dependência tem perspectiva. Já ouviu falar sobre acoplamento AFERENTE e EFERENTE? São termos geralmente usados pra medição de instabilidade de software. 

Mas a gente pode extrapolar um pouco esse conceito e pensar em times!

cc @sseraphini

↓

![img](https://pbs.twimg.com/media/FWwwdoOUYAArqqt?format=jpg&name=medium)

---

Quando falamos sobre aferência, estamos nos referindo a dependências que as outras coisas têm de nós. Ou seja, de fora para dentro, do externo para o interno. Por exemplo, um componente com acoplamento aferente, é um componente que é a dependência de outros outros componentes.

---

Quando falamos sobre eferência, estamos falando do sentido inverso da aferência. Ou seja, de dentro para fora, do interno para o externo. Um serviço com dependência eferente, é um serviço que depende de outro componente. Geralmente, é o tipo implícito de dependência que falamos.

---

Vamos extrapolar um pouquinho isso pra além de sistemas e pensar em times que cuidam de serviços (também com dependências aferentes e eferentes).

---

Pense comigo, se você cuida de serviços com muitas dependências aferentes, a chance de seu time ser solicitado com mais frequência é grande. Ou seja, com dependência aferente, você tem mais chances de "SER INCOMODADO".

---

Agora, se seus serviços possuem muitas dependências eferentes, a chance maior é de que "VOCÊ INCOMODE" mais do que seja incomodado.

---

Claro, estou usando termos pejorativos sobre incômodo, mas é só pra ajudar na fixação do conceito :)

Gosto de trazer esse tipo de discussão pra provocar a questão do acoplamento também entre times pra além de sistemas.

---

Lembre-se: acoplamento de runtime, muito frequentemente, resulta em maior acoplamento também de design time. E design time pode significar ter que se envolver com outros times.

A falta de autonomia de times num ambiente de microsserviços não é um bom sinal.

---

Conta aí se vc se identificou ou vive alguma dificuldade por causa desses tipos de acoplamento.

Ah, e obrigado demais por ter lido até aqui! Vc é a razão pra eu me dedicar a produzir esse tipo de conteúdo, viu? 💕
Learning and finding solution
Tags: continuouslearning, aspiration, javascript, react
Published: 2022-07-03 19:23:56

Hi everyone,

Ahead, when I wanted to learn something or search for a solution to some problem I had been opening Youtube and searching for needed videos. But I understood only videos couldn't give me full clear insight about problems.
I started watching videos for my initial imagination and reading articles on websites or official documentation.
Articles give us clear and deep insight into the problem.
The official documentations are also a good way but some of them are complicated to understand.
The communities in the social platforms are a good way too.

This is my own opinion.
You can share your opinion or resources which do you like to use, I'll be happy.

Medium
https://medium.com/

DEV community
https://dev.to/

LogRocket
https://lnkd.in/eiJ67Hwj

Javascript weekly news (this website will send you fresh news every week)
https://lnkd.in/ertx4Zn8
Cool Designs - Material Dashboard PRO
Tags: cooldesign, webdev
Published: 2022-07-03 19:21:22

---
title: Cool Designs - Material Dashboard PRO
published: true
description: Material Dashboard PRO is a futuristic Bootstrap 5 design. This Cool Design is provided by Creative-Tim.
tags: cooldesign, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8e5l9yv7mdavyisopg9e.jpg
canonical_url: https://www.admin-dashboards.com/cool-designs-material-dashboard-pro/
---
Hello Coders! 

This article presents a [Cool Design](https://www.admin-dashboards.com/tag/cool-designs/) released by **Creative-Tim**. The product comes with a pixel-perfect design, a huge components set, and futuristic pages. [Material Dashboard PRO](https://www.creative-tim.com/product/material-dashboard-pro?AFFILIATE=128200) is built on top of Bootstrap 5.

---

> 👉 [Material Dashboard PRO](https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics.html?AFFILIATE=128200) - LIVE Demo (`affiliate link`)

---

![Cool Dashboard - Material Dashboard PRO ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezu3p6lh37taghvzoml5.png)

---

## ✨ Why Cool ... Section

From time to time, the [Admin Dashboards](https://www.admin-dashboards.com/) team selects a design that is **simply ... wow**. The post is not a paid one, or if it is, we will warn the audience about it.

---

> **Thank You!** 🚀 

`Note`: In case you remember an amazing design, please mention it in the comments section.
Avoiding accidental open-source laundering with GitHub Copilot
Tags: github, githubcopilot, ethics, opensource
Published: 2022-07-03 19:09:01

---
title: Avoiding accidental open-source laundering with GitHub Copilot
published: true
description: Avoid legal and ethical issues when using GitHub Copilot by opting out of public code matching.
tags: github,copilot,ethics,opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sfyb2s1wziz0pplwzvz.jpg
# Use a ratio of 100:42 for best results.
---

*Cover photo by [Tina Bosse](https://unsplash.com/photos/WSw-taiyZPk) on Unsplash.*

[GitHub Copilot](https://github.com/features/copilot) is now available to individuals as a paid product. Personally, I will never code without GitHub Copilot again. It's that good.

# Training an AI on open-source software
Codex is the AI engine used by GitHub Copilot and it's based on OpenAI GPT-3. Codex is trained on publicly available texts and source code, including but not limited to public GitHub repositories.

The issue lies in training Codex on software projects using an open-source license. Permissive open-source licenses require including the project's license in derivative work. [According to GitHub](https://github.com/features/copilot#does-github-copilot-recite-code-from-the-training-set), the code generated by GitHub Copilot matches 150 or more characters of publicly available code in 1% of suggestions.

# Legal and ethical issues
The question is: When is it legally or ethically allowed to include partial or full copies of licensed source code *without* including its open-source license or in the case of restrictive (copyleft) licenses, publish our own code using the same license?

According to [Kate Downing, an IP lawyer specializing in open-source compliance](https://fossa.com/blog/analyzing-legal-implications-github-copilot/), code generated by GitHub Copilot might legally be considered *fair use* of open-source code used for training its AI model. It's similar to how Google Books is not infringing on the copyright of the books it cites.

However, suggestions matching publicly available code are not original and therefore questionable. GitHub leaves it up to us as developers to take each and all responsibilities for code generated by GitHub Copilot, including adhering to licenses as well as verifying security and other quality aspects of it.

# Avoiding accidental open-source laundering
![GitHub Copilot setting to opt out of public code matches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9m82ueh85lu1ivif0c3.png)
  
To avoid licensing issues, we can opt out of *Suggestions matching public code* by selecting *Block* at [https://github.com/settings/copilot](https://github.com/settings/copilot) then pressing *Save*.
Prevent onClick event on clicking child component
Tags: react, javascript, webdev, beginners
Published: 2022-07-03 18:43:14

On situations when you want to trigger an onClick event when you click on a box but you have an input inside of it. In this case you will trigger the onClick event whenever you are willing to type in any input. 
To prevent this write a function to stop propagation and add it to the child(input).

```
  function handleClicked {
    // Do something.
  }
  function stopPropagation(e) {
    e.stopPropagation();
  }

  return (
    <div>
      <div onClick={handleClicked}>
        <input onClick={stopPropagation} />
      </div>
    </div>
  );
```