teleren/devto huggingface dataset:
Creating an AI policy
Tags: ai, chatgpt, ethics, policy
Published: 2023-11-07 20:11:31

The gold rush has irreversibly begun, software companies are shoveling AI support into their apps, while experts in the field cannot scream loud enough about the risks. While there are infinite new opportunities, difficult to comprehend how immensely valuable, certainly there are also many dangers, which are maybe even more difficult to realize.

We as software developers and product managers have a HUGE say in what will happen and what not in cyberspace. We have [way more power](https://www.youtube.com/watch?v=Tng6Fox8EfI) than we often realize. And because of that, we need to be very careful. And responsible. And we need to have principles.

Principles, by definition, should not depend on the actual opportunity. We should be prepared not to blindly follow the flow when a tempting opportunity comes if it compromises our principles. So I believe it's good to have an AI policy ready, preferably published on our website, so when I'm asked to create this or that AI integration, there is something written that I can refer to. A [Ulysses pact](https://medium.com/betterism/tie-yourself-to-the-metaphorical-mast-7140ad69947b).

So I've started to sketch an AI policy for my software development team, based on the bits that I've already understood about [the risks](https://www.youtube.com/watch?v=fDHvUviV8nk) of [generative AI.](https://www.youtube.com/watch?v=xoVJKj8lcNQ) 

Here it is:

*Our basic principle is that humans should rule over the computer and not the other way around. Therefore we do not create and do not install a system where*
- *an AI makes decisions about humans, without a human taking responsibility about the decision*
- *where an AI can uncontrolledly influence the outside world, or make uncontrolled actions on the internet*

*We think helping human editing work by AI is useful, however, we see the risks when the human editor only superficially verifyies the AI-generated content. Therefore, in the applications we develop, every longer (>~10 words) AI-generated content included into human-edited content will be marked with some subtle mark (color, comment). The human editor can remove this mark, thus explicitly taking responsibility for the content.*

*Similarly, when I code with an AI assistant, I strive not to accept longer (multi-line) AI-generated code completions at once, only line by line or word by word.*

This is only my first attempt in this new genre, and I plan to further refine it as new trends are happening and my understanding of the topic broadens.

I encourage you to think about this difficult and sensitive topic. And please share your thoughts!
Using Native Python Libraries in Lambda
Tags: lambda, aws, python
Published: 2023-11-07 20:06:54

It is possible to use native libraries in Amazon Lambda. In this example, we will be building a native `bcrypt` library against `libcrypt`, using `virtualenv` to manage our libraries.

## Create an Amazon EC2 Instance to build the native library

Amazon Lambda runs on the Amazon Linux distribution, so we will need to target our compiled libraries against this distribution. Unfortunately, there doesn't appear to be any sort of `debootstrap` equivalent for Amazon Linux, so an instance using Amazon Linux will be needed for the build process.

1. Create an instance using Amazon Linux
    
2. Connect to the server
    

## Set up the build environment on the server

We will need to install the build tools for the library we are building, as well as any build dependencies that are required.

```bash
$ sudo yum update
$ sudo yum install -y gcc44 gcc-c++ libgcc44 cmake
$ sudo yum install -y python27-devel python27-pip gcc libjpeg-devel zlib-devel gcc-c++
$ sudo yum install libffi-devel
```

## Update/upgrade pip and setuptools

Make sure you are using the latest version of pip to prevent any issues.

```bash
$ pip update
$ sudo pip install --upgrade pip setuptools
```

## Set up Virtualenv for your project

We will need to package any libraries that the lambda requires along with the lambda. Virtualenv provides us with a convenient method to bundle the libraries along with our lambda function.

### Create a directory for your project, and enter it

```bash
$ mkdir $WORK
$ cd $WORK
$ virtualenv venv
```

## Activate virtualenv and install libraries

Here we will build and install the libraries into the virtualenv directory, which will make them available for packaging later.

```bash
$ source venv/bin/activate
$ pip install --upgrade pip
$ pip install bcrypt
```

## Place your lambda function into the working directory.

```bash
$ cp ~/lambda_function.py $WORK
```

## Verify the script is working as expected.

Run your lambda and/or tests locally to verify all the libraries are working as expected.

## Package the project, according to the lambda requirements.

Here's the tricky part -- Amazon Lambda requires all the libraries to be at the top level in the zip file that you upload. The following will create a zip file with the lambda function and all required libraries at the top level of the zip file. Since virtualenv contains all the libraries that we need for the project, we will copy all the libraries from the virtualenv environment to the zip file.

```bash
$ zip -9 bcrypt_lambda.zip lambda_function.py
$ cd $VIRTUAL_ENV/lib/python2.7/site-packages
$ zip -r9 $WORK/bcrypt_lambda.zip *
$ cd $VIRTUAL_ENV/lib64/python2.7/site-packages
$ zip -r9 $WORK/bcrypt_lambda.zip *
```

## Upload the zip to Amazon Lambda.

Now that you have the zip file, upload it to Amazon Lambda as you normally would. Remember to set up the test data for the lambda to verify that the function is working as expected.
How to Install Amazon CodeWhisperer in Visual Studio Code
Tags: codewhisperer, vscode, devops, aws
Published: 2023-11-07 20:04:37

Amazon CodeWhisperer is a powerful tool that streamlines your development workflow when working with Amazon Web Services (AWS). With a range of features and tools, it simplifies the process of building, deploying, and managing AWS applications directly from your integrated development environment (IDE).

I'll walk you through the installation process of Amazon CodeWhisperer in Visual Studio Code, allowing you to seamlessly integrate AWS services into your development projects.


1. Open the Visual Studio Code application and go to the Extensions on the left upper side.

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

2. Access Extensions: Type "Amazon" into the search bar and you will see a list of available extensions related to Amazon Web Services including Amazon Toolkit.

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

3. Select AWS Toolkit and click install.


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

4. After the installation is complete click on one of the future options provided to add the connection.


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

5. Scroll down until you see the sign in and sign up button. Click on it and proceed to the browser.

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


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

6. Confirm the authorization code.


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

7. Allow for data access.


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


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


Now, you have successfully installed Amazon CodeWhisperer in Visual Studio Code, making AWS integration easier and more efficient for your development projects. You can now take advantage of the various features and tools it offers to work seamlessly with AWS services directly from your IDE. Happy coding!
Amazon Kinesis Video Streams
Tags: serverless, cloud, aws, dataengineering
Published: 2023-11-07 20:04:31

# What is it?
It is a fully managed serverless service which can be used to stream live video from devices to the AWS cloud
or build applications for real time video processing or even it could be used for batch oriented video analytics.


### Sources
- smartphones
- security cameras
- AWS DeepLens (_a service from AWS_)
- RADAR Data
- RTSP Camera
- WebCams

_Note:_ You cannot have multiple producers publishing the data into the same kinesis video stream, you only has one producer publishing the data into it.
You need to have a single kinesis video stream for each producer.

### Consumers
- Amazon Rekognition Video
- Amazon Sagemaker


# Benifits
- You could use the kinesis video streams producer library in order to configure your devices and stream in real time.
- The ability to store the media data for the specified retention period.
- The ability to encrypt the data at rest.

# Security

So for the server side encryption for this service, if the data retention is enabled, your data is automatically encrypted as it enters and leaves the kinesis video streams.

Data is encrypted before it's written to the kinesis video streams storage layer and data is decrypted after it's retrieved from the storage.


[GitHub](https://github.com/a00ayad00)
[LinkedIn](https://www.linkedin.com/in/a00ayad00)
[Facebook](https://m.facebook.com/a00ayad00)
[Medium](https://a00ayad00.medium.com/)
TIC-TAC-TOE Game with HTML, CSS and JavaScript
Tags: codepen
Published: 2023-11-07 19:44:07

Tic-Tac-Toe, built with HTML, CSS, and JavaScript, is a digital version of the classic game. HTML provides the structure, CSS adds style, and JavaScript handles the game's logic.. Players can interact with the grid, make moves, and the code checks for wins and ties.  It offers an immersive and visually appealing experience.
Check out this Pen I made!

{% codepen https://codepen.io/MH-Yemon/pen/ZEweYGM %}
IS JAVASCRIPT SYNCHRONOUS OR ASYNCHRONOUS ????
Tags: programming, javascript, beginners, webdev
Published: 2023-11-07 18:44:24

## What is JAVASCRIPT ?

A scripting language which gives life to website by performing some logical operations on DOM elements

## BEING MORE PRECISE

Javascript is SINGLE THREADED SYNCHRONOUS programming language with some asynchronous capabilities provided by browser.
Ooooo its so much of complex terms !!!

Let me break it down to small chunks to make it clear 


- **SINGLE THREADED** : Only one line of code will be executed at a time. We only have one call stack where each instruction is passed (like assigning variables, calling functions). So, each operation is executed and popped out as next instruction is going to be pushed from the top.

SIMPLEST EXAMPLE :

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



- **SYNCHRONOUS** : It simply means, program will continue to execute an operation or function by blocking all other operations/code. This results in unresponsiveness to our website. This is simple inability of parallel tasks execution.

Let us understand with an example

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

So, here for loop takes significant amount time to run. Hence, below part of loop will keep waiting until loop is done with its execution. **This is called synchronous nature as operations are being performed sequentially from top to bottom.** We can see the blocking nature here. But usually we don't write such heavy operation intentionally but there are few operations like making requests to a server which takes significant amount of time to get the response back.
Hence, this is a problem. This make our website unresponsive !

**THIS PROBLEM IS SOLVED BY BROWSER API'S**

After running javascript file in browser, it creates a window object which contains web api's like setTimeOut, setInterval, fetchApi etc. 

**HOW BROWSER SOLVES THIS**


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

As per our current knowledge what we expect is , first hi will be printed, then response variable will be assigned with some response by fetch (this step blocks the below code as it takes some time) and then bye is printed.

BUT THAT DOES NOT HAPPEN HERE !!!

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

First hi is printed, then browser web api is called, this will not execute in main thread !! but in different thread provided by browser. Meanwhile below code will be executed !!!! Once every operation below fetch operation is executed main call stack (main thread of execution) will be empty, then response will be assigned with value of fetch api.

This is called event loop on a high level.

**THEREFORE JAVASCRIPT IS A SINGLE THREAD SYNCHRONOUS LANGUAGE WITH ASYNC BEHAVIOUR PROVIDED BY BROWSER WEB API'S**




THIS IS MY FIRST BLOG HERE !
FEEDBACKS ARE APPRECIATED


#JavaScript
Sell anything on your social platform
Tags: startup, ecommerce, webdev, programming
Published: 2023-11-07 19:44:03

Instagram and TikTok have spent millions adding eCommerce to their platform 💸

Why? Influencers drive $53b of eCommerce but they’re stuck relying on affiliate links that redirect users to stores.

Not a big deal right? One extra click - that’s a 30% conversion rate drop and taking users off the platform.

Every other big platform is following suit. Even X.

👀[Here's how you can do the same for free!](https://lnkd.in/e7FYA5AU)
Sveltekit import scss from node module?
Tags: svelte, scss, webdev, sveltekit
Published: 2023-11-07 19:40:04

I'm working on remaking my personal website into a professional portfolio. While I was trying to import the catppuccin palette scss module, I found that I couldn't import node modules inside my scss. I eventually found out that I should've been using the default `vitePreprocess()` instead of `sveltePreprocess()`, but I still can't figure out how to get importing from a node module working in scss. Any help?
Tailwindcss Breakpoint indicator for development! Super Useful
Tags: tailwindcss, uxdesign, uidesign, css
Published: 2023-11-07 19:23:12

In this blog post, I'm going to show you one of my favourite helpers for developing with tailwindcss.

## How do you know the current breakpoint with Tailwindcss ?

You can look up the pixels on each one and slowly try and move your screen width to that amount of pixels... This is slow and kind of annoying! I recently discovered this trick inside of a Next.js template, and have added it to every project since! I felt compelled to write and share this to people that may not have seen it before!

Here is a code snippet you're going to love! This will display the current tailwindcss breakpoint while you're in development, so you can quickly adjust the width and always see what breakpoint you should be targeting.

## Create the component


```html
export function TailwindIndicator() {
  if (process.env.NODE_ENV === "production") return null;
 
  return (
    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  );
}

```

## Include the component at the highest level in your app

For example, I'm using Next.js app router, so I would include this in the app router.

```javascript
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
    >
      <head />
      <body>
        <div>
          <Header />
          <main>{children}</main>
        </div>
        <TailwindIndicator />
      </body>
    </html>
  );
}

```

Now, whenever you are developing you will see a handy indicator in the button right of the screen, stating the current Tailwindcss breakpoint!
A debate about x++; ⁉️🤔
Published: 2023-11-07 19:23:06

Hi there, I hope you all are fine
let us talk a little bit about C++ programming language and take a deep dive into assignment operator (=) and post-increment operator (++)

```
#include <iostream>
using namespace std;
int main()
{
    int x = 5;
    x = x++;
    cout<<x;    // 5
    return 0;
}
```
The question is why x equals 5?
First of all, let us divide this statement into 3 parts
1) x
2) =
3) x++;
As the assignment operator = assigns the right side to the left side and returns the left side we should start with the right-most part which is x++;

x++ This is a post-increment operator which means it will evaluate the current value (5), and increment the value in memory for the upcoming operations (6).

**When you use x++, the value of x is first used in the expression where x++ appears, and then x is incremented by 1.**

until now everything is clear?
again
so x++; will do two things, 
- it'll give you a temporary value (we can say) which is 5, and,
 **change x's real value in memory** by 1.

- but, if we say x = 900; we obviously say in this statement:
**change x's real value in memor**y and assign 900 to it.

> If you notice same bold phrase repeated which means the same behavior in 2 different situations normal assignment and post-increment.

so finally the x = part will overwrite (x = 6 in memory) so it will remain 5.
I hope you got it 👍
Hacktoberfest 2023
Tags: hack23contributor
Published: 2023-11-07 19:11:26

### Intro
Hello there! I'm excited to share my Hacktoberfest 2023 journey with you. This is not my first Hacktoberfest rodeo; I've participated in several previous events and have thoroughly enjoyed the experience of contributing to open source projects. You can check out my GitHub profile [here](https://github.com/TheGuyDangerous).

### Highs and Lows
This Hacktoberfest had its fair share of highs and lows. One of the biggest accomplishments for me was successfully merging my first pull request to an open-source project. It was an exhilarating moment to see my code become a part of a larger community-driven effort. The light-bulb moment was realizing the power of collaboration in the open-source world. I've always known about open source, but actively participating in it during Hacktoberfest made me appreciate how individuals from all over the world can come together to create something meaningful.

However, not everything went smoothly. I encountered a particularly challenging issue while trying to fix a bug in a popular project. It seemed impossible to find a solution, and I was tempted to give up. But instead of throwing in the towel, I decided to reach out to the project's maintainers and ask for guidance. To my surprise, they were incredibly helpful and pointed me in the right direction. This experience taught me the importance of seeking help and not being afraid to ask questions when you're stuck.

### Growth
Before Hacktoberfest 2023, my skillset was mainly focused on web development and basic programming concepts. But during the event, I branched out into various technologies and programming languages. I learned about version control systems like Git in more depth, and I'm now comfortable navigating complex codebases.

My learning and career goals have certainly evolved throughout this journey. I now have a greater appreciation for open source, and I want to continue contributing to projects that I'm passionate about. I've also realized that collaboration and communication are essential skills in the world of open source, and I'm determined to improve in those areas. In terms of my career, I'm considering exploring roles related to open source development or community management because of the positive experience I've had during Hacktoberfest 2023.
How to use CDN links wisely
Tags: cdn, javascript, webdev, testing
Published: 2023-11-07 18:26:57

Consider the scenario of developing a web application where often there are readily available pre-built JavaScript solutions that can be incorporated into your app. Among the options within Node.js, you can employ `npm install` ... to integrate these solutions into your library stack and simply add a separate line to your `package.json` file. 

Alternatively, a quick approach involves copying the link from a _Content Delivery Network_ (CDN) like unpkg or jsDelivr and adding it to a `<script>` tag in this manner:


```HTML
<script type="text/javascript" src="https://unpkg.com/{PROFILE}/{REPOSITORY}@latest/index.js" defer></script>
```

Placing such a snippet in your HTML's `footer` tag readies your web app with the new dependency—most of the time.

However, there's a crucial aspect in the URL above. Notice the indicator for the version of the library being added. In this instance, "@latest"  is used, enabling the CDN provider to determine and deliver the most recent release whenever the URL is called.

The benefit of using "@latest" is the assurance of consistently accessing the **most up-to-date, optimized, and secure version** of the library. Yet, a significant drawback surfaces if the supposed "latest and greatest" version happens to be flawed and the bug remains undetected within your testing suite.

Subsequently, a flawed version might be released and deployed to the CDN provider. If you've embedded a CDN link with the "@latest" indicator, your users could inadvertently download the buggy version, potentially causing your web application to crash. While employing a JS error detection library may alert your admins, there's no guarantee.

Hence, it's a prudent recommendation to embed a CDN link with a **specific, functional version**, as shown in the following example:

```HTML
<script type="text/javascript" src="https://unpkg.com/{PROFILE}/{REPOSITORY}@{VERSION}/index.js" defer></script>
```
Although this process demands developer effort to manually update the script link and rigorously test the new version, it ensures that your web application won’t unpredictably fail unnoticed. This significantly reduces the risk of negative user experiences due to app malfunctions.

We learned this the hard way by relying on the latest release. Once, we published a link to one of our web applications that had been thoroughly tested a few days before. Unfortunately, a new faulty release of one of the used JS-libraries was updated soon after the article was published, rendering certain parts of our application unusable. Imagine losing track of the versions used, requiring extensive manual efforts to check each version.

## As a helpful tip

Set up notifications to stay informed about new versions of your dependencies and increment the version number. However, avoid using "@latest" at all costs. A good practice is to monitor the specific GitHub repository for updates.