teleren/devto huggingface dataset:
Lazy Loading
Tags: webdev
Published: 2023-09-27 05:14:03

Lazy loading in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.

It allows you to defer loading of Client Components and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.

There are two ways you can implement lazy loading in Next.js:

1. Using Dynamic Imports with next/dynamic
2. Using React.lazy() with Suspense

By default, Server Components are automatically code split, and you can use streaming to progressively send pieces of UI from the server to the client. Lazy loading applies to Client Components.
Is FOG the new FAANG in the world of AI
Tags: ai, openai, palm
Published: 2023-09-27 09:14:51

As AI technologies advance, three key players emerge at the forefront: Facebook, OpenAI, and Google. Each brings its own strengths and weaknesses, making it essential to compare them before diving in.

What tools are you using to compare AI models. We built contentable.ai to scratch this itch of ours.

1. You can choose upto 3 models side by side. Supports open AI GPT, llamma and Google PALM at the moment

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

2. You can also provide prompt variables for complex usecases. Hit Run and you will get output from all 3 models to compare side by side. You can measure the latency of each model and the cost of each model in one screen


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


Our hypothesis is that the AI model you choose can make or break your project. Knowing the nuances between Facebook, OpenAI, and Google models can give you the edge you need. Is this a valid hypothesis? Do other dev's agree that we will need to compare more models in future? Please let us know

