Articles on abhirup@99's Blog

Weekly Check-In The End

abhiruppalmethodist@gmail.com (abhirup@99) — Tue, 24 Aug 2021 04:57:14 +0000

Time flies and here we are at the end.

I spent the last week cleaning the codebase a bit more, squashing a bug here and there and adding codecov to the repo. The code quality has improved a lot, and the codecov CI would visualize all the test coverage. The UI for the fiigma plugin got an upgrade and now looks pretty neat and clean. I documentated my PRs and the status reports in a separate repo marking the end of these journey :).

I want to thank my mentors for being a massive part in this journey and giving me the opportunity to work on the plugins. This has helped me grow tremendously, and learn React among other things. I would try to keep contributing to EOS after GSOC ends. Till then, peace out :).

Weekly Check-In #11

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 16 Aug 2021 09:51:45 +0000

We are in the last week now. It had been a great learning experience. Both the Figma and Adobe plugin are ready to be deployed now.

Adobe Plugin

I pushed some of the final changes to the Adobe Plugin repo, updating the README with the get started information and improving the code a bit. The types are better now with the prop types, with no errors on that end.

Figma

We completed the entire plugin. I have implemented the tests with Jest and the coverage is 100% now. We revamped the UI, made it more intuitive, and improved the documentation. The documentation mentions the steps more clearly now, allowing anyone to get started quickly.

Weekly Check-In #10

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 09 Aug 2021 13:16:20 +0000

Figma Plugin

There is new UI for Figma now, We have options to select category, and the themes available. There are helper texts, and no network calls, making it work completely offline now. We added helper scripts to update the data eveything a new package is released for npm, and the package is using the latest version of EOS Icons react package, which included the breaking change of having SNAKE CASE. I would be adding tests once the UI becomes final and we freeze it. And we would be having 2 complete packages for Figma and Adobe :).

Adobe Plugin

I worked with the mentors, and added the clear functionality, and updated the EOS Icons react package to use SNAKE CASE. There was a PR to wrap all functions with useCallback to improve the performance and prevent unneccessary renders or copy of them on the component updates. We are moving towards the end now, and I would like to publish the work soon now. :)

Weekly Check-In #9

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 02 Aug 2021 10:26:46 +0000

We are approaching the end now. And I am glad to share that the Adobe extension is ready now.

Adobe extension

We now have 100% coverage for all the files. I have added tests for each of the files. The UI is frozen now, and it looks awesome. We implemented the tests using Jest, and I learnt a lot while reading through the docs. I mocked quite a few things, and all the static files. The only file which couldn't be tested was the App.js which was importing the Adobe inbuilt APIs, so couldn't be tested in isolation. I plan to add codecov this week, and increase the documentation a bit more to help newcomers get started on the project.

Figma extension

The revamp is almost ready now waiting to be pushed. I am cleaning up the code now, squashing more bugs, and making the UI a bit more response. It really looks awesome, and I am looking forward to sharing it with my mentors.

Weekly Check-In #8

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 26 Jul 2021 11:02:27 +0000

Figma revamp

This week was spent in more reading than actual coding. I went through the Figma documentation trying to understand stuff better. I am currently in the process of overhauling the Figma UI. We would be revamping it, trying to make it at par with the current Adobe extension. I have added the scripts to integrate the EOS Icons package inside the repo, and the options json. This would lead to a quicker completion of the Figma revamp. I also went through the various options available for the adding the stylesheets for Figma. The Figma structure is a bit more lenient than the Adobe one, so hopefully everything would be sorted quickly. The initial work and structure of the revamp has been completed, and I would be finalizing the CSS changes and pushing a PR for the same in the coming days.

Adobe updates

I incoporated the feedback given by the mentors on the UI, and the UI looks neater now with a bit more of visual feedback for the options available. I added labels to the various input fields, improved the codebase a bit, and also added a basic modal to tell the user that the image has been copied over. I have been studying a bit about implementing tests with Jest, test runner. We figured out it would not be possible to add integration tests to it, as it depends on some of the inbuilt APIs from Adobe, but we would be writing unit tests for the various functions present. I have gone through the documentation and would be pushing the PR shortly with the changes.

Weekly Check-In #7

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 19 Jul 2021 16:39:17 +0000

I passed the first evaluation 🎉.
What have you done this week?
This week has been pretty interesting from the improvements point of view. We have updated the UI and now you can search through filters, categories, prefetched svgs and themes in addition to the text. There has been a lot of preprocessing and the theme works offline now. No need to wait for your slow internet to load the data.
What is coming up next?
We would be doing the same on the FIgma plugin as well, and include more features, and a better UI. Waiting for an interesting week ahead.
Any issues you faced this week
This week went really smooth, pushed by the excitement of the new UI. I faced some initial issues with loading the EOS Icons react package, but it got figured out finally with a bit of help from the mentors and reading a lot of documentation :).

Weekly Check-In #6

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 12 Jul 2021 10:16:54 +0000

Hi everyone, This week we had the first v1 for the Figma plugin. The tools for formatting were already there with ESLint and Prettier, and this week we also got the FIgma implementation. UI wise it is still in nascent phase and only allows searching exact strings, and viewing the result. We have better v2 ideas for it. The options would show up at the front, everything would be divided by categories and more options with outlined and size. I have also added github workflows for the file to run builds on every PR.

