Fun with Streamlit apps and LM Studio

Taking a fun course with Lonely Octopus, I’ve been learning how to use pandas to clean data for analysis, and also how to quickly build a proof of concept/MVP using Streamlit.

Installing Streamlit locally on Windows in Gitbash threw an error:

$ pip install streamlit

WARNING: Failed to write executable - trying to use .deleteme logic
ERROR: Could not install packages due to an OSError: [WinError 2] The system cannot find the file specified: 'C:\Python311\Scripts\watn311\Scripts\watchmedo.exe.deleteme'

“Watchmedo”? Sounded like malware. I got scared and shut off my wifi for a sec. Then I calmed down and decided to run it in a venv instead. Created the venv:

$ python -m venv myenv

Then activate it (I’m using Gitbash for my shell):

$ source myenv/Scripts/activate (or source myenv/bin/activate)

Then try again to install Streamlit and check if it installed properly:

$ pip install streamlit

$ streamlit --version
Streamlit, version 1.36.0

Now the moment of truth — run the little app:

$ streamlit run app.py

You can now view your Streamlit app in your browser.

Local URL: http://localhost:8501



It might also require installing OpenAI, so don’t forget to do that, too. BUT…

Running LM Studio is something I’m getting a lot more used to now. I’ve been playing with it and AnythingLLM for local document RAG chats.

So you don’t need to call OpenAI’s API — you can point your app at your local LM Studio server!

You have to grab the example code from inside LM Studio under “chat (python)”:

client = OpenAI(base_url="http://localhost:1234/v1", api_key="lm-studio")

Paste that into your Streamlit app.py file, replacing the ‘client’ variable. Make sure the model is loaded up, and that the server is running.

There are tons of settings to consider inside LM Studio. You also need to have enough memory to run the models! LM Studio’s Discord server is a good place to learn more.

Career coaching and the dev job hunt

I’ve been giving free resume reviews on a couple of Discords for a few months now. Seeing some patterns appear — people are bemoaning the ghosting and the fake job posts, but still using the same approach and blaming their resumes.

So I made a video on the importance of and how to follow up after applying, with a human!

How to contact a company after applying for a job – DMs and emails

how to contact a human at the company after applying

This is one thing I wish I would have learned earlier in my own career. We spent so much time “pounding the pavement” years ago, only to be told by some receptionist to “go to the website” in order to apply. We were trained to apply online, apply online, apply online. And just sit back and wait for the response!

In this video I explain how to actually follow up with a company once you’ve applied.

From jQuery to JavaScript Without Tears

Un-possible?

Looking for a cute set of progress bars for my app, I searched around and found a great blog post with a few examples. Originally I had zero intention of using animated progress bars, but they seemed to fit well enough for my needs and actually added a bit of, dare I say, pizazz, to the page.

So I go to play around with the code… aaand it’s jQuery.

facepalm, the other Picard maneuver

On a positive note, usually I can tell what’s going on in jQuery, as if reading psuedocode. It feels sort of like guessing what a Spanish billboard says as an English speaker (to me, anyway). I suppose the faster way to move forward with my project would have been to just import some jQuery via CDN, but I decided that I wanted to fully understand what was going on, and thus decided to rewrite it in plain JavaScript.

“Mayhaps, in the span since first we met, an AI hath vanquished thee, mighty jQuery,” I said to my screen as I Googled “jQuery to JavaScript converter.”

Surprisingly, there was a tool which actually did something, or enough to get me started. Despite some very strange copy on their page, the WorkVersatile converter did deliver on their promise of only “some errors” after conversion.

The original jQuery:

$(".animated-progress span").each(function () {
$(this).animate(
{
width: $(this).attr("data-progress") + "%",
},
1000
);
$(this).text($(this).attr("data-progress") + "%");
});

… and the invalid JavaScript output:

document.querySelectorAll(".animated-progress span").each(function () {
this.animate(
{
width: this.attr("data-progress") + "%",
},
1000
);
this.innerText = this.attr("data-progress" + "%");
});

My end product; instead of innerText, I used the Django template to fill in the element’s text:

document.querySelectorAll(".animated-progress span").forEach(ele => { 
  
  ele.animate(
  [
    { width: ele.getAttribute("data-progress") + "%", },
  ], 
    {
      duration: 1000,
      fill: "forwards"
    }
  );

});

Using Pivotal Tracker to Manage Your Project

Pivotal‘s free tier might be just what you need to get started or re-energize your side project.

Combining Pivotal’s project management software with pomofocus.io — those two tabs in my browser have really boosted my output and kept me organized. So far, the free tier of Pivotal Tracker has been enough to get my little project off the ground, so I thought it might be helpful to share.

You create an account and then name your project. Then you can add user stories or features which you eventually plan on adding to your app or site (your product roadmap).

Adding these features is pretty simple, and you can put as much detail as you like.

Pivotal Tracker project dashboard screenshot
The Pivotal dashboard shows you an estimated project schedule, status, and backlog

