teleren/devto huggingface dataset:
Basic Tkinter
Tags: tkinter, python, gui, beginners
Published: 2022-12-05 14:51:15

Many programming languages comes with a GUI library as part of the SDK for developers to enjoy working within the room. It is possible to go for third party library that has the required components which may not be available in the actual SDK.

Tkinter comes in python as a framework built into the python standard libraries (you don't need to look for it outside). Python has many GUI frameworks such as WxPython, PysimpleGUI, Remi, PyQt5 Wax, Pyside, ttkbootstrap, etc, as seconds to the Tkinter.

The Tkinter framework has number of countless visual elements rendered by an active machine, so that the code looks as if the code was developed for the machine. Tkinter is cross-flatform, this means the same code works on different devices, Windows, Linux and MacOs.
Python has the following elements:

- [Lable](https://dev.to/saeedulkudry/tkinter-label-5cfi)
- Button
- Entry
- Text
- Frame
- Toplevel
- Canvas
- Menubutton
- Message
- Radiobutton
- PanedWindow
- Spinbox
- MessageBox
- Scale
- Scrollbar
- Checkbutton
- Menu
- LabelFrame

## Tkinter In Action
Before using tkinter library one must import it into .py file.

```
from tkinter import *
```
this ensure all the classes and methods are loaded.
The asterisk (*) tells the engine to import everything inside the class instead of accessing them through dot notation.

Now it is time to instantiate the tkinter class.

```
window = Tk()
```
Now we can access all the methods under Tk class using the reference variable  window.

To make the app run we must call mainloop() method at the very end of every tkinter program.

```
window.mainloop()
```
This will output the following result.

![Tkinter window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1fmwur7uw9rc2i8lfid.PNG)


_Thank you for reading._
For further reading click on any component at the very top of the page.
Written by [Saeed Adam](www.saeed.dcrowdalpha.com)
"Hello World" in 10 Languages
Tags: programming, beginners, tutorial, opensource
Published: 2022-12-05 14:44:40

Hello World 👋🌍

Let's go through the "Hello World" syntax in 10 languages 🐱‍💻.

Feel free to comment ✍️ your first 🥇 "Hello World" language.

**1. Java**

```
class Main {
	public static void main(String[] args){
		System.out.println("Hello World");
	}
}
```
**2. C**

```
#include<stdio.h>
int main(){
printf("Hello World");
return 0;
}
```

**3. C++**

```
#include<iostream>
int main (){
  std::cout << "Hello World";
  return 0;
}
```

**4. C#**
```
public class Hello{
  public static void Main(String[] args){
    System.Console.WriteLine("Hello World");
  }
}
```

**5. Python**
```
print("Hello World")
```

{% embed https://youtu.be/4tVCeN85Boc %}

**6. JS**
```
console.log("Hello World");

alert("Hello World");

document.write("Hello World");
```

**7. GO**
```
package main
import "fmt"

func main(){
	fmt.Println("Hello World")
}
```

**8. Kotlin**
```
func main(){
	println("Hello World")
}
```

**9. PHP**
```
<?php
echo "Hello World";
?>
```

**10. Swift**
```
import Swift
print("Hello World")
```
Pure Functions in Solidity - The Basics
Tags: programming, blockchain, web3
Published: 2022-12-05 14:28:41

## Introduction
Today I will be giving you some information that you will find useful , as regards solidity pure functions ,  let's dive straight into it.

## What are solidity pure functions?
In simple terms a solidity pure function is a function that doesn't read or modify the variables of the state of the contract, It can only use local variables that are declared in the function and the arguments that are passed to the function as function parameters, You can also use the keyword ‘Pure’ to make a pure function.

## What you shouldn’t Do With Pure Functions

- Read a state variable

- Call other functions not declared as pure

- Modify the state of the contract

## What you should do if you get this warning


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

Now there’s no cause for alarm , this is only trying to tell you that since the function doesn’t modify the contracts state you should make it a pure function , 
To get rid of the warning add a pure keyword to the function , or better still ensure that you use the function to modify the state of the contract.

I hope this helps, i am Abraham Covenant a fullstack developer steadily acquiring more knowledge as regards my development endeavors, i’m proficient in Html , Css , Javascript , Php , React js , Solidity and Css frameworks such as Tailwind Css and Bootstrap.

If you also want a private session with me send me an email
abrahamcovenant2004@gmail.com

My portfolio 
https://portfolio-40df2.web.app
3D Football Lineup
Tags: codepen
Published: 2022-12-05 14:08:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgpf7kgapo9eguqtx3bf.jpg)<p>Experimental football field rendered with CSS 3D transforms and using Velocity JS to handle animation.</p>

<p>Forked from <a href="http://codepen.io/paulnoble/">Paul Noble</a>'s Pen <a href="http://codepen.io/paulnoble/pen/PwOxOY/">3D Football Lineup</a>.</p>

{% codepen https://codepen.io/dstnation/pen/VLagoL %}
A framework to learn how to code
Tags: framework, learn
Published: 2022-12-05 14:08:14

**What I wish I knew when learning to code**

1. Get a big picture view of the code/language you're trying to learn. Read several examples of good code. Skim the code the first time. Think of questions of what the language is trying to do.

2. Find a cheatsheet(s) for the language you're trying to learn. Stick to one credible source. With the cheatsheet handy try to answer questions from step 1.

3. Find solid examples of **concepts/syntax** of good code. Stick to one credible source (like Code Academy). 

Side note: At this point I also realized _that learning to read & write code is like reading/writing music 🎼. 

_Learning a programming language is like learning to read a different type of Music or instrument._ More about that in another blog post

3. Watch videos of people coding (from a credible source, maybe not Youtube). Maybe even watch the video at 2x speed 

4. The fun part, code & do the work!
Android NFCAdapter - Issue with AuthenticateSectorWithKeyA
Published: 2022-12-05 14:02:03

Developing Android App in .net Maui. Having issues with NFCAdapter, specifically passing a specific sector key with AuthenticateSectorWithKeyA.
We print and encode our own Mifare 1K cards. Print software allows us to change the sector key A. I have tried multiple, and all ok, but need a specific key to work which is failing authentication.

No problem passing the following Keys and authenticating the sector with AuthenticateSectorWithKeyA.

``
byte[] keybytes = new byte[] { (byte)0xff, (byte)0xff, (byte)0xff, (byte)0xff, (byte)0xff, (byte)0xff };
``
OR
`byte[] keybytes = new byte[] { (byte)0xAB, (byte)0xCD, (byte)0xEF, (byte)0x12, (byte)0x34, (byte)0x56 };`

`var auth = tag.AuthenticateSectorWithKeyA(0, keybytes);`

All ok, var auth = true

But when I try the following Key it fails to authenticate. var auth = false.

`byte[] keybytes = new byte[] { (byte)0x19, (byte)0x23, (byte)0x86, (byte)0x18, (byte)0x05, (byte)0x00 };`

HEXString is 192386180500

Only thing I can see if the last two bytes have a zero prefix

SO
Tried:

`byte[] keybytes = new byte[] { (byte)0xAB, (byte)0xCD, (byte)0xEF, (byte)0x12, (byte)0x34, (byte)0x56 };`
Result: OK - var auth = True

Tried:

`byte[] keybytes = new byte[] { (byte)0x19, (byte)0x23, (byte)0x86, (byte)0x18, (byte)0x05, (byte)0x00 };`

Result: Fail - var auth = false

Use this key with non android RFID readers and all is ok. Need to use this key as we have produced thousands of RFID cards with this key A for sector 0.

Bit new to Hex and byte arrays, any help welcome.
What blue eggs taught me about the CSS Box Model
Tags: eggs, css, boxmodel
Published: 2022-12-05 13:52:36


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z82qa5jmwvripsms4tr.jpg)So there I was in my kitchen. I opened the fridge to find a tray full of blue painted hard boiled eggs.

"What does this all mean?" I said to myself? 🧐 Searching for an answer I cracked open a blue egg and then it hit me.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47q8mptma7qtsjnhvuwm.png)

The egg yolk is the **content**, the egg white is the **padding**, the shell is the **border**, the blue paint is the **margin**

There it is, that's a simple analogy of the CSS box model.
Komputer dan Internet Module 4 Seri Google Sheet
Tags: google, spreadsheet
Published: 2022-12-05 13:51:00

### **Buat Spreadsheet**

1. Masuk web [google drive](https://drive.google.com) 
2. Bila belum login, login terlebih dahulu
3. Selesai login, akan diarahkan ke halaman google drive
4. Klik tombol **+ Baru** di kanan atas drive
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6lkwwpjodpj3ey3xlwe.png)
5. Pilih **Google Spreadsheet**, kemudian klik icon **>**, pilih **Spreadsheet kosong**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur3av6rmlhzw350pa8ul.jpeg)
6. Sekarang sudah masuk halaman spreadsheet
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bxavv2312ju65rninwn.png)