Read [detailed blog](https://www.contentable.ai/blog/fog-is-the-new-faang-comparing-facebook-openai-and-google-on-contentable-ai)
Open Source ABCs: Transparency
Tags: opensource, discuss, 100daysofoss
Published: 2023-09-27 09:00:00

---
title: Open Source ABCs: Transparency
published: true
description: Join our #100DaysOfOSS blog series as we explore the world of Open Source Software (OSS) from A to Z! Every week, we'll discuss two new letters of the English alphabet. Share your thoughts, ideas, and favorite OSS projects for each letter. Let's celebrate the power of open source together! 
tags: opensource, discuss, 100DaysOfOSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxwg4ygmybnni1tpwdx3.png
# Use a ratio of 100:42 for best results.
series: 100DaysOfOSS
published_at: 2023-09-27 09:00 +0000
canonical_url: https://opensauced.pizza/docs/community-resources/open-source-abcs-transparency/
---

Welcome to our [#100DaysOfOSS series](https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k). Until October 31, we'll be doing  Open Source Software (OSS) terms from A to Z. We'll be diving into a different letter of the English alphabet, uncovering OSS concepts, and sharing our thoughts on them.

Today, we're covering the letter "T" for Transparency.

**Transparency**: Transparency helps to build trust in open source. Because open source is a collaborative effort, with people from all over the world coming together to develop and maintain projects, transparency is one of the most important strengths of the open source community. 

Now, we want to hear from you! What other OSS terms can you think of that start with the letter "T"? 

Remember to use the hashtag #100DaysOfOSS if you share on social media, and don't forget to tag us [@saucedopen](https://twitter.com/saucedopen) so we can follow along.
#1 From JavaScript to React
Published: 2023-09-27 08:55:10

Rendering User Interface

Untuk memahami bagaimana React bekerja, pertama kita perlu pemahaman dasar tentang bagaimana browser menginterpretasikan kode Anda untuk membuat antarmuka pengguna (UI) yang interaktif.
Ketika pengguna mengunjungi halaman web, server mengirimkan file HTML ke browser yang mungkin terlihat seperti ini:

![HTML to DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yidui3npq7vhcl9o2c81.png)
 
Browser kemudian membaca HTML tersebut dan membentuk Document Object Model (DOM).

Apa itu DOM?

DOM adalah representasi objek dari elemen-elemen HTML. Ini bertindak sebagai jembatan antara kode Anda dengan user interface, dan memiliki struktur mirip pohon dengan hubungan _parent _dan _child_.


![Dom to UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egyvtx62o1bapd9buztp.png)
 
Anda dapat menggunakan metode DOM dan bahasa pemrograman, seperti JavaScript, untuk melakukan event listener dan memanipulasi DOM dengan memilih, menambahkan, memperbarui, dan menghapus elemen-elemen tertentu dalam antarmuka pengguna. Manipulasi DOM memungkinkan Anda tidak hanya memilih elemen-elemen tertentu, tetapi juga mengubah styling dan kontennya.

source : https://nextjs.org/learn/foundations/from-javascript-to-react
A real life example of using Late Static Binding in PHP.
Tags: php, latestaticbinding, static, softwareengineering
Published: 2023-09-27 08:42:06

##Introduction:
In the world of software development, creating flexible and dynamic systems is most important. One essential feature of a dynamic system is the ability for subclasses to override and customize functionality inherited from a base class. In PHP, Late Static Binding is a powerful feature that enables this flexibility, allowing subclasses to access their own static properties and methods, even when called through the base class. In this article, we will explore the concept of Late Static Binding through a practical example of a dynamic database query system.

##Understanding Late Static Binding:
Late Static Binding (LSB) is a feature in PHP that allows a child class to reference its parent class's static properties or methods using the static keyword. This feature opens the door to dynamic behavior within your classes. It's especially useful when dealing with inheritance and customization of functionality in subclasses.

##The Scenario:
Consider a scenario where you are developing a web application with a database. You have a base Database class that contains common functionality for interacting with the database, such as querying and data retrieval. Additionally, you have two subclasses, User and Product, each representing a different entity in your application. These subclasses need to perform database queries specific to their respective tables.

##Implementing Late Static Binding:
Let's dive into the code to see how Late Static Binding can help us achieve dynamic database queries:

```php
<?php
class Database {
    protected static $tableName = '';

    public static function getTableName() {
        return static::$tableName;
    }

    public static function query() {
        $tableName = static::getTableName();
        return "SELECT * FROM $tableName";
    }
}

class User extends Database {
    protected static $tableName = 'users';
}

class Product extends Database {
    protected static $tableName = 'products';
}

//Example usage:
User::query(); // Outputs: SELECT * FROM users
Product::query(); // Outputs: SELECT * FROM products
```
##Explanation:

1. In the Database class, we define a static property $tableName, which represents the name of the database table.

2. The getTableName() method returns the table name using Late Static Binding with static::$tableName.

3. The query() method constructs and returns a query string that includes the specific table name obtained using static::getTableName()

##Conclusion:

Late Static Binding in PHP is a powerful tool that allows developers to create flexible and dynamic systems. In the example provided, we demonstrated how to use Late Static Binding to implement dynamic database queries in a web application. This feature empowers subclasses to access their own static properties and methods while maintaining a clear and organized class hierarchy. Incorporating Late Static Binding in your PHP applications can greatly enhance their flexibility and maintainability, ultimately leading to more robust and adaptable codebases.
Researchers Introduce RankVicuna, An Open-Source Model Elevating Zero-Shot Reranking in Information Retrieval
Tags: opensource, ai, machinelearning, news
Published: 2023-09-27 08:39:52

In the realm of information retrieval, the limitations and proprietary nature of Large Language Models (LLMs) like GPT have posed significant challenges in terms of reproducibility and reliability, restricting extensive applications and experiments. Addressing these challenges, researchers have developed RankVicuna, a revolutionary open-source LLM designed to elevate zero-shot reranking. RankVicuna is a symbol of transparency and replicability, providing high-quality listwise reranking, and offers comparable, if not superior, effectiveness to models like GPT3.5, even with its smaller, 7-billion parameter model. Built with a focus on enhancing crucial retrieval metrics such as nDCG, RankVicuna outshines its larger counterparts in several datasets and paves the way for a future unbound by proprietary constraints, where information retrieval and search effectiveness are enhanced, even in data-scarce settings.

Read the full story — https://news.superagi.com/2023/09/27/researchers-introduce-rankvicuna-an-open-source-model-elevating-zero-shot-reranking-in-information-retrieval/
Human & AI Collaborative Agent Framework that Optimizes Delegation and Enhances Team Dynamics
Tags: ai, machinelearning, performance, news
Published: 2023-09-27 08:37:41

Researchers at Università di Pisa, in collaboration with the Institute for Informatics and Telematics, National Research Council (CNR), have pioneered a groundbreaking framework engineered to refine the synergy and delegation between humans and AI in collaborative scenarios. This model is meticulously crafted to amplify the dynamics of mixed teams comprising both humans and autonomous agents, by implementing decisive and knowledgeable delegation choices, all aimed at optimizing team efficacy and diminishing individual agent expenditures. Focused on environments where both entities have operational responsibilities — like in autonomous vehicles — it uses contextual analysis to identify the most competent entity, be it human or AI, to execute tasks or make decisions, always aiming to enhance performance and cut down operational costs.

Read the full story — https://news.superagi.com/2023/09/27/human-ai-collaborative-agent-framework-that-optimizes-delegation-and-enhances-team-dynamics/
Disabling SSL Certificate Verification for RedHat Subscriptions
Tags: linux, beginners, tutorial, security
Published: 2023-09-27 08:37:24

If you encounter an **error** during the subscription process on your RedHat systems, specifically the error message

```
'Unable to verify server's identity: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:618),'
```

 You can resolve it by modifying the **'insecure'**
 label in the **rhsm.conf** configuration file. Change the value from 0 to 1 using the following commands located at **_/etc/rhsm/rhsm.conf_**.


``` bash
vi /etc/rhsm/rhsm.conf
```

Edit the insecure line 0 to 1
``` bash
# Set to 1 to disable certificate validation:
insecure = 1
```
Programming Tips
Tags: beginners, programming, opensource, codenewbie
Published: 2023-09-27 01:18:44



- **Add by small steps**: When adding features/functionality etc. into your code, do it by very small steps and test after each step. Do NOT add multiple things at once. 

If you add 3 features at once and then find out the program doesn't work, you will have an extremely hard time finding out the bug because it may be in feature 1, feature 2, feature 3 or ANY COMBINATION of them, so you may very well never find the bug. 

If you instead test after adding each step, you find potential bugs immediately which will make fixing them very quick and easy.


- **No indentation for temporary code**: Tiny "workflow" tip: when adding new code, keep it unindented so that you know it's the newly added code and can delete it at any time. Only when you test the added code, indent it correctly to incorporate it as the final code. 

Of course, this fails in languages where indentation matters Python cough cough) but similar effects can be achieved e.g. by adding many empty lines in front of/after the temporary code.


- **Comments/Preprocessor to quickly hide code**: It is a basic trick to comment out lines of code we want to temporarily disable. 

However preprocessor may work even better, e.g. in C if you want to be switching between two parts of code, instead of constantly commenting one part and uncommenting the other just use `#if 0` and `#else` directives around the two parts. 

You can switch between them by just changing 0 to 1 and back. This can also disable parts of code that already contain multiline comments (unlike a comment as nested multiline comments aren't allowed).
The Future of Artificial Intelligence in Software Development
Tags: webdev, programming, ai, softwaredevelopment
Published: 2023-09-27 08:29:22

🎯 Dive deep into the impact of #AI on #software #development. Discover how it's automating #tasks, improving #quality, and enabling #creativity. Check out our latest blog post on Devler.io (http://devler.io/)👇
[Read here](https://devler.io/blog/the-future-of-artificial-intelligence-in-software-development)
Noice - 11,876+ Free SVG Icons, CC0 assets, open source icons library
Tags: design, marketing, ui, opensource
Published: 2023-09-27 08:16:32

Hey Community, I’m new here, but I love what I’ve been seeing and wanted to give back.
Previously I published about the Muse AI Beta - Graphic design tool a month ago. I hope you guys found some value in it. 

Today, we want to offer yet another high value asset. Introducing  Noice - Free CC0, open source icons library, downloadable in SVG. 

Check it out at - https://www.producthunt.com/posts/noice-3/

🌟 What's Noice All About? 🌟

Noice is a treasure trove of design goodies. Think of it as your secret weapon for crafting stunning designs, eye-catching UI, and engaging social media content. It offers a massive collection of icons, illustrations, clipart, vector SVGs, and even 3D assets – all for FREE! 😱✨
🌈 Why You'll Love Noice: 🌈
Quality: The assets are top-notch, ensuring your projects shine professionally and creatively.


Variety: With a vast array of assets to choose from, you'll never run out of inspiration.


SVGs Galore: Vector SVGs ensure your designs look sharp on any screen, big or small.


User-Friendly: Noice's website is designed with users in mind, making it easy to find and download the assets you need.
It's FREE: Yes, you read that right! Noice believes in making creativity accessible to all, so everything is available for free.


Ready to supercharge your creative projects? 💥 Head over to Noice and start downloading today!

💡 Join the Creative Revolution: No more spending hours searching for design assets. Say goodbye to expensive subscriptions. Noice is here to make your creative journey smoother, more enjoyable, and entirely FREE!

Noice - Where art inspires brilliance!
Check us out at - https://www.creatosaurus.io/apps/noice
What is Angular, Angular Project Setup. Explained
Tags: webdev, beginners, programming, angular
Published: 2023-09-27 08:03:57

Angular is a popular open-source web application framework for building dynamic, single-page web applications (SPAs). It is developed and maintained by Google and a community of developers. Angular provides a comprehensive set of tools and features for developing modern web applications.

## Setting Up Angular Development Environment
**step-1**
Before you begin, make sure you have Node.js installed. If not, download and install it from the official Node.js website: https://nodejs.org/

**step-2**
**Install Angular CLI**
Angular CLI(comand line interface) is a powerfull tool to creating and managing Angular applications.to install Angular CLI Run 
`npm install -g @angular/cli`

**step-3**
**Create a New Angular Project:**
Replace "my-angular-app" with your desired project name. Angular CLI will prompt you to configure various project settings. You can choose options like whether to include Angular routing or which stylesheets (CSS, SCSS, etc.) to use.

**step-4**
**Serve Your Angular Application:**
To start a development server and serve your application locally, use the following command. This will compile your Angular application and make it available at http://localhost:4200/ by default. You can access your app in a web browser.


once you Setup the Angular Application You will get some '.ts','.json','html'  and more file in the project Folder. Iam trying to explain every file and there functions from my understanding

**angular. Json**
angular.json file contains Project configuration like Artictech,style and lotmore 

**package-lock.json**
package-lock.json  file contains detailed information about the specific versions of packages and their dependencies 

**Package.json**
package.json file plays a vital role in managing project dependencies, scripts, and various configurations related to your project's development, build, and deployment.
DP-203 Exam Excellence: Your Journey with DumpsArena
Tags: webdev, programming, opensource, news
Published: 2023-09-27 07:55:31

## Information Designing on Microsoft Purplish blue (DP-203) Affirmation Test Questions
Information Designing on Microsoft Purplish blue Dumps, DP-203 Dumps, DP-203 PDF, Information Designing on Microsoft Purplish blue VCE, Microsoft DP-203 VCE, <a href="https://dumpsarena.com/microsoft-dumps/dp-203/">DP-203 Exam Dumps</a>
Information Designing on Microsoft Purplish blue PDFThe motivation behind this Example Question Set is to furnish you with data about the Information Designing on Microsoft Purplish blue test.

<a href='https://dumpsarena.com/microsoft-dumps/dp-203/'><img src='https://www.linkpicture.com/q/Teal-Illustration-Digital-Business-Blog-Banner.png' type='image'></a>

These example questions will make you intimately acquainted with both the sort and the trouble level of the inquiries on the DP-203 accreditation test. To get to know genuine test climate, we propose you attempt our Example Information Designing on Microsoft Purplish blue Confirmation Practice Test. <a href="https://dumpsarena.com/microsoft-dumps/dp-203/">DP-203 Dumps</a>
This example practice test provides you with the sensation of the real world and is a sign to the inquiries posed in the genuine Microsoft Ensured - Sky blue Information Designer Partner confirmation test.

These example questions are straightforward and fundamental inquiries that address resemblance to the genuine Microsoft DP-203 test questions. To survey your status and execution with constant situation based questions, we recommend you plan with our Superior Information Designing on Microsoft Sky blue Certificate Practice Test. At the point when you tackle continuous situation based questions basically, you run over numerous hardships that offer you a chance to move along.

**Latest Updates Await! >>>>>  https://dumpsarena.com/microsoft-dumps/dp-203/**
When to use Repository and Service layer and when NOT
Tags: restapi, codestructure, bestpractices, repositoryvsservice
Published: 2023-09-27 07:50:33


Are you building RESTful APIs and wondering when to leverage the repository and service layer? Let's dive into this topic!

🔍 Repository Layer: The repository layer acts as an intermediary between your API and the data storage mechanism. It handles data access operations like retrieval, creation, updating, and deletion. It ensures code modularity and provides a consistent interface. 

💡 Service Layer: The service layer implements the core business logic of your API. It coordinates different components and enforces business rules, workflows, and data integrity. It also handles authentication and authorization. #BusinessLogic

🚫 When to Avoid Repository and Service Layers:

✅ Lightweight Operations: Simple CRUD operations can be handled directly in your API endpoints or controllers to keep things simple. 

✅ External Integrations: Directly make API calls without introducing layers unless there are complex rules or transformations involved.

✅ Middleware: Implement middleware functions without the layers if they don't require complex data access or business logic.

🔎 When to Use Repository and Service Layers:

✅ Complex Business Logic: Use the service layer for intricate business rules, validations, and workflows beyond basic CRUD. #ComplexLogic

✅ Modularity and Reusability: Layers promote code modularity and reuse. Encapsulate common data access or operations within repositories for consistency.

✅ Unit Testing: Separate concerns aid unit testing. Mock the repository layer for focused, granular tests of service layer logic. #UnitTesting

Strike a balance between code organization, maintainability, and performance in your REST API projects. Happy coding! 😄🚀
Blog series: Performance optimization of unfamiliar applications ✨
Tags: webdev, tutorial, opensource, devops
Published: 2023-09-27 07:46:36

Stepping into an unknown application landscape with the mission to improve its performance can be daunting. That's why we built a two-part blog series to help you tame this beast.

In this series you will discover how Blackfire is all about turning measurement into performance optimization, ensuring your next steps are driven by data.

And we will dive into the intricacies of defining a test boilerplate that could help us get started on setting up long-lasting control over the performance of an existing application.

In-depth knowledge of an application’s internal behavior and scaffolding is required, alongside understanding its inherent business value and global dynamics.

Let's get you started, and help you overcome the barriers in performance optimization due to gaps in understanding of both the macro and micro aspects of your applications.

👉 [Part One: Taming the beast: performance optimization of unfamiliar applications with Blackfire](https://blog.blackfire.io/taming-the-beast-performance-optimization-of-unfamiliar-applications-with-blackfire-part-1-of-2.html?utm_source=social&utm_medium=organic_social&utm_campaign=blackfire_blog&utm_id=blackfire_blog)
👉 [Part Two: Taming the beast: performance optimization of unfamiliar applications with Blackfire](https://blog.blackfire.io/taming-the-beast-performance-optimization-of-unfamiliar-applications-with-blackfire-part-2-of-2.html?utm_source=social&utm_medium=organic_social&utm_campaign=blackfire_blog&utm_id=blackfire_blog)

Happy Optimization! ❤️