Working solo, some of the features like “Accept”/”Reject” buttons aren’t really useful (think: pull request meme of awarding oneself a medal). Also, I’m not quite clear on the project velocity calculation, which seems like a powerful feature that I’m not taking full advantage of at the moment (here’s a 2-year-old video explaining the velocity calc feature, or you can actually — shudder — read the docs). Other than that it’s pretty amazing for my needs. And it’s nice to know that I can still have up to 5 users should I need to bring on help.

This sort of freemium app is really enabling a lot of startup and small business innovation, since a lot of side projects don’t generate income at first. I hope to pass it along with a freemium app of my own!

Testing in Django, or “How long has that been broken?”

When the phrase, “how long has that been broken?” enters into your vocabulary, it’s probably past time to add tests to your project.

Finally got my tests going with some momentum. I’ve also adjusted the dashboard view a bit over at JobTrek; although I’m lacking time to design a UI, at least it looks a bit better now. (Leave a comment if you think I shouldn’t wait to find another Bootstrap theme.) And dear Lord help me, I’ve bought a domain name and even coughed up the $7 for the Heroku Hobby plan with SSL.

I’d learned some basics in the Kickstart Coding course, but couldn’t get my basic tests to pass. Turns out I’d been adding my tests to the wrong tests.py file, in the wrong app directory. Hopefully this blog post will save some random person out there from making the same mistake!

Another beginner issue for me was testing templates and content for anonymous versus authenticated users — more on that in my next post.

For some good, free content on testing in Django, check out VeryAcademy’s series on YouTube.

Jamrock, and updates

Just back from wonderful travel visiting relatives around Jamaica. It was much-needed refreshment, and my first international trip since Sweden, back in the ‘before times’.

obligatory beach image

It was great to spend a lot of time with family. I specifically went to see my aged grandma, who is in her 90s but is still sharp as a tack and still going up and down staircases — bodes well for the ‘ol genome. When I complained about carrying some extra pounds, she chided me that I could use a few trips up and down some steps as well. The Greatest Generation rolls like that!

My intrepid hubby rented a car and drove around the island. Everyone, including me, was pretty impressed with his skills — next time I will definitely fly into Montego Bay instead of Kingston, and rent a car.

Perhaps Portland, Jamaica’s potholed roads are a good metaphor for a coding career.

gif of car interior with view of bumpy road
the country roads are finally being repaved, but in the meantime…

(They are making improvements, but in the meantime here is a hilarious commentary on the lack of repair.) Driving those roads certainly make one question one’s life choices. But then there is a smooth stretch of pavement for a while, and all the struggle and perseverance seems worth it.

2024 EDIT: The role I posted about. The company seemed great, the people were amazing, the kudos on my progress were good; even React was not as annoying as I’d remembered. I was lead to believe that my hiring was just one of those weird miscommunications of expectations, which sometimes happens when both sides are well-intentioned and perhaps a bit starry-eyed. Once I was reprimanded for ‘slow progress,’ I started pulling extremely unsustainable hours. It turns out that the company was facing severe financial difficulties after over-hiring — I found out that people were laid off or intentionally pushed out. Now I wish I would have listened to advice not to quit, and rode out the tough schedule. Likely at the cost of some health and home life, sure, but at least I would have been able to collect unemployment and maybe even land another role quickly. /END 2024 EDIT

But discovering that I can do the job, ‘drinking from the firehose’ of web development and seeing leaps of improvement, is very validating.

So I’m again at a small fork in the road — should I forge ahead with another dev role, or should I take what I’ve learned and revisit the customer support/management-y realm. Before the Jamaica trip I was experiencing a lot of angst about it, but I’ve been reminded that a lot of people dream to have such decisions before them! My gut says to apply for both tracks and see what turns up. I think I shall sleep on it.

SelfWars app, pt 2 — rough wireframe

I had to decide what features to put in a basic version of the app.

rough sketch of the app screen

Russell Brand mentioned in his video that he used a scale of 1 – 10 to rate himself in each life area. I decided to start with 1-5 for now and sketched out a rough list of ideas:

Default scale of 1-5, maybe this scale is editable by user later?
Default set of life areas, can be renamed by user later
Be able to save progress and view a bar chart for week/month
How did I do this week? frequency? daily/weekly?
Need an initial default setup after first open of the app, so that there’s some baseline to compare to

I was going to also set different domains or life areas, but maybe that will be v 2.0:


Good spouse – family
Diet – health
Exercise – health
Bedtime – health
Spiritual practice – spirituality

Some sort of “save” button or option, perhaps

“View past” – a way to view a chart over time

Next, to start building, which I’ve already begun, using Vue.

SelfWars: A New App

An idea for an app to evaluate myself on a daily basis came to me recently while watching an odd video. (I was a bit bashful about setting this post to public last year, so it’s a bit old now. I might be motivated to revisit this project by blogging.)

It was Russel Brand discussing procrastination on YouTube. (Oh, the irony.)

