Planet CDOT (Telescope)

Tuesday, November 29, 2022


Wonkeun No

Planning to Work on Project from Scratch

As my final goal of Seneca OSD600 course, I picked my-photohub. My Photohub is a web app to take images and optimize them, and create HTML page. Created app will be hosted in GitHub repository. Basically anybody can create a webpage to show their great photos without much of programming knowledge. So the idea is to create a webpage via GitHub Pages using GitHub Action. And it removes any information contained in photos. What's interesting about this project is that no one has built anything yet. I have contributed seven repositories so far. They are all pretty mature projects which I don't have to create something from scratch.

The issue that I picked up is image optimization in GitHub Action. At the beginning, I thought I just had to create node app that removes GPS information and optimize images and it could be doable enough for me. Once I left my comment on the issue, I had a response that I need to write a shell script to run in GitHub Action. I didn't think about writing a shell script. After some thoughts, I think I can write a process to take the image folder and run a function or program to do image optimization and store new images in a new folder.

Also I should write Javascript program that optimize images. I found ExifReader and Sharp to extract metadata and resize. Both are well maintained libraries that are suitable for the project.

I have many questions like where image folder is, where new images are stored, and what image sizes and formats need to be added. My plan is to share my initial plan and have a good discussion before implementing any of these. I will write more about the discussion and how I'm implementing in next article.

by Wonkeun No at Tue Nov 29 2022 05:16:09 GMT+0000 (Coordinated Universal Time)

Monday, November 28, 2022


Taimoor Dawami

Planning: Enhancing a Slack Bot to Announce Sign-Ups

Since my 5th semester is ending, I want my open-source contribution to be more significant and impactful than my previous contributions. Therefore, I decided to work on an issue in the Telescope project.

Why Telescope?

Telescope is a sizeable project with a considerable amount of contributors. Since I have only contributed to the front end and the documentation, it makes sense to progress further and try working on the server side.

Issue Overview

Announce Sign-Ups in Slack #3604

When a new user signs up on Telescope, get a bot to announce it in a new #telescope-bot channel.

Telescope has a Slack channel for community discussions and project-related activities. Like many large-scale projects, Telescope has a Slack bot that posts updates in the telescope-bot channel related to the status of issues, PRs, builds, deployments, releases, etc. However, it would be nice to get updates when a new user joins the Telescope community so that we can welcome them.

Why this Issue?

There is no shortage of open issues that deal with the backend of Telescope, but I had to pick something doable, among other tasks, before the end of the semester. Furthermore, I want to gain experience working with Slack and Discord APIs. Also, I feel more motivated to work on issues that I find interesting.

The Plan

I connected with some of the contributors of the Telescope project, including David, Josue, and Kevan, to sketch out a plan for my implementation. Since Josue has worked with the Telescope Slack bot, he was able to point me in the right direction.
I have set up the bot and have written a function that gets invoked when I create a test account on Telescope in the development environment. The function makes a fetch request to the Slack API, and a direct message gets sent to my account:

For now, I would work on improving the code and moving it from the client to the server side to deploy the changes. Eventually, the sign-up announcements will get posted to the telescope-bot channel.

Stay tuned for the updates!

by Taimoor Dawami at Mon Nov 28 2022 19:51:56 GMT+0000 (Coordinated Universal Time)


David Humphrey

Planning Starchart

Over the last few weeks, I've been doing some work to plan a new open source project called Starchart.  The idea behind it is to solve a problem that a lot of us teaching programming have, namely, to make it easy and cheap (read "free!") for students to create custom domains and TLS certificates.  The name "starchart" is a play on our other big open source projects (Telescope and Satellite): Starchart will help us map the work of our student developers across the internet.

This idea is nothing new.  Students can already create .me domains via Namecheap's education program.  However, what I don't love about this is that it still requires a credit card and a student's personal information.  Also, I'm inspired by my colleague Andrew Smith, built something like this for his own cloud students a few years ago.

However, I want something that will work for all of our (i.e., Seneca) students, and I want it to be a self-serve tool.  The goal is that it be trivially easy for any of our students to create a new domain, point it at some server they are building, and get a TLS certificate they can then use to run the project securely.

