teleren/devto huggingface dataset:
Assignment 1 Environment Setup
Published: 2023-09-10 03:02:12

This first assignment was very simple and straight forward. I did not really encounter any issues or difficulties setting up my environment since I have used Java and IntelliJ for my other classes as well as personal work. I also did not face any difficulties when writing the fibonacci code portion of the assignment because I have done similar exercises in Python and C. So overall this first assignment was a perfect way to begin the course.

Overall I am looking forward to this class. I feel like it will give good incite of what it is like working in the real world. I can't wait to work and collaborate with my peers to tackle projects. I am also looking forward to blogging my experiences. I have not done anything like this before and I feel like it will be a great way to share how things have been going throughout the projects.
Implementing Buttons and Handling User Gestures in Flutter
Tags: flutter, ui, beginners, programming
Published: 2023-09-10 02:30:00

Hey there, fellow Flutter enthusiasts! Today, I'm diving into the exciting world of buttons and user gestures in Flutter. Whether you're new to Flutter or just looking to enhance your UI skills, this blog will guide you through the process. So, let's get started!

Understanding Buttons
Buttons are a fundamental part of any app's user interface. They allow users to interact with your app by triggering actions. In Flutter, you can create buttons in various ways, but here are the most common ones:

1. ElevatedButton
The ElevatedButton is your go-to widget for a raised button. It's visually appealing and indicates a primary action.
```
ElevatedButton(
  onPressed: () {
    // Your action here
  },
  child: Text("Elevated Button"),
)

```
2. TextButton
The TextButton is a simple, text-based button often used for secondary actions.

```
TextButton(
  onPressed: () {
    // Your action here
  },
  child: Text("Text Button"),
)

```
3. IconButton
If you need an icon to represent an action, Flutter's got you covered.

```
IconButton(
  onPressed: () {
    // Your action here
  },
  icon: Icon(Icons.favorite),
)

```
Handling User Gestures
Buttons are fantastic, but what about more complex user interactions? Flutter offers the GestureDetector widget to handle gestures like taps, double taps, and long presses.

```
GestureDetector(
  onTap: () {
    // Handle single tap
  },
  onDoubleTap: () {
    // Handle double tap
  },
  onLongPress: () {
    // Handle long press
  },
  child: YourWidget(),
)

```

Putting It All Together
Now, let's combine buttons and gestures to create a user-friendly interaction. Imagine a colorful container that changes color when you tap it.

```
Color _containerColor = Colors.blue;

GestureDetector(
  onTap: () {
    setState(() {
      _containerColor = Colors.green;
    });
  },
  child: Container(
    height: 200.0,
    width: 200.0,
    color: _containerColor,
    child: Center(
      child: Text(
        "Tap me!",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

```
Conclusion
Buttons and user gestures are vital tools in your Flutter arsenal. They enable you to create engaging and interactive user interfaces. So go ahead, experiment, and add that extra layer of interactivity to your Flutter apps. And remember, sharing is caring—spread the Flutter love with your fellow developers! Happy coding!

Video: https://youtu.be/1Pze1Gsu4EI (in Hindi)
count tokens locally to a query to the openAi api
Tags: reactnative
Published: 2023-09-10 02:18:32

How can I count the tokens of a prompt sent to openAi to set a limit on the query? For example, I want only 200 tokens to be sent at the prompt... I have read that you can use Python's tiktoken library but this requires hosting a server and first making a query from my react native application to check the tokens... Is there a way to do this directly in my application? Or what other ways are there besides the Python server?
Bypass Any Paywall 💸
Tags: paywall, chrome, extensions
Published: 2023-09-10 01:16:59

