teleren/devto huggingface dataset:
About that time
Tags: devjournal, learning, aws
Published: 2024-07-11 19:55:30

## You already know what it is

So when people say once you find a job and start working at that job, little things you did to GET said job stop. Lol. In my case, keeping up with this blog, continuing to build little personal projects, you get the idea. I am still at that job from my last post! Since then I've been on 2 project teams - creating a marketing website using React, TypeScript, Next.js, Material UI and a headless CMS called Contentful and a short stint on a project working with ETL tools such as Informatica and MuleSoft. 

## So what are you doing now?

I enjoyed working in different areas of a full stack application but I wasn't "web dev is life" or anything like that. My job has a career matrix that gives you a list/path to take for promotion. Some of the items on that list include completing 2 formal trainings in a different tech, internal hours and completing 1 Associate Level certification of my choice. My first choice was Azure. I started the training and just well, fell off. I think it was because I was nearing the finish line with my first project and we just didn't have the time to focus on anything else. 

Eventually that project ends, a new one begins but I'm in a holding pattern. I managed to get 1 of the 2 formal trainings knocked off the list though! So I figured let's try this cloud thing again. But this time, AWS. So that's what I did. I used my downtime (and after work hours time lol) to study for AWS Cloud Practitioner's Course. I looked at my calendar and picked a random Wednesday about 2 weeks away and scheduled my exam. That Wednesday was yesterday and I passed. :) 

Now I am using what I learned in that Foundational course to tackle my 2 formal training! 

## Future Plans

Once I complete that second formal training. I plan to go ahead and start studying for the AWS Developer Certification and work through the Cloud Resume Challenge. So here's to updating this blog in 6-8 months with news of completing all that and a promotion or new gig. :) 

Peace
Typescript - Best Practices
Tags: typescript, best, practices
Published: 2024-07-11 20:00:00

**Let, Var and Const**

Use **_const_** for variables that won't be reassigned.
Use **_let_** for variables that will be reassigned.
Avoid **_var_** in new TypeScript code.








Best References:
[AWS TypeScript](https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-cdk-typescript-iac/typescript-best-practices.html)
Unlocking Protected PDFs
Tags: javascript, googledrive, pdf
Published: 2024-07-11 20:12:42

---
title: Unlocking Protected PDFs
published: true
description: Discover how to bypass Google Drive's view-only restrictions and download protected PDFs using JavaScript. This step-by-step guide offers a practical method to capture high-resolution images of each page and compile them into a PDF.
tags: javascript, googledrive, pdf
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-07-11 19:37 +0000
---

