DEV Community: Jesse Chong

Playing with a Stock API: A JavaScript/React Developer Learns Python

Jesse Chong — Wed, 18 Dec 2024 19:29:40 +0000

As someone new to Python, I recently embarked on a journey to explore its capabilities while working with a stock API. Along the way, I learned how to:

Set up a virtual environment
Manage packages
Use environment variables for sensitive data
Make HTTP requests and handle JSON
Implement error handling and string formatting
Work with Python’s dictionaries
Understand schemas provided by APIs

Here’s a breakdown of my learning experience and key takeaways!

1. Setting Up Python

Python’s virtual environments (venv) allow you to isolate your project’s dependencies, ensuring your packages don’t conflict with others. It’s great for professional development.

Steps to Create and Activate a Virtual Environment:Create a virtual environment

python -m venv venv

Activate it (Mac/Linux)

source venv/bin/activate

Activate it (Windows)

venv\Scripts\activate

This keeps your project’s packages separate from others.

Package ManagementUsing pip, Python’s package installer, I learned to manage dependencies:

Install packages

pip install requests python-dotenv

Save requirements

pip freeze > requirements.txt

Install from requirements

pip install -r requirements.txt

2. Environment Variables

To keep sensitive data secure, I used .env files for API keys and credentials:

.env file

SCHWAB_CLIENT_ID=my_secret_id

SCHWAB_CLIENT_SECRET=my_secret_key

Python code

from dotenv import load_dotenv

import os

load_dotenv() # Load variables from .env

api_key = os.getenv(‘SCHWAB_CLIENT_ID’)

Important: Never commit .env files to Git. Use a .gitignore file to exclude them.

3. Making HTTP Requests

I used the requests library to interact with APIs:

import requests

Make a GET request

response = requests.get(url, headers=headers, params=params)

Check if the request was successful

if response.status_code == 200:

data = response.json() # Convert response to JSON

4. Understanding Schemas

Before interacting with an API endpoint, I explored its schema. An API schema is like a blueprint that tells you:

Request Schema: What data you need to send, including required fields, data types, and constraints.
Response Schema: What data you can expect to receive, including structure, data types, and examples.

For example, if an API endpoint retrieves stock prices, the schema might look like this:

Request Schema:

{

“symbol”: “string”,

“date”: “string (YYYY-MM-DD)”,

“interval”: “string (e.g., ‘1d’, ‘1m’)”

}

Response Schema:

{

“symbol”: “string”,

“prices”: [

{

“date”: “string (YYYY-MM-DD)”,

“open”: “float”,

“close”: “float”,

“high”: “float”,

“low”: “float”,

“volume”: “integer”

}

]

}

Knowing the schema helps in two ways:

Preparation: It ensures you structure your request correctly and know how to handle the response.
Error Prevention: Adhering to schemas minimizes invalid requests or misinterpreted responses.

Schemas saved me time and made debugging much easier while working with the API.

5. Working with JSON

APIs often return data in JSON format. Here’s how I handled it in Python:

import json

Read JSON from a file

with open(‘tokens.json’, ‘r’) as f:

data = json.load(f)

Write JSON to a file

with open(‘tokens.json’, ‘w’) as f:

json.dump(data, f, indent=4)

6. Error Handling

Python’s try/except blocks helped me manage errors gracefully:

try:

response = requests.get(url)

data = response.json()

except Exception as e:

print(f”Error: {str(e)}”)

return None

7. String Formatting

Python’s f-strings and the .format() method make string formatting straightforward:

Using f-strings

print(f”Stock: {name}, Price: ${price:.2f}”)

Using .format()

print(“Stock: {}, Price: ${:.2f}”.format(name, price))

8. Dictionary Operations

Dictionaries in Python are powerful for handling nested API data:

Get value with default

price = data.get(‘price’, ‘N/A’)

Access nested dictionaries

stock = data[symbol]

quote = stock.get(‘quote’, {})

price = quote.get(‘lastPrice’, ‘N/A’)

9. Debugging Tips

Debugging in Python is simple and effective:

Print debugging

print(f”Debug: {variable}”)

Check variable types

print(f”Type: {type(data)}”)

Pretty print dictionaries

import json

print(json.dumps(data, indent=2))

10. Overcoming Authentication Challenges

One of the biggest hurdles I faced was getting authentication to work. I was stuck for a few days, trying different approaches without success. Eventually, I decided to reach out for support to understand why it wasn’t working.

