teleren/devto huggingface dataset:
Portfolio micro-site
Tags: dohackathon
Published: 2021-01-05 17:25:46

## What I built

A static portfolio micro-site of some UI design screenshots 

### Category Submission: 

Personal Site/Portfolio

### App Link

[https://portfolio-microsite-qt7i6.ondigitalocean.app/](https://portfolio-microsite-qt7i6.ondigitalocean.app/)

### Screenshots

![Portfolio micro-site](https://dev-to-uploads.s3.amazonaws.com/i/1645elyr7yygu1py8pii.png)

### Description

List of short projects in GitHub of UI Design to test out animations, interface functionality and trends

### Link to Source Code

[https://github.com/xhasu/portfolio-microsite](https://github.com/xhasu/portfolio-microsite)

### Permissive License

MIT

## Background
(What made you decide to build this particular app? What inspired you?)
Create one entry point to show all my projects in GitHub using the new UI trend Glassmorphism :smiley: 

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
Just deploy static app, select GitHub repo and :boom:.
I learned how to combine the perfect CSS properties to achieve the effect of glass


### Additional Resources/Info
[https://github.com/xhasu](https://github.com/xhasu)
some projects still WIP :sweat_smile:
Do as I Say, not as I Do
Published: 2021-01-05 17:25:14

One fallacy I've learned recently as a senior developer is that I can always advise others to do as I have done.

That is a myth because it does NOT always lead to success!

When faced with a decision, my natural tendency is to go with what's worked for me in the past. But, when advising others I have to remember that what's worked for me may not work for someone else. 

As a senior developer, I can take more risks with my work. If I mess up, I have earned enough credit, trust, and goodwill with my coworkers/management that they know my mistake is not a reflection of shoddy workmanship or unprofessionalism. It's not because I don't care about my work or my team or the organization. There is less room for bad assumptions. But the same can't always be said for someone else, particularly if it's someone junior or perhaps new to the organization.

Sometimes, there is a valid reason to say: *Do as I say, not as I do*.
A simple text editor in python | video & source code
Tags: python, tkinter, tutorial, linux
Published: 2021-01-05 17:19:34

One day I decided to write my own text editor in Python. You can see how it turned out in the video. And I'm attaching the repository with the code. Thanks

{% youtube DDFHtTIPvZ0 %}

{% github alexborsch/cdl-notepad no-readme %}
[How to write a simple text editor](https://coderlog.top/programmirovanie/tekstovyj-redaktor-na-python-tkinter/)
I procrastinated. Coding frenzy incoming
Tags: dohackathon
Published: 2021-01-05 17:17:40

The [DEV + DigitalOcean Hackathon](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k) started on December 10.

> It's the last week to join the hackathon!

I had [lofty goals](https://dev.to/chris__sev/i-m-joining-the-dev-hackathon-here-s-what-i-m-going-to-build-10jn) of the things I wanted to build. 

- Personal Site
- Wedding Site
- URL Shortener App
- One Time Secret App

This post is me saying to the world that I am still going to build all these things!

Procrastination can happen due to the holidays and the new year. Not anymore!

I'll be building this all on my [Twitch](https://twitch.tv/chrisgetsbetter). Join me there for the next few days.
Looking for testers/honest feedback from AR/VR developers!
Tags: augmentedreality, virtualreality, development, showdev
Published: 2021-01-05 17:14:52

We're looking for seasoned AR/VR developers to test and provide honest feedback on our platform!

[**echoAR**] (www.echoAR.xyz) is a cloud platform for augmented and virtual reality (AR/VR) that provides tools and server-side infrastructure to help developers & companies quickly build, manage, and deploy AR/VR apps and experiences.

Signing up is totally FREE and we even set up a dedicated registration page for you to get free premium access [**here**] (https://console.echoar.xyz/#/auth/register-promo?code=DEV_echoY21) (no credit card required!).

We would love to hear your thoughts in this [**short survey**] (https://go.echoar.xyz/uYDV).

By completing the survey, you will receive an additional 1-month FREE business tier access to our platform.

Thanks in advance!
www.echoAR.xyz


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lhe5jwhmkf1dzutm6kcb.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m2c0sd6768xdsc38mc4b.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qt0u23bgy19wma0bagxe.jpg)
Functions and Methods in Java
Tags: javascript
Published: 2021-01-05 17:01:40

## What is a function? </a>
### A function is a block of code designed to perform a particular task, this task is executed when invoked: </a>
``` Java
const greetings = function(){
console.log('Hello User');
};
greetings();
```
## What is a Method? </a>
### A method is quite similar to a function, however the way they are invoked and defined differ: </a>
``` Java
const welcome = `Welcome ${userName}`
let userName = 'Daniel';
let welcomeAlert = welcome.toUpperCase();
//* the line of code above uses a method called toUpperCase *//
console.log(welcomeAlert);
```
## What is an argument? </a>
### Function parameters are the names listed in the function definition. Function arguments are the real values passed to the function: </a>
``` Java
const speak = function(name = 'Daniel', time = 'night'){
//* the parameters are the variables "name" and "time" *//
console.log(`Good ${time} ${name} ); }
speak('Alejandro', 'morning')
//* the code above is the argument that alters the function's result *//
```
## How to return a value: </a>
``` Java 
const calcArea = function(radius){
let area = 3.14 * radius**2;
return area;
}
console.log(area);
//* This function will log the results into the console *//
```
## Arrow Functions </a>
### Arrow functions allow us to write shorter function syntax. If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword. This only works if the functions has one statement.
``` Java
const calcArea = (radius) = {
    return 3.14 * radius**2;
}
//* This function is the same as the one above, it is more compact *//
```
## What is the Foreach Method? </a>
### This method calls a function once for each element in an array, in order: </a>
``` Java
let group = ['Carolina', 'Daniel', 'Piper']
const logGroup= (group, index) => {
console.log(`${index} - hello ${group}`);
group.forEach(logGroup);
```
## Callback Functions </a>
### A callback is a function passed as an argument to another function: </a>
``` Java
function myAlarm(){
console.log('Wake UP!')};
function warning(){
console.log('You've got 10 minutes left!')};
warning();
myAlarm();
```
## Resources </a>
### www.w3schools.com
The Net Ninja's Udemy Course </a>
[Video] How to proxy your web traffic via your Linux Server without a VPN
Tags: devops, linux, ubuntu, codenewbie
Published: 2021-01-05 17:00:40

In this video, I will show you a pretty cool and easy way on how to proxy your web traffic without having to install a VPN or do any special server configuration by just using SSH tunneling!

All you would need is a server and SSH access.

You can use my DigitalOcean referral code to get a free $100 credit to spin up your own servers:

> [Free $100 DigitalOcean credit](https://m.do.co/c/2a9bba940f39)

The command that you would need to use is:

```
ssh -ND 1080 root@your-server.com
```

There would be no output. This would open a socket that we would use to connect to and proxy our network traffic.

Rundown of the command:

* `-N` - Do not execute a remote command. This is useful for just forwarding ports also hides the output from the SSH connection.

* `-D` - 1080 creates a local “dynamic” application-level port forwarding, in this case 1080, on your local computer. Whenever a connection is made to this port, the connection is forwarded over the secure channel, and the application protocol is then used to determine where to connect to from the remote machine. Currently the SOCKS4 and SOCKS5 protocols are supported, and ssh will act as a SOCKS server.

Once you have the socket ready you can use any browser to connect to the SSH tunnel. In my case, I would use Firefox.

You need to go to Preferences -> Advanced -> Network -> Settings -> And update your Configure Manual proxy configuration.

Update the `SOCKS HOST` to `localhost` and the port to `1080`. Make sure to choose SOCKS v5.

This is pretty much it, now all of your Web Traffic would be routed through your Web Server:

To stop the SSH tunnel, just interrupt the SSH connection and change your Firefox settings back to No Proxy.

{% youtube GYh8YHrk_zQ %}
Personal Portfolio: Design
Tags: dohackathon, design, uiux
Published: 2021-01-05 16:56:59

As I mentioned in the previous post, I decided to take inspiration from Farmville and started building out my own city. 

## Phase 1
One cold-Canadian Saturday morning, I sat down and started laying down the ground for my town, literally, well on Photoshop! I decided to create a map with multiple clickable objects which when clicked, will give you more information about that event associated with my life. After hours and hours, I finally had something planned out. 

![town](https://i.imgur.com/p7Ka6TM.jpg)


**Friendly note:** Please remember to save your Photoshop files at fixed intervals, randomly my laptop decided to die and Photoshop's autosaved feature bailed on me!

## Phase 2
After adding 100s of layers on photoshop for individual map objects, I felt accomplished. I could see my vision of the town coming to life. My first thoughts were to ensure the town covers the entire visible screen of the webpage. While that looked good, I gave myself a couple of days to try to think if I can come up with something else; something even better. I took some time to view further design sources until I stumbled on the idea of a floating island. 

What if my entire webpage is covered with an end-to-end image of my town, but it contains a floating island with my town on it? I thought to give it a shot. So, I designed a floating island.

![island](https://i.imgur.com/QLIRp4m.png)

## Phase 3
Now, it was time to take the town created in Phase 1, to be put on to this island. This seemed simple at first, but it took me some time to weed out the unnecessary layers I had and add minor adjustments to mark it complete. 

![island-town](https://i.imgur.com/Ybh8l5M.png)

## Phase 4
Lastly, I needed to highlight the items that would be clickable by the user. I came back to this after I had started working on the development of the webpage. I initially had thought of adding an animation around the building, but because a responsive webpage makes it tough, a lot tougher, to handle image resizing, I decided to have a static glow around these items on the map. Finally, I had this:
![island-town-glow](https://i.imgur.com/R5h3mPZ.png)

## Phase 5 (Let's keep it a secret, for now)
I hope this post gives you a sneak peek into my island-town, but you may ask, how does the final website look? There's some more design to it, but I'll save the final sauce for the submission post. 😉 

See you soon!
Understanding Ruby On Rails in 10 Tweets
Tags: programming, webdev, ruby, rails
Published: 2021-01-05 16:33:20

#Introduction
Ruby on Rails is a full-stack web app building framework made with the Ruby programming language.

Ruby has clean, simple syntax without tons of parenthesis, brackets, or semi-colons

Github, Shopify, Calendly, ThePracticalDev, eggheadio & ConvertKit were built using Rails.

By the end, you will have a brief understanding of Ruby On Rails.


1. {% twitter 1346123121720496128 %}
2. {% twitter 1346123138241859585 %}
3. {% twitter 1346123154738073605 %}
4. {% twitter 1346123168046592000 %}
5. {% twitter 1346123186014973952 %}
6. {% twitter 1346123198912458752 %}
7. {% twitter 1346123215152754688 %}
8. {% twitter 1346123255220994049 %}
9. {% twitter 1346123274351222785 %}
10. {% twitter 1346123311093309441 %}


#Concolusion
Ruby on Rails is, as I think of it, is very similar to Django and very fun. Coming across those tweets by @willjohnsonio on Twitter I couldn't resist sharing them here.

<hr>
PS: You can find him [here on twiiter](https://twitter.com/willjohnsonio) and here [here on dev ](https://dev.to/willjohnsonio)
And remember kids... When working from home zip your files...
Tags: productivity
Published: 2021-01-05 16:27:02

Damn i can be slow some times. Have been working from home since febuary and realized the following now: 

When you are working from home via vpn and there is maybe also a firewall involved and you have to copy a big bunch of files. 

Just put them in a zip file. It's way faster! 

![ok](https://media.giphy.com/media/l0MYHEI0xktKCVjri/giphy.gif)

I will now go to my room and cry for a little while... 

![dooh](https://media.giphy.com/media/14aUO0Mf7dWDXW/giphy.gif)
Docker Image Size Reduction
Tags: docker, image, size, reduction
Published: 2021-01-05 16:22:58

---
title: Docker Image Size Reduction
published: true
description: Ways to reduce docker image sizes.
tags: docker, image, size, reduction
cover_image: https://images.unsplash.com/photo-1595587637401-83ff822bd63e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1977&q=80
---

Recently I needed to dockerize an application for a virtual onprem. However, at the end of my project I ended up with a docker image that was 8.4 GB. This is HUGE in terms of size for a container. Thus, I went on a short journey to minimize the image using the following techniques.

1) Prevent APT from installing recommended packages by adding the following parameter to every apt-get install command: `--no-install-recommends`.

2) Added a `.dockerignore` file. This allows one to define a list of folders/file globs to ignore when building your Dockerfile.

3) Reduced the amount of layers by merging related commands.

4) Clean up apt cache via: `&& rm -rf /var/lib/apt/lists/*`.

5) Used [dive](https://github.com/wagoodman/dive) to inspect my image layers to analyze and remove extra unused packages/files.

6) I stumbled across a tool [docker-slim](https://github.com/docker-slim/docker-slim) that can supposedly reduce a container's size by up to 30x.

7) Check your base image. Think about running an alpine version of the container if you haven't already.

8) Use multistage builds.

9) Use your layers wisely. Put commands that are more likely to change towards the bottom.

10) Lint your dockerfile using [FromLatest](https://www.fromlatest.io/)

Sources:
https://ubuntu.com/blog/we-reduced-our-docker-images-by-60-with-no-install-recommends
https://towardsdatascience.com/slimming-down-your-docker-images-275f0ca9337e
Matt's Tidbits #87 - Finding missing Android sources
Tags: mattstidbits, android, androidstudio, tidbittuesday
Published: 2021-01-05 16:22:16

Happy New Year!!! What better way to ring in 2021 than with a helpful tidbit? [Last time, I wrote about some tips for debugging Gradle files.](https://medium.com/@matthew.b.groves/matts-tidbits-86-debugging-gradle-files-6a9bceb4fea2) This week, I want to share how to get missing Android sources to show up in Android Studio.

Have you ever seen the message `"Sources for 'Android API <#> Platform' not found"`? This can be a particularly annoying one, especially because it can be a little difficult to fix.

You may have likely run into the same issue I did, which was to download the sources (or refresh them), only to still see the error message. I bet you also tried restarting Android Studio, all to no avail.

Thankfully, we have Stack Overflow, and they have answers for just about anything.

And, the best news is, it's very easy to fix:
1. Within Android Studio, navigate to Settings/Preferences -> Appearance & Behavior -> System Settings -> Android SDK.
2. Click "Edit" to the right of the Android SDK location near the top of the window.
3. Click "Next" all the way through the wizard until it has completed.
4. Then restart Android Studio.

That should do it! Now you should be able to view Android sources again - which you might not realize how much you've been missing until you're able to see them again.

Here's the original post if you'd like to go upvote the working solution: https://stackoverflow.com/questions/36814755/sources-for-android-api-23-platform-not-found-android-studio-2-0/37283886#37283886

I hope your new year is off to a great start! And, please follow me on Medium if you're interested in being notified of future tidbits.

*This tidbit was discovered on December 18, 2020.*
[Day 1] 100 Days ReDo
Published: 2021-01-05 16:03:01

I completed day one of my redo of the 100 days of code yesterday. I currently work as a software engineer so my goal for this is to gain more knowledge to help me be more marketable.

With this I decided to begin by learning ReactJs. Currently I have only worked on backend projects using .Net so moving to front end has been an odd change.

For day one I started by purchasing a Udemy course (linked below) that I personally recommend. It has a ton of great content and I have already learned so much. I will link my GitHub repo for my notes and project so you all can see my progress!

Things I learned:
Components
State
How to utilize functions and classes

Links:
Udemy: https://www.udemy.com/course/complete-react-developer-zero-to-mastery/

Github: https://github.com/ChaseStruse/Notes/tree/master/React
Topics to understand when learning React
Tags: react, javascript
Published: 2021-01-05 16:00:03

This is a list of all the useful topics and gotchas that I think might be useful for anyone looking to gain some further insight into some of the cool features/quirks of React.(I will try to update this article with links to resources.)

This does not include class based components and their explicit lifecycle methods.

Note: This is not a complete guide or a comprehensive list of resources but rather a collection of the main things I consider to be important React knowledge.

### Easy project setup with Create React App
[https://create-react-app.dev/docs/getting-started/](https://create-react-app.dev/docs/getting-started/)
### What is Component driven development?
[https://github.com/component-driven/awesome-list#components](https://github.com/component-driven/awesome-list#components)
### Unidirectional data flow?
[Flavio Copes explains it pretty well](https://flaviocopes.com/react-unidirectional-data-flow/#:~:text=Working%20with%20React%20you%20might%20encounter%20the%20term%20Unidirectional%20Data%20Flow.&text=In%20general%20this%20concept%20means,view%20and%20to%20child%20components)
### Functional programming concepts
### What is the Virtual DOM?
### JSX, props? - Make reusable components and communicate with them using `props`
### Hooks? `useState`, [`useEffect`](https://reactjs.org/docs/hooks-effect.html) etc.
### Debugging strategies, React Dev Tools, Redux Dev Tools
#### Chrome extension links
React Dev tools - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Redux Dev tools -
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

### PropTypes
Typechecking with PropTypes - [https://reactjs.org/docs/typechecking-with-proptypes.html](https://reactjs.org/docs/typechecking-with-proptypes.html)
### The `children` prop
### Controlled components
### React Context API
### Refs?
useRef - Another hook 😇
### State management with Redux
Redux does not actively enforce state immutability in its store or reducers, that responsibility falls on the programmer.

What are `mapStateToProps`, `mapDispatchToProps`?

Free Egghead course on Redux - [https://egghead.io/courses/getting-started-with-redux](https://egghead.io/courses/getting-started-with-redux)

Redux tutorial by Dave Ceddia - [https://daveceddia.com/redux-tutorial/](https://daveceddia.com/redux-tutorial/)

An explanation of how Redux works - [https://www.youtube.com/watch?v=3sjMRS1gJys&feature=youtu.be](https://www.youtube.com/watch?v=3sjMRS1gJys&feature=youtu.be)
### Some other things to consider
Code style guide?
Prettier, Linter
How to add badges to my GitHub repository
Tags: github
Published: 2021-01-05 15:53:42

We all have seen a lot of GitHub repositories with a lot of badges, something like this:

![shields badges](https://dev-to-uploads.s3.amazonaws.com/i/vszujut9j3261q1ftzqo.png)

And every single one of us, the first time we saw them, we thought 'wow, that looks cool, I want that'. And luckily, it's fairly simple to implement it!

Let's start by talking about [Shields.io](https://shields.io). 
Shields.io is a tool used by a lot of developers to show some info about their GitHub repository. Most of the stats related to a repository can be shown by using this, stats like:

- Code coverge percentage
- Stable release version
- Contributors
- Code coverage
- Check if the tests are passing

And many other things that you can check at their [official GitHub repository](https://github.com/badges/shields).

But we are here to see how this works, so let's try it, shall we?

First, I'm going to create a new repo from scratch.

![demo repo](https://dev-to-uploads.s3.amazonaws.com/i/cj5phflaofm1slhq8232.png) 

Nothing too fancy as we can see. Let's say I wanted to add my Twitter to the readme. That would be easy right? Just add a link and that's it. But if we wanted to do it a little bit prettier and more professional, we could use Shields.io for this.

The first time we enter the webpage, we should see something like this:

![shields](https://dev-to-uploads.s3.amazonaws.com/i/1lhnvw2xd0c0pyyg5l3z.png)

As we can see, there are a lot of options to choose from. But let's focus on our goal, the Twitter badge. If we search 'twitter', we see some options, one with just the logo and one that shows also the followers. Let's use the second one, so we click on it. Now we should see this:

![badge twitter](https://dev-to-uploads.s3.amazonaws.com/i/axvgppqewwzfu9uc9k9d.png)

We can also get fancy and add some styles, but this time we'll stick to a simple 'Follow me!' text.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8w45xtklgyjcumbjkzrc.png)

Now, let's click on the arrow on the left of the huge button that says 'Copy Badge URL' and click on 'Copy Markdown', and let's paste it on our own readme. This is what it looks like:

![final readme](https://dev-to-uploads.s3.amazonaws.com/i/8pwqxw6e4dp0hivs6txn.png)

Now we have a fun little button to show our Twitter to the people!

Of course, showing a Twitter badge is not the most interesting thing we can do with this tool, but I think is a great example to show it and check how easy it is to use it.

Now it's your turn to find what are the most convinient badges to show on your repository, if you find an interesting one, let me know!
Today I learned - more about rspec.
Tags: rspec, ruby
Published: 2021-01-05 15:45:03

> Today is 04-01-2021

I was writing a callback test in [RoR](https://rubyonrails.org/) with [RSpec](https://rspec.info/).

When I noticed that I forgot the standard how should I write the `description` for `after_create` and this is the answer.

```ruby
describe "#after_create"
end
```

The convention for `class methods` says, they should be writing prefixed with `.`.

The convention for `instance methods` says, they should be writing prefixed with `#`.

Example.


```ruby
# class methods

User.actives

description ".actives"
end
```

```ruby
# instance methods

current_user.send_welcome_notification

description "#send_welcome_notification"
end
```

I hope this will be helpful, see you tomorrow!