## **Memulai Pembuatan Spreadsheet**

1. Double click pada kata **Untitled spreadsheet**, isiskan nama sesuai kebutuan, contoh **Spreadsheet**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0288i2e3auqykh35nnr.png)
2. Sebagai contoh studi kasus, dalam artikel ini akan membuat spreadsheet **Daftar Nilai Siswa Kelas 7B SMP Negeri 1 Kelas S**
3. Isikan dengan data berikut
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeknzqz51qctzw3wujxt.png)

## **Merubah Ukuran Font**

1. Block font yang ingin diubah ukuranya
2. Klik icon yang ada di bawah menu **Bantuan**, atur sesuai kebutuhan, contoh merubah judul spreadsheet
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cgyscjh5p9zgluqt6zn.jpg)
Hyperiondev - Web Dev bootcamp- Day 1
Tags: webdev, beginners, codenewbie
Published: 2022-12-05 13:47:27

_**Day One**_
So it begins. The link to a shared folder in dropbox which will serve as my go between for code reviews, lecture notes and most other data arrives. 
All signed up to the Hyperiondev dashboard so I can join live lectures and submit code for review or organise a 1:1 mentor chat.
So far all seems good.
Signed up for the five live lectures this week and then started my way through the first couple of task.

**Task 1 - Pseudocode**

