Release 0.9

Last few weeks were pretty busy with studies. All school has moved online and students and professors had to adjust to a new way of study-teach workflow. For this release I was working on few front-end issues and I would like to share what experience did I gain while I was solving problems.

My First Issue was about making word Telescope in the top-left to go to home page.  

At first when I look in this issue I did not know in what kind of problems I can run into. Seems it's only add link to the title

 This is the only line of code I have to do for this issue. By doing this I have learn something new. 
If I add <Link to='/'>{title} I assumed that {title} should still keep the style that was assign in the <Typography>  because I haven't specify any new className in the <Link> but the outcome was different than I expected
From:
 
To:

Uhhh...this is not look right due to our website design. So basically was giving "Telescope" default colour and underlying 

Next thing I tried was to move className={classes.title} from <Typography> to <Link>. Outcome was not satisfying as well


I lost spacing and again underlying. Once I applied classes.title for <Typography> and <Link> everything was functioning properly. In order to remove underlying I just specify textDecoration:none. I assume that once its link it will by default add underlying.

My Second Issue was styling blockquotes for the Post component. My professor introduce me web site where now I always refer to for some CSS ideas or tricks. I find many interesting ideas and images that can be used to specify quotes. Here some examples (all pics are taken from the https://css-tricks.com/examples/Blockquotes/):

Classic:

Fun:

Modern:


In the end I want to choose something that will fit our website style and improve readability. I do't know how good it looks to other users but I decided to not overload this element and keep it as simple as possible. Anyway it can be improve on the go. 

Before:

After:



Comments

Post a Comment

Popular posts from this blog

Release 0.6

Image
Going back to Telescope. Between release 0.5 and 0.6 I was working on the Telescope project. I was assign to few issues during the 2 weeks period.  My first issue was to add test to make sure our application starts. This issue reference to the page where possibly I can look for solution. Ideally issue -363 should solve: a) make sure that our app is working b) allowed to hit correct root. After reading examples and documentation I have learned that there is 'start-serve-and-test' npm package that starts server, waits for URL, then runs test command; when tests end, shuts down server.  How to use this package: Install this package  npm i  start-server-and-test Add command to the script. In my case Telescope already has command to start server and command for the tests. This way I just had to combine both commands into one that I named "CI" and add localhost.  Indeed this package did not solve the intention  of the issue I was working on. This packa
Read more

Hacktoberfest - Issue #1, Pull Request #1

Image
In this article I will continue to talk about my journey through the Open Source Development. As I mention in previous post   I am participating in Hacktoberfest. Requirements for this fest is to submit 4 Pull Request during the month of October in order to get a T-shirt with Hacktoberfest logo. In this post I will talk about my first PR (Pull Request). In the beginning of October I went through many filed issues on the Git Hub in order to find to work on something this month. My very first issue was to create a small animation selector for Hacktoberfest. Hacktoberfest animation. This task was not very complicated but more on a practice to fork, edit code, create PR and merge. Neither this task required any special installation (Visual Code is enough to handle this issue) Steps to complete PR for this issue: 1. Create CSS file with my own animation. In this part I had to do little research on CSS animations. I find many different ideas and how to implement them to get
Read more

Hacktoberfest

Image
Few more days till October will knock into our windows. Before I start my OSD600 month of October was the month when all celebration begins (Thanksgiving Day, Halloween, preparation for Christmas and Christmas itself). This year everything is different. For many new programmers and programmers who new to open source development this is the month to challenge ourselves in Hacktoberfest . My very first challenge is to pick a proper issue. I never thought that it will be that hard. It's been already 2 weeks since I start looking into this. And every time I can't decide what will be a good start. This is the time when emotion overlaps with knowledge. On one side I want to pick something that I would like to do but on the other side the fear that my Pull Request will not be excepted make me nervous. After searching through so many issues on the GitHub i pick few issue I will work. My first goal for this challenge is to gain confidence in programming, in the end of the day this
Read more