The user would set the parameters on different scales — how Zandra-y was I on exercise this week on a scale of 1 to 10? Maximum Zandra? 40-year-old, years-ago-Zandra? Or ace Starfleet cadet Zandra level? Was I the best Zandra that I could be today/this week?

I think SelfWars is a good name because it’s a constant battle against one’s self.

So if I drew a few prototype screens, what might they look like? Let’s see in my next post.

WordPressのフリーターのためのAsana

私はWordPressのフリーターになるはず じゃなかったけど , 最近 仕事 が与えてくれた 。もしかしてウェブ デベロッパーの勉強する間に 働く 余裕 は 祝福 だかもしれない 。 プロジェクトをうまくいけるようにAsana という ウェブサイトを 使っている。 簡単で無料なのでどうぞ 。

去年の インターンシップで 初めてAsanaについて 聞いたことがあった 。 けど その仕事が終わって たの 携帯のアプリは 使えなくなって しまった 。 Androidの Asanaの アプリで 会社 を 変える 方法は 無さそうです 。 (バージョン 6.21.2 )

それで何ヶ月Asanaのアップリが 使えずままで携帯に入っていた。最近Josh Hrachと言う人の考え深いブログ(英語)を呼んで、フリーターでAsanaを使うな~っと。

だから デスクトップの ウェブサイト をアクセスして , 丸井プロファイルの写真を クリックして 、その他 新しいワークックスペースを 新規作成 が出た:


よかったと思ったけどプレミアムテンプレート の お金はあんまりなかったので , 自分で リスト を 作らないといけない 。

ペーパー&オーツ(「紙とオート麦」、英語)という会社は ダウンロードできるPDFガイド を含めて いる 記事 があります。 ずいぶん前書かれていたけど まだ 使いやすいガイド だね .   けれども私は 大きな ウェブ会社ではないので , 大きなタスクリスト いらない と思った 。 例えば彼らのタスクリスト はの1つはのは顧客へのギフト。

簡単なタスクリストを作るため、見積りや契約で一つずつ段階、すまり 成果物、(英語でdeliverables)が述べられているわけだ。そこから新しい.txtファイルにコピペして。それ全部コピー。

左側の下の方に、プロジェクトを追加 を選んで:

そして空のプロジェクトに。。。

Asana dashboard (Japanese)

。。。名前を付ける。

先作った 新しい 成果物の .txtファイルをすべてコピーした、ね? 今青いバトン、プロジェクトを作成、を押して下さい。次、CTRL+Vでペースト。リストのアイテムが出る:

もし間違ったら、CTRL+BACKSPACEで消してまたやり直すことができる。私が経験で学んだことだ。 (^_^ )

そしてDue date、 「期日 」を付けないと意味ないでしょう?

WordPress Freelancers: Make a Custom Asana Project Task List Using Your Written Proposal or Contract

Well, I wasn’t supposed to become a WordPress freelancer, but that’s what has been available lately. Perhaps it is a blessing and this is actually the pace I should be moving while doing my web developement studies… But to keep things moving smoothly, I’ve been using Asana to keep my projects organized — it’s free and simple!

I was introduced to Asana last year during my internship, but once that gig was over, I just had this useless app on my phone. In the current Android app (ver 6.21.2) there didn’t seem to be any way to change my workspace or organization.

So Asana languished on my phone for a bit, teetering on the brink of uninstallment, when I came across this thoughtful blog post by Josh Hrach, encouraging use of Asana for side projects.

I had to switch to the desktop site to add a new workspace (pictured below). Clicking on my top-right profile photo then clicking “More” and “Create new workspace” did it nicely.

But then when you need a new project task list and you are kinda lacking in the skrilla department for a premium template, you have to make your own. A task in and of itself!

Paper and Oats has a lovely blog post on how to do this, complete with a downloadable PDF task list. The post has aged quite well! But if you don’t need a huge, agency-sized task list (their items included “customer gift”,) you can use any old text list.

You already have a list — your deliverables, or even a paper to-do list! Just open a blank text file and copy-paste all the milestones/deliverables from your client service agreement, project proposal, or project contract. If you don’t have one, forget about Asana; go fill out one of these templates —

http://agreement.superfriend.ly/
https://www.codeinwp.com/blog/web-design-proposal-template/

Once you have the major deliverables listed up, copy everything and Add new project in Asana’s left sidebar, choosing a Blank project template. Name it whatever you want…

Click “Create project”.

Now click the blue “Add task” button and DON’T DO ANYTHING ELSE! Just click Add task, and then use CTRL-V to paste your clipboard contents (or CMD-V). Asana will make your text into separate tasks. Don’t worry if any popups appear, just paste.

If you mess up like I did, just go back and erase with TAB+BACKSPACE keys, or click to delete inside the popup dialog. Then paste again. Press ENTER on your keyboard and CTRL-V again to add more tasks.

But wait — don’t forget to set time goals for each task by adding Due dates. That’s it for a simple Asana project!