From a technical perspective, my plan is as follows:

  1. Run our own Authoritative DNS server with an API that allows for dynamically managing records.  I think PowerDNS looks perfect with its database backends and API.  In production we'll use MySQL, and sqlite in development.  To be honest, I don't think we'll need another database beyond the DNS.
  2. Build a node.js web service that can manage student SAML authorization (we've been here before!) and provide a REST API to our web front-end for creating/managing domains and certificates.
  3. Build a web front-end that allows students to authenticate and manage their own domains and certificates.  Subdomains would last for a year unless renewed, and certificates would be auto-renewed for them.  
  4. Buy a domain and use it to allow students to create host.studentname.domain.com subdomains pointing to either an A (i.e., IP address) or CNAME (i.e., domain name) records.
  5. Use Let's Encrypt with DNS Challenges to create *.studentname.domain.com wildcard certificates, which can be installed in various servers/services.

This weekend I decided to try and hack together a proof of concept for this setup.  I used Docker to combine PowerDNS, a node service, an nginx web server (representing an external machine that needs a domain), and the Let's Encrypt pebble ACME test server and challenge server (btw, I love clever names like "pebble" for the smaller version of "boulder").

Using these separate containers, I'm able to simulate our network, create DNS records (from node.js to PowerDNS via the API), and order certificates from pebble using a DNS challenge, which are then presented to the user via a web app.  It's harder to explain than to show you, so I made a short demo video:

My weekend hack helped me feel confident that this can be done.  The gaps I have in my knowledge of DNS and Linux admin (I'm a programmer, don't ask me how to manage your servers...) are something I hope to have filled-in by Chris Tyler, who does know everything about this stuff, and has already been giving me some excellent feedback. I've also been talking with Mehrdad Ziaei about having ITS host this in production, which seems doable.

Now all I need are a bunch of willing students who want to spend a semester turning this blog post into production-quality software that we can ship to every Seneca student.  If that sounds like you, please meet me in OSD700/DPS911 this January!

by David Humphrey at Mon Nov 28 2022 19:22:24 GMT+0000 (Coordinated Universal Time)


Piotr Drozd

Continuing My Open Source Journey

This week In the DPS 909 course we are working on are final project. the goal we are aiming for is to make a big contribution to any repository. With the goal of using all that we learned throughout these weeks

What Did I Chose

I Decided to continue working with the repository that I'm comfortable with cuttle.

The issue that I'm working on is Issue the feature they want made is a profile page. I'm also planning on Adding tests to this issue so that They can test if the Profile page is working.

Why Did I Chose it

I Chose this because I want to gain more experience working with Vue.js During my co-op search this semester I saw many job positions looking For Vue.js, I haven't used it before this semester and working with this project has taught me about it. However I have only done minor bug fixes and I want to learn how to create a page component.

Also I want to continue practice writing tests. One of the places I had an interview for asked me about Continuous Integration. This is the processes automating Building and testing so that features could be reviewed faster and integrated Into release. I've had practice writing tests but I want to write more tests.

I believe that these tasks should be at a level that i can complete. If their is a chance that I overestimated the difficulty I may come back and add issues to work on.

What are my Goals

  1. I want to Learn how to Create A Vue.js Page

  2. I want to Learn how to Style A Vue.js Page

  3. I want to Practice writing more tests

by Piotr Drozd at Mon Nov 28 2022 19:09:08 GMT+0000 (Coordinated Universal Time)


Ray Gervais

Leveraging Python Virtual Environments in VS Code

This past week, I learned an interesting trick which completely changed how I’ll approach writing Python projects in VS Code.

See, my previous workflow was the following, which all things considered I’d like to think is sane:

# Create a new directory for the project, let's name it `example` in this case
mkdir example

cd example

mkdir src

# Create a virtual environment
python3 -m venv venv

# Activate the virtual env
source ./venv/bin/activate.sh

# Install some modules
pip3 install azure-mgmt-resource azure-mgmt-keyvault

# Start writing using your editor of choice
code ./example

The problem was, when open in VS Code or any other editor which works alongside a LSP (Language Server), the virtual environment which contained all the modules installed with pip3 install aren’t seen by editor. Essentially, it’s like working with modules which you haven’t downloaded locally. In some ways, I believed this to be normal, having experienced similar behaviour as early as 2017, accepting this as both a limitation of the setup, or user error / ignorance.

Then, in the past few days while I was still doing my normal workflow, VS Code prompted me to setup a virtual environment despite my venv already being present. I humored it. VS Code then created a .venv folder in the root of my workspace and asked me which interpetter to use. So, I was curious.

mkdir -p corrected_example/src
python3 -m venv corrected_example/.venv
pip3 install azure-mgmt-resource azure-mgmt-keyvault
code corrected_example

Lo-and-behold, Visual Studio Code picks up my installed modules!

So, I learned two small items when working with Python virtual enviroments + vs code!

  1. Store your virtual environment (venv) at the root of your workspace
  2. Ensure that the virtual environment is called .venv, not venv.

For the curious, you can find this writeup on working with Python interpreters in VS Code, which goes much deeper into the setup and configuration of a Python Environments, along with Node, Typescript, Java, C++,, Docker, along with other setups.

Resources

by Ray Gervais at Mon Nov 28 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

Sunday, November 27, 2022


Alexander Samaniego

DPS909 Blog: Planning Issues to Fix

As part of the final Release 0.4 project for our open-source course, we were asked to work on something larger and more impactful than anything we've done in the previous three releases. This can either be implementing features, fix a difficult bug, work on 2 or more smaller but related issues, or work on a bug in a large open-source community.

I chose to work on 2 or more smaller but related issues. The issues I chose were from a project that I've previously worked on called Astro Reactive Library. This project builds components and architecture for other projects that use the Astro framework for their reactive user interfaces.

The issues I chose to work on both relate to the form and validator components.

Issues: #201, #211,...TBD

Issue #201

The feature request here is related to the form component. In this issue is to implement new event listeners for other types of events. Currently, the validator will only attach an event listener for onBlur. There needs to be more event listeners and a way to determine when the event for validation on the client will occur.

Issue #211

The feature request is related to the validator and the form. In this issue, the way the validator attaches to components must be changed. Currently, the element selector uses the component <form> as a selector. The job here is to change it to use the unique ID attached to components as the selector.

My Goals

My goals for this Release is to take my basic understanding of the Astro framework and hopefully turn it into an advanced understanding by solving these issues and implementing the features correctly.

As of right now, these issues seem a bit confusing to me so there will be a lot of learning involved which will take a bit of time. Release 0.3 introduced me to the Astro framework and so my understanding of Astro is still pretty basic. This will be the challenge I will have to overcome.

If by the end I find that these issues were quick to solve, there are more issues in the project repo that relates to the same area of the project. I will tackle some more just to give me more of a challenge.

I will post an update on my progress and mention if I encounter any difficulties or if the issues are easier than I thought it would be.

by Alexander Samaniego at Sun Nov 27 2022 23:53:31 GMT+0000 (Coordinated Universal Time)


Gulnur Baimukhambetova

How to publish your project to npm?

Hello everyone!

Today, I created the first release for my SSGulnur tool.

Releases 🚀

As you are building your tool, it is alright to store it on the GitHub and apply it by cloning the repo, building and running it locally following the pre-requisites and instructions outlined in the README file.

However, when it comes to the actual users, not everyone knows how to do it, so it is better to provide releases which are easy to understand, download and use.

For that, I am going to publish my project to the registry so that it can be installed by name.

npm 🗃

As my project is using node.js, my obvious choice of release and package manager was npm.

Approach 👩🏻‍🏫

It does not require much to just publish a package. You can do it by only running the npm publish command, however it will be missing some of the industry standard procedures.

For example, it will not ensure that you are using Semantic versioning (Semver for short) or associate a git tag for each update.

If you do not know what Semver is, I have a brief explanation at the end of the post.

Therefore, we will be using a tool called np, which will

  1. run the tests (if there are any)
  2. update version in package.json according to Semver
  3. create a git tag according to Semver
  4. push the package to Github
  5. push the package to npm
  6. create release notes for every update

all in one command.

Steps 📜

In order to use np there are a few requirements (which you most probably have already met):

  1. Project needs to be a Git repository:
    • It needs to have a remote.
    • You must have pushed to the remote at least once.
    • You also need to make sure your working directory is clean.
    • You set up ssh authentication keys
  2. You need to have an npm account

All you have to do is:

  1. Navigate to your projects folder and open a terminal.
  2. Login to your npm account using npm login
  3. Install np globally npm install --global np
  4. Run np and follow the prompt

  1. Optional: add script in package.json for releases using np.
"scripts": {
    ...
    "release": "np"
  },

Tadaaa 🎉

Now, you should have an npm package as well as associated tags and releases on GitHub.

So, my tool can be installed by only using npm i ssgulnur.

My resulting npm package:
https://www.npmjs.com/package/ssgulnur

GitHub releases:
https://github.com/gulyapulya/SSGulnur/releases

Semver 💡

Now, lets talk a little bit about the versioning. Semver is a simple set of rules and requirements that dictate how version numbers are assigned and incremented.

The ideas is that three numbers are used to explain the version and one of them gets incremented depending on how big the change has been.

So the version is structured as MAJOR.MINOR.PATCH and you increase:

  • MAJOR version when you make incompatible changes (some previous logic cannot be used anymore)
  • MINOR version when you add functionality in a backwards compatible manner (new features that do not break the previous logic)
  • PATCH version when you make backwards compatible bug fixes

by Gulnur Baimukhambetova at Sun Nov 27 2022 22:58:41 GMT+0000 (Coordinated Universal Time)


Maxim Nosov

Plan first, then implement

Hi,

For this week, I will be working on 3(or more) issues for 2 projects:

1) Designing the logo for the photohub project.

2) Enhancing the UI for the novel project

Issue #1

In the issue I started talking with project maintainers and listened to their preferences.

Understanding what client wants ✍

Firstly, before designing a logo, I need to understand what kind of project developers are working on. After that, I need to think of the audience (people who will visit the website).

Hence, I need to think of the colors that would match the audience. For searching the best color match I will use color pallete from Canva.

There, I can see what colors work together.

It's crucial not to fail here No matter how your logo is creative, if you find a great match, it's half work done.

Software to use 🖥️

I will use Adobe photoshop for creating a logo.

Project # 2

For second project, I will take multiple issues from the project and improve the UI. Also, I might work on the backend as well, if the contributor will allow me to do that.

For now I'm assigned for a couple of issues: Issue#1, Issue#2.

I'm waiting for project maintainer to create a guidance to run the project locally.

More improvements 🔥

There are a lot of ideas how to improve the website from the UI perspective. Since, I have some experience in web design, I might be useful.

I will file more issues, that I think could make a project look more appealing later.

Floating labels 🔥

For example, let's consider making floating labels on the input. I think you saw something like that before.

When we click on input, the placeholder moves above the input smoothly and creates great UX.

Appealing modal window 🔥

When not logged in user clicks on create a story button, he sees the regular alert:

This could also be improved. First, I would design a modal window in Figma and then create one.

I will be working on these projects for the following 2 weeks. I will make a new post regarding the progress and potential issues that could reveal 💯

Have a wonderful day and let's keep up!