It turned out that the issue was related to the type of account I was using. To authenticate successfully, I needed both a brokerage account and a developer account. I initially assumed that only a developer account was required, but the API also required credentials from an active brokerage account.

This experience taught me an important lesson: don’t hesitate to ask for help when needed. By putting my ego aside and seeking guidance, I gained a deeper understanding of the problem and solved it much faster than if I had continued struggling on my own

ConclusionPython is incredibly beginner-friendly! Here’s what I learned:

Virtual environments keep projects organized.
Environment variables protect sensitive data.
Libraries like requests simplify API calls.
Good error handling is crucial.
Clear function names and comments enhance readability.

Next Steps

Dive deeper into API authentication.
Explore data visualization.
Add more robust error handling.
Implement automated testing.

Final Thoughts
The best way to learn is by doing. Don’t be afraid to experiment and make mistakes — each challenge is an opportunity to grow!

Data analysis repo: https://github.com/Jesse-Chong/Schwab-Market-Analysis

Originally published at Medium

🚀 Cross-Posting Project Update: Automating Posts Across Medium, LinkedIn, and DEV.to

Jesse Chong — Wed, 18 Dec 2024 17:50:56 +0000

Repost because I accidentally deleted my first ever post!

🌐 Excited to Share My Latest Work!
I’m thrilled to give an update on a new tool I’ve been building, which automates cross-posting across Medium, LinkedIn, and DEV.to. This has been a fantastic learning journey, and although there’s still more to fine-tune, it’s already operational! 🎉

🛠️ Technologies Used:
Backend: Node.js, Express
APIs:LinkedIn API, Medium API, DEV.to API, RSS Parser
Libraries: RSS-Parser, Axios

🔍 Project Overview:
The goal of this project is to streamline the content sharing process across multiple platforms, allowing me to post once and have the content automatically shared on LinkedIn, Medium, and DEV.to. This system converts HTML content to markdown, extracts images, and ensures the correct formatting across all platforms.

🗝️ Key Features:

Automated Cross-Posting: Posts made on Medium automatically get shared on LinkedIn and DEV.to (and vice versa).
HTML to Markdown Conversion: Ensures the content is formatted correctly for each platform, including image extraction.
Integration with APIs: Secure authentication using access tokens for LinkedIn, Medium, and DEV.to.
💡 Challenges & Solutions:

Challenge 1: Working with multiple APIs and managing authentication tokens.
Solution: I separated the API interactions into different files and used environment variables to handle access tokens securely.

Challenge 2: Creating a Privacy Policy to comply with LinkedIn’s API requirements and obtain an access token.
Solution: I had to research and write a comprehensive privacy policy, outlining how data would be used, to meet LinkedIn’s developer guidelines.

Challenge 3: Converting HTML content to Markdown for posting on DEV.to and Medium.
Solution: I researched and used HTML-to-Markdown conversion libraries, and learned how to write regex for content parsing.

Challenge 4: Extracting images from HTML and embedding them correctly in the markdown.
Solution: I created a function that parses the HTML, finds image tags, and converts them into markdown-compatible image links.

🚀 What I Learned:

Sharpen ability to integrate and work with multiple APIs efficiently.
The importance of organizing code by separating concerns (e.g., API handling, token management).
How to convert HTML to markdown and deal with content formatting across platforms.
Improved my regex skills, which helped with parsing HTML content.
🌟 Reflection

The earlier you organize your project structure the easier it is to continue working on it when you have to stop for a while.

There is a heck of a lot to learn in the tech field and I humbly welcome it.

🔗 Check Out the repo: https://github.com/Jesse-Chong/Cross-post-server

Thank you for reading! I’d love to hear your thoughts.

APIs #Automation #WebDevelopment #NodeJS #CrossPosting #Regex #Markdown #ContentCreation #FullStackDevelopment #SoftwareEngineering #ProjectManagement

Original article on medium

Unexpected Adventure with Leonardo AI: A Developer’s Playful Experiment

Jesse Chong — Tue, 26 Nov 2024 22:07:17 +0000

💻 As a full-stack web developer, I’m always curious about new tools and technologies. Recently, I found myself diving into Leonardo AI — and wow, what an interesting journey of trial and error!

What started as a simple experiment quickly became a lesson in AI image generation. My first attempt to create an anime-style image of myself was hilariously off-target. Pro tip: AI needs very specific instructions!

Initially, I used the prompt “transform my picture to look like anime” — and surprise! The AI generated images of a female character. Not exactly what I was going for.

