teleren/devto huggingface dataset:
PHP Package:
Database operations using CRUD operations
Tags: php, crud
Published: 2021-07-08 20:56:26

## Configure database
     directory: src/Interfaces/IConnect.php
  The default configuration uses the sqlite database.
  
  You can also configure the database of your choice.
  
  Note: **Check if the PDO - PHP database extension is supported**
    
 ```php
  /*const DATABASE = "mysql:"; 
    const HOST = "host=localhost;";
    const DBNAME = "dbname=name";
    const USER = "";
    const PASS = "";*/
    
    const DATABASE = "sqlite:".__DIR__."../../database.db"; 
    const HOST = "";
    const DBNAME = "";
    const USER = null;
    const PASS = null;
 ```
## Methods

<table style="width:100%">
  <tr>
    <th>Method</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>create(array $data)</td>
    <td>Add new entries</td>
  </tr>
  <tr>
    <td>all( )</td>
    <td>List all entries</td>
  </tr>
  <tr>
    <td>find($id)</td>
    <td>Find entry by id</td>
  </tr>
  <tr>
    <td>update($id, array $data)</td>
    <td>Update or edit existing entries</td>
  </tr> 
  <tr>
    <td>delete($id)</td>
    <td>Remove existing entries</td>
  </tr>
  <tr>
    <td>execute($sql)</td>
    <td>Execute SQL statement</td>
  </tr>
</table>

## Starting a project
 Somewhere in your project, you may need to use autoload
 ```php
 include __DIR__ ."/vendor/autoload.php";
 ```
 Let's assume you have a table with the following assignments
  ```
   users (id,name,age)
 ```
 
 Creating the User class
 
 ```php
   use Tigo\Crud\Abstracts\AbsCrud; //import class

   class User extends AbsCrud
   {
        /**
        * Get Table
        */
       protected static function getTable()
       {
           return "users";
       }
        /**
        * Get Primary key
        */
       protected static function getPrimaryKey()
       {
           return "id";
       }
   }
 ```
 
 Now the "User" class can use all the features of the "AbsCrud" class
 - **EXAMPLE: Add new entries**
 ```php
     $data = ['name'=>'Hi','age'=>1];
     $user = new User();
     $user::create($data);
 ```
  - **EXAMPLE: List all entries**
 ```php
    $user = new User();
    foreach($user::all() as $item){
      echo "ID: ".$item->id."<br>";
      echo "Name: ".$item->name."<br>";
      echo "Age: ".$item->age."<br>";
      echo "----------<br>";
   }
 ```
  - **EXAMPLE: Find entry by id**
 ```php
    $user = new User();
    $id = 1;
    foreach($user::find($id) as $item){
      echo "ID: ".$item->id."<br>";
      echo "Name: ".$item->name."<br>";
      echo "Age: ".$item->age."<br>";
      echo "----------<br>";
   }
 ```
  - **EXAMPLE: Update or edit existing entries**
 ```php
     $user = new User();
     $id = 1;
     $data = ['name'=>'Hiii','age'=>8];
     $user::update($id,$data);
 ```
  - **EXAMPLE: Remove existing entries**
 ```php
     $user = new User();
     $id = 1;
     $user::delete($id);
 ```
   - **EXAMPLE: Execute SQL statement**
 ```php
     $user = new User();
     $sql = "select * from users";
     $user::execute($sql);
 ```
---

Download source code: [Github](https://github.com/tigoCaval/crud)
Emmet Prevents GitHub Copilot trigger
Tags: vscode, github
Published: 2021-07-08 20:53:17

I just started using GitHub Copilot.
https://copilot.github.com/


Copilot shows suggestions when I write code, but the autocomplete functionality doesn't work with `tab` key. 

I could find out the reason on GitHub Copilot discussion.
The reason was Emmet.
Recently I don't use Emmet heavily so the solution was very simple. 

### Solution
Open settings on VSCode and turn off `Emmet:Trigger Expansion On Tab`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jc172xrz4qtrni9ex76.png)


In terms of GitHub Copilot, so far so good!
Using fluentui-icons with Solid & Vite
Tags: solidjs, vite
Published: 2021-07-08 20:26:20