Buy me a coffee

by Maxim Nosov at Sun Nov 27 2022 16:27:37 GMT+0000 (Coordinated Universal Time)


Arryell Parris

Release 0.2 - PR #4

Issue I worked on

For my last PR, I contributed to the se-unlocked repo which manages the transcripts for the Software Engineering Unlocked podcast.

I worked on issue #132, which involved making improvements to the transcript for Episode 53. Each of the transcripts is automatically generated, thus they contain many minor errors throughout which have to be adjusted manually by contributors.

I browsed the document for the Episode 53 transcript and made various changes, including grammar improvements and adjusting the script so it matched what was actually spoken in the podcast episode.

Preparation for the fix

To prepare for the fix, I first had to review the relevant podcast episode on their website, viewable here.

Additionally, I had to ensure that any changes I made were consistent with the formatting rules outlined in the project's instructions on editing transcripts.

Code Explanation

This fix did not involve any changes to the code.

The associated file can be found here:

Research

No programming-related research was required to complete the fix for this issue.

Although, I did have to familiarize myself with the formatting rules outlined in the project's documentation. Additionally,

Interactions with project maintainers

I had no noteworthy interactions with the project maintainers.

Difficulties

I did not find this issue to be very difficult to work on. I had to familiarize myself with the project's formatting rules for transcripts, I found this mildly tedious though not difficult.

Link to Pull Request

PR #179

by Arryell Parris at Sun Nov 27 2022 03:59:57 GMT+0000 (Coordinated Universal Time)

Release 0.2 - PR #3

Issue I worked on

I worked on the html.org.in project once again.

When I was working on my second pull request, I found it very difficult to read the project's README.md file. The instructions were not very clear to me and there were moderate grammar errors througout the document.

So, I opened an issue, #70, to make some imrpovements to the project's README.md.

Preparation for the fix

There was not much preparation required for this fix apart from my usual workflow actions - i.e. forking the repo and making a branch for the issue.

Code Explanation

There was no code involved in this fix. I provided documentation improvement to the repository for this PR.

As such, I've provided URLs to the repo's README.md file prior to my changes and also after my changes.

Before the fix

This is the original README.md file from before my changes.

After the fix

Here is the README.md file after my changes.

Research

As this was a documentation improvement, minimal research into programming topics was necessary.

I did some reading on embedding video files in webpages via HTML and compared my research material to the instructions provided in the project's documentation just to ensure I was understanding code correctly.

Interactions with project maintainers

I did not have any notable interactions with the project maintainers.

Difficulties

Improving the documentation was difficult at first since I found it very unclear initially. However, as I familiarized myself more with the project, it became clearer to me what the developers were trying to say in the README.md.

Link to Pull Request

PR #73

by Arryell Parris at Sun Nov 27 2022 03:32:53 GMT+0000 (Coordinated Universal Time)

Release 0.2 - PR #2

Issue I worked on

The html.org.in project is a website which has several simple tutorials aimed at teaching new web developers the basics of HTML.

The website supports "light" theme and "dark" theme for readibility. I worked on issue #69, where the drop-down menu for choosing the theme was overlapping with list of tutorials, making it difficult to read some of the titles.

Preparation for the fix

There was not much setup required to apply the fix. After forking the repo, I got to work on fixing the problem.

Code Explanation

As stated, the website supports "light" and "dark" themes for readibility purposes. CHanging between these two themes can be done via the "theme-box", which is a <div> element that functions as a drop-down menu.

On the website's home page, there is a list of all the tutorials currently hosted on the website, organised into a table.

Before my changes, the theme-box would "float" within the website's main area, overlapping with the tutorials on the far-left of the table. I found this unpleasant to look at and mildly inconvenient when browsing so I opted to fix the problem.

My code changes move the theme-box to be part of the header, instead of its original position where it "floats" in-front of the list of tutorials.

Code Demo

Below I've attached two screenshots of the website's home page. Take note of the position theme-box, which is moved from floating over the tutorial list, to the header.

Before the fix

After the fix

Research

  • What research did you do? Were there aspects of the issue that you found difficult?

I did some personal research into the Bootstrap classes used in this project and they turned out to be structures I am already familiar with, so resolving this issue turned out to require less preparation than I initially expected.

However, a problem I ran into while updating the code to apply my changes was that, if a section of HTML code was loaded into a file via the include-html attribute on an element, then the JS code defined in app.js would not apply to it.

As such, I had to make some small changes to my initial fix (where I updated the header.html file) and move those changes to the main index.html file.

Interactions with project maintainers

I had no notable interactions with the project maintainers.

Difficulties

My greatest difficulty was in understanding the code of the project as it was fairly messy. There are a lot of deprecated sections of code that have just been commented out, rather than deleted and documented. Thus, there's commented-out buggy code placed througout bug-free code.

Once I found the relevant sections that I needed to update, it was not very difficult to apply my fixes.

Link to Pull Request

PR #71

by Arryell Parris at Sun Nov 27 2022 02:27:40 GMT+0000 (Coordinated Universal Time)


Ririio

Adding new features

For my final release for the course, I would be working with a repository that I worked on during hacktoberfest called battlemath. This one has a fairly simple goal in mind, and that is to teach children with math. My first feature that will be implemented is a "difficulty" selection. This is fairly similar to their already existing mode selection for the operators. The difference is that, it will change the values that will be used.

As the image below dictates, it would be standing side by side to the already existing "mode-selection", and will contain 3 difficulties.

Each difficulties should only change the numbers, and follow the corresponding operator

Medium

Hard



Later down the line, I will try to implement two new modes for 'decimals' and 'factoring', which will change the entire functionality of the game, which I find a tad difficult to implement, but we'll see how it goes.

Similar to the previous implementation, it will also be a new mode selection, but it's much more complex than the previous, because it has to change not just the numbers, but also how the entire calculation is done.

I imagine the new addition to be similar to this...

Decimals/Hard

Factoring

While writing this blog, I come to realize the difficulty of adding a "factoring" mode. I will try to implement it as best as I can, but I'm a bit worried if I would be able to finish it in due time.

Starting up

My first thought about how I should tackle this is to read through the entire code and understand how everything works, but I realized that working at random is not going to help me understand anything. Therefore, I went ahead and look through only those that are directly connected with the feature that I will be implementing.

For the case of this project, they already have a 'mode' selection, which made my life a bit easier in terms of figuring out how I should implement mine. I noticed that for larger projects, it's best to back track on everything. What this mean is that to read through a code, and look at what it does from the inside, and keep going until you reach an end. For my case everything ends at the "object" that contains all the values for the operations. Once I figure out how the selection work, I can create my code base on my understanding from that.

by Ririio at Sun Nov 27 2022 03:33:36 GMT+0000 (Coordinated Universal Time)


Oscar Phu

Release 0.4 - Week 1

For this release, I plan to work on a repository called wedding. The objective itself was to create a test gallery that would fit with the authors objective.

The thing is when the author first created the issue there was not that many details about how he wanted. So I just went off and created a test gallery that I thought he would like.

That was before, he told me what kind of requirements he would like. After finding out his requirements, I had to change up my approach completely, which is honestly a blessing in disguise.

I have not worked much with react, only during school so that means working on this would allow me to hone my skills in react, which I have not done much of compared to others. I haven't even used react for a long while, so I need to relearn how the system works. I have to follow what the author already laid for me and build from there.

This is new because as of now, I am building a part of a web app without using html files whatsoever.

I'm hoping to be able to relearn how react works and build properly what the author is asking.

by Oscar Phu at Sun Nov 27 2022 00:28:43 GMT+0000 (Coordinated Universal Time)

Saturday, November 26, 2022


Taimoor Dawami

OSD600: Adding CI to Siteit