🐜 Refining the Prompt: A Developer’s Debugging ProcessJust like debugging code, creating the perfect AI-generated image is all about iteration. My next attempts got progressively more specific:

First try: Completely wrong gender
Second try: “transform my picture to look animated, I am male”
Final successful prompt: “Same image except the glasses wearing male gendered character is sitting on a computer chair in front of a table with a computer”
💡 Tech Insights for Fellow DevelopersAs someone who works with React and loves exploring new tools, this experience reminded me of a few key things:
Precision matters (just like in coding)
Don’t get discouraged by initial failures
Iterative improvement is key
AI tools can be surprisingly powerful when you understand how to use them
🔌 Why This Matters for DevelopersWhile this might seem like just a fun experiment, it’s actually a great example of how AI tools are becoming more accessible. Whether you’re looking to quickly generate mockups, explore UI concepts, or just have a bit of creative fun, tools like Leonardo AI can be surprisingly useful.

🥡 My TakeawayAm I a professional designer now? Definitely not. But I learned something new, had fun doing it, and expanded my understanding of AI image generation. As developers, staying curious and open to new technologies is how we keep growing.

Want to give it a try? I’d recommend playing around with Leonardo AI — you might be surprised at what you can create!

Leonardo ai: https://app.leonardo.ai/

Portfolio website: https://jesse-chong.netlify.app/

Originally published at Medium

GitHub’s Security Scanner & Conventional Commits — A Developer’s Journey

Jesse Chong — Mon, 11 Nov 2024 16:35:45 +0000

🪞 Reflecting on GitHub Security: Received a high-severity security alert from GitHub about a vulnerability in http-proxy-middleware affecting one of my portfolio repositories. GitHub’s Dependabot automatically detected this issue (CVE-2024–21536) in my dependencies.

📈 Quick Overview:

Security alert identified in yarn.lock file
Vulnerability found in http-proxy-middleware package
Automated detection by GitHub’s security scanning system
Implementation of conventional commits for better version control
🗝️ Key Takeaways:
GitHub actively scans repositories for vulnerabilities
Automated security alerts help maintain project safety
Importance of regular dependency maintenance
Conventional commits improve code collaboration and readability
💡Response & Resolution:

Reviewed the security advisory details
Updated the affected dependency with commit message: fix: 🐛 Patch security vulnerability Denial of service in http-proxy-middleware High severity http-proxy-middleware
Verified the fix was successfully implemented 🚀 Embracing Conventional Commits: Since May, I’ve adopted conventional commits to standardize my commit messages. Here’s how I structure them:

feat: for new features
fix: for bug fixes
docs: for documentation changes
style: for formatting changes
refactor: for code restructuring
test: for adding missing tests
chore: for maintenance tasks I also use a vscode extension that makes it easy to write a conventional commit from my code editor.

🌟 Reflection: These experiences highlighted two crucial aspects of modern development: security automation and clear communication through commits. GitHub’s security features keep our projects secure, while conventional commits make our development history more meaningful and easier to track. Using conventional commits has made my version control more professional and easier to maintain.

Github Docs: https://docs.github.com/en/code-security/dependabot/dependabot-alerts

Conventional Commits Docs: https://platform.uno/docs/articles/uno-development/git-conventional-commits.html

Security Fix Repo: https://github.com/Jesse-Chong/react-tailwindcss-portfolio-website

Thank you for reading! I’d love to hear your thoughts.

Originally published at Medium

📝 Cross-Post Project Update: Regex, Bug Fixes, and More Regex!

Jesse Chong — Mon, 04 Nov 2024 18:49:56 +0000

🪞 Reflecting on Last Week’s Progress:
When cross-posting from Medium to LinkedIn and DEV.to, I noticed several formatting issues: bold and italic text, as well as ordered and unordered lists, were not displaying correctly. Tags were also not posting accurately, and the URL linking back to the original article didn’t work as expected. After some adjustments, formatting is now accurate, and tags are correctly formatted for each platform.

📈 Project Update Overview:
DEV.to uses Markdown syntax, while LinkedIn does not. LinkedIn also has a 1300-character limit and lacks consistent support for bold and italic formatting. I developed a helper function that formats posts for LinkedIn and DEV.to, adjusting based on the platform input.

🗝️ Key Updates:
Regex Improvements: Posts are now formatted correctly for LinkedIn and DEV.to.
Tag Extraction from HTML: Tags are properly formatted for each platform.
Canonical URL Cleanup: Query parameters are removed, so the original article URL now works correctly.

🫨 Challenges & Solutions 💡