Microsoft has a great MIT licensed icon library that contains ~1700 unique icons(regular and filled styles for each) here:
https://github.com/microsoft/fluentui-system-icons

There is no library to use for Solid at the moment. This post documents some methods to use these icons.

You should also check out Heroicons library by @amoutonbrady  https://github.com/amoutonbrady/solid-heroicons

***

The first approach involves copying the SVG for each icon and creating components like below. Or maybe process all of SVGs to create the components, and publish a library while you are at it.
```typescript
interface IFluentIconsProps {
  primaryFill?: string;
  className?: string;
  size?: number;
}

export const Settings24Regular = (iconProps: IFluentIconsProps) => {
  let { primaryFill, className, size } = iconProps;
  if (!size) {
    size = 24;
  }
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill={primaryFill}
    >
      <path
        d="(...removed for brevity...)"
        fill="#212121"
      />
    </svg>
  );
};
```

***

The second approach involves a quick workaround that doesn't require extra work for each icon.

1- Install:
`npm install @fluentui/svg-icons`

2- Import the icons you want to use (note "?raw" at the end, that is important for Vite to get this SVG as text)
```typescript
import Settings24Regular from "@fluentui/svg-icons/icons/settings_24_regular.svg?raw";`
```

3- You can add some styling with CSS. Here I'm using [Solid Styled Components](https://github.com/solidjs/solid-styled-components)
```typescript
const SmallIcon = styled("div")`
  svg {
    width: 40px;
    height: 40px;
    fill: rebeccapurple;
  }
  flex-shrink: 0;
`;
```
4- Use it!
```html
 <SmallIcon innerHTML={Settings24Regular}></SmallIcon>
```

Let us know if you find a better & easier way! Or if you create a new library for Solid ecosystem 😉
The animation property
Tags: css, beginners, codenewbie
Published: 2021-07-06 21:57:15

As I continue the climb of Mount CSS, I find that I'm learning so many new tricks. My latest discovery is the animation property of CSS. 

I'm working on a static site to practice my dev skills with HTML, CSS and JS. The site simply lists 10 of my favorite video game tunes with a brief description of why I love the song so much and even a few notes on the composer and the game it is from. An idea I had was for the individual "cards" that hold the song information for each song to have an animated background upon a hover of the mouse. I'm still working towards that, but decided to scale it down and attempt a basic use of the animate property that would effect all the cards simultaneously(only for now.)

Since I'm using classes with my individual song cards, I placed the animation property within the CSS syntax that affects each card.

```
.song-div {
  .....
  .....
  animation: change 5s infinite;
}

@keyframes change {
  0% {
    background-color: rgb(149, 247, 146);
  }
  100% {
    background-color: rgba(8, 99, 26, 0.687);
  }
}
```
 
I used the variable name of "change" that I  assigned when I wrote the keyframes at-rule that tells "change" how to behave: in this case at 0% be one color and at 100% be a totally different color. The value of the animation property was a short-hand value that called on the change at-rule, gave it a length of time to perform the action, and how often it should be performed. With these things in place I was able to animate a color change for all of my cards. 

As cool as this is, I'm looking forward to even more cool possibilities with the animate property. I hope to have cool updates for you as I continue to develop the site. Happy Coding!
DB Testing with TestContainers
Tags: java, database, testing
Published: 2021-07-06 19:50:48

Testing, as we all know is a very important part of development, but it is not always easy to do!

Trying to find a way to test querying databases was very tough, at least I thought so anyway. From doing some research online there was one of two ways to test this;
1. Use mocks
2. Use an embedded db - including [testcontainers](https://www.testcontainers.org/) in this

Personally I don't like mocks, so that was option 1 ruled out.

Using testcontainers in code was great and worked very well but I had a slight problem. For the life of me I could not get the database to reset between tests. If I were to run the tests individually, all would be good. But when I run a suite of tests at once they fail because the db isn't reset.

With a Quarkus setup I was able to find out that if you annotate the class with `@TestTransaction`, then after each test the db is rolled back.

```
@QuarkusTest
@TestTransaction
public class TestClass {

    @ClassRule
    private static PostgreSQLContainer dbContainer = new PostgreSQLContainer("postgres-image")
            .withDatabaseName("dbname")
            .withUsername("username")
            .withPassword("password");