Adobe XD

The next plans for Adobe XD is to use the v2 APIs from the backend, and improve the UI. I have plans to add a lot of choices for it, and would push a PR in the coming weeks to implement it. We had the chat about publishing of the library, and have gone through the required documentation to implement it. The builds and publishing process would be taken care by the mentors and we would have the Adobe XD extension for use by everyone.

Next Steps

The next steps would be to include the EOS-Icons package in the repository to better implement the UI and not reinvent the wheel. I am really excited about the v2 UIs. Hoping to implement it soon :).

Weekly Check-In #5

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 05 Jul 2021 22:21:05 +0000

We are at the half way mark now. The good news is the Adobe XD plugin has been completed, and we looking forwards to publishing it now. I would go through the documentation to check for the required steps, but yes it would be my first complete contribution to open source. As suggested in the previous blogs, I have started working on the Figma plugin now. The initial PR to migration has been up in the repo. I have added ESLint and prettier to it to maintain the coding standards. The next step would be to add Github CI for the same. I have been looking into converting the html files into React to make it more consistent with the Adobe XD plugin in terms of the features and UI/UX. I would be migrating the UI to React in the coming week and also look through the documentation to get the Adobe XD plugin published. Adding eslint to the Figma repo was a bit difficult, as it was using a lot of global variables. It took some time to figure this out and write the updated code. And the hard work finally paid off, and the pr is there now waiting to be reviewed :).

Weekly Check-In #4

abhiruppalmethodist@gmail.com (abhirup@99) — Mon, 28 Jun 2021 15:56:37 +0000

✌, so we are nearing the half time now. I am extremely grateful for having the opportunity to participate in Summer of Code. What did I do this week? We now have a new shortcut for the Adobe XD plugin. The loading icon is also new now. We are using an EOS Icons now 🤘. What is coming up next? Finally the Figma PR is nearing completion now. We are on React plus Typescript. The initial version is ready. ESLint is being set up now along with Prettier to maintain the code quality. I am also planning on adding the tests to ensure new updates doesn't break anything. What challenges did I have? The first challenge was setting up eslint, typescript and making the code compliant. There were a lot of some issues and it did take significant time to complete it. I am really etching to make the PR now.

Weekly Check-In #3

abhiruppalmethodist@gmail.com (abhirup@99) — Thu, 24 Jun 2021 06:05:09 +0000

This week, my first PR post GSOC got merged :tada: . I implemented Babel in the repo to add import export syntax than the original require syntax. This brought a bit more consistency in the syntax across the org repos. There is a new UI for the plugin now. I have been working on migrating the Figma plugin for the EOS Icons to React. The original implementation is in html and JS. This would allow a bit more customizations, and stylings. The plugin would be moved to Typescript :tada: and react (tsx, I am waiting..), What is coming next? The figma plugin is coming some. The initial react structure is done, and only few bugs remain. I would try to squash them as soon as possible, and a new plugin awaits Figma. Did you face any issues? Yes, I got a bit confused with the figma APIs. I had to go through the documentation a bit more, but was finally able to get some sense out of it.

Weekly Check-In #2

abhiruppalmethodist@gmail.com (abhirup@99) — Tue, 15 Jun 2021 13:33:55 +0000

This week, I am finalising the design and structure of the Adobe XD plugin. I created a PR to add Eslint to the repo. This checks the files on every commit and during the merge process. React props is added to the repo to check the props types on each component. This would improve the types and will catch more errors during the build time. I removed some of the redundant files and implemented CI checks. Yarn is completely removed from the repo with all the scripts using npm now. I also worked on the improving the UI of the app. Icons are now present after every search, giving it a better visual feedback. The 'Copy to Clipboard' button is now disabled by default, and only is clickable once file is found, and fetched. This completes the entire fetching cycle. The UI can be further improved and I am working on it now. I struggled a bit with implementing Eslint in the repo. It was tricky to implement, as some files required the same format for a successful build. There were globals present and it created issues with the imports. I went through the documentation, and learnt about globals in webpack, and implemented exceptions in ESLint to finalise it.

Weekly Check-In #1

abhiruppalmethodist@gmail.com (abhirup@99) — Thu, 10 Jun 2021 12:22:26 +0000

Hello! My name is Abhirup Pal. I am working under EOS creating Adobe XD and Figma Plugins for the EOS Icons. What did you do this week? During the community bonding period, I meet my mentors and the community admin. We had a discussion about the main parts, I would be focussing on! I went through the Figma and Adobe XD APIs, and skimmed through the React basics. What is coming up next? I would be focussing on completing the base structure of the Adobe XD repo, setting up shortcuts and the linting required. I intend to set up github workflows to build the plugin on every push. It's a new area for me, and I am really excited. Did you get stuck anywhere? Yeah, I faced some issues with the domain mapping during the github workflow setup for the eos-landing repo. It was a new thing for me, and had to go through the documentation to make it work. The other students and mentors helped a lot, and it's functional now ;).