teleren/devto huggingface dataset:
Switchable theme based Favicons
Tags: svg, favicon, css
Published: 2021-06-11 14:41:39

![GIF showing a demo  of theme based switchable favicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y903vvoambqgydbypmlq.gif)

SVG is by far the best option for any logo specific requirements. And the same applies for favicons too.

Another benefit of using SVG as a favicon is that you can have dynamic favicon that changes color based on users **system preference** - Dark Mode or Light Mode. And you don't even have to maintain multiple files.

You can use inline CSS within your SVG file to dynamically change the colors while the SVG is being loaded. In fact, you can use this SVG anywhere else in your project and it will still be dynamic without any additional changes.

To test it out, all you need is to save the below SVG (which is just a circle) in your project and add it to your HTML as favicon like so `<link rel="icon" href="svgfile.svg" />`

```XML
<svg viewBox="0 0 350 350" version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="350">

	<style>
		circle {
		fill: white;
		}

		@media (prefers-color-scheme: light) {
		  circle {
		  fill: black;
		  }
		}
	</style>

<circle cx="150" cy="150" r="150"  />
</svg>
```

Add favicon in your HTML code like below

```HTML
<head>
  <link rel="icon" href="svgfile.svg" />
  ...
</head>
```
___
### Additional References:
[Dark Mode Favicons - CSS Tricks](https://css-tricks.com/dark-mode-favicons/)
How to melt your processor
Tags: java, typescript
Published: 2021-06-11 14:30:31

Recently I have been building a software development lifecycle for Java RhinoJS, enhanced with Typescript backend.

We write JavaScript and get .ts feedback, its a nice middle-ground, I have never considered, I want the benefits of TS without the overhead of scaring others who don't know it (know your audience of developers).

In our product, we have some java classes injected into Rhino, and so I want type defs for when I write unit tests in our Mocha like Rhino framework. 
I turn to code-generation, Node.js is actually used to run rhino, and build stuff, its looping through a bunch of .jar files, running `jar tf TicTacToe.jar` to get the contents, aka the com.path.to.Class structure in slash format

I do some string transforms to stdout and write all possilbe 
java class path `.class` files to a ts file.

I got 380000 classes in a `type myLib`

:) fun
Learning Python - Week 1
Tags: learning, python
Published: 2021-06-11 14:21:31

Python… an easy to code, widely used, high-level programming language. I decided to dive into it this week by doing a certification prep course from Udemy. Even though I just started, I am having a lot of fun with it. I am just learning the basics like, variables, data types, basic arithmetic, indexing and slicing strings and a lot more. Next week I will be learning about functions, variable scope and the object oriented side of things. I want to take you on a journey through my python learning experience. What I will be doing is talking about one thing that really stood out to me this week, dictionaries.