Overview

For Lab 9, I was tasked with adding continuous integration to Siteit - an SSG tool that parses markdown and text files and renders results in HTML files.

I could have chosen other popular options, such as Travis CI, to integrate continuous integration, but since Siteit is already on GitHub, I decided to integrate CI using only GitHub Actions.

Initial Workflow

My initial workflow file was pretty simple, as I had one "build" job that did more than just building. It also ran linter, formatter, and unit tests. Everything seemed to work as expected until I looked at how my lab partner had integrated his CI workflow.

Making Improvements

My lab partner had sectioned jobs based on their purpose. This approach seemed more logical, and I realized I could improve my CI workflow without running all scripts as part of the build job. Therefore, I decided to refactor my workflow by adding the following jobs:

  • linter
  • formatter
  • tests

The job names implies the function of each job.
For instance, linter runs checks for linting errors using eslint and fixes them. On the other hand, formatter runs checks for formatting using prettier and corrects them. Finally, tests runs unit tests using the jest framework.

To view CI workflow implementation for Siteit, click here.

Final Thoughts

Implementing Continuous Integration using GitHub Actions was an overall fun experience. I got to familiarize myself with the YAML syntax and gain valuable experience using GitHub Actions.

by Taimoor Dawami at Sat Nov 26 2022 23:08:52 GMT+0000 (Coordinated Universal Time)


Rudy Chung

OSD600 Lab 10

The first try

I originally planned to use build2, but I found it to be much more complex than I expected. There was plenty of documentation to read for build2. The main documentation was all about the setup process, but there were also documentation pages for building, testing, and package management.

The second try

As a result, I decided to use Conan instead. I installed Conan through pip, which requires Python. After installing Python, I ran

pip install conan

This installed Conan for use in the command-line terminal. After installing Conan, I had to add a conanfile.py file.

conan new SauSaGe/1.0.0

The file has a bunch of fields with dummy info that need to be filled in. The next step requires a CMakeLists.txt file as well as CMake, of which how to create is a process of its own.

The next step is building the package.

conan create . SauSaGe/beta

This will build the package in ~/.conan/data directory, which will contain the source code as well as the executable file.

Releasing

I used GitLab for this step, which requires a GitLab account. I set up an account and created a project. After that, go to the project's page to obtain the project id. Now you can add your remote to your list of remotes in Conan run

conan remote add <remote-name> https://gitlab.com/api/v4/projects/<project-id>/packages/conan

You also need to log in to to upload your package, this requires an access token, which can be found on GitLab in Edit Profile -> Access Tokens. After you create your access token, you can run this

conan user <gitlab-user> -r gitlab -p <access-token>

With the remote in your list, and your GitLab account logged into, you can finally upload your package.

conan upload SauSaGe/1.0.0@SauSaGe/beta --all

Released

My package is here, after a few hours of research.
To install using this package registry, create a SauSaGe directory containing a conanfile.txt file, the contents of which are

[requires]
SauSaGe/1.0.0@SauSaGe/beta

[generators]
make

Then, install the package

 conan install SauSaGe --remote=<remote-name>

I did not have to change much about my code to set it up for the package registry. Although I did need to install a variety of tools to go through the process. The whole process only added 2 files to my project.

Testing

I had a classmate test test the code through the package registry. There were some struggles due to having to install Python, Conan and CMake. There were also some issues with adding the applications to PATH environment variable in order to run all these tools through the command-line terminal. But overall, it went smoothly.

by Rudy Chung at Sat Nov 26 2022 05:50:19 GMT+0000 (Coordinated Universal Time)


Wonkeun No

Release OpenSSG to Maven Central

This week I have released my OpenSSG to Maven Central which is one of popular places developers store their dependencies or artifacts. I think there are multiple ways to release Java package. I found two resources are very useful.

Publish JAR To Central Maven Repository
Publishing a maven artifact 3/3: step-by-step instructions to MavenCentral publishing

Both have same process in the first half which is to create Sonatype account and GPG secret key.

To release Java package in Maven Central, you need to create a Sonatype account at https://issues.sonatype.org. Bot immediately responded to my ticket and told me what to update to complete a correct form. It took less than an hour to create my own namespace in Maven Central Repository due to the Bot. And you can do the next step in parallel.

Then, I needed a GPG key to sign my package. You can create and export it with below commands

  1. Create GPG key
gpg --full-generate-key    

Also you can use below command as a short form.

gpg --gen-key
  1. Export secret key
gpg --export-secret-keys <KEY_ID> -o secring.gpg

If you follow the first blog, you don't have to export the key. And you don't have to use your full key ID. Instead you can use last 8 digit of your key ID.

  1. Send the key to the server
gpg --keyserver keyserver.ubuntu.com --send-keys <KEY_ID>

There are more servers you can release your key. But it's not necessary. You can check more commands how to manage your keys and where to send on this page https://central.sonatype.org/publish/requirements/gpg/.

Next step is to create pom.xml file on your root project. You can use most of POM file example provided by Jakob Jenkov in the first blog link above. Except for one part. In the blog, nexus-staging-maven-plugin:1.6.8 was used, but you will face an API compatibility. You can simply change the version to 1.6.13 to avoid this issue. You can also check out POM file requirement from Sonatype.

Then, you need to create settings.xml in ~/.m folder (I'm using Mac). This was really tricky for me as a Java beginner. I created the file in my project folder and spent some time to figure it out. You can use below xml example for more clarity.

<!--settings.xml-->
<settings>
    <localRepository>/maven-repo</localRepository>
    <servers>
        <server>
            <id>ossrh</id>
            <username>Sonatype username</username>
            <password>Sonatype password</password>
        </server>
    </servers>
    <profiles>
        <profile>
            <id>Key ID</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <properties>
                <gpg.executable>gpg2</gpg.executable>
                <gpg.passphrase>Passphrase for your key</gpg.passphrase>
            </properties>
        </profile>
    </profiles>
</settings>

Once you complete all above steps, mvn clean deploy will succeed. Note your staging profile ID, repository ID , and staging repository URL in the log. Also, you will have a comment on your Jira ticket saying that Central sync is activated. For me, it took about two hours to see my package in Nexus Repository Manager. I could also find my package at https://repo1.maven.org/maven2.

I have succeeded to upload my package in Maven Central. I will update more how to use my jar file from repository.

by Wonkeun No at Sat Nov 26 2022 05:04:17 GMT+0000 (Coordinated Universal Time)


Artem Tanyhin

Publishing Go package

Hey there! Thanks for checking in. Today, I finally released SSGo 1.0 and published it to Go registry so it's available to anyone! Let me tell you some more.

Publishing

Go actually uses git tags in order to publish your module for everyone. Since my project, just like most of them, have module name as GitHub repo, Go uses module name to fetch a certain tag. You can try it yourself by doing go install github.com/devils2ndself/SSGo@latest.

And since there aren't any more requirements, I didn't have to change my code at all! (Except for silly version strings mistakes...)

And while it sounds easy, another thing is putting your package onto Go package discovery site pkg.go.dev.

Appearing on pkg.go.dev

It took me a while to understand how to get a webpage for my module. The documentation only briefly mentions it and it is easy to miss it.

What you need to do, is to make someone fetch your package via go get or go install. Some time might pass before it eventually appears, but it should be there in the end.

I asked a friend of mine who has never dealt with Go to install my package, and I am very thankful to him! Now he, too, can try my tool on practice.

And, after a bit of confusion on my part and some waiting, you can visit my package at https://pkg.go.dev/github.com/devils2ndself/SSGo

by Artem Tanyhin at Sat Nov 26 2022 04:36:00 GMT+0000 (Coordinated Universal Time)


Stefan Frunza

My First Release

Version 1

...0.7 is the first version that I actually got to work from the test pypi package manager.

This week as you might be able to infer from the myriad clues in the opening sentences my class was tasked with making our first releases to the package managers in our language of choosing with whatever tools of our choosing and I had a few hiccups along the way but eventually got my Python static site generator to build into a working pypi package manager release that could be installed from pypi and executed right from the command line.

Getting started with pypi

I followed the Packaging Python Projects instructions, and it worked until I tried to install what I had done and run it :)

