KAT CODES

journey through web development

Tag: learning

Photo by Harrison Broadbent on Unsplash

Raspberry Pi scroll bot- soldering, building, coding

June 2, 2020 / / 2 Comments

Although I am a frontend developer with all my heart, I was always fascinated by how to build robots or wearable technology.

I haven’t done anything about it until I’ve seen a post on Twitter about some guy who has built a little display unit to show his family whether he has a meeting or is free to bother (anyone WFH and with kids out of school will understand the need for stuff like this :D) Anyway, the display looked really cool, I retweeted, and my good friend sent me a link to a Raspberry Pi shop (PiHut) and encouraged me to buy something and start building.

I needed something relatively simple for my first project, so products from Kits/Bundles tab seemed perfect.
I decided on this little scroll bot:

The package came super-quick, within 24 hrs.

Beware, this is a soldering project (😱 ), but you can also buy no-solder hammer headers to complete it.
My friend Jack has a soldering iron, which he kindly agreed to lend me. (Thank you!)
I have never soldered before, and it’s been nerve-racking activity, but after a quick youtube tutorial, I managed to solder both raspberry pi zero and scroll phat hd boards. (spoiler-alert! I have not messed up this step and everything works perfectly! So if I could do that, there is a high chance that you can do it too!)

The next step was to build the orange robot frame, and here I have followed the original assembly instructions, which you can access via this link.

My robot was complete, but with the end of instructions, ended my knowledge on what to do next 😂
Do not worry though, as every programmer’s best friend aka Google helped me out. I plugged in HDMI cable into a mini-HDMI connector (included in the bundle) and onto my Raspberry Pi Zero board. I plugged in a USB for the wireless keyboard and mouse ( there is only one USB port, thankfully my keyboard and mouse set use the same USB, but if you have separate ones, you will need a USB hub to connect both to the Pi). Lastly, I inserted a micro SD card and plugged the whole thing to power.

The result…..nothing happened! 😱

I googled some more and realised I slotted an empty SD card, so of course, nothing could have happened. I tried adding a raspbian image downloaded from the internet straight onto the card, but it didn’t work for me. Raspberry Imager came to the rescue. This utility downloads the right file for you, and it’s really straightforward. I recommend this way if you are not entirely sure what you’re doing.

I tried again, the LED light on Pi Zero went on, and I saw a lovely Raspberry logo on the monitor. Victory! 🏆

The first step was to install the scroll phat hd python library. For this step and few of my first coding tests, I followed this tutorial from Pimoroni website (CLICK HERE for tutorial)

At that point, I still had no idea whether my scroll phat hd board works, so when I tried one of the examples (downloaded with the library) and my robot came alive, I was really proud of myself and my soldering skills (haha).
The first little projects I did were a simple clock and displaying different strings, both static and scrolled ones.

For example, to code the clock you can see in the picture above, simple type:

As this post turned out quite lengthy, I will go in-depth about the final project for my little scroll bot later this month.
Let me know if you have ever done anything with Raspberry Pi, or maybe if you would like to in the future!

*Featured Photo by Harrison Broadbent on Unsplash

Liked this post? Share:
tutorial how to make a digital portrait in adobe illustratos

How to create a digital portrait in adobe illustrator

April 5, 2020 / / 1 Comment

A few days ago, while I needed a little break from my database assignment, I created this digital portrait of my daughter, Hannah.

Everyone seemed to really like it, so I decided to share my knowledge and create a tutorial on how to do those cool portraits using any photograph.

All you need is Adobe Illustrator and a photograph! No skills required and it’s really easy to do!

Watch a video tutorial or follow my written instructions below!

How to create a digital portrait using Adobe Illustrator:

  1. Choose a photograph you would like to use for this project. It can be literally anything you want! I chose this cute photograph of Hannah-ballerina:
  3. Open Adobe Illustrator, click a New File and choose the size of your canvas. For this project I chose A4, but you can choose a different size.
  4. Click the Window tab and then select Layers. This step is really important as layers are crucial!
  5. Click File tab and Place, to place a chosen photograph onto Layer 1. Next, place the image on the canvas.
  6. Lock the Layer 1, add a new layer, zoom in onto the face (or any other part you want to start with) so you can see the area better, and using the Pen tool, start outlining the shape of the face.

    Remember to change the size and style of the brush! I like to outline the skin with the smallest brush size (0.25) and hair and clothes with a slightly bigger one (0.5) Play with different brush styles and choose the one you like the most.

  7.  
  8. Name a layer accordingly, and lock the layer using the lock icon in the layers tab.
  10. Add another layer and outline the left ear. Name a layer and then click the down arrow to open this layer, and lock the one inside (not the whole layer)
  12. Outline the shadows inside the ear outline. Lock the whole layer and outline the other areas following the same rules.
    One area= one layer. Lock layers when you finish them.
    For this photograph, I have layers for: face, left ear, right ear, hair, neck, top of the dress, tutu skirt, left hand, right hand, and legs.
  13. When you finish outlining, you can unclick the eye icon next to the Layer 1 (with the original photograph) to see how you’re doing.
  15. You’re halfway there!
  16. Ok now click the eye icon on Layer 1 again to bring back the original photo, if you would like to use color from it. If you choose to have custom colors, this step is not necessary.
  17. Unlock the first layer (in my case, it’s a face layer) and using the Eyedropper tool, select the color of your liking from the original image. Then select the outline of the face layer and click on the color swatch you just chose.
  19. Lock the layer again and fill in other skin areas, like ears(just the main outline), neck and hands.
  20. Unlock the ears layer, and select the inside outlines, color them with the same color and then double-click on the color swatch (big color square in the left side menu) and select a darker shade. Fill with the same color other inside ear’s outlines.
  22. You may want to take the stroke of the outlines out if you wish (in the right-hand side menu).
  23. Color other layers the same way.
  25. Now create a new layer for the background. Place it on the bottom of the layers (so it’s in the back of your portrait) Using the rectangle tool, select the area of your canvas and fill with the color of your liking.
  27. Add another layer, place it on top of the background layer, and using the Curvature Tool, draw a “blob” around your portrait. It doesn’t have to be perfect so play with it 🙂 Again, fill with any color you like.
  29. Add a new layer and using the Text tool, add a text. I like to separate lines of text to have more control over the alignment of the lines. Choose your font and the size of the text.
  31. Voila! You have just created a digital portrait!