Use the free [12ft](https://chrome.google.com/webstore/detail/12ft-free/ljgfopbnjccdcbmaanglicbcbhndoofa) Chrome ext. The huge benefit over other methods: **_You can send anyone a link to the de-paywalled content._** Eg:

https://12ft.io/proxy?q=https://medium.com/change-your-mind/doing-these-three-things-makes-you-look-like-a-jerk-1b7c5b5bedbc 

Note the `12ft.io` domain it's hosted at. That link will survive forever. Really useful. I can't count the times I sent someone a Medium or NYT link, and they replied, "I can't see that content."

"Shut off JavaScript" is a big ask for the average enduser, and Incognito mode is too. Now your links will work the first time you send to them to luddite friends and family members.
Ubuntuにnode入れてバージョン管理
Tags: node, wsl, npm
Published: 2023-09-10 00:20:10

Ubuntu に nodejs と npm と yarn 入れる。
node と npm は [n](https://github.com/tj/n) でバージョン管理する。

会社の PC 設定する時に毎回調べたり、個人 PC の設定忘れがちなのでメモとして。

---

## 目次

- [やること](#やること)
- [n をインストールするまで](#n-をインストールするまで)
- [node/npm を再インストール](#nodenpm-を再インストール)
- [テンポラリの node と npm を削除](#テンポラリの-node-と-npm-を削除)
- [yarn インストール](#yarn-インストール)
- [結果](#結果)

---

## やること

1. n をインストールするためのテンポラリな node と npm をインストール
1. n をインストールする
1. node/npm を n で再インストール
1. テンポラリな node と npm を削除
1. yarn をインストール

れっつごー

---

## n をインストールするまで

```
# pkgマネージャーからnode/npmをインストール(テンポラリ利用)
$ sudo apt install -y nodejs npm

# n をインストール
$ sudo npm install n -g
```

---

## node/npm を再インストール

```
# 安定バージョン
$ sudo n stable

# 最新バージョン
$ sudo n latest

# バージョン指定
## リモートのバージョン確認
$ sudo n ls-remote | head
Listing remote... Displaying 20 matches (use --all to see all).
20.6.1
20.6.0
20.5.1
20.5.0
20.4.0
20.3.1
20.3.0
20.2.0
20.1.0

## 20.1.0を利用
$ sudo n 20.1.0
```

---

## テンポラリの node と npm を削除

```
$ sudo apt purge -y nodejs npm
$ sudo apt autoremove -y
```

## yarn インストール

```
$ npm install -g yarn
```

---

## 結果

基本は安定板を利用。

```
$ node -v
v18.17.1
$ npm -v
9.6.7
$ yarn -v
1.22.19
```

以上
Create your first React App on a Windows PC
Published: 2023-09-09 22:02:29

Building your first React app on a Windows computer may seem complicated, but don't worry, you're on the right track. React is a JavaScript library developed by Facebook in 2013 for building and managing large-scale applications with ease.

When creating a React app on a PC, you need to have your terminal open. I recommend using the Windows PowerShell. To open the Windows PowerShell, right-click the Windows icon on your PC and click on the PowerShell terminal.

Now that the PowerShell is open, we are halfway through the process. What you need to do next is navigate to the folder where you want to create your React app by typing:

```
cd ‘folderToNavigateTo’
```

After navigating to the folder where our React app will be created and located. The next step is to create our React app in the chosen folder by typing the following command:

```
npx create-react-app@5 myreact
```

Replace ‘myreact’ with the name you want to give to your project or new application. After that, loading and installing all the required packages will take some time. Before proceeding, ensure you have the Visual Studio Code editor installed on your PC. Once the React app has been successfully installed and loaded, you can navigate to your project folder by typing "cd ‘myreact’" once again and open VS Code by typing:

```
code .

```
This command will automatically open the folder in VS Code. Now you can start practicing and building your React application with ease.

CONGRATULATIONS! 🎉 You’ve just created your first React app! 🥳🥳 If you have any questions or need further assistance as you work on your React project, feel free to reach out in the comment or read the detailed article on [medium](https://medium.com/@theonlyabdull/create-your-first-react-app-on-a-windows-pc-37f85198c94b) with image guilds. Good luck with your development journey! 🚀👏

Thanks for your time❤️. I’m on Twitter: [theonlyabdull](https://twitter.com/TheOnlyAbdull) and Linkedin: [Abdullah Salaudeen.](https://www.linkedin.com/in/abdullahi-salaudeen-08392a252?lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3B%2F5XNJ7nnT1iCAmJSuziTVg%3D%3D)
reactjs
Tags: webdev
Published: 2023-09-09 21:56:32



```js
const resetPassword = asyncHandler(async (req, res) => {
     const { password, token } = req.body;
     if (!password || !token) throw new Error('Missing inputs');
     const passwordResetToken = crypto.createHash('sha256').update(token).digest('hex');
     const user = await User.findOne({ passwordResetToken, passwordResetExpires: { $gt: Date.now() } });
     if (!user) throw new Error('Invalid reset token');
     user.password = password;
     user.passwordResetToken = undefined;
     user.passwordChangedAt = Date.now();
     user.passwordResetExpires = undefined;
     await user.save();
     return res.status(200).json({
          success: user ? true : false,
          mes: user ? 'Updated password' : 'Something went wrong',
     });
});
```
Building a privacy-first health app - update #6
Tags: food, nutrition, opensource, redwoodjs
Published: 2023-09-14 19:04:28

---
title: Building a privacy-first health app - update #6
published: true
date: 2023-09-09 21:38:18 UTC
tags: food, nutrition, opensource, redwoodjs
canonical_url: https://n00bgineer.wordpress.com/2023/09/10/openhealth-update-6/
---

## **Introduction**

In the previous update, I was able to implement the **`foodItemSearch`** service, which allowed me to search for food items, but it was buggy at best, since pagination didn’t work as expected. By this update, I was able to fix the basic fetching issues, but I also discovered another issue.

## **Update**

1. I discovered a pretty weird issue in the FDC API, that is the 0th page of **`/v1/foods/search`** endpoint returns the same output as the 1st page. To fix this, I’d to replace the default page count as 1, instead of 0. 
2. There were also some other minor updates that I made to fix the issue with pagination, as only the first page was getting re-fetched every time.
3. I updated the **`foodItemSearch`** service, to also return the **`servingCount`** value for both foundational and branded food, with it’s default value being 0.25 & 1 respectively. Why 0.25 as the default **`servingCount`** for foundational foods? That’s because the default **`servingSize`** for foundation foods is 100g, but it needs to be broken down so that users can select smaller portions.
4. I also added the **`NutritionModal`** , which shows the nutritional information of a food. It is shown upon clicking the “Nutrition” button at the bottom of the **`FoodCard`** component.

## **Next steps**

1. Now I can finally implement the feature to implement food item mutation, which is linked with both food and account screens. To make the food item mutation work, I’ll have to build a modal in which the users can view, add and remove food items from their list. Think of it like a cart for food, i.e. A food cart.

## **Screenshots**

![](https://n00bgineer.files.wordpress.com/2023/09/search_nutrient.gif?w=1024)
_Viewing nutritional information (desktop)_

![](https://n00bgineer.files.wordpress.com/2023/09/food_nutrient_light_mobile.png?w=473)
_Nutritional info modal in mobile (light mode)_

![](https://n00bgineer.files.wordpress.com/2023/09/food_nutrient_dark_mobile.png?w=473)
_Nutritional info modal in mobile (dark mode)_
Roast my Idea
Tags: startup, mvp
Published: 2023-09-09 21:27:33

https://hotcheck.vercel.app

Hey Dev.to folks, I've been pouring my energy into Hotcheck, a tool designed to give real-time insights into how your photos stack up in terms of beauty, mood, and even which celebrity you resemble. I'm proud of what it can do, but I'm also keenly aware that it has room to grow. So, I'm turning to you for some straight-up feedback. What features do you think could take Hotcheck to the next level? What pitfalls should I be wary of? Your insights could be the game-changer for this project. Thanks in advance!
Made this meme but it's ONLY html and css
Published: 2023-09-09 20:47:23

---
title: Made this meme but it's ONLY html and css  
published: true
description: Inspired by a viral meme, here's the full code
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf9ah3ojzohx57mkd9ig.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-09 02:39 +0000
---

I am pretty sure EVERYONE must have seen this meme** before...did you? (p.s. ⚠ turn the volume down):
{% youtube 5qHHm7ooavo %}




So, out of boredom I challenged my friend [framp](https://twitter.com/air_framp_one) to see who would be faster at recreating it.

**Me with emacs or him with vim**

![vim or emacs](https://res.cloudinary.com/practicaldev/image/fetch/s--0uG4dAm_--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g92vvaky0h0651372nxc.jpeg)

### The result
Well I don't know if it's because I suck at CSS or because my fingers are too slow but...

...he won. 

Check it out 👇

{% codepen https://codepen.io/framp/pen/XWoNLGe %}

Smooth right? 

How much would you rate the implementation? 

See anything that could be improved?

Leave a rating as a reply - could you do better?



The ability to toggle and the animation using only CSS is mind blowing 🤯.

P.S. It only took 4 hours hehehe xd
** (source: tiktok https://www.tiktok.com/@never.more17/video/7224470057282178305)
Introducing the Ontario Driver License Validator — Verifik.co becomes canadian
Tags: canada, api, javascript, tutorial
Published: 2023-09-09 20:02:38

## Verifik.co validates documents in Canada

Hello to our incredible community of tech aficionados and innovators! Riding the waves of our recent advancements, we're beyond thrilled to present to you another groundbreaking tool in the realm of identity verification. Say a grand hello to our brand-new API - the Ontario Driver License Validator!

## Spotlight: Ontario Driver License Validator
As businesses expand and societies become ever more connected, the need for foolproof, quick, and reliable ID verification tools becomes paramount. Our Ontario Driver License Validator API is purpose-built to address these needs, providing an unparalleled solution to verify driver's licenses from Ontario, Canada.

## Let's Get Technical: How to Use the API?
Simplicity, clarity, and efficacy are at the heart of our designs. Here's a step-by-step guide to using the new API:
1. Endpoint: https://api.verifik.co/v2/ca/ontario/driver-license.
2. Parameter:
Our API is all about making things easy for you. Just provide:
- `documentNumber`: The Ontario driver's license number to be validated. (e.g., **"S6291–27944–85721"**)

Here's a handy Node.js snippet using the **`axios`** library to showcase its implementation:

```javascript
const axios = require('axios');

axios.get("https://api.verifik.co/v2/ca/ontario/driver-license", {
   params: {
     documentNumber: "S6291–27944–85721"
   },
   headers: {
    Authentication: `JWT {{verifikToken}}`
   }
})
.then(response => {
 console.log(response.data);
})
.catch(error => {
 console.error(error);
});
```

Expecting a response? Here's how the API will typically respond:

```json
{
   "data": {
   "documentNumber": "S62912794485721",
   "licenceStatus": "Valid",
   "verificationNumber": "826XY"
   },
   "signature": {
   "dateTime": "August 28, 2023 8:03 PM",
   "message": "Certified by Verifik.co"
   },
   "id": "9t9le"
}
```

## Why Choose the Ontario Driver License Validator API?

- Precision: Tailored for Ontario driver licenses, ensuring specialized and precise results.
- Instant Feedback: Get real-time data without the wait.
- Top-Notch Security: Rest assured, data integrity and security are our prime commitments.
- Scales with You: Be it a small-scale application or an enterprise-level solution, our API fits all sizes.
The Ontario Driver License Validator is not just another tool in the shed; it's a revolution in ID verification, tailored for Ontario. Dive deep into our documentation for a comprehensive look, or better yet, embed it into your platform today!

## Want free credits?

Step into a future where identity verification is seamless, precise, and efficient. Embrace the new standard with us! Cheers to innovation!

join now in https://verifik.co to claim it.
Install Microsoft SQL Server in M1/M2 Macbook
Tags: sqlserver, docker, macos
Published: 2023-09-09 19:57:46

There is no official release of MSSQL Server for Mac. The only way to run SQL Server on Mac is by running it from a Docker container. 

## 1. Install and Configure Docker
This is a prerequisite for installing SQL Server on your Mac. Because the Mac runs SQL Server inside a Docker container, the first thing we need to do is download and install Docker (unless it's already installed). 


- Download Docker from the download page, extract it, and drag it into your Application folder.
- Launch Docker, and go to Preferences > Advanced and increase its memory allocation to 4GB(or more).

![Docker Preferences](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ng53f12a0ky7345xy6m.png)

- Go to Preferences > Features in development and check option Use Rosetta for x86/amd64 emulation on Apple Silicon

![Enable Rosetta for x86/amd64 emulation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvh8k84kt2q7sln9w00e.png)

## 2. Creating docker compose file
- Creating a docker compose file and add following code:

```
version: "3.9"

services:
    mssql:
      image: mcr.microsoft.com/mssql/server:2022-latest
      volumes:
        - mssql_db:/var/opt/mssql
      ports:
        - 1433:1433
      environment:
        - ACCEPT_EULA=1
        - MSSQL_SA_PASSWORD=Passw@rd

volumes:
    mssql_db:

```

## 3. Docker build and run
`docker compose up --build`
CSS Resources: The Best Places to Learn More About CSS
Tags: beginners, css, html, programming
Published: 2023-09-09 19:52:10

Cascading Style Sheets (CSS) is a language used to style web pages. It can be used to control the appearance of elements on a page, such as their size, color, and position. CSS is a powerful tool that can be used to create beautiful and responsive web pages.

**There are many ways to learn CSS.
**
1. Start with the basics. Learn the fundamentals of CSS, such as selectors, properties, and values. There are many tutorials and resources available online that can help you with this.

1. Practice makes perfect. The best way to learn CSS is to practice. Try styling different elements on a web page, or build your own website from scratch.
&nbsp;
## the best resources for learning CSS:
&nbsp;
## 1.The best AI tools for learning CSS:

- [GitHub Copilot](https://github.com/features/copilot)
- [Tabnine](https://www.tabnine.com/)
- [Sketch2Code](https://www.microsoft.com/en-us/ai/ai-lab- 
  sketch2code)
- [chatgpt](https://chat.openai.com/)

## 2. YouTube channels:

- [FreeCodeCamp](https://www.freecodecamp.org/)
- [CSS-Tricks](https://www.youtube.com/@realcsstricks)
- [Traversy Media](https://www.youtube.com/@traversymedia)
- [The Net Ninja](https://www.youtube.com/@NetNinja)
- [DesignCourse](https://www.youtube.com/@DesignCourse)

## 3. Websites

- [W3Schools](https://www.w3schools.com/)
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)
- [CSS Diner](https://flukeout.github.io/)
- [CodePen](https://codepen.io/)
- [CSS Grid Garden](https://cssgridgarden.com/)

## 4. Interactive courses:

- [Codecademy](https://www.codecademy.com/)
- [Free Code Camp](https://www.freecodecamp.org/)
- [Udemy](https://www.udemy.com/)
- [Treehouse](https://teamtreehouse.com/)
- [Frontend Masters](https://frontendmasters.com/)

## 5. Cheat sheets:


-[ CSS Cheat Sheet](https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/)
- [Mozilla Developer Network (MDN) CSS Reference (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
- [CSS Tricks CSS Reference](https://css-tricks.com/almanac/)
- [W3Schools CSS Reference
](https://www.w3schools.com/cssref/index.php)

### 6. Examples:

- [CSS Diner](https://flukeout.github.io/)
- [CodePen](https://codepen.io/)
- [CSS Grid Garden](https://cssgridgarden.com/)
- [The CSS Diner Gallery](https://flukeout.github.io/)
- [gscode ](https://gscode.in/)

## 7. Best Twitter Accounts for Learning CSS

- @[csswizardry ](https://twitter.com/csswizardry)by Harry Roberts
- @[css_tricks](https://twitter.com/css) by Chris Coyier. 
- @[codepen](https://twitter.com/CodePen) by CodePen
- @[Tailwind CSS](https://twitter.com/tailwindcss)
- @[cssdesignawards](https://twitter.com/cssdesignawards) by CSS Design Awards.
- @[cssweekly](https://twitter.com/CSSWeekly) by CSS Weekly.


If you enjoyed this article, please consider sharing it with your friends and colleagues. You can also follow me on [social media](https://dev.to/frontendin52) or my [blog ](https://frontendin.com/)for more content like this
Delete Duplicate Emails
Tags: python, pandas, sql, leetcode
Published: 2023-09-09 19:49:45

---
title: Delete Duplicate Emails
published: true
date: 2023-09-09 19:45:03 UTC
tags: #python #pandas #SQL #leetcode
canonical_url: https://blog.seancoughlin.me/delete-duplicate-emails
---

Eliminating Duplicate Emails Efficiently: A Comprehensive Guide to Data Cleanup Using Pandas and SQL

## The Problem

With this article, I will be covering the [delete duplicate emails Leetcode problem](https://leetcode.com/problems/delete-duplicate-emails/).

Leetcode describes this problem as easy. That's a super reasonable evaluation as the solution requires only basic SQL or Pandas knowledge.

The problem description is as follows:

> Write a solution to **delete** all duplicate emails, keeping only one unique email with the smallest `id`.
> 
> For SQL users, please note that you are supposed to write a `DELETE` statement and not a `SELECT` one.
> 
> For Pandas users, please note that you are supposed to modify `Person` in place.
> 
> After running your script, the answer shown is the `Person` table. The driver will first compile and run your piece of code and then show the `Person` table. The final order of the `Person` table **does not matter**.
> 
> ```
> +-------------+---------+
> | Column Name | Type |
> +-------------+---------+
> | id | int |
> | email | varchar |
> +-------------+---------+
> id is the primary key (column with unique values) for this table.
> Each row of this table contains an email. 
> The emails will not contain uppercase letters.
> 
> ```

## The Solution

### Pandas

[Pandas](https://en.wikipedia.org/wiki/Pandas_(software)) is a great Python tool for data analysis and manipulation. Built into that library is the [drop duplicates](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.drop_duplicates.html) function. Please note that the problem statement asks us to do this [in place](https://en.wikipedia.org/wiki/In-place_algorithm).

Using the Pandas library this can be achieved by first in-place sorting by the `id` field and then dropping the duplicates from `email`. We want to keep at least the first duplicated element.

```python
def delete_duplicate_emails(person: pd.DataFrame) -> None:
    person.sort_values(by='id', inplace=True)
    person.drop_duplicates(subset='email', keep='first', inplace=True)

```

Voila! I love these simple questions.

### SQL

In SQL we want to run a delete query. We will grab two copies of the `person` table and match them based on the `email`. To keep at least one of the solutions we only delete the entry with the higher `id` value. This keeps the `email` associated with the smallest `id`.

```SQL
DELETE p1 
FROM person p1, person p2 
WHERE p1.email = p2.email AND p1.id > p2.id;

```

As with many problems, there are multiple ways to solve them. These Pandas and SQL solutions are but one way of approaching the delete duplicate question.

---

Originally published at https://blog.seancoughlin.me.