Challenge 1: Bold, italics, and lists weren’t properly formatted for DEV.to and LinkedIn.

Solution:

LinkedIn doesn’t support bold, italics, or bullet points, so these were replaced with plain text, with numbers used for bullet points.
After converting HTML to Markdown, ensured proper formatting (e.g., italics, bold).

Challenge 2: Tags from Medium weren’t cross-posting correctly.

DEV.to limits tags to four, requiring lowercase alphanumeric tags in an array format.
LinkedIn allows hashtags to be embedded, but they must be camelCase (no spaces or dashes) and limited to 1300 characters.

Solution:
Adjust tags to meet each platform’s requirements.

For DEV.to: Remove non-alphanumeric characters, convert tags to lowercase, and limit to four tags.
For LinkedIn: Remove any prefix hashtags, convert spaces or dashes to camelCase, and re-add the #.
Kept content within 1200 characters to allow room for title, URL, and tags.

Challenge 3: Medium’s RSS feed sometimes includes unnecessary query parameters in URLs.

Solution:
Extract the clean URL for cross-posting.

🌟 Reflection:
Working with regex has been fascinating; it’s powerful and versatile for various use cases. I’ve used it before in my Fresh Start project for translating directions, which showed me how effective it can be. That said, regex has limitations, so it’s essential to use it cautiously, depending on your needs.

🔗 Check Out the Repo: https://github.com/Jesse-Chong/Cross-post-server

Thank you for reading! I’d love to hear your thoughts.

Cross-Posting and Portfolio Project Update: Optimizing API Calls and Implementing Best Practices

Jesse Chong — Fri, 25 Oct 2024 21:55:49 +0000

🌟 Excited to Share My Recent Work!

Though I’ve been a bit inactive lately due to personal reasons, I want to take a moment to showcase some recent updates I made to my portfolio website a few weeks ago. In particular, I focused on tackling the lag times for API calls, which were exceeding 30 seconds, and enhancing my site by adding a demo video to better showcase my app.

I’m excited to share the lessons I learned and the solutions I implemented to improve performance and security, all while using some fantastic tools like Netlify!

🔍 Project Update Overview:

I discovered that Netlify Functions is a serverless function feature offered by Netlify that hosts your API calls, significantly reducing my response time by 97.5%. The Netlify CLI was also incredibly helpful in allowing me to test my code within Netlify’s configuration before committing and pushing changes to my repository.

🛠️ New Technologies Added:

**- Netlify Functions

Netlify CLI**

🗝️ Key Updates:

Lag-free API calls: By utilizing Netlify Functions, I was able to reduce API response times to nearly zero — and it’s free, as long as the API calls aren’t made too frequently.
Portfolio App Demo Video: I also added a video demo to showcase my app in action, making the portfolio much more interactive and engaging.

💡 Challenges & Solutions:

Challenge 1: Implementing Netlify Functions Correctly

Since I wasn’t familiar with Yarn’s environment, integrating it with Netlify was a bit tricky.

Solution:

I deleted the _redirects file and moved its contents to netlify.toml.
I also added command = “yarn build” and publish = “build” to the configuration, as I’m using Yarn.

Challenge 2: Adding a Video to My Portfolio

Adding a video to my portfolio website seemed straightforward but caused issues due to a common security risk: using target=”_blank” without the rel=”noreferrer” attribute.

**Solution: **To mitigate the security risk:

I added the rel=”noopener noreferrer” attribute to my anchor tags (<a>). This ensures protection against reverse tabnabbing attacks and enhances privacy by preventing browsers from sending the HTTP referrer header.

🛠️ Security Best Practices:

rel=”noopener”: Protects against reverse tabnabbing and runs the new page in a separate process.
rel=”noreferrer”: Hides the referrer header for privacy and security purposes.

🚀 What I Learned:

Always explore all the features and tools a product or service offers (whether it’s APIs or cloud hosting) to ensure they meet your project’s needs.
If a product offers a testing environment and a CLI tool, it’s often worth learning — these can significantly speed up development.
It’s critical to stay informed on best practices for security to protect against common vulnerabilities and attacks.

🌟 Reflection:

When working with new technology, take the time to experiment with features you think you might need now or in the future. It’ll make development smoother and help future-proof your projects.

🔗 Check Out the Repo portfolio website: https://github.com/Jesse-Chong/react-tailwindcss-portfolio-website

🔗 Check Out the Repo for cross post: https://github.com/Jesse-Chong/Cross-post-server

Thank you for reading! I’d love to hear your thoughts.

Originally published at Medium