I would love to see your creations, so please tag me on Twitter @kat_wlodarczyk and use the #katstutorials
so I can see them! You can also comment or email me!
I hope you liked this tutorial!
✌️

Liked this post? Share:

Learn to code for free

April 3, 2020 / / 1 Comment

Some time ago, during one of our uni lectures, my friends and I were trying to list websites or apps,
where you can master your coding skills for free or really cheap.
As current lockdown force us to stay indoors (and please do! for everyone’s good 🙏), I thought I will recreate that list and share with you all.
After all, when is the better time to learn something new?

  • Codecademy
    codecademy.com website

    Codecademy is, in my opinion, the most popular website to start your coding journey. A lot of content is free and the learning process is gamified, so it doesn’t feel like learning at all! Every time I want to learn a new language, I look at codecademy to get myself familiar with the syntaxes and basic rules.

  •  FreeCodeCamp
    freecodecamp

    As the name suggests, freeCodeCamp is completely free. It has a lot of fans all over the world, but for me personally, it’s been a bit.. clunky and not as user-friendly as other sites, so I didn’t stay there for long. What I loved there though, is earning the certificates and badges! ( who doesn’t like them, right? They always give a nice motivational boost.)

  • Udemy

    udacity

    Different type of learning, but totally worth mention- udemy.com. Platform full of tutorials on all sorts of topics, not only programming. For those of you, who learn better while listening rather than reading (not me, unfortunately 🙁 ) They always have some sort of discounts going on so it’s easy to get a great quality course at a great price (free ones also available).

  • SoloLearn (APP)

    My second favorite learning source! The main plus- it’s an app! So you have it always with you on your phone. Whenever you have some time to spare, open the app and learn! I loved doing the quizzes about different languages to cement my knowledge. The app and its content are free and I highly recommend downloading it. Instead of mindless scrolling through Facebook or Instagram, SoloLearn!

  • Pluralsight
    pluralsight

    Great source of courses, and for the whole of April, all the content is FREE for new accounts! U can choose a single course or follow a particular path to master your skills. With technologies from Web Development, DevOps, Data, Architecture&Construction, Manufacturing&Design, Cloud Computing, Machine Learning, Bussiness Professional, Cyber Security, and Creative Professional, I am sure everyone will find something interesting to follow.

  • w3schools

    w3schools

    Every developer’s good friend. No matter if your a junior or senior, w3schools is probably the first source to look at when you’re stuck. It’s not fancy but 100% free and nicely explained. Oh! And you can get certificates too!

UPDATE:
A Few more cool websites that will help you learn for free! 

https://javascript30.com/


30 JavaScript challenges in 30 days (of course there are no strict rules that you have to keep to the time frame :D) Video tutorials from Wes Bos are easy to understand and follow. I have done a few projects from JS30 challenge myself and really enjoyed them. I recommend this to anyone who would like to get better in JS.

https://www.theodinproject.com/

The Odin Project is a really cool open-source platform, where you can take different paths to learn to code for free.
Currently, there are three routes to take: Full-stack Ruby on Rails, Full-stack JavaScript and Front End only. I will definitely start one of them soon, as it seems to provide good knowledge forwarded with loads of projects to do to add to your portfolio 🙂 Instructions are easy to understand, boosted with images and snippets of code.

https://www.codewars.com/

CodeWars is great to test your knowledge and problem-solving in action. With lots of languages and technologies to choose from, everyone will find something up their street.
I think this would also be good preparation before a job interview!

Scaplisum

Ok, so not a typical learning platform, but my good friend and awesome developer Vlad, has created this amazing IG community, and he posts his valuable content daily.
You will learn how to create a live search, infinity scroll effect or how to animate an icon and many many more, and you will realise that stuff you thought is difficult to achieve, is actually pretty easy to do! (at least I have realised that multiple times :D)
All you need to do is follow @scalipsum on Instagram, and if you would like to be a part of this great, ever-growing community, you can add yourself to the Discord channel too. Scalipsum also has a GitHub repository for all posts: https://github.com/scalipsum/insta-posts
I like the idea of learning something new while scrolling through your Insta feed, and that every post focuses on one particular feature at a time.

Or course there are a lot more websites providing good quality knowledge, but they come with a bigger price-tag. To name a few:

Liked this post? Share:

Subscribe to Blog via Email

Join 1 other subscriber

CATEGORIES

© 2021 KAT CODES

Theme by Anders Noren — Up ↑