A nice gentle intro into the thinking process of solving code problems. Get given a problem and then "describe" your solution step by step.
This one had a few tasks to complete where I had to "design" algorithms to solve simple input/output needs, order a list & find if a number input is a prime number or not.

The it was an "interactive" way of making sure we're all aware of not copying. The task being to read the info provided on types of plagiarism and then to explain our understanding whilst ensuring we reference out sources. 
Sneaky!

**Task 2 - Lets get coding.**

This "intro" to Javascript felt a little clunky if I'm honest. I've done a few free courses on JS before and they way it's introduced here felt awkward. However it did introduce using Chrome dev tools for inspecting the page (and console access), plus it got us to install VSCode and Node.js. 
Nice and handy having VSCode linked via dropbox so all work is saved to your student folder ready for submission.

**Live Lecture -**

So after a little hiccup from the hyperiondev team we got going in the afternoon with lecture one. This one hosted by Pieter went though the Task 1 info. So here we went through the concept and usage of pseudocode.

So there we go, day one done. I've submitted T1 & T2 for review and attended my first lecture. Initial feelings so far is despite quite a few teething problems admin-wise everything seems good.
A custom option for the default "Choose File" button
Published: 2022-12-05 13:47:22

If you are not a fan of the default “Choose File” upload button then I am happy to announce that now there is a solution. I created a react button using typescript that allows you to style the default file upload button into anything you like. From changing the default text to adding your own component, you now have the flexibility to style the upload button and add your own custom elements. 

I introduce **react-input-button.** It is a lightweight custom component that allows you to add a button that enables you to upload one or multiple files. At the moment, you can change the button style, the file types and the amount of images uploaded.

`import { InputBtn } from 'react-input-button'`
`<InputBtn
  multiple={false} //Upload multiple files
  onChange={(e) => {}} //Get the event
  style={{}} //Overwrite the existing styles
  text="Upload" // The text of the button
  showText={true} // Add custom component e.g. icon
  component={} // if showText = false
/>`

One of the major advantages of using a custom component is that it will look consistent across all browser, whereas the default file upload button slightly changes appearances. Another advantage is that instead of showing the file name, you can add any information you’d like after retrieving the file or files. 

It’s time to change the default file upload button into something unique that suits our projects. If the world wide web consortium is to busy to make the upload button more customizable, it’s on us to create better options that work for everyone. Looking forward to your feedback. Thanks for taking the time to read through a problem faced by many.
Fastest swap of JS syntax using vim macros ⚡️
Tags: vim, beginners, javascript, linux
Published: 2022-12-05 05:18:02

