teleren/devto huggingface dataset:
Day 95: Vue project contd..
Tags: 100daysofcode, vue, design
Published: 2020-10-19 20:44:30

The was trouble in paradise today when I couldn't figure out how to update the content on the button component. A phone call and slots did the trick.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iot40it3lsd1b5tzs0mx.png)
I tried using props too but I haven't figured out how to display a prop as content on the page.

I designed the next section of Kathy's Kitchen website
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vluemewo2scipu4t4fid.png)

Then implemented the food menu.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jcju4tnyfosdj4r3vyyq.png)

The blue shade (or rather what I thought was blue) feels off on the webpage. It's a completely different color. I might as well work with white.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pmuwnkj3oludsx4wz27a.png)

_That's it for day 95!_
Pairing with Community Member Eliot Sanford
Tags: devstream, pairprogramming, javascript
Published: 2020-10-19 20:40:03

On October 8th, DEV Community member Eliot Sanford joined Christina and I on the pairing stream to work on an accessibilty issue.

We had a lot of fun and got a proof of concept running on the frontend to lint markdown. Here's the full stream.

{%youtube LBDqggawwNE %}

Eliot is still working on the issue, so feel free to follow its progress.

{%github https://github.com/forem/forem/issues/4807 %}

You can also find the three of us all over the web here:

Eliot:

* [Twitter](https://twitter.com/techieEliot)
* [Website](https://techieeliot.com/)

Nick:

* [Twitter](https://twitter.com/nickytonline)
* [Website](https://iamdeveloper.com/)
* [livecoding.ca](https://livecoding.ca)
* [YouTube](https://youtube.iamdeveloper.com)

Christina:

* [Twitter](https://twitter.com/coffeecraftcode)

Looking forward to seeing you on future streams! [Follow DEV on Twitch](twitch.tv/thepracticaldev) to be notified when future streams begin. Happy Hacktoberfest!
KeepassXC
Tags: beginners, github, opensource, discuss
Published: 2020-10-19 20:28:40

So I started with KeepassXC password manager repository on Github.
I tried this because I have a prior experience in Qt Framework and because it was in C++. KeepassXC is a very safe and free password manager and one can use it cross platform and sync all your passwords across all your machines (will describe the process in another post).

So I was looking at the issues and found a `feature-request`. This one requested an option to change the theme color of the application according to user's will, that user can choose from a color pallet.

I though I can work this out. I searched online how to change colors of application in Qt. I made a dummy application and tried to do that. I managed to do it successfully, so I went ahead and asked maintainer to assign this to me.

The maintainer is very supportive of the learning and assigned this issue, and I made some updates and showcased my work with a video, screenshot and a gif so that it will be easy to understand the working. I implemented what the user asked and would have changed it further, but the maintainer said that this is experimental and may never be merged in the master.

So at the end my work did not be converted to a Pull Request but the maintainer asked me to keep exploring and make changes and manipulations at will for learning purposes. It was good to see that he was encouraging me, and I will do further learning with it, but for now I have an assignment to complete and have to show successful PRs for it.
Hence, I decided to once again go ahead with the hunt for another repo to work on.
لماذا هندسة البرمجيات؟
Published: 2020-10-19 20:28:22

يدق السؤال القديم، لماذا اخترت هذا المجال؟ حسنًا، لكي أكون صادقًا تمامًا، لم أكن أطمح في الأصل لأن أصبح مهندس برمجيات أثناء نشأتي. مع مرور الوقت، مررت بمجموعة متنوعة من المسميات الوظيفية، مثل  الدعم الفني، ومساعد مهندس. لم يوفر أي من هؤلاء ما يكفي من الإبداع والتحدي لإبقائي سعيدًا. بعد ذلك، صادفت بعض مقاطع الفيديو على اليوتيوب تناقش الدورات التدريبية والأشخاص الذين أجروا تغييرات كاملة في حياتهم المهنية واكتشفوا حبًا للبرمجة. أنا أصبحت مهتم أكثر وأكثر! شاهدت المزيد من مقاطع الفيديو، وبحثت عن أفضل الدورات التدريبية، ومارست البرمجة كلما استطعت. من خلال القيام بكل هذه الأشياء، اكتشفت شغفًا بهندسة البرمجيات في داخلي. تسمح لي هندسة البرمجيات بالتحدي وحل المشكلات بالإضافة إلى الإبداع. أحب أن البيئة دائمة في تطور. لا أرغب في معرفة كل شيء؛ أرغب في تعلم الجديد باستمرار والتكيف مع التغييرات الجديدة. أعطتني هندسة البرمجيات كل ذلك. أنا متحمس لمستقبلي كمهندس برمجيات.
Why I switched from hand-drawn sketches to Figma
Tags: uiweekly, figma, frontend, design
Published: 2020-10-19 20:28:08

![marvin-meyer-HN1roKF-DS4-unsplash](https://dev-to-uploads.s3.amazonaws.com/i/oi80q2qlf0b6o0xuxf20.jpg)
  "Why didn't you find me sooner?" That's what I'd say to [Figma](https://www.figma.com/) if he/she managed to speak/understand English.

As a code newbie, I was told to always draw out a sketch of what I intended to create and also work out a pseudo-code before jumping on my appealing [Material-themed](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) VSCode editor. One major thing that was missing from this very useful piece of advice was *what* to use to "sketch" out my idea. So, like most people I saw, I pulled out a pen and a pad to try and replicate my mental pictures of this great web-app I had brewing.

While hand-drawing is better than not sketching at all, it had a few hinderances for me.
Simply put, I am not a very talented doodler. So, once I drew out boxes for where what component should go, and the relative sizes, I was done sketching.
> This resulted in something I call "Designing on-the-go" (using CSS to try deciding what a page should look like by trial-and-error).

Now, this doesn't sound like much of a problem, considering that I made two nice apps this way. But here's how it can be an issue:
- I found that writing CSS to create a component/page that I only had a mental image of is more tasking. It was easier to get frustrated because of the trial-and-error method I employed.
- Secondly, you can play around **easily** with colors, gradients, font sizes, alignment etc. on Figma without having to tweak your CSS a 1000 times (I can't be the only one)
- Thirdly, and more importantly, having a design protoype trained me to replicate designs with code. It doesn't get simpler than "here is what I want my app to look like... write code to bring it to life".
*Moreso, when you have a nice-looking design, you'd WANT to replicate it!*!!  

I'm more fond of Figma because of it's VERY shallow learning-curve. A 5-minute video was enough for me to get started!! 
There are a few other well-known design options out there: Adobe Photoshop, Sketch, etc.

Regardless of which platform you are more comfortable with, I highly recommend taking some time to create a starting design before you jump to your preferred code editor (VS Code rules, btw!)

Let me know your thoughts in the comments :-)
First hacktober
Tags: hacktoberfest
Published: 2020-10-19 20:23:42

When I started with the idea of learning what this event is and why is there so crazy about it everywhere I had no knowledge about the whole program. Few researchs , video and then I was ready and excited about it. I remember when my first PR got accepted I was more than happy and crazy at that moment and following days new rules and I fell most valid rules where add and I respected that and followed it. Finally I completed the challenge and iam satisfied .
Rest, Spread and Destructuring in JavaScript
Tags: javascript, computerscience, codenewbie, beginners
Published: 2020-10-19 20:16:28

* In java script rest , spread and destructuring are introduced to reduce the number of lines of code which are very useful for developers to minimize number of lines of code.

### Rest
* Rest combines all the given numbers or anything into an array.
* For example, 

> If you want to find sum of 5 numbers

```
function sum1(...arr)
{
    let sum=0;
    for(let i=0;i<arr.length;i++)
    sum=sum+arr[i];
    return sum;
}
console.log(sum1(1,2,3,4,5));
```
Another Example

> Given array of numbers sort the array

```
const arr1=(...arr)=>{
    let i,j;
    for(i=0;i<arr.length;i++)
    {
        for(j=0;j<arr.length-i;j++)
        {
            if(arr[j]>arr[j+1])
            {
                let temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
console.log(arr1(3,2,4,1,5));
```

### Spread
* Spread can be used to split multiple elements that are combined

> 
```
let day1 = [ "1", "2" ];
let day2 = [ "3", "4" ];

let combined = [ "0", ...day1, ...day2 ];
let combined1 = ["0",day1,day2];
console.log (combined);
console.log(combined1);
```
> Output

`[0,1,2,3,4]`
`[0,[1,2],[3,4]]`

>To find maximum of given numbers
```
let findMax=(...arr)=>
{
    arr.sort;
    return arr[arr.length-1];
}
console.log(findMax(1,2,3,4));
```

###Destructuring 

It is used to reduce the code by dividing the arguments of a structure

```
var student={
    name:'xyz',
    subject:'ec',
    cgpa:'10',
}
let res=(student)=>
{
   let{name,subject,cgpa}=student; //Here we are directly assigning to split
    return `Hi this is ${name},from ${subject} branch with cgpa of ${cgpa}`;
}
console.log(res(student));
```
* Without destructuring
```
let res=(student)=>
{
   name=student.name;
   subject=student.subject;
   cgpa=student.cgpa;
 //Here more lines of code
    return `Hi this is ${name},from ${subject} branch with cgpa of ${cgpa}`;
}
console.log(res(student));
```

* Destructuring in function argument
```
function greetings ({ name, subject,cgpa}) {
    return `Hi, I am ${name}.
        from ${subject} branch
        with cg of ${cgpa}`;
}
console.log(greetings(studentDetails));
```

Source where I learned: [link](https://github.com/MadhavBahl/dailyjs)
Hacktoberfest 2020 slowly heading towards the end
Tags: hacktoberfest, github
Published: 2020-10-19 20:15:52

## Yes, we can do it! Wait, I just did it :-)

Happy to say, I succeeded in getting things done, hopefully the right way, once again.

## The motivation

My contributions were neother large, nor within any really famous repo. However, I tried to follow the rules and make a real contribution, as always. My PRs got not only approved, but also some "claps" came by :-)

Such appreciation always fills me with energy I save for the future contribution efforts (within or besides Hacktoberfest).

## Don´t give up, keep rolling

It comes to a good use the times I struggle to find a suitable repo and/or issue, follow the contribution guidelines and finish the task. Of course, it´s not easy every time you give it a try. Thankfully, the community is so supportive and will guide you, should you get lost or get in need of help.

## Make contributions, not SPAM 

All in all, Hacktoberfest 2020 is slowly coming to its end. But there´s still time to contribute your work in some of the participating repos in order to get 4 PRs completed or just for the good feeling.

## One advice, if I can

There are plenty detailed tutorials on contributing to open source. If you´ve read this far, let me give you just one advice.

Do not choose inactive repos. Rather, find some actively maintained and yet better popular and widely used repos. There you can make a really meaningful contribution which will come to a good use.

Happy contributing :)

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
Day 40 of 100DaysOfCode
Tags: 100daysofcode, javascript, sass, codenewbie
Published: 2020-10-19 19:52:24

Hello!

Today was a pretty normal day working on the Sass challenges on freeCodeCamp. I liked learning Sass as it makes writing css a little simpler in my opinion. 

Tomorrow I will start the React challenges. If been looking forward to them and will hopefully have fun learning React. 

### What I did today:

#### 1. Finished the Sass challenges on freeCodeCamp
https://www.freecodecamp.org/learn/front-end-libraries/sass

#### What I learned from it:
* What is Sass
* How to use mixins and variables
* Using logic on style sheets
* Making loops with Sass
* What are partials and how to use them


#### Time spent learning:
Task 'FCC'. Elapsed time: 42 min 29 s

#### Total time: 42 min 29 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).

**Outro**
Thank you and see you all tomorrow!
UI Design Of A Kanban Application
Tags: ux, ui, uiweekly
Published: 2020-10-19 19:50:51

# Introduction
The objective was to design a Kanban application targeted for use on the web. Since it would be  used in a browser, the app must be usable on mobile, tablet and desktop (Responsive Design).

# Motivation

### (a) For Me
It's a combination of wanting an extra app in my portfolio and wanting to use Bootstrap in an application. I observed that many people posted freelance jobs related to [Bootstrap](https://getbootstrap.com/) therefore I wanted to dip my feet into it.

### (b) For User(s)
Kanban users love their kanban applications because they help them visualize project progress and status.

# Inspiration
The colors and design of components was influenced by Bootstrap, while the layout was influenced by two posts I found on dribbble. You can find those posts here:
- https://dribbble.com/shots/13008757-Submarine-Task-Manager-Kanban
- https://dribbble.com/shots/13240759-Project-Management-App

# Summary of Process
1. Brainstorming: involved looking at existing kanaban apps and browsing designs by professional designers.
2. Sketching prototype on paper.
3. Implementing sketched prototype in Figma.

# Screens Samples
![Mobile View of Home Page](https://dev-to-uploads.s3.amazonaws.com/i/i8iovvlsux0s6e8rqsqq.png)
![Mobile View of Kanban Page](https://dev-to-uploads.s3.amazonaws.com/i/ardmnrsk7iaoivtgzixc.png)
![Tablet View of Home Page](https://dev-to-uploads.s3.amazonaws.com/i/5e9yv88t5s2nkv7va2bl.png)
![Tablet View of Kanban Page](https://dev-to-uploads.s3.amazonaws.com/i/3qjnf6pp7959efz3ayh4.png)
![Desktop View of Home Page](https://dev-to-uploads.s3.amazonaws.com/i/vrqj0ligq1xw5533n70d.png)
![Desktop View of Kanban Page](https://dev-to-uploads.s3.amazonaws.com/i/2n0tqnbyn8kqi0cbc27f.png)

# Link To Article
You can get further material on this project, including images and screens, at [(Part 1) Kanban Application - Design Stage](https://dev.collinslagat.com/post/part-1-kanban-application-design-stage/).
خائف من المساهمة؟ هل تشعر أنك تفتقر إلى المهارات؟
Published: 2020-10-19 19:38:31

## ما تعلمته حتى الآن

الشعور بالخروج إلى المجهول هو ما يجعله مثيرًا ومخيفًا. الشعور بأنك تفتقر إلى المهارات اللازمة للمساهمة وتركها وراءك يمكن أن يجعلك تفقد فرصة رائعة. يمكن أن تجعلك المساهمات البسيطة تشعر بالإنجاز.
شعرت أن مجتمع المطورين مرحب للغاية وأن التفكير السيئ في ذهني، كل تلك الافتراضات التي قد يفكر فيها الناس كيف يمكن تسمية هذا المستجد الجديد بمطور اختفت في ثوان عندما تم دمج الكود الخاصة بي.
أشعر أن الشيء الوحيد الذي يمكن أن يمنعك من المساهمة هو أنت.

### الخلاصة الأساسية هي أنه لا توجد مساهمة كبيرة أو صغيرة ، بطريقة أو بأخرى ستحدث تأثيرًا.
UI Dev Newsletter #27
Tags: html, css, javascript, webdev
Published: 2020-10-19 19:36:59

- [min(), max(), and clamp(): three logical CSS functions to use today](https://bit.ly/3dDd21P)
Una Kravets explains how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.

- [People Problems](https://bit.ly/37h8vB2)
Robin Rendle writes about human problems that might be bigger than technical problems.

- [Cumulative Layout Shift, The Layout Instability Metric](https://bit.ly/37hIoK9)
Boris Schapira writes about Layout Instability API, how to visualize CLS in the browser, how to optimize for CLS, and about some unusual characteristics.

- [Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences](https://bit.ly/37gRw1R)
Manuel Matuzović writes about user preferences and how to respect them when writing CSS.

- [The -​-var: ; hack to toggle multiple values with one custom property](https://bit.ly/2Hhhrva)
Lea Verou explains how to use whitespace in custom property to make an “if” statement in CSS.

- [Presenting v7.0.0 of the npm CLI](https://bit.ly/2T4EGv9)
npm turns 11 years and it is shipping some long-awaited and requested features.

- [List of domains which has .new as TLD](https://bit.ly/31h5hJY)
NaveenKumar Namachivayam shares the curated collection of .new shortcut domains.

- [Learn & practice Git](https://bit.ly/3ja9qFF)
Git exercises is a new way to learn and practice Git and discover its features you might haven’t been aware of.


Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
"What if we work as a swarm?"
Tags: agile, career, scrum
Published: 2020-10-19 19:35:14

The title of this post is a question that was brought to my team during a sprint review.

We started working as a Swarm recently and... It's being some really different for what we were doing before and challenging.

I'd like to share some thoughts about my perspective of this "Swarming" and what lead us to try it.

## Why did we decide to Swarm?
As a team, we commit to deliver the chosen cards on Sprint Planning but, not all of these cards were being delivered (moved to Done) at the and of the Sprint. We started to wonder why was that happening and the question was brought to us by the Lead Engineer: "What if we work as a Swarm?"

## So, what really is Swarming?
It's the act of coming together to solve a problem or get something done as quick as possible. The idea is get together and do whatever it take to finish the current activities.

Swarming can used to focus on critical issues, such as the system down. But, it can also be used for delivering  the activities the team committed on sprint planning. 

## How we applied this "Swarming" approach?
At the beginning we were lost, somehow. How is the best way to apply this method? It was up to us to decide how we'd approach over the sprint cards.

After the Sprint Planning we got together and started the card on the top of the board (it's important that the cards are prioritized) and defined small tasks that could be done by every member. We also decided to get together at the end of the day and check the status of each task. If someone finishes a task, the team would get notified and this person could help someone else. The team only started a new card after the current one was finished.

## What was the impact?
Since we're working as a swarm the team got much more integrated and collaborative. Everyone is helping each other on discussions, scope definitions, implementation decisions and coding. As everyone is involved on the development of a card since the beginning, everyone gets context on it. This is being a very cool experience for me and my team. 

## Final thoughts
Swarming is something very new for me, I used to worked alone on my desk before join my team at Thoughtworks, where I had my first experience with pair programming, which is great. My team and I accepted this challenge and it's being great, specially because everyone gets involved with all the steps of the card.

We are still on the beginning of applying this method. Our board needs to be improved to address the creation of tasks and maybe, a simpler version of the board with just three columns: To Do, Doing and Done. There are also metrics of how the team is performing with this new approach, but I believe we're gonna implement this soon.

So, what if your team work as a swarm?

## References
https://softwareengineering.stackexchange.com/questions/147664/what-is-swarming

https://www.infoq.com/news/2013/02/swarming-agile-teams-deliver/
Why? How? What? - A Gist on Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-19 19:24:23

## WHY?
Let's first try to answer, as in why exactly Hacktoberfest? There are a lot of developers, especially students, who have just dived into this vast ocean of developing stuff, be in the coolest gadget or the simplest of codes.  To all of them, including me, such an opportunity to code for open-source repos, publicly, and to gain recognition for it is quite a big deal! It does really boost the confidence and want us to contribute more towards other projects.  Additionally, the fact that it is open to almost any hot topic of the day is exciting. It a great way to have insights on current trends, contribute to them and let's us know where we stand...whilst still giving room for improvement through constructive-feedback via comments from the Author.  

#HOW?
Open source is changing the world – one pull request at a time.  And it can be anybody who is changing the world, can be you, can be me...anybody for the matter with just one GitHub Account will do good. The joy of contribution is worldly, and to have the Pull Request accepted does really set standards on the code that the coder/dev provides, which in-turn let us know for ourselves, if the code that we've provided is up to the mark or not and hence making it better with every moving step. It can be a be a bug fix, improvement, or even a documentation change! 

#WHAT?
Well, Hacktoberfest is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub and Twilio. It is an insightful step by DigitalOcean to encourage developers to contribute to open-source projects on GitHub and is  open to everyone in on a global scale! Whether you're a developer, student learning to code, event host, or even a company...it doens't matter, by your participation you help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

I'm definitely jumping-in next year too!
What is it about speaking at events that you don't like?
Tags: watercooler, discuss, speaking
Published: 2020-10-19 19:16:59

I'm speaking at [All Things Open](https://2020.allthingsopen.org) tomorrow ([register now](https://allthingsopen.6connex.com/event/ATO/login) for free). I'm talking about [how New Relic went open source](https://blog.newrelic.com/product-news/adapting-code-and-culture-open-source-best-practices/).
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/porswyon1bhojl6moytv.jpg)](https://2020.allthingsopen.org/sessions/how-new-relic-went-open-source-code-culture/)

I like speaking at events and conferences, especially if I know the topic well. I think it's exciting and sometimes fun. I know that most people don't share my perspective on speaking at events.

So I want to know...
* What is it about speaking at events that you don't like? What deters you? What stops you from submitting a CFP?
* Or, if you have never even considered it, why haven't you?