For my first attempt I changed the directory structure of my project to more closely match the sample that was given by adding a package folder underneath the src folder and I added an init.py inside the package so that the directory would be treated as a package. Due to the directory structure I also changed the pyproject.toml settings for my pytest to know where they were getting their imports from since there was a new folder between src and the python source code they were testing.

One of the few steps that you have to take to be able to push to pypi is to build your project using hatchling, setuptools, Flit, or any other one of Pythons many build tool options. I initially used Hatchling and did not give thought to the fact that I wanted to be able to run my program from the command line as a stand alone program as well so when I installed it and tried to I could not. It looked like this:

[build-system]
requires = ["hatchling"]
build-backend = "hatchling.build"

I did a little bit of digging and found that what I wanted to achieve was possible, if I used a different build tool called setuptools there was the possibility to specify an entrypoint method given a custom CLI command. So I tried to do that, but it failed. I then went to the docs which are AMAZING and for good measure also found the following article with a script example. From these I learned that my main method that I chose as my entry point could not have any arguments passed to it, instead it would have to pull those from sys and parse them in the body.

Initially what I was doing was I had a main method that took the arguments passed on the command line as a parameter, I had to change this, I took what I had in my main method and copy and pasted it into a new interim method called take_args and my new main method body was just calling that method as follows: take_args(sys.argv[1:]). This way instead of if __name__ == "__main__":main(sys.argv[1:]) I could have a clean main() as the method to be called for my script which I then specified in the .toml as follows:

[project.scripts]
ssgen = "super_site_generator_package.main:main"

Then I tagged and cleaned it up, built, pushed and installed to test and this time it worked. It sounds reasonably clean and fast when I write it like this but in reality this took me 6 or 7 tries and quite a few hours, I added to the version number each time and that's why now it's at v1.0.7.

How to install my pypi package

My site generator is now a stand alone pip package that you can run from the cli with the command ssgen. Originaly the site generators name was going to be something like supersaiyagen in reference to the golden haired super forms in the dragon ball series of anime, in fact that is why the class that does most of the work is called SSJ. I decided to harken back to this namesake with the entrypoint command of ssgen.

The pip package is currently located here: https://test.pypi.org/project/super-site-generator-package/1.0.7/ and can be installed using: pip install -i https://test.pypi.org/simple/ super-site-generator-package==1.0.7

If you so choose you can test it out in a python virtual environement by running py -m venv and then Scripts\activate(on Windows) or /bin/activate(on basically everything else)

Ensure you have pip and that it is updated and try installing using pip install -i https://test.pypi.org/simple/ super-site-generator-package==1.0.7

Just like when you work with the main module directly you can specify all of the arguments right after ssgen like ssgen -vh for example to see version and help. Everything should work the same as is outlined in the table of options below:
Be warned that everything in the specified output directory (./dist by default) will be deleted upon each successful run to be rewritten with the results

ShortCut LongOption Result
-v --version Displays name and version of program
-h --help Displays a help message with useful information about program and possible options
-i --input Specify an Input directory or file only .txt suffix will be correctly parsed (requires argument)
-o --ouput Specify a name for existing directory (optional argument)
-c --config Specify a json file with all other options within it

Exterior Testing

To test I asked my brother, who also has some experience with programming. He was able to get my package running relatively easily from the instructions in the README but then pretty quickly realized that it was not working as advertised. This is not a result of how I packaged my code however, I went into the source code and realized that I have problems when single files are input it does not output to the specified output directory but rather to the directory that ssgen is called from. I have some fixes to make. I will keep you posted on how those are coming along in further updates/edits to this post. The title tag is also not changing.

by Stefan Frunza at Sat Nov 26 2022 03:23:40 GMT+0000 (Coordinated Universal Time)


Eakam

rost_gen - release 1

This week, I released version 1.0.1 of rost_gen, a simple static site generator built using rust. I had kind of forgotten about versions for a while, but the project had advanced enough for a v1 release. Since I had used rust, the appropriate place for a release was crates.io.

Since my project is supposed to run on its own, I also considered creating binaries for different operating systems and hosting them somewhere. However, I decided against it since it would be better to start with crates.io and get used to the process. First, I had to log in to crates.io and verify my email address. This gave me access to an API token which I had to use for authentication after running the cargo login command.

After finishing the setup, I started out by adding some metadata to the Cargo.toml file following this awesome guide. This included fields like description, readme, repository, license, etc:

[package]
...
description = "A simple static site generator"
readme = "README.md"
repository = "https://github.com/Eakam1007/rost_gen"
license = "MIT"
keywords = ["ssg"]
categories = ["command-line-utilities"]

After committing the changes, I ran cargo package --list and noticed that some unnecessary files such as some test documents and vscode configuration files were also being included. So, I added an array of excluded files in the configuration:

[package]
...
exclude = [
  "docs/*",
  ".vscode/*",
  ".gitignore",
  "rustfmt.toml",
  ".github/*"
]

Then I ran the cargo publish command and v1.0.0 of my crate was successfully published. Now, I had to modify the readme file, specifically the installation instructions, so it would be possible to install the crate from crates.io instead of needing to clone the github repo. I found out that for binaries, i.e., programs that are meant to run on their own, cargo install <name_of_crate> can be used. However, this installs the binary in the ~/.cargo/bin directory. After looking up the documentation for cargo install and some testing, I found that the installation directory could be specified as follows:

cargo install rost_gen --root ./install_here
This would result in a compiled binary inside the ./install_here/bin folder. Thus, it was now possible to simply run this command, navigate to the bin/ directory and run the ssg:
./rost_gen --version

After some additional testing to confirm that everything was working as intended, I updated the readme file and published an updated v1.0.1 of the crate. I requested some help with testing and my testing partner was able to follow the new instructions to successfully install and use the tool on their machine.

However, the installation part took quite a bit longer than I had expected. From what I could observe, some of the dependencies being used in the project are quite large. I would need to investigate this to confirm if this is the case and if some of them can be removed/substituted to make the build process quicker.

by Eakam at Sat Nov 26 2022 02:57:06 GMT+0000 (Coordinated Universal Time)


Tommy Liu

Lab10 Reflect

In this week, I uploaded my SSGifier to a C++ package manager named conan. It was quite a lot of learning I had this week in trying to understand how does conan work, how do I integrate it into my project, and how do I encapsulate and upload a package of my project to remote server for other users to use. However, conan only provides packages as libraries for other projects to use, it is not like pip in python where we can install packages and use it standalone. That is being said, we need to createa conan project to use the package. To make sure that my instruction is easy to read and covers all needed requirements, I asked Piotr to install it with the only instruction from my README.md, and he later found out he has no difficulty installing my package.

How did I set up conan?

To set up conan, there are few steps need to be followed:

  1. Install python first because conan relies on python to run its script.
  2. Use pip install conan to install conan.
  3. In the SSGifier project folder, create a folder named packageand create a folder src inside package and put all source files of SSGifier to the package/src folder.
  4. In package folder, use $ conan new mypackage/1.0 -t to generate a package template for us to use.
  5. Edit the generated conanfile.py and add the source files that to be packed into the package into the function def package(self). For example, self.copy("*.h", dst="src", src="src").
  6. After finished setting up the conanfile.py, we need to register an account here to host our packages.
  7. Follow the instruction to add the remote package source to conan.
  8. In the package folder, use conan upload . -r put-your-remote-name-here --all to upload the package to remote. Now the package is uploaded to the remote server.

