teleren/devto huggingface dataset:
How to Set up And Run Cypress Test Cases in CI/CD TeamCity?
Tags: teamcity, devops, testing, docker
Published: 2023-01-22 04:43:21

Integrating Cypress with TeamCity allows you to run your Cypress end-to-end tests as part of your continuous integration (CI) workflow.

To integrate Cypress with TeamCity, you will need to create a build configuration that runs Cypress tests as part of the build process. This can be done by configuring a build step to run the Cypress test command, such as “npx cypress run” or “yarn cypress run”, depending on your project’s setup. Additionally, you’ll need to configure the build to report test results to TeamCity, so that the results can be analyzed and displayed in the TeamCity web interface

**Please follow** [the link](https://qaautomationlabs.com/how-to-set-up-and-run-cypress-test-cases-in-ci-cd-teamcity/) how we can set up and run cypress test cases in CI/CD TeamCity
Super small socket.io
Tags: socketio, websocket, minimal, server
Published: 2023-01-22 04:30:49

Hey friends!

I looked far and wide on the web to find a very minimal socket.io implementation. No express, no node http module, just socket.io. I couldn't find a suitable example so I wrote one. I plan on using a version of this on my upcoming MMORPG 2D space sim. Link to the repo here: [minsocketio](https://github.com/daniellukonis/minsocketio)

---

Clone the repo:

```
git clone git@github.com:daniellukonis/minsocketio.git
```

Install the dependencies with:

```
npm i
```
then start both the server and client with:

```
npm start
```

---

**io.server.js**

```
const io = require("socket.io")(13555)
  .on("connection", (socket) => {
    socket.on("data", data => io.emit("newData", data))
  })
```

This creates the socket.io server and listens on port 13555. All it does right now is listens for connected clients to send a message labeled data, and rebroadcasts it to all connected clients.

---

io.client.mjs

```
import { io } from "socket.io-client"
const socket = io("ws://localhost:13555")
socket.on("newData", newData => console.log(newData))

setInterval(data, 1000)
function data() {
  const d = Math.random()
  socket.emit("data", d)
}
```

This client simply connected to the socket.io server and sends a random number. It listens for the server to broadcast a message labeled newData, then logs it to the console.

---

Thanks for reading! Keep your ears open for progress on my game. I expect to stream some updates soon!

Thanks,
Daniel
Simple Image Compression Using OpenCV And Python
Published: 2023-01-22 04:14:31

## Introduction

Hello! 😃 I recently needed to compress images for work, but most free image compressors have a file size requirement, so I decided to create my own using python and opencv.

In this post I will show how I did it and I hope it helps anyone with the same problem

---

## Creating the environment

First we need to create and activating the virtual environment, this can be done with the following command:

```bash
python3 -m venv env
source env/bin/activate
```

Done 😎 next we can get to writing the code.

---

## Writing The Code

Next open up a file called "requirements.txt" and insert the following:

```txt
opencv-python
```

To install the requirements use the following command:

```bash
pip install -r requirements.txt
```

Next open up a file called "main.py", first we will require some packages so write the following:

```python
import cv2 
import os
import argparse
```

Next we will create a simple function to display the file size of a file in MB:

```python
def show_file_size(file):
  file_size = os.path.getsize(file)
  file_size_mb = round(file_size / 1024, 2)

  print("File size is now " + str(file_size_mb) + "MB")
```

Nothing too complicated just a couple of lines to display the file size of a file.

Finally we need to create a main function:

```python
if __name__ == "__main__":
  ap = argparse.ArgumentParser()
  ap.add_argument("-i", "--image", required = True, help = "Path to input file")
  ap.add_argument("-c", "--compression", required = True, help = "Compression level")
  args = vars(ap.parse_args())

  image = cv2.imread(args["image"])

  cv2.imwrite("compressed_image.jpg", image, [cv2.IMWRITE_JPEG_QUALITY, args["compression"]])

  print("Image Compressed Successfully")
  show_file_size("compressed_image.jpg")
```

Here we use ArgumentParser to parse the user's "image" and "compression" arguments we then read the image file using opencv, and then use the imwrite function to output the compressed file. Finally we then display the new file size to the user.

Done! 😆 Image compression in just a few lines of code.

---

## Conclusion

Here I have shown how to implrement simple image compression using opencv and python, I hope this article has been of some use to you.

As always you can find the source code on my GitHub:
https://github.com/ethand91/python-image-compression

Feel free to play around with different compressions 👀

---

Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee. 

[![“Buy Me A Coffee”](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/ethand9999)

If you are looking to learn Algorithm Patterns to ace the coding interview I recommend the following course:
https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch

Original link to post:
https://ethan-dev.com/post/image-compression-with-opencv-python
New Swiss army knife tool for ESP32 with MicroPython for your IoT.
Tags: esp32, micropython, mcu, iot
Published: 2023-01-22 04:04:43

Hello everyone!

I'm the creator of MicroWebSrv 1&2 and I just wanted to introduce my latest open-source software, available on GitHub: [ESP32 MPY-Jama](https://github.com/jczic/ESP32-MPY-Jama).

![ESP32 MPY-Jama](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuozsz4j0844712reysc.png)

It's a UI tool that allows you to manipulate and develop the ESP32 using MicroPython.
It natively includes features such as an IDE, file management and transfer, real-time dashboard display, Wi-Fi management, and the ability to import and develop customizable mini-features.

It works on MacOS (arm64/Intel x86_64), Windows 64-bit, and Linux.
For Mac and Windows, there is also a binary installation option available.

Thank you in advance for any feedback you may provide! :)

JC`zic
5 Front-end Development Skills to Land Your First Job in 2023
Tags: webdev, html, css, javascript
Published: 2023-01-22 04:02:21

Front-end development is an exciting field that combines the creativity of design with the logic of programming. It's the process of creating the user interface of websites and web applications, and it's a critical part of the web development process. If you're looking to land your first front-end development job, there are a few skills you should focus on.

**HTML and CSS:** These are the building blocks of the web. HTML (Hypertext Markup Language) is used to structure the content of a website, while CSS (Cascading Style Sheets) is used to control the layout and design. A solid understanding of these languages is essential for any front-end developer.

**JavaScript:** JavaScript is the programming language of the web. It's used to create dynamic and interactive web pages, and it's the backbone of modern front-end frameworks such as **React** and Angular. A good understanding of JavaScript is crucial for front-end developers, and it's a skill that's in high demand.

**Responsive Design:** With the rise of mobile devices, it's essential that websites are designed to work well on a variety of screen sizes. Responsive design is the process of creating a website that automatically adapts to the size of the user's screen. A front-end developer should be able to create responsive designs that look great on any device.

**Browser compatibility:** Different web browsers interpret code differently, so it's important to ensure that a website looks and functions correctly across all major browsers. A front-end developer should have a good understanding of browser compatibility issues and know how to work around them.

**Version Control:** Version control is the process of managing changes to code over time. It's a critical skill for any developer, and it's especially important for front-end developers who work on large teams. A good understanding of version control systems such as Git is essential for any front-end developer.

**Join a community(bonus):** The frontend development community is large and supportive. Joining online communities like dev.to is a great way to connect with other developers, share knowledge, and get feedback on your work and [contribute to open source projects](https://dev.to/anjankarmakar/contribute-on-open-source-projects-as-a-beginner-4mge).

In conclusion, front-end development is a dynamic and exciting field that requires a combination of technical and creative skills. By mastering the skills outlined above, you'll be well on your way to landing your first front-end development job. Remember, to be a successful developer, you should always be learning and updating your skills.
Wassup TypeScript Interfaces!
Tags: typescript, javascript, webdev, learning
Published: 2023-01-22 02:50:00

TypeScript is a popular superset of JavaScript that adds optional static typing to the language. One of the key features of TypeScript is its support for interfaces, which allow you to define a contract for the shape of an object. This can be useful for defining the structure of objects that will be passed as function arguments, or for creating custom types that are used throughout your application.

---

An interface in TypeScript is defined using the interface keyword, followed by the name of the interface. The interface definition includes a list of properties, along with their types. For example, the following interface defines a simple object with two properties, name and age, both of which are strings:

```
interface Person {
  name: string;
  age: string;
}
```

Once an interface has been defined, it can be used to create variables and objects that conform to that specific shape. You can use the : operator to tell TypeScript that a variable or object should conform to a specific interface. For example:
```
let person: Person = { name: "John Doe", age: "35" };
```

You can also use interfaces to define function types. This can be useful when a function takes an object as an argument, and you want to ensure that the object conforms to a specific shape. For example:
```
interface GreetingFunction {
  (person: Person): string;
}

let greet: GreetingFunction = (person: Person) => {
  return "Hello, " + person.name;
};
```
Interfaces can also be extended to create new interfaces that inherit the properties of existing interfaces. This can be useful for creating more specific interfaces that add additional properties or constraints to the base interface. For example:
```
interface Employee extends Person {
  salary: number;
}

let employee: Employee = { name: "Jane Doe", age: "28", salary: 50000 };
```

In this example, the Employee interface inherits all of the properties of the Person interface, but also includes an additional property, salary.

In summary, interfaces in TypeScript are a powerful tool for defining the structure of objects and functions in your application. They allow you to create custom types that can be used throughout your code, and provide a way to ensure that objects conform to a specific shape. This can help to catch errors early on, reducing the chances of bugs and making your code more maintainable.

---


Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
IntelliJava: intuitive framework to integrate with AI models.
Tags: java, gpt3, openai, opensource
Published: 2023-01-22 02:49:27


---
title: IntelliJava: intuitive framework to integrate with AI models.
published: true
description: 
tags: java, gpt3, openai, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prskwrhr1qwlr55tpytp.png

---
Intelligent Java (Intelli Java)

{% embed https://github.com/Barqawiz/IntelliJava %}
Graphql Federation with NestJS and Apollo
Published: 2023-01-22 02:31:20

As your Graphql backend grows there may come a time when you want to split the service into smaller components or microservices. This can help keep your domains isolated and speed up deployments. The really cool feature of the graphql system is federation, which will allow you to deploy isloated graphql backends and integrate them for your front-end. 

Let's look at an example: 

## Our Domains 

Let's continue with our example form last week of the system for a university. Let's say we want to integrate a finance system to track the accounts payable for our students. 

Here is our model for the account balance. We link the balance to the student via student ID and track a very simple amount of data.  

``` 
type accountBalance{
  outstandingBalance: Int
  paymentDue: String
  StudentId: ID

}
``` 

Now, in order to implement the backend, we have 2 choices, we can integrate the payment system into our existing student backend or split them out into microservices. Since payments and class registrations aren't necessarily correlated, let's keep the separate. 

The design will require us to deploy 3 services: 

- a registration service 
- an accounts payable service 
- a gateway service to provide a unified front-end 

Let's start with the gateway and work backwards from there. 

## The API Gateway 

Api gateways are a feature of Graphql which allow you to aggregate types across micro-services without muddying your domains. NestJS is a great platform for this. To start with let's add the student object to our balance type: 

```
type accountBalance{
  outstandingBalance: Int
  paymentDue: String
  StudentId: ID
  Student: Student
}
```

Now we need to identify how to fetch a student on our Student type, back in our first Service: 

```
type Student @key(fields:'id'){
//
}
```

now in our student resolver we need to define how to fetch a student when requested by id: 

```
@ResolveReference()
  async resolveReference(
    reference: {
      __typename: string;
      id: string;
    },
    context: IGraphqlContext
  ) {
    const { id } = reference;
    const user = await context.loaders.studentBySelfLoader.load(id);
    return this.studentMapper.persistenceToGql(user);
  }
```

Now we've defined how to fetch a student when requested by any other service we just need to link the two services together via a gateway. 

Now we need to define a federation service to aggregate our domains 
```

import {
  ApolloFederationDriver,
  ApolloFederationDriverConfig,
} from '@nestjs/apollo';
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { UsersResolver } from './users.resolver';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloFederationDriverConfig>({
      driver: ApolloFederationDriver,
      typePaths: ['**/*.graphql'],
    }),
  ],
  providers: [StudentsResolver, AccountResolver],
})
export class AppModule {}