Several years ago, I wrote a [Gist](https://gist.github.com/dpaluy/74258794f7930401cc27262e0ea794dd) that received a lot of positive interest, highlighting a common need among developers. Given its popularity, it’s time to share this solution with you. This post will guide you through a practical method to download protected PDFs using JavaScript, ensuring high-resolution output.

This approach allows you to bypass view-only restrictions by capturing high-resolution images of each page.

## Step 1: Open the Document

Open the protected document in Google Docs.
Scroll through the entire document to ensure all pages are fully loaded. Some documents require zoom-in to get a better resolution.

## Step 2: Open Developer Tools

Navigate to the Console tab.

## Step 3: Run this Script to convert images to PDF

```javascript
let jspdf = document.createElement("script");
 
jspdf.onload = function () {
 
    let pdf = new jsPDF();
    let elements = document.getElementsByTagName("img");
    for (let i in elements) {
        let img = elements[i];
        console.log("add img ", img);
        if (!/^blob:/.test(img.src)) {
            console.log("invalid image src");
            continue;
        }
        let can = document.createElement('canvas');
        let con = can.getContext("2d");
        can.width = img.width;
        can.height = img.height;
        con.drawImage(img, 0, 0);
        let imgData = can.toDataURL("image/jpeg", 1.0);
        pdf.addImage(imgData, 'JPEG', 0, 0);
        pdf.addPage();
    }
 
    pdf.save("download.pdf");
};
 
jspdf.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js';
document.body.appendChild(jspdf); 
```

Note: Check the original Gist and other comments with various improvements and suggestions.

## Note on Ethical Use

Remember to respect copyright and privacy laws. Use this method responsibly and only for documents you have the right to download.
Toronto Google Ads Management
Published: 2024-07-11 20:24:48

Discover the power of precision with Tweaked SEM, your go-to **Google Ads agency in Toronto**. We specialize in top-tier **Google Ads management** and **PPC management services** designed to elevate your online presence, amplify web traffic, and skyrocket your leads. Our cutting-edge SEM strategies focus on razor-sharp targeting, seamless landing page optimization, and custom-crafted ad campaigns that convert like crazy. Dive into our suite of services, featuring thorough audits, lightning-fast web traffic generation, and savvy local SEO integration. Our squad of certified Google Ads pros delivers data-driven insights and bespoke marketing solutions. Ready to transform your digital game? Visit us now for more details or snag a free consultation - [Tweaked SEM Google Ads PPC Management Toronto](https://www.tweakedsem.com/google-ads-ppc-management-toronto/).
Phase 3 sql, tuples, and object problems
Published: 2024-07-11 20:29:48

Hello, my name is Daniel Trejo and I'm a student at Flatiron School in the Software Engineering program. Phase 3 was definitely the hardest one yet because of the sheer amount of curriculum. The hardest part for me was the project which is probably not surprising due to the fact that it is the final project of the phase. However I ran into a ton of issues right off the bat but once I got started it wasn't actually that bad. That was until I finished it. Now you might be saying, "It's being done a good thing?" Normally yes but with coding, finishing coding doesn't always mean the project is done.


 Now I ran into a heap of issues at this point and they were are super simple fixes except for one. I needed get some data to display at the end of another piece of data but these 2 pieces of data are from different places. Now to some people that might be a simple fix but to me who has been struggling a lot recently with personal stuff and just the scope of the phase. It took me until doing the project to even start completely understanding python, cli, orm, and sql as is. 

The problem was I wasn't grabbing the information correctly so I had to create a whole new function and test run for hours trying to get the right thing. Once I finally did, I was so happy but that was until I ran into another problem.

I needed it to return an object but all it kept returning was a tuple. Which meant the information I was getting wasn't returning at all. That's when I found out through using one of the best tools in python,

`breakpoint()`

that it WAS returning something and it was a tuple but my program didn't know what to do with that tuple. It wasn't actually showing anything on the return until I grabbed the index of that information with `[0]` brackets. Yay finally it was fixed, however, what everyone will deal with after fixing something. Another problem popped up. It was that I was returning everything as a tuple which meant as a string. A requirement of the project was to be able to view related object. I was viewing just the string of what I needed which isn't an object. So that's when I figured out that I needed to return an object not a tuple. Instead of using sql like this, 

```
sql = """
    SELECT name
    FROM authors
    WHERE id = ?
""" 
```
I had to use it like this,

```
sql = """
    SELECT *
    FROM authors
    WHERE id = ?
"""
```
The first way was just grabbing the string(name) instead of grabbing the whole object, which the second version did. Then I had to call it in my repr as self.author().name because doing .name is one of the 2 ways to grab something from an object.
Rewear: Transforming Sustainable Fashion with Wix Studio
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-11 20:42:32

*This is a submission for the [Wix Studio Challenge ](https://dev.to/challenges/wix).*

## What I Built
Rewear is a sustainable clothing exchange platform designed to transform how you experience fashion. Our platform allows users to send their pre-loved clothing items for quality control, browse curated selections, and receive new styles, all while reducing waste and promoting eco-friendly living. With Rewear, you can refresh your wardrobe, renew your style, and redefine your fashion choices sustainably. Additionally, **people can also bid for other people’s clothes on the platform**.

## Demo
Link: [https://kb2yj4664f.wixstudio.io/rewear](https://kb2yj4664f.wixstudio.io/rewear)

{% embed https://www.youtube.com/watch?v=VYl6exQ0Jgg %}

## Development Journey

To bring Rewear to life, I leveraged the robust capabilities of Wix Studio. Using the Wix VsCode IDE, I added hooks and wrote JavaScript code to automate processes and enhance functionality.

Wix APIs and Libraries Used:

1. **wix-user**: Managed user authentication and profiles, ensuring a secure and personalized experience for each user.
2. **wix-site-frontend**: Created dynamic, interactive user interfaces to enhance the user experience.
3. **wix-data**: Managed and queried collections of data, facilitating seamless data handling and storage.
4. **Collection Hooks Library**: Automated processes such as quality control checks and updating item statuses.

I also utilised the Wix JavaScript interface to create a custom bidding system for our “Bids for Good” social auction. This feature allows users to bid on unique, pre-loved clothing items, supporting sustainable fashion while engaging in an exciting auction experience. The platform uses two main collections: one for auction items and another for page content. The auction collection contains all the dresses available for bidding, making it easy for users to participate and track their bids.
Angular 18.1: Template Local Variables with @let
Tags: webdev, javascript, angular, frontend
Published: 2024-07-11 20:36:56

## Key takeaways

 * **Syntax**: let variableName = expression;
 * **Scope**: The variable is only available within the HTML element or block where it's declared.
 * **Common scenarios**:
   * Reduce repetition of complex expressions.
   * Better handle type narrowing.
   * Define complex styling options.
   * Improve template readability.

## Best practices
 * Use let to minimize repetition.
 * Use let to improve type narrowing.
 * Use let to define complex styling options.
 * Carefully consider using let for calculations or business rules.

## Thoughts
The let declaration is a welcome addition that simplifies variable management in templates and improves code readability. It's particularly useful for reducing repetition and defining complex styling options. However, it's important to carefully consider using let for calculations or business rules, as it could make the code harder to maintain.

## Additional resources
 * Official Angular documentation on the let declaration: [https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f?gi=63f5b3e52822](https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f?gi=63f5b3e52822)

How do you plan to use the let declaration in your Angular projects? 

Leave a comment below and share your thoughts!
The Elegance and Innovation of Omega Watches: A Timeless Investment
Published: 2024-07-11 20:47:01

Omega watches represent the pinnacle of Swiss watchmaking excellence, combining precision, innovation, and timeless design. Whether you are a seasoned collector or a first-time buyer, an Omega watch is a worthy addition to any collection. With their rich heritage, exceptional craftsmanship, and versatile styles, Omega watches continue to captivate and inspire watch enthusiasts around the world.

For more detailed insights and to explore the exquisite range of Omega watches, visit the [official Omega watch collection](https://timeavenue.com/top-10-best-watches-for-men-under-10-lakhs/) at Time Avenue. Discover the elegance and precision of Omega watches and find the perfect timepiece to complement your style and lifestyle. Additionally, you can explore the official omega watch collection to expand your collection with another prestigious brand.
HOST STATIC WEBSITE ON NETTLIFY; A BEGINNER-FRIENDLY GUIDE TO WEB DEVELOPMENT
Tags: webdev, html, beginners, programming
Published: 2024-07-11 21:39:18

_**Prerequisite**_
- basic knowledge in html,
- basic knowledge in cascading styles (css)
- basic JavaScript knowledge.

**Project Overview**
- This is a static website project hosted on Netlify and available on GitHub.
- The project was created using basic web development tools and does not utilize any npm packages, making it straightforward and beginner-friendly.

TOOLS
  - Github: version control to track changes to our code.
  - Git: For version control and managing the code repository.
  - Visual Studio Code: As the code editor.
  - Netlify: For hosting the website.

 ## GETTING STARTED
1. Clone the Repository
 To get a copy of the project up and running on your local machine, clone the repository from GitHub:
 - `git clone https://github.com/Psam4ord/aws-resume-project.git`

2.Open in Visual Studio Code:
Navigate to the project directory and open it in Visual Studio Code:

```
cd your-repository-name
code .
``` 
 Now press enter

# Project Structure
your-repo-name/
├── index.html
├── style.css
├── script.js
└── README.md
NB: YOU CAN MAKE MODIFICATIONS TO THE FILES TO SUITE YOUR STYLE.

3. **Hosting on Netlify**

- Sign Up or Log In
Go to [Netlify](https://www.netlify.com) and sign up for an account if you don't have one. Log in if you already have an account.

- Click on "New site from Git" on your Netlify dashboard.
Connect to your GitHub account and select the repository of your project.

4.**Deploy Settings**

- For a basic static site, you don’t need to change any settings.
- Click on "Deploy site."
- Once the deployment is complete,  [Netlify](https://www.netlify.com) will provide you with a URL where your site is live.

5. **Conclusion**

You've successfully set up and deployed a static website Netlify. 
This simple setup is ideal for beginners and provides a solid foundation for further web development projects.

> 

`_Take the first step in faith, 
you don't have to see the whole staircase.
Just take the first step. 
Dr. Martin Luther King 1929-1968 _`
SEMANTIC HTML AND SEO
Tags: html, beginners, programming, webdev
Published: 2024-07-11 21:02:59

## **_ROLE OF HTML SEMANTIC ELEMENTS IN SEARCH ENGINE OPTIMISATION_**
SEMANTIC TAGGS ARE CRUCIAL IN THE PERFORMANCE OF A WEB PAGE , HERE ARE THE INSIGHTS ON HOW HTML SEMANTICS IMPROVE THE PERFRMANCE OF THE WEB PAGE AND ACCESABILITY ;
 https://docs.google.com/document/d/1eR_ZlTRXG03RrKJmn2Ypw5vwKSLb8yO83RLCT5eLQT4/edit?usp=sharing
Classes in Python (Introduction)
Tags: beginners, python, classes
Published: 2024-07-11 21:41:40

In Python, classes are the foundation of object-oriented programming. In simple terms, they are essentially a template for creating objects with similar attributes.

**Creating Classes**

Class definition syntax is extremely straightforward. All you need is the keyword: class followed by the ClassName: (the class name is always in UpperCamelCase). I have provided an example below:
`class Shop:`
Well done you have successfully created a class! Now we will take a deeper dive into how you can use them. I will be using a class to create and store different shops throughout this blog.   

**Using Classes**

The first step after creating your class is to use a constructer method know as the __init__ method to initialize instance attributes that will be used when instantiating objects.

```
class Shop:
    def __init__(self, name, location, owner):
        self.name = name
        self.location = location
        self.owner = owner
```
 Now whenever we create or instantiate a new store/shop object within this class it will share these attributes we initialized! Now lets create some shops:

```
class Shop:
    def __init__(self, name, location, owner):
        self.name = name
        self.location = location
        self.owner = owner

   #method for displaying our stores
   def display_store_info(self)
       return f"Shop: {self.name}, Location: {self.location}, Owner: {self.owner}"

#creating shop instances
first_shop = Shop("FoodMart", "Main Street", "John Smith")
second_shop = Shop("ClothingStore", "Billybob Avenue", "Billy Bob")
   

```
Now in our python shell if we type print(first_shop.display_store_info())  we will see this display:

`Shop: FoodMart, Location: Main Street, Owner: John Smith`

We could also do the same for the second_shop! We created a method or function in our class called display_store_info that allowed us to inject the attributes defined in our init. Now we could make limitless shop objects that include the name, location, and owner as a reusable template. 

This is just the beginning when it comes to classes. The possibilities and reusability is incredible when it comes to using classes in Python. I would love to go into more detail in a future blog post but this is just a small little intro.
A greener planet with tech
Tags: webdev, environment, co2emissions
Published: 2024-07-11 21:42:03

Hello everyone! This week I decided to blog about something that caught my eye- sustainable web development! I have done a lot of research concerning today's environmental problems at school such as water pollution, deforestation, habitat fragmentation, etc... Reducing carbon emissions to preserve the earth's health is one of my biggest motivations for starting a tech career. Technology has come a long way and has many innovations, so I aspire to use technology to help the planet become a more sustainable environment. 

Counting the number of carbons from web products is hard to measure so a good way to do so is by taking into account the amount of data transfers being done and measuring the weight of a page. We must find ways to develop power-efficient websites to reduce energy consumption. 

This post was inspired from:
Greenwood, T. (2021, August 5) Sustainable Web Design, An Excerpt - A List Apart
Retrieved from: [https://alistapart.com/article/sustainable-web-design-excerpt/]
Building Conversational AI with React: Trends, Tools, and Applications
Tags: ai, react, javascript, typescript
Published: 2024-07-11 21:45:41

<h2>Introduction</h2><p>Conversational AI is transforming user interactions with technology, offering personalized and engaging experiences. This article delves into the latest trends, tools, and applications for building conversational AI with React, exploring the cutting-edge capabilities of <strong>Sista AI</strong>.</p><h2>Conversational AI Trends for 2024</h2><p>The future of conversational AI in 2024 holds exciting advancements, from emotionally intelligent chatbots to conversational search engines. Rapid deployment of virtual agents and the integration of AI companions showcase the dynamic landscape shaping the industry.</p><h2>Building AI Chatbots with React</h2><p>Utilize the power of React to create AI chatbots that enhance user engagement and accessibility. Leverage React components from repositories like react-chatbot-kit to build customizable chatbot solutions, aligning with the innovative features offered by <strong>Sista AI</strong>.</p><h2>Sista AI: An End-to-End AI Integration Platform</h2><p><strong>Sista AI</strong> redefines AI integration, enabling any app to incorporate a voice assistant in minutes. With features like conversational AI agents, voice user interface, and real-time data integration, Sista AI offers a comprehensive solution for modern applications integrated with React.</p><h2>Building AI Chatbots with React and ChatGPT API</h2><p>The seamless integration of React and the ChatGPT API empowers developers to create intelligent chatbots. By following simple steps and integrating these tools, developers can unlock the potential of AI-driven interactions that elevate user experiences in line with the capabilities of Sista AI.</p><h2>The Social Side of Artificial Intelligence</h2><p>Artificial Intelligence transcends technology to offer personalized interactions through AI companions. Discover how AI friends are reshaping human-computer interactions and the potential for mainstream adoption, highlighting the transformative impact of advanced solutions like Sista AI.</p><br/><br/><a href="https://smart.sista.ai?utm_source=sista_blog_devto&utm_medium=blog_post&utm_campaign=big_logo" target="_blank"><img src="https://vuic-assets.s3.us-west-1.amazonaws.com/sista-make-auto-gen-blog-assets/sista_ai.png" alt="Sista AI Logo"></a><br/><br/><p>For more information, visit <a href="https://smart.sista.ai?utm_source=sista_blog_devto&utm_medium=blog_post&utm_campaign=For_More_Info_Link" target="_blank">sista.ai</a>.</p>
JavaScript MMORPG - Maiu Online - #babylonjs - Ep29: Chat message clouds
Tags: babylonjs, javascript, mmorpg, indiegamedev
Published: 2024-07-11 22:03:06

Hello,
Again super short update from the progress. When someone writes message on the chat and is in the visual range I'm displaying message in the 'cloud'. And to the future backlog I'm adding enhancing chat with the local/global mode.

{% youtube n28vM7oDaKQ  %}
JavaScript Tips
Tags: javascript, webdev, programming, beginners
Published: 2024-07-11 22:12:14

Hello! Today I decided to blog on an article about JavaScript tips. JavaScript is an essential programming language for web development, so I decided to share these tips in case I ever need a reference. 

1. Navigation tool
Browser OS details can be viewed by using either the window.navigator object or navigator.platform method.

2. Stopping Auto Refresh
void(0) prevents the page from auto-refreshing. 

3. Page Redirecting
The user can be redirected to a new page by setting the href property of the location object, which is a property of the window object.
function redirect() {
  window.location.href = "newPage.html";
}

4. Email Validation
function validateEmail(email) {
  var re =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

5. Fetching URL
window.location.href can be used to get the current URL and update it.

6. Getting metadata
The import.meta object contains information on the current module.

This post was inspired by:
Baranwal, A. (2024, July 1) 15 Amazing JavaScript Tips
Retrieved from: [https://dev.to/anmolbaranwal/15-amazing-things-you-can-do-with-simple-javascript-g88?context=digest]
Connect External Public IP to Private VPC on AWS
Published: 2024-07-11 22:15:11

Having a Private AWS VPC and Want to Connect Public External Ip to it

takeing into consideration to Configure the Following:

VPC CIDR BLock
Routing Table
ACL
Security Group
and using IAM policy to Specifiy the Ip as Well.

Tried to Configure these Steps but with no luck, and couldn't ping from inside EC2
Useful datasets for AI/ML
Tags: machinelearning, ai, datascience
Published: 2024-07-11 22:17:16

Looking for datasets for your next project. Here are some sources I know:

https://huggingface.co/datasets
https://openml.org/
https://dagshub.com/datasets/
https://github.com/awesomedata/awesome-public-datasets
https://paperswithcode.com/datasets
https://registry.opendata.aws/
https://www.kaggle.com/datasets

Add more in the comments

Thanks!