How to use the package?

You can also use SSGifier in your projectas as a library. To use it you need to do following:

  1. Downlaod & install Conan from here and clang from here.
  2. Create a conanfile.txt inside your project and add SSGifier/1.0.0 in the category of [requires] to conanfile.txt. Click to see official documents. You can use this template:
[requires]
SSGifier/1.0.0

[generators]
cmake
  1. Edit conan.conf file in the location C:\Users\<your user name>\.conan and add revisions_enabled = 1 to [general].
  2. Add this remote repository to conan by using this command conan remote add tommy-conan-local https://tommyliu.jfrog.io/artifactory/api/conan/tommy-conan-local
  3. Add credential information to this repository by using this command conan user -p AKCp8nHPJwRCr2my24TiMaikQgQUW4e3xRbqsiGw45j9nPfPdLWEREYigcMLLW4pQtqg18n8b -r tommy-conan-local lt19930320@gmail.com.
  4. Go to the directory of you project which you created in step 2(make sure conaninfo.txt), install SSGifier by using conan install . -r tommy-conan-local
  5. Go to C:\Users\<your user name>\.conan\data\SSGifier\1.0.0\_\_\package\3fb49604f9c2f729b85ba3115852006824e72cab\src to find the source file.
  6. Compile these code. For gcc, use g++ -std=c++17 main.cpp Utils.cpp ArgumentQueue.cpp FileProcessor.cpp MessagePrinter.cpp, for clang, use clang++ -std=c++17 main.cpp Utils.cpp ArgumentQueue.cpp FileProcessor.cpp MessagePrinter.cpp.
  7. After compilation, a binrary executatable of SSGifier will be generated with the name of a.exe.

by Tommy Liu at Sat Nov 26 2022 01:10:40 GMT+0000 (Coordinated Universal Time)


Oscar Phu

Software Release Via NPM

For this lab, I have chosen to release my tool via the use of NPM.

Preparation before publishing

Create a package.json file if you don't have in the root directory.
Use this npm init to create the new package.json file.

A package.json file:

  • Lists the packages your project depends on
  • Specifies versions of a package that your project can use using semantic versioning rules
  • Makes your build reproducible, and therefore easier to share with other developers
  • Make sure to add the name, version and author in your package.json file.

ADD a README.md file to a package:

  • In a text editor, in your package root directory, create a file called README.md.
  • In the README.md file, add useful information about your package.
  • Save the README.md file.

Publish your release:
-Make sure you have created the account npm and verified it.

  • Use the npm login on your terminal. Login with your username and password.
  • Use npm publish --access public to create and publish scoped public packages.

Note: Update types
Each digit in the version has it's own meaning:
1) First digit means major release.(resetting two later digit to zero)
2) Second digit means minor change in the software(resetting last digit to zero)
3) Last digit means a patch release.

Installing

After releasing my static site to install it locally on your device you can use npm i button-ssg to download my program.

Feedback

It's important to avoid taking feedback as personal criticism. When people provide us with feedback, we should be grateful because they are actually pointing out areas in which we need to improve.

Thoughts

This lab was a welcome one, that allowed us to contribute more to the community if anything. It was a first for me when publishing to npm, but this is useful information. I have always wondered how people were publishing their programs and now here I am, doing just that.

by Oscar Phu at Sat Nov 26 2022 00:31:03 GMT+0000 (Coordinated Universal Time)

Friday, November 25, 2022


Arryell Parris

# Release 0.2 - PR #1

Issue I worked on

The Basic-memory-game repo hosts the code for a tile-matching memory game. There was a problem, described in Issue #104 where tiles that were flipped face-up would not be rendered at a constant size. Thus, if tiles used image files with different dimensions, then the tiles would be re-arranged haphazardly upon being flipped face-up.

Preparation for the fix

There was not much setup required in order to prepare the fix. It was a problem with the web app not loading the CSS correctly. I am already familiar with CSS, so it was just a matter of forking the repo and then inspecting the web app's CSS to locate the source of the problem.

However, the problem wound up being very different from my initial expectations. Originally, I expected that I would have to edit the stylesheets for the web app but it turned out the bug was generated by the index.html, and not within the stylesheets.

What did you need to learn in order to make the fix?

Originally, I expected that I would need to improve my knowledge of CSS syntax in relation to setting the dimensions for elements and their contents in order to resolve this issue. However, in the end I simply needed to familiarize myself with what filepath formats are considered 'valid' for most browsers that process HTML code.

Code Explanation

Originally, upon first inspecting the stylesheets for the Basic-memory-game web app, I could not seem to find a syntax error within the CSS that handled the dimensions of the images.

Therefore, I decided to try commenting-out all of the CSS and gradually re-enabling each section of CSS code until one of them broke the program.

Upon attempting this, I realized that none of the CSS was being rendered at all.

I inspected the index.html file and noticed that there was an invalid filepath provided to the <link> element which linked the stylesheet file.

The value of the <link> element's href attribute was set to "/styles.css" which, worked correctly and rendered all the CSS appropriately when testing the app via VSC's live-server extension.

However, when the web app was rendered by any browser outside of VSC's live-server extension, the CSS would break completely. I adjusted the value of the href attribute, adding a period (.) before the forward-slash (/) and the CSS began rendering correctly. Now all of the images displayed in tiles were rendered at the same size.

Thus, the problem was that, the filepath provided when attempting to link the stylesheet file, "/styles.css", was interpreted as a folder in the current working directory with the name "styles.css", instead of a .css file with the name "styles". As a result, since the stylesheet linked to the index.html file technically did not exist, no CSS was applied to the HTML. Adjusting the filepath's syntax fixed this problem.

Code Demo

Before the fix

Start of a new game:

After clicking a tile with a large character image:

After the fix

Start of a new game:

After clicking a tile with a large character image:

Research

I spent some time browsing the web, especially online developer community forums, search for articles or threads discussing filepath validity in relation to web-browsers and HTML. I have yet to find something that speaks specifically to this problem with ./filename vs /filename, although I have gained a better understanding of the difference through some testing of my own.

As such, I arrived at the conclusion described above (in the Code Explanation):

  • The string "/example" repesents a folder named "example" in the current working directory.
  • The strings "./example" and "example" are the valid ways to represent a file named "example" in the current working directory.

Interactions with project maintainers

I had no notable interactions with the project maintainers.

Difficulties

The most difficult part in resolving this issue was attempting to locate what I believed to be a syntax error in the CSS, which turned out to be non-existent.

Upon realizing that the error was in the stylesheet linking, fixing the issue took just a few minutes.

Link to Pull Request

Basic-memory-game PR #105

by Arryell Parris at Fri Nov 25 2022 22:46:59 GMT+0000 (Coordinated Universal Time)


Piotr Drozd

Adding my SSG to PyPi

This week i had my first experience releasing an open source project and Creating a package on pypi. This allows anyone to install my package with the pip install command.

How Did I do this

using Poetry I was able to build and deploy my code into pypi into the page pdrozd-ssg. With this i can use pip install pdrozd-ssg. Simple enough right?