```
API Middleware use cases
Tags: api, middleware
Published: 2023-01-22 02:26:42

## What is API Middleware?

Is a component that participates in the processing of an HTTP Request and the consequent generation of a Response. It acts as a mediator between the client or consumer and the software application service. There are multiple types of middlewares depending on which app they connect to. We will focus on API Middleware.


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

## A middleware

- can access your HTTP request and its related information  like headers, method, body, parameters, etc 
- sends (or not) the request to the backend application for further processing through the request handler
- return a valid HTTP response to the client or consumer.
- performs actions before or/and after execution of the request handler, since is part of the processing pipeline, allowing flexible compute capabilities. 

## API Middleware use cases

- Request/response manipulation (e.g. add headers, modify the body, etc)
- Session
- Cross-Origin Resource Sharing (CORS)
- Firewall
- Authentication
- Authorization
- Validation
- Sanitize
- Caching
- Logging and monitoring
- Error handling and exception management
- Content negotiation (e.g. handling different formats for the same resource)
- Rate limiting and Throttling
- Honeypot
- Security (e.g. CSRF protection, Same-Site Cookie)
- Internationalization and localization
- API Versioning
Pastes.io - API Docs
Tags: api, programming, webdev, devops
Published: 2023-01-22 02:13:01


We have a New API! You can find Docs here [https://docs.pastes.io](https://docs.pastes.io)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zosuo9oj0otletd1ddb.png)
Stuck Learning Web Development? Use These 3 YouTube Channels to Boost Your Progress.
Tags: webdev, beginners, tutorial, writing
Published: 2023-01-22 01:59:52

Are you stuck learning web development?

Use these 3 YouTube channels (plus an extra resource) to boost your learning and take your dev journey to the next level.

--- 

It's challenging to learn web development.
Fortunately, you have free access to all the information you need online to get started, advance, and even land a job as a web developer.
Simply follow these 3 YouTube channels:

## 1. Fireship gives you a 5-minute rundown on various IT-Topics
You want to learn about technology but have only five minutes available.
Fireship offers a variety of brief videos (typically under five minutes) that explain various subjects on a high level. This is excellent if you have heard about a new concept or technology and would like to understand how it operates.

The subjects include:
- general IT news (like cloud computing)
- Software Development Concepts
- Particular Technologies (like React, Angular, or GraphQL)
Utilize this resource to gain an understanding of new technologies quickly.

Link to Fireship YouTube channel: https://www.youtube.com/@Fireship

## 2. Traversy Media teaches you web development by building projects.
Do you want to build projects while learning web development?
Traversy Media teaches you how to use new technologies by having you build simple projects. He produces in-depth videos that walk you through every step of the process, from application design to implementation. Seeing the technologies used in the context of an actual project will help you better understand them.
So rather than reading documentation, use Traversy Media to build projects.

Link to Traversy Media YouTube channel: https://www.youtube.com/@TraversyMedia

## 3. Design Course helps you make your applications look awesome.
You can code an application, but for them to be used, it must also look good.
You can learn how to make sure your application's UI looks good and is easy to use with the help of Design Course. Although frequently ignored by developers, you should not underestimate design. Don't just concentrate on new technologies; also consider the design.
Design Course will teach you:
- which design trends are currently popular
- how to make your designs better
- how to put certain features in place
This enables you to produce applications that look fantastic and set a new standard for your apps.

Link to DesignCourse YouTube channel: https://www.youtube.com/@DesignCourse

## (Extra) FreeCodeCamp provides a vast, free library of coding-related content
FreeCodeCamp is probably the most exhaustive, free resource on coding you will ever find.
They provide you with the following:
- Engaging lab exercises, where you can follow interactive, step-by-step guides to learn by doing.
- Detailed articles on a wide variety of topics.
- Extensive videos on their youtube channel that are in-depth.
FreeCodeCamp is fantastic if you're interested in in-depth learning about coding, and it's free.

Links:
- YouTube: https://www.youtube.com/@freecodecamp
- Website: https://www.freecodecamp.org/learn
I built a file manager, so I can use my crappy laptop.
Tags: javascript, rust, react, go
Published: 2023-01-22 01:19:51

## Intro

Handling files are worst nightmare, organizing them, so you can save up space for other files.

For a long time, I use my old laptop (which have 2GB ram & 1TB storage) to store all of my files. But the catch is every time in order to get my file, I need to open my laptop & use a flashdrive to get the file. Its hard to use my crappy laptop, it takes a lot of time to boot & open file explorer.

I never cared about it, until now, this is now my greatest nightmare.

So I decided to write a software so I can manage my files (Maybe there are lots of softwares out there for this, but I'm too dumb to search).

## Uhmm.. the software ??
Drumroll 🥁 Introducing **Snorlax** 📁

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

> Yes, the name is inspired from pokemon :)

This app consists of 2 parts, a [Server](https://github.com/hyfic/snorlax/tree/main/api) & a [Client](https://github.com/hyfic/snorlax/tree/main/app)

Server is a rest api written in golang, each endpoint being used for various file operation, like delete file, rename file etc.

Client is Tauri app, written in Typescript, React & Rust. You can connect to a server & handle files from the app.

All of the major features are done, yet some features are remain to add.

## Conclusion
Honestly I've no Idea what I'm doing. But if you have any suggestion to improve this app, feel free.

## Useful links 🔗
- [Snorlax github](https://github.com/hyfic/snorlax) (feel free to star 🌟)
- [My personal website](https://fadhilsaheer.tech)
Persistent localStorage cache with SWR
Published: 2023-01-22 01:07:32

None of the current tutorials on the web actually worked for me, after some hours of investigation I created this hook

The only dependencies are "usehooks-ts" (just for commodity) and "swr" itself

```typescript
import { useLocalStorage, useEventListener } from "usehooks-ts";
import { useSWRConfig } from "swr";
import { useEffect } from "react";

export const useSWRCache = () => {
  const [swrCache, setSWRCache] = useLocalStorage("swrcache", "{}");
  const parsedSWRCache = JSON.parse(swrCache) as object;
  const { cache, mutate } = useSWRConfig();

  useEffect(() => {
    Object.entries(parsedSWRCache).forEach(([key, value]) => {
      if (!value) return;
      cache.set(key, value);
    });

    // @ts-ignore
    for (const key of cache.keys()) {
      mutate(key);
    }
  });

  useEventListener("beforeunload", () => {
    const newCache: any = {};

    // @ts-ignore
    for (const key of cache.keys()) {
      newCache[key] = cache.get(key);
    }

    setSWRCache(JSON.stringify(newCache));
  });
};
```

This will save the cache on the localStorage when the "beforeunload" event is triggered (every time an user closes the tab, or reloads the page)

And then it will reload the cached keys from the localStorage once the page is loaded with useEffect

To use it you only need to place it in the main App.tsx or _app.tsx (Next.js) components

Like this:

```typescript
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  useSWRCache();

...
```