teleren/devto huggingface dataset:
Enhancing Responsive Flutter App Development
Published: 2024-02-26 14:46:56

The responsive template i have created for Flutter apps is designed to provide a flexible and dynamic user interface that adapts seamlessly to different screen sizes. It achieves this by employing a concept called UIConfigurations, which manages the configuration settings for various widgets based on the available screen space.
UIConfigurations acts as a central repository for storing and organizing the configurations of individual widgets or entire screens. Each configuration item within UIConfigurations represents a specific widget or screen and contains the necessary settings and properties required to adjust its appearance and behavior based on the screen size.
By utilizing UIConfigurations, your template allows developers to define different layouts, styles, and interactions for widgets and screens depending on the available screen real estate. This ensures that the app’s user interface remains consistent and optimized across a wide range of devices, including smartphones, tablets, and desktops.
The flexibility provided by UIConfigurations enables developers to create responsive Flutter apps without having to manually handle each individual widget’s behavior for different screen sizes. Instead, they can rely on the predefined configurations within UIConfigurations, which can be easily accessed and applied to the corresponding widgets or screens.
Overall, your responsive template for Flutter apps, powered by UIConfigurations, simplifies the development process and enhances the user experience by automatically adjusting the app’s UI elements to fit the screen size, resulting in a visually appealing and user-friendly interface on any device.
https://github.com/bixat/flutter_responsive_template
**Getting Started**
And you can use ui configuration like this:

```dart
import 'package:flutter/material.dart';
import 'package:responsive_template/constants/styles.dart';
import 'package:responsive_template/responsiveness/extensions.dart';
import 'package:responsive_template/ui/home/widgets/body.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final config = context.homeConfig;
    return Scaffold(
        backgroundColor: config.color,
        body: Center(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  config.screen,
                  style: context.theme.textTheme.displayMedium!
                      .copyWith(fontSize: FontSizes.s48),
                ),
              ),
              const Expanded(child: Body())
            ],
          ),
        ));
  }
}
```
Git’s getting fit: making our project API faster 🚀
Tags: webdev, devops, tooling, devrel
Published: 2024-02-26 14:37:16