:(

How many Iterations did i need

15 15 versions it took me to finally get it working. I had many issues from my script not passing correctly or Having to change how my program started or finding an error that I saw after.

Finally I think i have my SSG in a workable state and allows you to run the script with the command pdrozd [whatever command you want]

What I Did

First I needed to add a main attribute to my code and even make my main code into a callable function so I can specify an entry point.

Also i needed to make my .toml file specify the entry point of the script so i could directly call it from the command line.

Finally I wanted to attempt to automatically publish any new versions when their is a PR merged into the main. This was pretty interesting and I learned their are certain parts that are hard to automate because I need to manually change the version

How did testing go

Testing with someone else taught me a bunch of things from making sure to add the upgrade command because you cant just install again you need to upgrade it so it can uninstall and reinstall the new version.

What Next

Overall this was a cool experience i wouldn't think i would be able to make a python package especially because I only started 11 weeks ago. Now I want to continue to improve my SSG but also make a new package that might get used by new people on python.

by Piotr Drozd at Fri Nov 25 2022 22:35:21 GMT+0000 (Coordinated Universal Time)


Taimoor Dawami

Adding Tests for ESM using Jest framework

Writing tests for an application is a crucial process, as it helps make debugging easier and forces us, developers, to write better code.

What is Testing?

In essence, testing is writing code to test that the functionality of your codebase is working and is not breaking in ways unimagined.

Using Jest

Jest is a testing framework for Javascript projects. It ensures that the implemented core functionality of the codebase is not prone to errors by allowing developers to write convenient tests.

Setting up Jest for ESM

The initial step is to install Jest as a dev dependency using npm or yarn

Since I use npm to install node packages, I ran the following command:

npm install --save-dev jest

The next step is to create a jest.config.js file with the following content:

export default { transform: {} }

Finally, we need to modify the test script in package.json.

Typically you would replace the default value of the test with either jest -- or jest. However, since we are using ECMAScript modules in our project, we have to set up the test scriptaccordingly as follows:

"scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
  },

Writing the first test

Before you write your first test, create a tests or __tests__ directory in the project's root directory.

Here's a sample function that checks if the user is eligible to cast a vote.

// can-vote.js
const canVote = (age) => {
   if(age < 18){
   return false;
   }
  return true;
}
export default canVote;

Here's the test for the above function:

import canVote from '../src/can-vote';

test('should return false if no value for age given', () => {
  expect(canVote()).toBe(false);
});

Let's run the test as follows:

npm test

In the above test, we expect canVote to return false when no argument is passed. This test should fail because we are not dealing with a use case in which the value for age is undefined. As a result, the function returns true with the above implementation. This mistake could go unnoticed when the function definition is more extended and complex.

I encountered a similar bug in the main function of my SSG, because there were no instances where the main function was invoked without passing a value in the codebase.

To fix the problem in the test we wrote, we could modify our canVote function as follows:

// can-vote.js
const canVote = (age = 0) => {
   if(age < 18){
   return false;
   }
  return true;
}
export default canVote;

Now, if we run npm test the test we wrote for canVote should pass, since we are using default parameter value in the function declaration.

Final Thoughts

Writing tests for my project helped me find bugs that would have otherwise gone unnoticed. It's not easy to write tests, but it's a skill I would like to improve. Also, I learned it is challenging to write tests for code you do not understand.

by Taimoor Dawami at Fri Nov 25 2022 22:01:42 GMT+0000 (Coordinated Universal Time)


Samina Rahman Purba

✨Today I learned: Using Octokit! 🐙✨

A little reflection...

As important as it is to set goals, it is also important to measure progress along the way. I wanted to take a moment and see how far I have come in my first couple of months of open-source development journey and what more I want to achieve.

Part of the goal I set for my open-source development journey is to aim for continuous progression and development. Hacktoberfest was a great way for me to navigate the mysterious world of open-source projects. Well, a little less mysterious than before. I am more comfortable now with the process of forking, cloning, experimenting with a project, and following the contribution guideline rules to make a proper pull request. I also learned to be more professional in my communication with maintainers and make changes according to their requests. I am also better at reading contribution guidelines now and following them.

The Project

Along with a small team of incredible developers, I decided to work on the My Photohub project.

As stated in the README.md

My Photohub is a web app that makes it easy to share your photos on the web. My Photohub takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new GitHub Repository owned by you! Your photo web page is made available to the world via GitHub Pages. Best of all, everything is free, and you are in control of the end product.

As someone who loves photography and working with images, the moment I saw this project, I knew I had to contribute to it. I also liked the idea of using GitHub to upload images, it felt original and innovative.

Teamwork

Having a great team all sharing a common vision and being equally motivated and active is so important to making a project work. I was truly lucky to have worked on the My PhotoHub project with some brilliant developers who were ready to review my code, provide feedback and actively communicate on our team chat. Since the project was new, it took a lot of coordination and communication to figure out the conflicting parts of the code could be resolved and turned into one properly functioning whole.

My Contribution

Issue: "Figure out how to 'upload' resources to GitHub"

Most of the time, in order to make code contributions, we need to have some idea of what the entire codebase is doing or what the project is about. Unless, of course, the issue is very minor and won't affect the entire project. I had to look through the pull requests of two other members of the team to have an idea of how to approach 'uploading' resources to GitHub.

What is Octokit? 🐙

To contribute to this project, I first had to learn about Octokit. I never used it before for any of my projects so I had to read some articles about it first and go through the documentation.

Octokit is a lineup of GitHub-maintained client libraries for the GitHub API.
The Octokit client can be used to send requests to GitHub's REST API and make queries to GitHub's GraphQL API.

Example taken from the documentation: Get the username for the authenticated user.

// Create a personal access token at https://github.com/settings/tokens/new?scopes=repo
const octokit = new Octokit({ auth: `personal-access-token123` });

// Compare: https://docs.github.com/en/rest/reference/users#get-the-authenticated-user
const {
  data: { login },
} = await octokit.rest.users.getAuthenticated();
console.log("Hello, %s", login);

I came up with the code below to upload the resources following the pull requests for other issues for the project. To form the logic, the documentation was my main source of guidance. It had a lot of code examples for me to follow and work with.

import { Octokit } from "https://cdn.skypack.dev/octokit?dts";

const UPLOAD_DIRECTORY = 'raw'

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result.substring(reader.result.indexOf(",") + 1));
        reader.onerror = error => reject(error);
    });
}

export async function githubUpload(token, repository, file) {
    const octokit = new Octokit({ auth: token })
    const [owner, repo] = repository.split('/')
    return await octokit.request('PUT /repos/{owner}/{repo}/contents/{path}', {
        owner,
        repo,
        path: `${UPLOAD_DIRECTORY}/${file.name}`,
        message: `Upload File - ${file.name}`,
        content: await getBase64(file)
    })
}

Going forward... 🚀

For the next few weeks, I want to actively work on turning the My Photohub project into a functioning application. There are important bits and pieces of it still missing and I want to actively contribute to making it whole.

by Samina Rahman Purba at Fri Nov 25 2022 07:24:38 GMT+0000 (Coordinated Universal Time)


Alexander Samaniego

Lab 10: NPM Package Release

This week in my open-source course (DPS909), for our last lab, we were asked to publicly release our static site generator (SSG).

Release Process

The package registry I choose to release my project on was npm.

To add my package to the registry I essentially just followed this guide. I had already done most of the steps, all I needed to do was create a npm account on the website then use npm publish to add the package to the registry. However, I still needed to create a release for my project before using npm publish.

To create the release I used the command npm version <version number>. This updates the version number in package.json and tags the release. I then used the command git push --follow-tags to push the tags to the GitHub repo. Once the release is tagged and pushed to GitHub, then the command npm publish can be used to publish the package to the registry

These steps are repeated for every update to the package.

This process was rather simple as I had already completed most steps while creating the project. The tricky part was not realizing the command npm version <version number> also tags the release. So I was manually attempting to tag the release and getting errors telling me that the tag already exists. This had me stumped for bit until I realized it was because the command also adds the tags.

User Testing