Dictionaries have key value pairs and are not position oriented like lists and tuples, they are key oriented. The format for a dictionary would be `variable = {‘key’: ‘value}`. It reminds me of a JSON API page if you have it filled with information. It’s also, from what I can see, very easy to understand and read. It keeps information organized. You can add lists and tuples inside a dictionary too. Here is an example of a dictionary from the course I am taking:
```
my_list = [{'Tom': {"salary": 22000, "age": 22, "owns": ['jacket', 'car', 'TV']}},
                {“Mike”: {"salary": 24000, "age": 27, "owns": ["bike", 'laptop', 'boat']}}]
``` 
So let’s say that you need to access Mike’s age and show what he owns. Since my_list is a list with a dictionary inside of it you have to give the index of Mike’s dictionary. To do this you can say:
```
Mike_age = my_list[1][“Mike”][“age”]
Mike_owns = my_list[1][“Mike”][“owns”]
print(mike_age)
print(mike_owns)

# -> mike_age returns 27
# -> mike_owns returns a list of [“bike”, “laptop”, “boat”]
```
You wouldn’t use an index to get mikes information, you would use the key like “Mike” which will return the value `{"salary": 24000, "age": 27, "owns": ["bike", 'laptop', 'boat']}`. I used an index because Mike is the second index ([1]) of the list that Tom and Mike are in. Let’s say you now want to remove Mike, this is where the pop() method comes in. The pop() method can remove a key and its values but it can also grab the the key and its values if you set a variable to it like so:
```
mike = my_list[1]
# In a list so you have to say which index mike is in [1]
mike_info = mike.pop(“Mike”)
print(my_list) 
# This will just return Tom and his information
print(mike_info)
# This will return mikes info
```
This was a very fun thing to do this week for my learning experience with Python. You can access everything I learned on my [Github](https://github.com/EvanRPavone/LearningPython). I think I will enjoy Python a lot. I know I haven’t gotten far into it but we shall see!
Roll your own URL shortener using Netlify Redirects.
Tags: javascript, netlify, webdev, react
Published: 2021-06-11 14:12:52


 ---
title: Roll your own URL shortener using Netlify Redirects.
published: true
description: Learn how to create a dead simple URL shortener using Netlify Redirects.
tags: javascript, netlify, webdev, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/989f13eqvujmz639yl72.png
---
*Note: I am not affiliated with Netlify*

## The Problem

Earlier this week I had a problem. I had just spun a self hosted instance of Plausible Analytics and I wanted to create some campaigns for my personal website to track where users were coming from on the internet, whether clicking on links in my post, social media bio's, etc. The problem is in creating my campaigns, my URL's all ended up looking something like:

```plaintext
https://mydomain.com?utm_source=dev.to&utm_medium=post&utm_campaign=post-click-throughs
```

Not a great look if the service doesn't shorten the URL's. I wanted a solution where I wasn't reliant on other services to clean up my URL's.

## The Solution

What I needed here was a URL shortened that would shorten that hideously long looking URL into a shorter one, I had some spare domain names that were redirecting to my main domain so I decided to take `sunny.gg` and convert it into a URL shortener.

In my case I wasn't shortening URL's all the time so having a static solution where you couldn't create new URL's on the fly was acceptable, all I needed was the ability to shorten a set of long URL's into pretty short ones, and then share those around.

To achieve this I used Netlify and their redirects ability. Create a project that looks like this:

```plaintext
/app/index.html
/netlify.toml
/package.json
```

You can populate your `/app/index.html` as you see fit, it doesn't really matter in this case, just a bare HTML file will do. The netlify.toml file is where things get interesting:

```toml
[build]
  base = "/"
  publish = "app/"
  build = "echo 'no build command'"


# Primary redirect
[[ redirects ]]
  from = "/"
  to = "https://yourmainwebsite.com"
  status = 301

# Add as many of these as needed
[[ redirects ]]
  from = "/some-pretty-url"
  to = "https://mydomain.com?utm_source=dev.to&utm_medium=post&utm_campaign=post-click-throughs"
  status = 301

[[ redirects ]]
  from = "/foo"
  to = "https://mydomain.com/bar?utm_source=dev.to&utm_campaign=bar"
  status = 301

```

Thought somewhat of a crude solution, though I found it to work quite well, you can see it in action with my post footer on this post.

---

If you like this post, check out some of my other posts on [my blog](https://sunny.sh/post)
Managing Everyday Routines Impeccably With Smart Calendar Organizers
Published: 2021-06-11 11:40:20


The first aspect of success is top utilization of time. A few quite simple time management tools are able to do great things to the pursuit of aim attainment for everybody and anybody. One particular device is a calendar organizer that's created to function as a planner, reminder and scheduler, altogether. Calendar organizers offered within the industry come with different calendar ideas of days, weeks, months as well as years which provides an easily navigable format of incidents. Tracking events at different times during the year or maybe day gets simple with these gizmos.

The organizer widgets are incorporated in all kinds of housing devices starting from desktop computer systems to cell phones. Once set and given, they talk up the drivers to remind them about particular jobs, appointments, meetings and event. A heads up before the hour is of enormous support for individuals who are ditzy with managing many schedules because of their hands full. This would assure that you never miss something essential.

<b>Just how can You Organize Everything Efficiently with an E Calendar App?</b>

These practically constructed calendar applications have innumerable functions that allow shuffling and also management of schedules that are tight. Check out the amazing features one may use:

<b>Several Interfaces:</b>

The calendar applications feature a minimum of 10 different options of interface styles. Each one has a unique background color like pink, green, silver, black and pink. Though this's strictly for aesthetics, it nevertheless adds cheer and color to the UI.

<b>Priorities Set as Requested</b>

You are able to prioritize the tasks of yours in the applications, based on the importance of theirs. Marking the key jobs and functions are going to rule out the risks of missing any and indicating the goals will provide you a distinct view of your convention and conferences with their due time and dates. Not merely could it be chosen for professional objective, it also is a great tool for individual requirements also.

<b>Multi-Calendar Views</b>

As stated earlier, the calendar plan includes many calendar views. Aside Day perspective, the apps are stuck with Year, Week and Month views. The segmented view is useful in monitoring the efficiency levels of yours, events and daily activities and work progress.

<b>An Add On Document Editor</b>

Same as MS Word, these calendar programs have incorporated document editors. So, write the comments of yours for all the tasks, or just take down notes, it is an all-in-one affair.

<b>Timely Reminders Whenever Required</b>

Once you include an event to the calendar apps, it becomes kept in the app mind. The security alarm gets activated consequently at the specified period. Thus, even in case you have a tendency to forget any vital task, these apps certain are memory boosters.

<b>Find More Information</b>: <a href ="https://www.aiterminaldesk.com/">Two Tier Omni Standing Desk Deluxe</a>
Created products catalog mobile app using React
Tags: reactnative, ios, android, app
Published: 2021-06-11 13:41:46

**Molex**, one of the biggest manufacturers of consumer electronics parts headquartered in the US. 

They were looking for a solution that would allow their customers to not only browse their products but also give them detailed information on every product for better understanding. https://bit.ly/359PQVt

Our mobile app development team consulted the client to understand their requirements in detail. As the client wanted to showcase their products under a single interface, our expert developers suggested [building an app using React] (https://www.softwebsolutions.com/react-native-app-development-services.html). 

**The mobile app offers the following functionalities to our client:**

* Easy to use single interface to browse various products
* Search products quickly and efficiently
* Add multiple products and their details
* Ready-access to information on all the added products
* Visually compare within the same product family
* Detailed part number information
How to build a transcription service prototype in 90 minutes with Ruby on Rails and AWS
Tags: rails, programming, prototype
Published: 2021-06-11 13:32:27

---
title: How to build a transcription service prototype in 90 minutes with Ruby on Rails and AWS
published: true
description: Making a Product: Transcripto, ep. 3
tags: rails,programming, prototype
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
'Making a Product: Transcripto' is an mkdev.originals web series that will see a small team of two making a working product step by step, from conception to designing and coding to the release! Join Kirill and Leo on the journey of creation of TRANSCRIPTO, a small but useful service for transcribing audio into text.

In ep. 3, Kirill is building a prototype of Transcripto by writing horrible Ruby code with the least amount of fancy tools possible:

{% youtube EP1ymsk0a7o %}

***

* [Episodes 0 & 1](https://dev.to/mkdev/the-road-to-mvp-planning-first-steps-and-brainstorming-the-product-features-in-miro-kb9): Introduction & The Road To MVP.
* [Episode 2](https://dev.to/mkdev/how-to-design-a-logo-for-your-startup-with-the-help-of-an-artificial-intelligence-40l5): How to design a logo with the help of an AI.
* [Episode 3](https://dev.to/mkdev/how-to-build-a-transcription-service-prototype-in-90-minutes-with-ruby-on-rails-and-aws-3884): How to build a service prototype in 90 minutes.
* [Episode 4](https://dev.to/mkdev/making-website-design-for-a-transcription-service-in-2-days-3m4): Making website design in 2 days.
* [Episode 5](https://dev.to/mkdev/the-impostor-syndrome-episode-adding-features-with-ruby-on-rails-and-having-fun-with-figma-and-css-2f4m): The Impostor Syndrome.
* [Episode 6](https://dev.to/mkdev/how-to-calculate-aws-stripe-costs-define-the-price-for-your-product-and-make-a-profit-on-the-way-1f8d): How to calculate AWS & Stripe costs.
* [Episode 7](https://dev.to/mkdev/is-there-a-place-for-a-small-startup-launch-without-a-big-promotional-budget-202n): Startup Launch.
* [Episode 8](https://dev.to/mkdev/aws-copilot-and-another-6-ways-to-easily-deploy-apps-to-aws-1njb): AWS Copilot.
* [Episode 9](https://dev.to/mkdev/you-ve-launched-a-new-product-now-what-4dkm): Now what?
10 Must-Have Projects For A Web Developer Portfolio
Published: 2021-06-11 13:26:53

Hello friends,
Today I want to talk about 10 projects that would show your range of skills as a developer and likely make your portfolio stand out.

Any JavaScript developer knows that the best way to learn JavaScript is by building projects and that’s why I created [100Days of JavaScript Course ](https://www.udemy.com/course/100-days-of-javascript/?referralCode=9FB1A91BA3B143B2A261) to help beginners sharpen their JavaScript skills.
Please check it out.

So Here we go.
**1. Project 1: A Calculator.**
Knowledge pointer: JavaScript Arithmetic operators
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hobd9btelmnwx2bpu7e9.PNG)

2. Project 2: Digital clock.
Knowledge pointer: JavaScript date and time methods
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm8qixnee8e358esi9xr.PNG)

3. Project 3: Converter (weight, temperature).
Knowledge pointer: Math and calculation
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyktb8cgt3ff85sstp8g.PNG)

4. Project 4: Image Slider
Knowledge pointer: DOM Manipulation
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1stequlkg6523519zdv.PNG)

5. Project 2: CRUD + Local storage based project i.e dark mode toggle, ToDo app, etc.
Knowledge pointer: CRUD operation, Local Storage API
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w129c2mmgoh0trtcxd.PNG)

6 Project 6: Counter App.
Knowledge pointer: DOM Manipulation, Scroll Events
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmo5yp9prncnwrs864s6.PNG)

7. Project 7: JavaScript Game.
Knowledge pointer: DOM Manipulation, OOP
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uoiq7vi8pvbr8p2chqty.PNG)

8. Project 8: API/HTTP Request Project i.e GitHub profile app, recipe app, movie app.
Knowledge pointer: API/HTTP Request
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95sudx1gflal9xwb9rw3.PNG)

9. Project 9: Music player.
Knowledge pointer: Web API
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxgit58g27m5v63cvjo8.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls1wixeno6qq7ebo50z0.PNG)

10. Project 10: Credit card payment UI/UX Project.
Knowledge pointer: REGEX
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gdy2q2mx2blk9q3uw4u.PNG)

These are some of the projects we build in an easy-to-understand manner in our [100Days of JavaScript Course ](https://www.udemy.com/course/100-days-of-javascript/?referralCode=9FB1A91BA3B143B2A261)

**Thanks for reading this article.**
if you enjoyed it, feel free to connect with me:
**Website:**  [ZinoTrustAcademy.com](https://zinotrustacademy.com/)  
**Twitter:**  [@ZinoTrust ](https://twitter.com/zinotrust) 
**YouTube:**  [ZinoTrust Academy ]( https://www.youtube.com/channel/UClXxZm-GQr4S-NsHGIXgg4Q) 
**GitHub:**  [ZinoTrust ](https://github.com/zinotrust)
Ornio´s truths
Tags: values, innovation, culture
Published: 2021-06-11 13:09:51

###### When creating Ornio's values, the goal was to be able to utilize the values for own development and better collaboration. The values ​​should function as a set of rules in the workplace, and if challenges arose, the values ​​should put us back on track. For our partners and customers, the values ​​should show what we stand for and how we want to deliver our best - and so it has worked. Whether it's potential customers or colleagues, we have four truths that we value highly. Within my own field, I want to shed light on our four truths and how we want to market ourselves in the future.
 
**We innovate**

The first truth is that our services and products should not be available everywhere. We want to constantly develop and improve, so that we are at the top of every wave. For marketing, this truth will stand for how we continuously want to find new ways to engage, communicate and be creative. We want to be regularly updated and create solutions for how we can reach the target group in the best possible way. Social media is constantly growing, and every day new trends are created. It is therefore very important to have an interest in the subject and the challenges the market offers.
 
**We are committed**

We are committed to delivering a unique product that we at Ornio are proud to present. This requires cooperation and loyalty, both internally and externally in the company. As an interdisciplinary team, it is therefore important to share knowledge to achieve results and utilize our burning interest in achieving the goals. Commitment involves, among other things, maintaining deadlines, fulfilling wishes and keeping agreements. We at Ornio use this truth to constantly remind ourselves that we are committed, for ourselves and others, to do our best.
 
**We are credible** 

The third truth is that we should be trustworthy and sincere at all times. For social media, this is a central value, where we want to convey sincere information and commitment in what we post. Nothing should be done halfway or feel wrong. For us, it is important that our followers and customers feel safe and taken care of, in the information we provide. Within the team, it is this value that makes us good, in that honesty makes the products and service better. Because if one does not show honesty, we will not be challenged by each other to do a better job.  

**We're excellent** 

This is a truth we are proud of. We at Ornio are good at what we do because we are a team. By learning from each other, collaborating, sharing knowledge and praising each other, we will always grow for the better. Knowledge is challenged by constantly new courses, collaboration is improved with weekly team building and patience is challenged with an eternally long period of home office in the pandemic.

...

Finally, I would like to thank you for reading this blog post and encourage you to follow us further for more posts and updates. Feel free to send a message on social media if you have requests for content or blog posts, by using this [Link] (https://www.facebook.com/ornio.no).
Everything I learned at the first job I had as a developer
Tags: webdev, beginners, learnings, newbie
Published: 2021-06-11 13:05:08

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

If you didn't new already, last summer I had a job as a web developer for 3 months

It was at a local startup

You can read more about how I got it from here

https://blog.vlddev.live/how-i-got-a-job-as-a-developer-at-16-1?guid=0cd9e036-aad5-4209-998b-38df8f57fcf4&deviceId=8e582af3-dbdf-4370-918b-080f344a9692

Now let's continue with what I learned

### 1. Communication is key

In the beginning, I was afraid to ask questions and that was a huge mistake

Why?

Because I spent one day on a problem I could solve in 4 hours

Once I started asking more questions I become more productive

And people love to see that you ask questions

### 2. Learning Git is a must

I never really understood how important Git is until I worked at this job

In those 3 months, I worked with Git every single day

So please take the time to learn

It will save you a lot of time and struggle in the future

### 3. You need to test your code

I had no idea what testing was but after one week I realized how important it is

It saves you a lot of time of finding bugs and all that

It's simply not worth it to push code without testing it

### 4. Everyone has Impostor Syndrome

When I joined this startup my impostor syndrome was huge

I felt like a loser but I realized that I'm not the only dev that feels that

One dev I worked with made me understand that this is normal and I shouldn't worry about it

### 5. Reading the docs is a life hack

One day I had to work with a new technology I never worked with before

I didn't read the docs and just jumped into writing code

Huge mistake

I wasted a lot of time that could be saved by reading the docs for one hour

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._