    @Test
    public void myTest() {}


    @Test
    public void myTest_2() {}
```

Now with the two tests, you can run them as a suite and the db will be reset after each test is finished.

Happy testing
Technical Leadership: Beyond Problem Solving w/ Pat Kua
Tags: leadership, management, culture, programming
Published: 2021-07-08 19:26:50

The skills you use as a software engineer and the skills you need as a technical team leader are not the same. 

This week on [Dev Interrupted](https://devinterrupted.com/podcast/technical-leadership-beyond-problem-solving/) Pat Kua, a former CTO turned engineering-leadership-coach, speaker and author, walks us through techniques to overcome the unique challenges that engineers face when taking on a leadership role.

#**Listen to the full episode**
{% spotify spotify:episode:2mWD7WZ0DtLmYeWNCTpjfV %}

#**Episode Highlights include:**
* How to identify team multipliers
* How to know if you’re doing a good job
* The different skills you need to be a great technical leader
* Tactics for staying focused on your goals and saying no to meeting requests

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/tpkmwM6c3g)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
How to build minimal angular 12 application with webpack
Tags: webpack, angular, typescript
Published: 2021-07-08 19:26:35

If you follow the angular documentation, you find either:
* [getting started guide](https://angular.io/start) that leads you to a [stackblitz](https://stackblitz.com/) project with 21 files
* [tutorial](https://angular.io/tutorial/toh-pt0) that start with installing the code generator

What if you want to try angular without getting their complete tooling or you want to integrate it into already existing project in a more lightweight way? This article have you covered - we will take a look on a minimal webpack configuration needed to build simple angular app.

# Webpack preparation

Good starting point is this post:
{% post marcinwosinek/minimal-webpack-configuration-to-build-typescript-17kg %}

with simple webpack configuration to build typescript.

# Angular code

If we want to keep our file footprint as small as we can, we can put all angular logic into just one file `src/index.ts`:
```js
import "zone.js";

import { NgModule, Component } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";

@Component({
  selector: "app-component",
  template: "<div>AppComponent works!</div>",
})
export class AppComponent {
  constructor() {}
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor() {}
}

platformBrowserDynamic().bootstrapModule(AppModule);
```

# Dependencies

For this code to work, we need few dependencies. Build time dependencies the same as in ts example:
```sh
$ npm install --save-dev webpack ts-loader typescript
```

and run time dependencies relate to the framework:
```sh
$ npm install --save @angular/core @angular/platform-browser-dynamic @angular/platform-browser
``` 

# Necessary tsconfig tweaks

Due to angular using decorators, if we build an app with ts configuration as we have from the other application the build will fail:
{% asciinema 424592 %}

instead, we should set `tsconfig.json` to:
```json
{
  "include": ["src/**/*"],
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
```

# Working application
When all goes well, the working application looks like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b293m66kzawujwhzp0uw.png)

You can see it in action at:
https://marcin-wosinek.github.io/webpack-angular/

The whole codebase is available at:
{% github marcin-wosinek/webpack-angular no-readme %}

# Links
* [webpack video course](https://bit.ly/WebpackCourse)

# Summary
In this article, we have seen a minimal set up to start playing with angular. If you are interested in more of my content, you can find links here:
{% post marcinwosinek/webpack-links-4alp %}
Practice what's new in Java
Tags: java, showdev
Published: 2021-07-08 19:18:04

You have read about the new features that have arrived in Java world but didn't have the opportunity to learn them yet? I have a challenge for you.

## What's new in Java world

I won't describe what's new in Java world because this article is hard to surpass:

{% post https://dev.to/awwsmm/20-reasons-to-move-on-from-java-8-1dio %}

## How to practice it?

But reading about what's new is not enough.

Alas, your project at work may be stuck with Java 11 or even Java 8.

In a previous article, I shared the tip that if you want to learn more about a programming language - or here its evolution - you should write unit tests about them.

{% post https://dev.to/jmfayard/unit-test-your-knowledge-13j %}

This is exactly what I've started to do here:

{% github https://github.com/jmfayard/java16-playground %}

If you look in the **src/main/test** folder, you will find snippets like this one:

```java
public class RecordJava14 {
    record Employee (String name, int age, String department) {
    }

    @Test
    void createRecord() {
        var patrik = new Employee("Patrick", 36, "Marketing");
        assertThat(patrik.toString()).isEqualTo("Employee[name=Patrick, age=36, department=Marketing]");
        assertThat(patrik.name()).isEqualTo("Patrick");

        var clone = new Employee("Patrick", 36, "Marketing");
        assertThat(clone).isEqualTo(patrik);
    }
}

```

This gives you a view of the features of modern Java that are already covered:

<img width="582" alt="java16-playground_–_README_md__java16-playground_" src="https://user-images.githubusercontent.com/459464/124977195-7e7b6480-e030-11eb-9920-cc7cbf9fcfab.png">

## Your challenge

If you want to learn more about modern Java, I challenge you to pick one of the remaining issues and implement it. 

​	https://github.com/jmfayard/java16-playground/issues

(of course, you can also create a new issue)

<img width="716" alt="Issues_·_jmfayard_java16-playground" src="https://user-images.githubusercontent.com/459464/124977238-8a672680-e030-11eb-9b46-1cf87c497170.png">
How using OOP improves code quality? Classes vs. Functions
Tags: programming, computerscience, oop, javascript
Published: 2021-07-08 19:15:53

Every codebase, be it for a small or a huge system, is a story to tell that takes input, and computes an output. One pillar of quality code is that it is easy to follow through from input to output, much like reading through a script. Everyone wants this, huh? 

But it is not always easy, sometimes, you need to write a function to manipulate a global variable—outside the scope of the function—introducing side-effects, let's see how this ruins code readability:

```
let someVar = 1;

// Define and call a few functions

(function() {
  // Change the state of the global variable
})();

(function() {
  // Do something but not changing someVar
})();

(function() {
  // One more that changes the state of the global variable
})();

console.log(someVar)
```

As you might have noticed, functions can change the global state, so you have to read through the above three functions to debug the value of `someVar`, even though the second function didn't change the state of the global variable, but who knows, it could have.

This affects the maintainability of our code as it becomes harder to trace what functions change the global state, and what don't. So it is not easy to follow some variable from input to output, which is what defines quality code.

The solution is to encapsulate data and functions together in the same data structure that also doesn't have visibility to the global state:

```
class SomeClass {
  let someVar;

  constructor(someVar) {
    this.someVar = someVar
  }

  dummy1() {
    // Change the state of the global variable
  }

  dummy2() {
    // Change the state of the global variable
  }
}

let someVar = new SomeClass(1);
someVar.dummy1()
someVar.dummy2()
```

This improves code readability as we need to intentionally call the functions that change `someVar` from inside the data structure itself, I mean, calling `someVar.dummy1()` and `someVar.dummy2()` in the above example.
Variations on the HTML Two-Step
Tags: html
Published: 2021-07-08 19:08:48

---
title: Variations on the HTML Two-Step
published: true
description: It’s not that HTML is impossible to read or write — it’s just awkward.
tags: HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgnjwvwqcv7emuaovm3g.jpeg
---

It’s not that HTML is impossible to read or write — it’s just awkward.

For starters there’s the pinky finger problem. You know — the keyboard sequence for creating a tag: the left pinky finger holds down the Shift key while the right middle finger searches for the < key . . . then you release the Shift key while typing the tag's mnemonic characters . . . then once again with the left pinky Shift key thingy, while the right ring finger (or is it the one next to it?) fumbles around for the > key.

Then — after composing the paragraph or phrase or word — the whole process is repeated with the closing tag, with all the same keystrokes plus the ergonomic *coup de grâce*: the right pinky hitting the / key while remembering that the left pinky should momentarily let up on pressing the Shift key!

Try doing this for a sustained period and you’ll soon be filing a worker’s compensation claim for ergonomic injury. It’s like the party game Twister, where your body parts get tied in knots just by following the rules.

So writing HTML is unpleasant, but what about reading it?
In actual practice, HTML tags seldom appear stand-alone. Attributes are frequently applied to tags in order to associate them with styling rules (CSS). And on dynamic documents, attributes are applied to tags for dynamic manipulation (JavaScript). Both of these clutter the document significantly. 

But the real problem is that tags and attributes aren’t just lightly sprinkled here and there; they’re dumped all over the document in a downpour — like one of those climate change rainfalls that floods the city so you can’t see the streets anymore.

Reading an HTML document — even one that has color syntax highlighting — makes you wish there was a legal signal-to-noise limit, with offenders getting fined. It’s not uncommon to discover documents where the noise is so many times greater than the signal that it’s impossible to find the author’s words.

If Clara Peller was still around, she’d be demanding to know “Where’s the content?”

HTML wasn’t supposed to be like this.

---

Excerpted from [Variations on the HTML Two-Step](https://medium.com/javascript-fanboi/2021-046-variations-on-the-html-two-step-11f975eb8630).
How to see git history in VsCode?
Tags: github, git
Published: 2021-07-08 19:05:20

[Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
Git History helps to view history and compare current code with previous commits.
[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
Git Graph helps in visualising the repository and understanding the connection between the branches.
Debugging SpringBoot Application In IntelliJ Idea CE
Tags: java, intellij, springboot
Published: 2021-07-08 18:58:17

When debugging a SpringBoot application in IntelliJ Idea Community Edition, additional steps need to be taken.

If you have defined your run configuration as `spring-boot:run`, you will find that the application runs, but does not stop at breakpoints as expected.

An easy way to resolve this is to set the `spring-boot.run.fork` property to `false`.

This can be set wither within the `pom.xml` file, or within the run configuration. To set the run configuration, set the "Command line:" within the Run Configuration to be:

```
spring-boot:run -Dspring-boot.run.fork=false
```

The default value of this property is `true`, which is usually the best setting, but not when debugging from IntelliJ Idea CE. If the application is forked, then the relevant JVM properties are not passed on to the forked process and debugging does not work as expected.

Changing the value of this property all the time can cause problems with Spring Boot DevTools, so its only recommended to set at runtime and not in the `pom.xml` file where it will be used every time the application is started.


## Credits
Photo by [Zan](https://unsplash.com/@zanilic?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)
How to commit minor changes into a previous commit (changing history of repo)?
Tags: git, github
Published: 2021-07-08 18:41:01

If you have a minor change for which you don't want to create a new commit. Use
```
git commit --amend --no-edit
```
This will allow you to create a new commit but replace the older one. But it will appear as if the old commit was never created. If you need to give a new message use -m flag to give a new message.
TIL: A Basic Thing about map()
Tags: javascript
Published: 2021-07-08 18:30:57

---
title: TIL: A Basic Thing about map()
published: true
description: Sometimes you need to correct your knowledge
tags: javascript
//cover_image: https://direct_url_to_image.jpg
---
So many times I learn or correct my knowledge of things when I'm doing code reviews. TIL that I was under the incorrect assumption that `map()` would skip over `null` or `undefined` array entries. I was wrong. It makes sense in hindsight. Especially since it's in the first line of the documentation. 🤦‍♀️

[MDN Docs]([Array.prototype.map() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map))
>The *map()* method *creates a new array* populated with the results of calling a provided function on every element in the calling array.

```javascript
const original = ["a", null, "b", undefined];
const mapped = original.map((item) => Boolean(item));

I was thinking it would do this: true,true
I was wrong: true,false,true,false 
```
slim.js gets a fifth version
Tags: frontend, webcomponents
Published: 2021-07-08 18:28:20

---
title: slim.js gets a fifth version
published: true
description: slim.js the fastest web-components authoring library gets version 5, faster, lighter and more flexible
tags: frontend, webcomponents, 
---

I have released this week version 5 of slim.js, faster, lighter and more flexible than previous releases.

Will appreciate if you try it and let me know how was your developer experience.

doc site: https://slimjs.com
Name 3 writing tips you wish you had when you first started blogging
Tags: discuss, beginners, writing
Published: 2021-07-08 18:11:45

---
title: Name 3 writing tips you wish you had when you first started blogging  
published: true
description: Name 3 writing tips that you wish you had when you first started blogging!
tags: discuss, beginners, writing
//cover_image: https://direct_url_to_image.jpg
---

If you could travel back in time to when you first started blogging and give yourself 3 writing tips, what would they be?