I had another student in the course test my npm package on their local machine. The only issue encountered was during the setup process. Their machine didn't recognize the ssg command that I used for the package. So I had to adjust the instructions to have the package be installed globally. I changed npm install ssg-cli-tool to npm install -g ssg-cli-tool. Once that change was implmented and the user installed the package globally, it worked as intended.

The Final Release

Here is the final package release: https://www.npmjs.com/package/ssg-cli-tool

To install this package, in the terminal input the command:

npm i -g ssg-cli-tool

Then run it using on a text or Markdown file by using this command:

ssg -i <filepath of txt/MD file>

Follow the instructions in the README.md file for more options.

GitHub Repo: https://github.com/alexsam29/ssg-cli-tool

by Alexander Samaniego at Fri Nov 25 2022 04:38:37 GMT+0000 (Coordinated Universal Time)


Tymur Levtsun

Making sure Izyum is always fresh

Overview

This week we worked on integrating CI into our open-source projects. It is not the first time for me to work with CI and pipelines in general, but I find it very satisfying to put my project on some pipeline every time. These kinds of automations sometimes feel like magic to me.

Implementation

Since my project isn't that big I had only two things that I want to perform on my pipeline:

  1. Running ESlint check
  2. Running my units tests, which are already built After some time of going through the GitHub actions documentation I ended up with the .yml that looked like this:
name: ci

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  lint:
    name: ESLint
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v2

      - name: Setup node
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          cache: 'npm'

      - name: Install node dependencies
        run: npm ci

      - name: Run ESLint
        run: npm run lint
  unit-tests:
    name: Unit Tests
    runs-on: ubuntu-latest
    steps:
      - name: Check out code
        uses: actions/checkout@v2

      - name: Setup node
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          cache: 'npm'

      - name: Install node dependencies and run Tests
        run: npm install-ci-test

Then I created the PR and made sure that it run successfully and also made another commit where I purposely crashed tests to make sure that CI would fail too. After all of these, I merge the PR in the main branch.

by Tymur Levtsun at Fri Nov 25 2022 02:56:40 GMT+0000 (Coordinated Universal Time)

Some code reviews

This week I did some code reviews on my classmates' PRs. My suggestions were picky and small and they were just related to some texts, but I thought that it still made sense to leave them.

Code review 1

Comment

Code review 2

Comment

Good to know

While I was making the code review I found this interesting GitHub feature which lets you make a suggestion, which is pretty much code you think should be instead of code you review. If the contributor is agree that this code makes sense he can just hit the button in GUI and the suggestion would be automatically committed and added to the PR branch

by Tymur Levtsun at Fri Nov 25 2022 01:50:31 GMT+0000 (Coordinated Universal Time)


Batuhan Ipci

The perfect open-sourcer does not exist

Breakthrough

Over the last four months, I have set some goals to become a better open-sourcer.
They looked something like this:

  • [x] Contribute to an open-source project and build influence in the community
  • [x] Make a commitment to a project and build up credibility as a maintainer
  • [x] Do a meaningful code review and answer issues

Being young and having less experience in open source community, made all of these seem out of reach. Nevertheless, I carried them out. Regardless of what goals you might have, I want you to go through your version of a breakthrough.

During the process, what became clear to me was to put my commitment to the goals I wanted to achieve. I have this desire to be perfect in things I do, but ironically this leaves my work overdue and ultimately I end up not doing them. Though, once I achieve them, I wonder why I haven't done them earlier.

It's easier to achieve your goals thank you think, but being perfect about them is not.

Contribute small to big 🐛🗻

Contribute to an open-source project and build influence in the community

Whether you contribute small or big chunks of code, being consistent about them carries vital importance. Small contributions to a particular project help you to get familiar with it at first and leads to something bigger.
Take a look at some pull requests I have raised to the following projects; withfig, cve-bin-tool, my-photohub, pr-approve-generator.

palpatine static site generator with unlimited power!⚡

Make a commitment to a project and build up credibility as a maintainer

One of the personal projects I love developing is palpatine. I blogged about it here and I am constantly adding new features to it! So far it has reached 5 starts and keeps growing with the help of the open-source community.

Keeping good maintenance on and marketing your projects is, I believe, a very significant part of open source. There are so many developers all around the world on GitHub potentially finding your project worthwhile.

Read Code Like A Book 📖 🧙

Do a meaningful code review and answer issues

Almost everyone seems to have had a hard time reviewing other people's codes. My experience was not very different, I too found it utterly challenging. So much so that, I was putting off writing this blog for the longest time. I understand, however, that being able to review other people's code is an important trait to have and a difficult skill to attain. It takes time and practice to be able to look at code and give constructive feedback about them so that it helps the project and the developer.

I reviewed the codes of two of my classmates from;

Review 2️⃣

Review 2️⃣

I am no expert at code reviews yet, without writing much I want to click on the Submit review button as soon as I can. You as a developer may relate, there might have been times you found other developers more experienced than you are, and not wanting to review their code. However, in such a situation, reviewing good or poor-quality code can improve you as a developer drastically. Along the way, I found myself searching and learning a lot about things I didn't know.
This resource was the most important piece that helped me to make an impactful review.

Better open-source player 👾

After accomplishing all the goals I counted above, ironically it feels easier to do them again. Before I attempted any of those, it was very overwhelming, they all seemed like it was out of my capability. Do not wait for your work to be perfect and get started with what you truly love.
The feeling of accomplishment is so rewarding that you will be able to say; "you could do it once again."

by Batuhan Ipci at Fri Nov 25 2022 00:00:36 GMT+0000 (Coordinated Universal Time)

Thursday, November 24, 2022


Chen-Yuan Chu

End of Beginning: Release v1.0.0

Release!

I released a project I was working on. It's the static site generator I have been mentioning in some of the past blog posts.
I use released it as a npm package, as it's written in JavaScript. You can find it here.

Steps To Making A release: (details)

  1. Sign up for a npm account at https://www.npmjs.com/signup
  2. Make a folder with the name for your program
  3. Write your program inside the folder, along with README.md to explain to user how to use it 4.1 If you are using git for this program, you can run git tag to add a version number and label to your current commit, like: git tag -a v1.0.0 -m "initial release" 4.2 If you don’t have one already, run npm init to setup package.json, which will have information npm uses to publish your program
  4. Log into npm via command npm adduser, then enter information for the account you set up
  5. In the root of the program, run npm publish --tag text to publish the pogrom; --tag is optional and adds an easy-to-read version label by what you put as text (This is different from git tags)
  6. See your package on https://npmjs.com/package/your-package-name (replace your-package-name with the name you have chosen)

Learning

I thought the process would be very complex, but it seems to just be a npm publish command to publish your app, assuming you have been using npm to construct your app already. No additional change is needed.

I didn't realize how accessible npm package creation is. I was under the impression that these are all some kind of officially approved packages from some accredited organizations, but actually everyone can do it!

After looking at other people's repo and their release on npm, I quickly realize where npm take information to publish your app. It seems to be the README.md and package.jsonin the program.

User Testing

How would a user set up and use my package? I have it detailed in the Getting Started section of my package, along with other instructions.
Basically:

  1. While inside an empty folder, download the tool via command npm i static-site-converter in command line (such as cmd or PowerShell)
  2. Run command cd node_modules\static-site-converter to get into the tool's root folder
  3. You can now use it! Run a command like node index -i test_files to generate HTML file(s) from the input, where test_files is a TXT or MD file or folder path.

If you need more details, it's all written in the link to Getting Started.

I found another fellow developer to test my package. She thought everyone was clear, and it went pretty smoothly, but she was a little bit confused by what the instructions on README.md meant by input and output directories, so I had to add some words to make it clear to the user.

by Chen-Yuan Chu at Thu Nov 24 2022 18:24:33 GMT+0000 (Coordinated Universal Time)