teleren/devto huggingface dataset:
CodePen Designs - 3 : Rounded Box - Matcap texture
Tags: codependesigns, codepen, css, design
Published: 2022-12-17 18:01:41

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 3

{% codepen https://codepen.io/vcomics/pen/JjpgBwY %}

---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
CodePen Designs - 2 : 90s Vaporwave Computer Screen - CSS Animated Pixel Art
Tags: codepen, css, design, codependesigns
Published: 2022-12-17 17:51:20

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space. 

---


#### Codepen Design - 2

<p>Inspired by <a href="https://dribbble.com/tags/old_computer_aesthetic" target="_blank">https://dribbble.com/tags/old_computer_aesthetic</a> &amp;
<a href="https://d3ui957tjb5bqd.cloudfront.net/uploads/2020/09/29112311/1530x900-horizontal-51.jpg" target="_blank">https://d3ui957tjb5bqd.cloudfront.net/uploads/2020/09/29112311/1530x900-horizontal-51.jpg</a></p>

{% codepen https://codepen.io/dainaa-the-lessful/pen/abKyEKL %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
CodePen Designs - 1 : Playing Lemmings - Windows 95 - CSS
Tags: codepen, design, css, codependesigns
Published: 2022-12-17 17:48:10

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---
 
#### Codepen Design - 1

Interactive animation playing Lemmings for Windows 95 on a 486 PC. 

**Resources** 

Windows 95 background images from Wikipedia:
[https://en.wikipedia.org/wiki/Windows_95](https://en.wikipedia.org/wiki/Windows_95) 

Lemmings gif animation from: 
[https://kkatlas.wordpress.com/2015/08/31/game-review-lemmings/](https://kkatlas.wordpress.com/2015/08/31/game-review-lemmings/)

{% codepen https://codepen.io/josetxu/pen/dyKZPGN %}

You can rotate PC left and right.


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
Loader don't want to disappear !
Published: 2022-12-17 17:46:22

I have a loader that i want it disappear after 3 second but my keyframes doesn't run. I don't understand why? Could you help me please? This is the code : 

/* Loader */
 
 .loader
 {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    margin: 250px 0 0 130px;
 }
 
 .loader:before, .loader:after
{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: #9356DC;
    display: none;
}
.loader:before
{
    z-index: 100;
    animation: spin 1s infinite;
}
.loader:after
{
    border: 10px solid #FF79DA;
}
 
@keyframes spin{
0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@keyframes loader{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
Including standalone components in your module based Angular application routes.
Tags: angular, webdev, typescript
Published: 2022-12-17 17:39:22

As you know, one of the new features from Angular 15 is the concept of standalone components.

Basically what the Angular team is doing by introducing this feature is making components the basic foundation to develop in Angular.

Before, the basic foundation to develop in Angular was NgModules, in other words you needed to understand how NgModules work in order to develop apps in Angular correctly.
On the other hand, React, Vue and others frameworks / libraries are based mainly on components, so moving from one of them to Angular required some extra effort because of the differences in the basic concepts I just mentioned.

Standalone components reduces that friction and helps in the transition from developing in React, Vue or others to develop in Angular.

But what if you are already workin in Angular and you already have a module-based application? How can I render SaC (standalone component) in my module-based Angular app routes?

## Create your standalone component
Imagine you need to create a new form page in your web app and you want to implement it using an standalone component, you can create this new component using the command

```
ng g c new-form-page --standalone
```
We are telling Angular to generate a new component named new-fprm-page and using the flag standalone we are making it standalone (obviously).

This is going to create the component and is not going to modify any other file from our project.

## Add your new standalone component page in your routes

### Rendering only your component without lazy loading

```typescript

const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        component: NewFormPageComponent,
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}
```

### Rendering only your component with lazy loading

```typescript

const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        loadComponent: () => import('path/to/new-fprm-page.component').then(com => com.NewFormPageComponent)
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}
```

### Rendering your component inside a layout component with lazy loading

```typescript

const routes: Routes = [
    {
        path: 'my-new-standaline-form-page',
        pathMatch: 'full',
        component: LayoutComponent,
        children: [
            {
                path: '',
                loadComponent: () =>
                    import('path/to/new-fprm-page.component').then((c) => c.NewFormPageComponent),
            },
        ],
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}
```

Hope it works for you.
What are the differences between a HashMap and a hash table in Java ?
Tags: java, difference, hashmap, hashtable
Published: 2022-12-17 17:11:33

In Java, a HashMap is a class that implements the Map interface and stores key-value pairs using a hash table data structure. It allows you to store keys of any object type and retrieve the corresponding values using those keys.

A hash table, on the other hand, is a data structure that uses a hash function to map keys to indices in an array, and stores key-value pairs in the array. A hash table can be implemented in different ways, and a HashMap is one such implementation.

There are several differences between HashMap and a hash table:

- HashMap is a class in Java, whereas a hash table is a data structure.
- HashMap is part of the java.util package, while a hash table is a more general concept that can be implemented in different ways.
- HashMap allows null keys and null values, while a hash table may or may not allow null keys and values, depending on the implementation.
- HashMap uses a hashing function to map keys to indices, while a hash table may use a different method to map keys to indices.
- HashMap provides additional methods for modifying the map, such as put, get, and remove, which are not available in a hash table.

{% embed https://youtu.be/tdNyMgiBO4Y %}

Overall, HashMap is a specific implementation of a hash table in Java that offers additional functionality for storing and retrieving key-value pairs.
"Twitter for xxx" disappeared, so I created Check Tool
Tags: webdev, beginners, twitter, php
Published: 2022-12-17 16:49:13

Hi dev.
Recently, Twitter's tweet page no longer shows the origin of tweets such as "Twitter for Android," "Twitter for iOS," and "Twitter Web App," which previously existed.

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


But if you use Twitter API, you can get it. So I created a mini-tool to make that available to everyone.

▼You can try it now :D
**[https://tools.ic731.net/twitter/for/en](https://tools.ic731.net/twitter/for/en)**

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

> (note) It seems that some environments can see it and some can't.

### About API
In this case, I used Twitter API v2 with PHP, which extract tweet ID from URL and throw a GET request to `/2/tweets`.

For API operations, I used well-known library `abraham/twitteroauth`.
So, please note that `setApiVersion("2")` is required to use v2.

```php
$connection = new TwitterOAuth($ck, $cs, null, $brarer);
$connection->setApiVersion("2");
$id = '123456789';
$params = [
  "ids" => $id,
  "tweet.fields" => "source"
];
// GET
$tweets = $connection->get("tweets", $params);
```

And "Twitter for xxx", which is the key this time, is stored in `$tweets->data[0]->source`. That's all for this simple application. Please try it!
Auto-Generate Insert Statements With Data Using SQL Server Management Studio
Tags: sql, sqlserver, microsoft
Published: 2022-12-17 16:14:31

If you are working with a database in SQL Server Management Studio *(SSMS)*, you may find you need a way to auto-generate INSERT statements with the data from a table. This might be for inserting the data into a different database for testing purposes, or simply as a backup.

The **Generate Scripts** feature of SQL Server Management Studio will let you choose an area of the database *(e.g. a table)* for generating Transact-SQL scripts. It will let you choose one or more database objects and you can generate scripts for the **schema**, the **data** or **both**.

You can find the Generate Scripts feature in the context menu of the database. **Right-click on the database**, navigate to **Tasks** and then **Generate Scripts**:

![Generate Scripts feature in the context menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/by1js7jt7q4g3r7jybba.png)

Click **Next** in the **Introduction**:

![Introduction for Generate Scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46hysu0mi2g7xeib3m6k.png)

In **Choose Objects**, choose a database object, or multiple objects:

![Choose Objects for Generate Scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdtzzgfl23uyriy08knb.png)

In **Set Scripting Options**, click **Advanced**:

![Set Scripting Options for Generate Scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vwt5sgd1mhna29sasvh.png)

This is important as you can now tell the *Generate Scripts* feature to generate scripts for the **schema**, the **data** or **both**:

![Advanced menu for Set Scripting Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t2dl1ms03ugzdy593uu.png)

If you chose to generate scripts for both the schema and the data, you should see the following:

![INSERT statements with data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgis1v8k7nlxucx24aq6.png)
division operator in javascript
Published: 2022-12-17 16:23:13

```javascript
42 / 2 
```
is 21 of course

```javascript
42 / 5 
```
is 8.4, not 8

in javascript `/` operator no discard the decimal point.

you should use Math.round(), Math.ceil() or Math.floor()

```javascript
Math.round(42 / 5) // 8
```
Link: OCAML 5 is Out + Effects Tutorial
Tags: ocaml, rescript, adt, effect
Published: 2022-12-17 15:53:17

---
title: Link: OCAML 5 is Out + Effects Tutorial
published: true
description: 
tags: ocaml,rescript,adt,effect
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-17 15:20 +0000
---

OCAML 5 was released, and one of the features many on Twitter were happy about was effect handlers. I don't have much experience in Haskell, but one of the cool features it offers is _you_ choose if something is an Error/Exception and the program should stop, or you should keep going.


Typically, if it's your code, that's no problem. However, if it's in a 3rd party library, or a module you didn't write, you have no choice to just "handle the error". Unclear how this doesn't leak implementation details, but I'm super n00b at Effect handlers (a la Unison). Really cool to see it be used as a primitive to create async/await, streams, and Go-lang-like imperative style shared concurrency with all the type guarantee's OCAML gives you. I wonder when [ReScript](https://rescript-lang.org/) will enhance async/await to handle Effects (or maybe you already can).

Effects Tutorial: https://github.com/ocamllabs/ocaml-effects-tutorial

OCAML 5 Announcement: https://discuss.ocaml.org/t/ocaml-5-0-0-is-out/10974
Using VSCode Neovim with a separate config
Tags: neovim, vscode
Published: 2022-08-24 03:54:00

I'm primarily a neovim user, but occasionally, for pairing with my coworkers remotely, I'll use vscode.

using this option
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3nonup81e38b150jjky.png)
allows you to set an init folder different from the default, as I've done here.

One problem that *many* neovim users may run into is that if you use neovim's native plugins feature (even through a package manager), any plugins that are broken or obsoleted by vscode are still in your rtp. Here's how you fix that:

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

The `--clean` flag removes the plugins directory from your runtime path before neovim starts, you can still opt into plugins as I've done here

```lua
vim.opt.rtp:append(os.getenv('HOME') .. '/.config/nvim-code')
vim.opt.rtp:append(os.getenv('HOME') .. '/.local/share/nvim/site/pack/packer/start/tabular/')

require('plugins.unload')
require('settings')
require('keybindings')
```

I hope this helps you stay comfy when working with coworkers :)
no more ctrl+w closing my editor for me.
Peak Index In Mountain Array
Tags: javascript, leetcode
Published: 2022-12-17 15:32:50

```js
/**
 * @param {number[]} arr
 * @return {number}
 */
var peakIndexInMountainArray = function(A) {
    // lo and hi pointers for binary search
    let lo = 0;
    let hi = A.length - 1;
    // go until pointers meet
    while (lo < hi) {
        // get mid
        const mid = Math.floor((hi + lo) / 2);
        // check if this is peak
        if (A[mid] > A[mid - 1] && A[mid] > A[mid + 1]) {
            return mid;
        } else if (A[mid] > A[mid - 1]) {
            // search right half
            lo = mid;
        } else {
            // search left half
            hi = mid;
        }
    }
    // default
    return -1;
};
```
Looking for the best Bulk Twitter PVA Accounts ?
Published: 2022-12-17 15:26:38

At buyemailaccounts, we offer the most trusted and reliable service to provide low-cost [bulk Twitter accounts](https://www.buyemailaccounts.com/twitter-pva-accounts.php). We have dedicated team members that ensure you get the best and most reliable services by providing hassle-free networking with amazing features at an affordable price. Our PVA accounts are perfect for generating instant clients' attention, increasing brand awareness, and driving leads over the internet.
For more than a decade, buyemailaccounts has been helping clients in the business arena to promote their brands, increase brand awareness and market leads through Twitter. We provide PVA Twitter accounts that are highly effective at reaching the ultimate target audience. Our bulk PVA accounts have been acknowledged by numerous customers in the industry as one of the best ways to generate instant traffic to websites and blogs.
#45Days of LeetCode - Move Zeros - Day 1
Published: 2022-12-17 14:50:27

Hey dev! In case you don't know, I've started #45daysofleetcode and in these 45 days i'll be writing about two problems every day.

> The problem, how I solved it and a bit of detailed explanation.

I'm sharing this progress with you so that you too can learn a bit of different perspective and have new solutions so hit like to join this journey.

I've chosen the best list of problems from medium to hard. That made lots of developers crack the interview.

Are you excited?

**Today's Problem**

Name - Move Zeros
Description - Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements.
> Note that you must do this in-place without making a copy of the array.

Example -
`Input: nums = [0,1,0,3,12]
Output: [1,3,12,0,0]`

My Approach - I will iterate through the list and when found a zero in the path take it and append it to the list and remove it.

When you find a zero in the path, you append it to the list and then remove it from the path. Simple.

Code - 
`class Solution:
    def moveZeroes(self, nums: List[int]) -> None:
        """
        Do not return anything, modify nums in-place instead.
        """
        for i in range(len(nums)):
            if nums[i] == 0:
                nums.append(nums[i])
                nums.remove(nums[i])`

Let me know if you've any questions or suggestions!.

Follow to join this #45daysofleetcode
Full list of solutions are found in [this](https://github.com/Anas-Dew/dsa-coding-solutions) repo. make sure you star it.

Bye!
c++ ga kirish!
Tags: beginners, cpp
Published: 2022-12-17 14:43:04


Bugun biz` C++ `ni o'rganishni boshladik.
 1)`<iostream> kutubxonasi;` biz bu kutubxonada buyruqlarni olamiz 
masalan; `std`
agarda `<iostream>` yozilmasa` std` qabul qilinmaydi.
2)`std`o'zi nma?
masalan`std`biron bir buyruq berishda ishlatilinadi
std::cout << ''salom do'stlar''
`int main(){` asosiy degan ma'noni anglatadi 
yozmoqchi bo'lgan ko'dlarni `int main(){` dan keyin yozishimiz mumkun bo'ladi. 
`using namespace std;`bu degani bitta ko'dimiza har doim ham 
`std`so'zini ishlatmasak ham bo'ladi degani

```cpp
 cout << "Salom nima"
``` 

 

```cpp 
#include <iostream>

int main() {
  
std ::cout << "salom dunyo\n";
std :: cout << "12345" << std ::endl; 
std :: cout << "men bugun cpp ni birinchi darsini organmoqdaman\n";
std :: cout << "hello world";  
return 0;
  }
 
``` 
``men bugun c++ ni organishni boshladim.Men organgan narsalarim;

*`#include` bu c ++ dagi kutubxona chaqirayotganimizda kerak boladigan narsa!.
*`<iostream>` bu kutubxonamizning nomi
*`main()` bu funksiya .Har bitta cpp dasturida faqat bitta main (funksiya) bolishi mumkin. `Main` degani `asosiy` degani! funksiyani oldida doim `Datatibe`bolishi kerak!
*`int`bu malumot turi.Bu soz `integer`degan manoni anglatadi bu butun son degani!
* `std`bu buyruq!1 qatordga beriladigan buyruq!
* `cout`bu ham natijani `console`ga chiqaruvchi buyruq! `<>`doim `cout` bilan keladi!
* {} bular siz yaratayotgan codning boshalab beruvchisi va tugatuvchisi!
* `Return 0 ` bu sizning codingizni tugatuvchisi!
* `;` bu belgi malum bir gapning tugashi har qatorda bolishi shart! agar bu belgini ishlatmasangiz siz yozgan narsa `console`da xato beriladi!
*`console`bu chap tarafda turuvchi yani siz yaratgan ishning natijasini korsati beruvchi narsa!

* `console`ga natijani chiqarayotganimizda agar sozimiz alohida qatorda bolishini istasak doim qoshtirnoq ichiga `\n` buyrugini qoyishimiz kerak!

* `ctd <<` ni oldidagi `\n` ni vazifasini `cout << endl` buyrugini qoysak bolad! xotiradan egallaydigan joyi, ishlash funksiyasi boyicha bular bir biridan umuman farq qilmaydi!



@dawroun
Web Development: Where to start
Tags: webdev, beginners, career
Published: 2022-12-17 14:33:27

Technology is an ever growing aspect of the world, there is no better time to get into web development in 2023. If I had to start again and get into web development again this is a rough idea of how I would do it.

## Where to start?
I would 100% start my web development journey at websites built with beginners in mind. Example https://w3schools.com/ is the perfect place to start your web development journey.

It offers in depth knowledge about in demand technology. Along side this I would highly recommend...

Here is the finished article - https://callummacalast.co.uk/web-development-where-to-start/