---
title: "Fastest swap of JS syntax using vim macros ⚡️"
published: true
description: Swap between function syntax in JS using vim macros
tags: vim, beginners, javascript, linux
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-05 05:09 +0000
---



## What are Vim Macros ?

Vim macros basically lets you record commands that you run on your editor.

Then at a later time, you can replay them on one line or multiple lines.

It’s one of them tools that super charges your productivity ⚡️

## Example

Here is an example of a macro that I use pretty frequently.

It’s a macro to swap between named function and arrow function syntax in Javascript.

Sometimes one style is preferred over the other... It happens 😁

With this little vim macro, its a breeze.

{% embed https://twitter.com/jerry__chang/status/1599630891625902080 %}
[Code snippets] Testing html anchor links in Cypress
Tags: cypress, javascript, e2e, testing
Published: 2022-12-05 13:38:33

## Check the link is a valid page

One way is to check that if I click on a link, it goes to a valid page.

```javascript
it('should follow the CTA button', () => {
  cy.get('.my-fancy-link')
    .then((link) => {
      cy.request('HEAD', link.prop('href'))
        .its('status')
        .should('eq', 200);
    });
});
```

The above code essentially emulates what your browser does, it takes the `href` value of the link, does a request using the HEAD method (to avoid to get the full response) to that page, and if the status is a `200 OK`, it simply means that the destination page is correct.

## Follows the link and check the url

Another way is to tell Cypress to actually click the link, and check the current url of the page.

```javascript
it('should follow the CTA button', () => {
  cy.get('.contact-sales')
    .click()
    .then(() => {
      cy.url().should('eq', 'https://example.com');
      cy.visit('/page/you/are/testing');
    });
});
```

The only problem of the latter method, is that you have to tell to cypress to go back to the previous page.

### Bonus

In some cases the domain you are testing might have queryparams that are difficult to predict, in that case you can test if the url matches what are you testing using a different strategy than `cy.url()`, and use `cy.location()` instead:

```javascript
it('should follow the CTA button', () => {
  cy.get('.contact-sales')
    .click()
    .then(() => {
      cy.location().should((location) => {
         expect(location.origin).to.eq('https://example.com.com');
      });
      cy.visit('/page/you/are/testing');
    });
});
```
Flutter Mixin Class
Tags: flutter, dart, mixin, openai
Published: 2022-12-05 13:32:01

Flutter'da Mixin sınıfını kullanmak, birden çok sınıf arasında kod paylaşmak için faydalı olabilir. Bu, kodun tekrarlanmasını önlemeye yardımcı olabilir ve kodunuzu daha düzenli ve bakım yapılabilir hale getirebilir. Ek olarak, Mixin'i kullanmak, aynı kodu birden çok kez yazmak yerine ortak kodu yeniden kullanmanıza izin vererek uygulamanızın performansını artırmanıza yardımcı olabilir. Bu ayrıca, birden çok sınıfı güncellemek yerine değişiklikleri tek bir yerde yapmanız gerektiğinden, kodunuzda değişiklik yapmayı da kolaylaştırabilir. Genel olarak, Mixin'i kullanmak, kodunuzu daha verimli ve yönetimi kolay hale getirmenize yardımcı olabilir.

Örnek:

```
class MyMixin {
  String getText() {
    return "Hello World!";
  }
}

class MyClass1 with MyMixin {
  void printText() {
    print(getText());
  }
}

class MyClass2 with MyMixin {
  void printText() {
    print(getText());
  }
}

void main() {
  MyClass1 myClass1 = MyClass1();
  myClass1.printText();

  MyClass2 myClass2 = MyClass2();
  myClass2.printText();
}

```


Bu örnekte MyMixin sınıfı, "Hello World!" stringini döndüren getText() methodunu içerir. MyClass1 ve MyClass2 sınıflarının her ikisi de, getText() methodunu her iki sınıfta da kullanılabilir kılan MyMixin sınıfını dahil etmek için **with** anahtar sözcüğünü kullanır. Her sınıftaki printText() yöntemi, string ifadeyi konsola yazdırmak için MyMixin sınıfından getText() methodunu kullanır.


[Kaynak :)](https://chat.openai.com/chat)
I want to build a solid CI with GitHub Actions
Tags: devops, webdev, discuss, github
Published: 2022-12-05 13:30:00

Hello you. Thank you for taking the time to look at my post.

First, let me give you some context. I am currently investigating some topics to apply to some future projects:
- Some web applications (mostly javascript) as a team and my own
- A component library to based on a UI library (like Bulma, for example)

From those investigations, I would like to learn about CI/CD steps to integrate with my future PRs. Some of the steps I am planning to add are:
- Unit testing (with Codecov)
- DAST/SAST scanning (I don't have any idea in mind)
- Code quality analysis (I am looking at Codacy, but never used it)

My idea is to use GitHub repositories to create the issues, link them to the repo's PRs and add the review steps with GitHub Actions

So, I would like to start the discussion with this questions:
- ¿Do you think there are more steps to have in mind to be included in PR analysis?
- ¿Do you know any tools to help this process?

Thank you again for your time and help.
STOP! Use This Instead Of Create-React-App
Tags: react, vite, nextjs
Published: 2022-12-05 13:29:33

*Quick Plug before we get started: If you like what you read, feel free to read more over at [my blog site](https://the-net-blog.netlify.app), or read this article in [my blog site](https://the-net-blog.netlify.app/post/stop-use-this-instead-of-create-react-app)*

In 2022, using `create-react-app` might not be the greatest, not because it's a bad tool, but because there are other alternatives that offer a lot more and overall are just a lot more practical to use, today I'll be showing you why you should stop using creacte-react-app, and some better alternatives to it too!

## Table Of Contents
1. [What Is CRA?](#what-is-cra)
2. [Advantages of CRA](#advantages-of-cra)
3. [Why Not CRA?](#why-not-cra)
4. [Vite](#vite)
5. [NextJS](#nextjs)
5. [Final Thoughts](#final-thoughts)

## What Is CRA?
Create-React-App or CRA for short, is a tool mantained by FaceBook (like react), that makes the proccess of using and initializing a React app much faster and easier by just running `npx create-create-app my-app` in a terminal. 

## Advatages of CRA
* Get started by just running `npx create-ract-app my-app` in a terminal.
* No need to learn extra stuff just to *start* using React.
* You can rely on using the built-in `react-scripts` to build your app.

## Why Not CRA?
First of all, you might not care about this, but it is *very* slow, sure it only takes one command on the terminal, but that one command also takes a long time to set up. And while this can be an advantage for some people, there isn't really configuration apart from setting the name of the app (which is actually optional), and it's also not a good practice to use a *blind* setup, which is essentially just running `npx create-react-app .` without really knowing what it is doing, and while it might seem like something small, it can lead to a very bad and dangerous habbit. 

[CRA Sucks](https://media.giphy.com/media/3o6ozBgoGeBFUFvaz6/giphy.gif)

## Vite
Vite pronounced `/vit/`, is simply *amazing*. It is fast, allows for both ready-to-go configuration that is easy to change, and essentially just solves all the problems that CRA has, and even has some additional features too!

It is super easy to get started with Vite and there is really no hard learning curve either. If you want to learn more about all the awesome things Vite can do, [Check out this repo](https://github.com/vitejs/awesome-vite).

## NextJS
*Next* up (get it), we have NextJS. I *LOVE* NextJS, especially for bigger projects, some of my favourites from NextJS include:

* Good SEO (unlike CRA)
* Amazing preformance
* Good for projects that can scale.

it's just a must-try if you are building any type of dashboard, interactive UI, static websites, or even just single web pages. A great example of how next is used is by looking at some famous companies like Netflix that have used it!

## Final Thoughts
CRA is *not* practicalin 2022, there are wayyy better options that allow for even more features than CRA (and look good on a resume) and it isn't even that hard to learn all of these new technologies.

O
Advent of Code 2022 - Day 5
Published: 2022-12-05 13:28:49

---
title: Advent of Code 2022 - Day 5
published: true
description: I'm trying to solve all the Advent of Code puzzles in this video series.
tags:
cover_image: https://i.ytimg.com/vi/NRVeSUboJRs/maxresdefault.jpg
---

{% youtube NRVeSUboJRs %}

I'm trying to solve all the Advent of Code puzzles in this video series.