**The [Upsun](https://upsun.com/?utm_source=devto&utm_medium=organic-social&utm_campaign=upsun-blog) API is Git-ing faster with the [Blackfire.io](https://www.blackfire.io/?utm_source=devto&utm_medium=organic-social&utm_campaign=upsun-blog) profiler 💪😎**

One of the most interesting parts of the Upsun architecture is our most important API - the one controlling each project and its environments - is actually a single-tenant daemon. What’s so good about a single-tenant daemon? 🤔

This means every Upsun customer project has its own fully-isolated daemon. Each with its own datastore which contains absolutely everything the project needs to run—all from one place. 🤯


Let's take a closer look 👉 [Git’s getting fit: making our project API faster with the Blackfire profiler](https://upsun.com/blog/making-our-project-API-faster-with-blackfire-profiler/?utm_source=devto&utm_medium=organic-social&utm_campaign=upsun-blog)
Python script to index pages in Google automatically
Tags: seo, google, search, python
Published: 2024-02-26 14:24:34

If you have a website with a lot of pages, you have probably noticed that not all of them are indexed in Google.

To fix this, I created an open-source python script that uses Google Indexing APIs to index pages automatically.

Detailed description: https://quickindex.co/tools/python-indexing
GitHub Repository: https://github.com/quickindex/quickindex-python

Hope you will find it useful.
Laravel inside Rust? I have a reason for that.
Tags: discuss, laravel, rust, beginners
Published: 2024-02-26 14:22:06

What's up everyone!

I've been study Rust for the last couple of months and always trying to get closer of my actual stack which is around Laravel environment. 

For me, as a PHP Developer, jump into Rust is a truly hard task since I never went to Functional Programming before, however I found a way to make this "easier". 

## Rust AFAIK

The whole ecosystem is made up of different packages and you should add it as you need it, unlike Laravel which has a really robust environment around the framework.

So my first impression was that I had to learn how to use the base packages:

- Dotenvy
- Chrono
- Time
- Uuid
- and so on. 

But when it comes to Web Development (API mostly) you have to choose an framework among many which is already there. Like:

- Actix (currently using)
- Axum (evaluating)
- Rocket (people always tell me to not use it, still don't know why)

and none of them has the opinionated "structure" of Laravel, so I decided to create mine. 

## Laravel inside Rust

Why am I talking about Laravel? Because the "MVC" structure it gives us is elegant enough for small projects with Rust Web.

Things started to make sense when I coded Rust using the opinionated  Laravel framework. Here's a structure of what I'm talking about: 

```
./src
├── app.rs
├── config.rs
├── http
│   ├── controllers
│   │   ├── leaderboard_controller.rs
│   │   ├── mod.rs
│   │   └── submissions_controller.rs
│   ├── mod.rs
│   └── requests
│       ├── leaderboard_request.rs
│       ├── mod.rs
│       └── submission_request.rs
├── main.rs
├── models
│   ├── leaderboard.rs
│   ├── mod.rs
│   └── submission.rs
└── repositories
    ├── leaderboard_repository.rs
    ├── mod.rs
    └── submission_repository.rs
```

This project is currently using:
- [Actix](https://actix.rs/docs/)
- [Charybdis ORM](https://github.com/nodecosmos/charybdis)

and you can check my mess in this [Pull Request](https://github.com/DanielHe4rt/leaderboard-rust/pull/1)

The question is: would be a good thing to follow this thoughts while working with Rust? The simplicity and good structure for maintaining is what I'm always looking in a project. 

Also I'm thinking to write some series on how is my process migrating from PHP to Rust, would interest you read something like that?

Hope to see your thoughts here and thanks!
1365. How Many Numbers Are Smaller Than the Current Number
Tags: java, dsa, leetcode, problem
Published: 2024-02-26 14:17:29

##Introduction

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

Here we are given an array, now we have to traverse the array and check for every index element , how many numbers are smaller than it. And we have to count it and store it in a new array. Like nums = [8,1,2,2,3] , Output: [4,0,1,1,3]. 

##Examples

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

##Steps
1. take new array and counter variable
2. run a nested for loop.
3. Both starts from 0 and ends in nums.length
4. if( i == j), then skip
5. else if( nums[i] > nums[j]) , count++;
6. arr[i] = count;
7. return arr;

##Hints

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

##JavaCode

```
class Solution {
    public int[] smallerNumbersThanCurrent(int[] nums) {
        int arr[] = new int[nums.length];
        for(int i = 0; i<nums.length; i++){
            int count = 0;
            for(int j=0; j< nums.length; j++){
                if ( i == j){
                    continue;
                }
                else if(nums[i] > nums[j]){
                    count++;
                }
            }
            arr[i] = count;
        }
        return arr;
    }
}
```

##Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbx8msby2a538xlj8iql.png)
My custom News Aggregation Platform
Tags: webdev, programming, api
Published: 2024-02-26 14:16:03

Hello people, 

This is a very short product update.

Last year I was reading a lot of news online and much of my time was wasted between tabs and different platforms.

I've used chatGPT to figure out a way to save the time wasted on repeated tasks.

I've searched for alternative platforms like Google News and so on.

After a few more research days, I've decided to develop my own so-called custom news aggregation platform.

I am quite impressed by the open-source team of [app.daily.dev](app.daily.dev) so I've decided to develop one on my own.

The idea was simple, as described in the following ways
- Collection of platforms I am interested in
- Fetch the data via RSS link
- Create API to fetch the data in one go
- Store channel names in the database
- Make API calls in frontend 
- Render the frontend UI to showcase the news content

if you want to read the full story of the development process, below is the link 

[News content aggregation platform](https://ihatereading.in/t/mVyLClEEBD3sDy8kIVkl/News-Content-Aggregation-platform)

Below is the sample video for your reference, this simple product helps me to read fast and stay updated securely.


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

Plus this small project has taught me various concepts in backend APIs and frontend interfaces.

Feel free to give it a shot on your own
See you in the next one
Liman Çekirdek 2.0 Duyuruldu
Tags: liman
Published: 2024-02-26 14:15:24

HAVELSAN tarafından geliştirilen, açık kaynak MIT lisansı ile geliştirilen Liman Çekirdek 2.0 sürümü 26 Şubat 2024 tarihinde duyuruldu.

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

Liman Çekirdek üzerinde kurumsal ihtiyaçlara uygun şekilde geliştirilen "Liman Kurumsal" sürüm için https://liman.havelsan.com.tr/ adresi ile iletişime geçilebilir.

İlgili sürümde altyapı ve görsellik olarak bir çok güncelleme içermektedir. Tüm değişiklikler ve sürüme erişim için aşağıdaki bağlantı kullanılabilir.

https://github.com/limanmys/core/releases/tag/release.2.0

Kurulum ve güncelleme süreçleri için ise aşağıdaki bağlantı kullanılabilir:

https://docs.liman.dev/baslangic/kurulum
How to Sanitize Data in React
Tags: typescript, react, javascript, programming
Published: 2024-02-26 14:08:20

To read more articles like this, [visit my blog](https://www.mdfaisal.com/blog)


Every modern ReactJS application deals with data in some way. We are fetching data and letting people interact with it throughout the whole application.

But if we are not careful about what data is coming into our website it can cause our application to fail.

>  One of the major reasons an application crashes on runtime is bad data.

Today we will see one way to sanitize data in React applications.

## The problem

You should never trust anyone. Maybe you are expecting a remote API to return a piece of data that looks like this.

```js
userData = {
  basicInfo: {
    name: string;
    age: number;
  }
}
```

And you have a component that shows these two piece of data in the following manner.

```js
export const SomeComponent = ( {userData} ) => {
return (
    <div>
      <div> {userData.basicInfo.name ?? ""}
    </div>
  )
}
```

Now for some reason, the developer of the backend thought, okay, let’s change the structure of the data a bit to make it flatter and change it to

```js
userData = {
  name: string;
  age: number;
}
```

Now, as soon as they do that, your application will fail on runtime because it doesn’t know that the structure was changed.

You will return to the desk and fix the issue, but your users will be greeted with a crashed application the whole time.

```
Error: Cant't read name of undefined
```

One way to avoid a crash like this is

```
<div> {user?.basicInfo?.name} </div>
```

But you have to put these `?` sign everywhere which is not so clean, right?

## Take advantage of Typescript.

Now let’s define our User model like the following

```js
interface User {
  name: string;
  age: number;
}

function initUser(options?: Partial<User>): User {
  const defaults = {
    name: '',
    age: 0;
  };
return {
    ...defaults,
    ...options,
  };
}

const p1: User = initPerson();
console.log(p1); // -> {name: '', age: 0}

const p2: User = initPerson({ name: 'Tom'});
console.log(p2); // ->  {name: 'Tom', age: 0}
```

So this **initUser** method can be used to create an instance of User, and the `options` parameter makes it easy to pass parameters if we want.

If we don’t pass anything, we will get back the object with default values.

So before you push the data into the component, you will pass it via the `initUser` method and stay chilled.

Or you can use a hook.

```js
const useCleanUserData = (userData: User) => {
   return initUser(userData);
}


// inside component
const cleanUserData = useCleanUserData(userData);
```

This way, we don’t need to worry about whether the API data is clean or not.

You can use this same approach for redux as well. take advantage of the `selectors` so that the data is cleaned before they enter into the component.


**Have something to say? Get in touch with me via [LinkedIn](https://www.linkedin.com/in/56faisal/) or [Personal Website](https://www.mdfaisal.com/)**
SafeGuard Events Your Trusted Partner for Event Security
Tags: beginners, security, php, discuss
Published: 2024-02-26 14:03:25


Planning an event? Your guests' safety is paramount! At every gathering, whether it's a corporate conference, a music festival, or a community celebration, ensuring a secure environment is key to everyone's enjoyment. That's where we come in.

Here at SafeGuard Events, we understand the importance of creating memorable experiences without compromising safety. Our team of dedicated professionals is committed to providing top-notch [private security for events](https://maps.app.goo.gl/KsLnRrTCdbvSwqQN7) of all sizes. From intimate gatherings to large-scale productions, we tailor our services to meet your specific needs.

We know that behind every event, there's a story waiting to unfold, laughter to be shared, and memories to be made. That's why we make it our mission to seamlessly integrate security measures, allowing you to focus on what truly matters – creating unforgettable moments.

With our trained personnel and attention to detail, you can rest assured that your event is in good hands. Whether it's crowd management, access control, or emergency response, SafeGuard Events has you covered.

So, as you plan your next gathering, remember the importance of prioritizing safety. Let us be your partner in creating secure environments where every guest feels valued and protected. Trust SafeGuard Events for reliable private security for events that puts people first.
Understanding Big O Notation: The Key to Efficient Algorithms
Tags: python, performance, programming
Published: 2024-02-26 13:42:03

Understanding how to measure and optimize the performance of your algorithms is crucial. This is where Big O Notation comes into play. It's not just a theoretical concept but a practical tool that helps in assessing the efficiency of algorithms in terms of time and space complexity. Let's delve into this cornerstone concept of computer science.

## What is Big O Notation?
Big O Notation is a mathematical representation used to describe the performance of an algorithm. Specifically, it measures the worst-case scenario of an algorithm's runtime or space requirements as a function of the input size. In simpler terms, it tells you how fast an algorithm grows relative to the input size.

## Why is Big O Notation Important?

1. **Performance Prediction**: It helps in predicting how an algorithm will perform as the size of the input data increases.

2. **Efficiency Comparison**: It provides a way to compare the efficiency of different algorithms for the same task.

3. **Bottleneck Identification**: It assists in identifying potential bottlenecks in code, guiding developers in optimizing their algorithms.

## Common Big O Notations

1. O(1) - Constant Time: Execution time remains constant rega
rdless of input size.

2. O(n) - Linear Time: Execution time increases linearly with input size. Example: Linear search.

3. O(log n) - Logarithmic Time: Execution time increases logarithmically with input size. Example: Binary search.

4. O(n log n) - Linearithmic Time: Combines linear and logarithmic complexities. Common in efficient sorting algorithms like mergesort and heapsort.

5. O(n^2) - Quadratic Time: Execution time is proportional to the square of the input size. Common in algorithms with nested loops, such as bubble sort.

6. O(n^3) - Cubic Time: Execution time is proportional to the cube of the input size. Less common, but seen in certain algorithms involving three nested loops.

7. O(2^n) - Exponential Time: Execution time doubles with each additional input element. Seen in some recursive algorithms, especially those that solve the subsets of a set.

8. O(n!) - Factorial Time: Execution time grows factorially with the input size. Common in algorithms that compute all permutations of a set (e.g., the traveling salesman problem via brute-force search).

👉 Read and share your thoughts: https://astrocodecraft.substack.com/p/understanding-big-o-notation
Which design you would prefer?
Published: 2024-02-26 13:40:07

I am creating a private bookmark website for friends & family. The purpose of this website is that: 

“An Index of useful websites.”

I have created 2 prototypes for this purpose. 

1. With Weather Widget on Top

{% embed https://vimeo.com/916708487?share=copy %}


2. Without Widget on Top

{% embed https://vimeo.com/916708594?share=copy %}
What do you think? Which one looks more appealing. Plus, if you want to know the website URL for live demo. Here it is:

https://triton.pw

Waiting for your feedback!!
Manufacturing Execution System (MES)
Published: 2024-02-26 13:35:30

## What is a Manufacturing Execution System (MES)?
A Manufacturing Execution System (MES) is a digital system used to track and document production right from purchase order release to finished goods. It connects, monitors, and controls complex manufacturing systems and data flows on the factory floor, ensuring effective execution of manufacturing operations and improving production efficiencies.

MES solution provides real-time monitoring and control of multiple elements of the production process, such as inputs, personnel, machines, and support services. The main goal of an MES software is to optimize the manufacturing process by monitoring, tracking, documenting, and controlling the entire production lifecycle, from order release to product delivery for finished goods.

It collects data about product genealogy, performance, traceability, material management, and work in progress (WIP), among other plant activities, as they occur. This data allows decision-makers to understand the current settings of the factory floor and better optimize the production process.


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

## Why Implement an MES?
Complex production scheduling, lack of real-time tracking capabilities, quality control issues, and the need for accurate reporting and analytics pose significant hurdles to architectural millworkers and metal fabricators. An MES helps them overcome these challenges.

Some benefits of implementing an MES software include reduced waste, re-work, and scrap; quicker setup times; more accurate capture of cost information (e.g., labor, scrap, downtime, and tooling); increased uptime; and incorporation of paperless workflow activities.

MES solution also helps eliminate human error in manufacturing by providing real-time quality data checks, yield monitoring, automatic enforcement of specifications and business rules, and as-manufactured lot, batch, device, or unit traceability, resulting in improved product and process quality and higher productivity.

## Core Modules of MES Software
1. Production Planning and Scheduling
2. Order Tracking and Tracing
3. Quality Management
4. Reporting and Analytics

To Learn more about our [Manufacturing Execution System Software](https://www.hitechdigital.com/manufacturing-execution-system-mes), read our [full article here](https://www.hitechdigital.com/blog/mes-guide-for-architectural-millworkers-metal-fabricators)
Mastering Video Previews: A Guide to Compressed Videos and Thumbnails
Tags: ffmpeg, videocompression, openai, sora
Published: 2024-02-26 13:18:01

Last week, I shared insights about OpenAI's revolutionary text-to-video tool, Sora, highlighting its potential to transform video production. The discussion sparked a curiosity about the optimal ways to display and manage an extensive library of videos for users. This realization led me to explore various strategies to tackle this challenge. This post delves into two effective techniques for video presentation: video compression and the use of thumbnail series. We will explore the nuances of each method, considering their unique benefits and obstacles, in the context of enhancing user engagement in the fast-paced digital era.

## Compressed Video Previews

Compressed video previews offer a seamless glimpse into the content, maintaining the video's essence with reduced file size. Their continuous playback experience is invaluable for viewers seeking to understand the video's flow and quality at a glance.

### Advantages:

Provides a holistic view of the video content, preserving motion and narrative continuity.
Enhances user engagement with a dynamic preview, offering a taste of the video's quality and essence.

### Disadvantages:

Compressed videos, while smaller, still demand significant data, potentially hindering access for users with limited bandwidth.
The compression process might compromise video quality, affecting viewers' perception and potentially deterring engagement.

## Thumbnail Series for Video Previews

Alternatively, a series of thumbnails presents a lightweight, efficient preview method. This approach captures key moments in static images, offering a rapid overview without the need for video playback.

### Advantages:

Extremely low bandwidth requirement, making it accessible even in low-connectivity scenarios.
Swift generation and loading times improve site performance and user satisfaction.
Facilitates random access viewing, allowing users to quickly gauge content relevance.

### Disadvantages:

Lacks the fluidity and depth of video previews, possibly omitting crucial details only discernible in motion.
May not fully convey the video's atmosphere or quality, potentially affecting viewers' interest.


## Technical Considerations and Tools

Creating effective video previews requires thoughtful consideration of both user experience and technical constraints. Tools like MoviePy and FFmpeg are instrumental, simplifying the creation process for both compressed videos and thumbnails.  In my next blog I will provide some sample code on how to create thumbnail previews based on a video