teleren/devto huggingface dataset:
What part of conferences or meetups is most important to you?
Tags: discuss
Published: 2019-10-31 20:43:03

### Cover Photo by NeONBRAND on Unsplash

I have been building out a competitor to [Meetup.com](https://meetup.com) for the past month called [Flawk.to](https://flawk.to). Since I was going to compete directly with Meetup.com I created the roadmap for Flawk to reflect that. I started to feel like I had this massive up hill battle to re-create all of Meetup.com's features. The more I talked to people in the community the more I realized that my goals for Flawk were more directly aligned with the problems I was seeing in tech meetups.

I have decided to reposition Flawk.to to focus on tech meetups only! Our short term goals of getting Flawk into a beta have not changed, there is some crossover with Meetup.com functionality, but is does change our focus soon after. As I am reworking the copy/marketing for Flawk I wanted to go right to the source of one of the best developer communities and ask for your opinion.

## What part of conferences or meetups is most important to you?

---

If you have any other comments or suggestions about what you would like to see in a technology focused Meetup.com please comment below!

We are currently under development, you can follow along on [Youtube](https://www.youtube.com/watch?v=eA8xTZYseUA&list=PLCct7zpeN4PGacGvpv1bU2q8XFtcPKWNo), [Twitch](https://twitch.tv/ericadamski), and I will be sending out a [weekly newsletter](https://buttondown.email/flawk) about the state of Flawk and my current growth/failures/struggle.
My take on the LCPC (Lebanese Competitive Programming Competition)
Tags: competition, lcpc, cpp, codenewbie
Published: 2019-10-31 20:02:17

## How we trained?

For this part I could seriously say we slacked off a lot. Not to mention the fact that we were solving the wrong questions to begin with. We ended up attempting to solve the ICPC questions instead of LCPC, believe it or not, there is a vast difference between them. So we were way in over our heads and programming in a language we didn’t have that much experience in (C++).

--- 

## The actual competition

The competition wasn’t THAT tough. It’s like every question was within the team’s grasp except for a tiny overlooked detail. As frustrating as it was, we only managed to solve 2 questions, but on the bright side, the food was great so it doesn’t matter.

## A couple of images from the competition

<img src="https://miro.medium.com/max/1080/1*Hpea7z04ZlXs4VeKfILf-Q.jpeg" alt=""/>

---

<img src="https://miro.medium.com/max/446/1*2dvyuPBx4aChBRD0X3x0UQ.jpeg" alt=""/>
CSS Flex box
Tags: ctrlshiftcode
Published: 2019-10-31 19:55:59

 Flex box is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.
Why Flex box?For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like floats and positioning. These are fine and they work, but in some ways they are also rather limiting and frustrating.
The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:
    • Vertically centering a block of content inside its parent. 
    • Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available. 
    • Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content. 
An aside on the flex model
When elements are laid out as flexible boxes, they are laid out along two axes:
• The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end. 
• The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.  
The flex container
An area of a document laid out using flex box is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.
    • Items display in a row (the flex-direction property's default is row). 
    • The items start from the start edge of the main axis. 
    • The items do not stretch on the main dimension, but can shrink. 
    • The items will stretch to fill the size of the cross axis. 
    • The flex-basis property is set to auto. 
    • The flex-wrap property is set to no wrap. 
The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.
Power of Code Review
Tags: codereview
Published: 2019-10-31 19:07:27

---
title: Power of Code Review
published: true
description: Code Review ?
tags: codereview
---

### Power of Code Review

> Remembering the first day of code review when your co-workers reviewed your code
> and started to tell that your code has so many flaws to work on before it can
really go on production and then you keep on rewriting the whole code.

Code Review is the process of discussing the best way to structure the code and
*structuring the code *which implies many things such as proper namings,
optimization, catching flaws, discussing algorithms, proper guidelines check and
so on.

I remember my starting days of programming where code once was written was
consider as the ultimate. It would only get changed when bug arises or change in
the feature otherwise it remains forever as legacy code. I think that's how
legacy code was born. So unmanaged codes, not optimized ones, frequent bug
before pushing for testing still `No Code Review`

Then I heard code reviews at [Pagevamp](https://medium.com/u/ffbcb198e5d7)
introduced by my colleague [Naren Chitrakar](https://medium.com/u/a12cbc8d245c)
where they asked the team to review my code and me to review theirs.

As we were about to implement a new process in our company some tried to oppose
in a manner not to follow code review so hardly. So many discussions were there
whether to implement or not.

At first, it was like hassle they comment about optimization, clean code, naming
things, I keep on doing request changes and pushing the changes. Before it was
easy to push code to production now so many changes to do after building
features so it can be deployed on production.

![](https://cdn-images-1.medium.com/max/800/1*GdCJFcb6hOWczSNjb7p1Ig.jpeg)

That was me. Frustration arise due to continuous request changes

Then after months, I realized by implementing code reviews -:

* Bugs were caught before deployment
* Helped us to set & implement coding standards
* My codes were getting cleaner & cleaner
* New ideas emerged
* Opened up a way for teaching and sharing knowledge.
* My code was optimized it has to pass checks from my team
* Introduced **Pair programming**
* Helped with improving soft skills communicating, team bonding

Then we added `Code Review` as our standard process in development. It really
took us time to added this as part of our standard process. An attitude of
people really matters when introducing or removing things in a company as we all
have different perceptions. Things take time

Its all about opening up yourself, analysing things and mostly don't be ashamed
up of your weakness/mistakes.

Happy Coding /Reviewing!
Fix: MacOS Catalina and CommandLineTools Issue
Tags: productivity
Published: 2019-10-31 19:55:13

Recently, I have upgraded mac to 10.15.1 and I got a weird issue with node-gyp while working on my node project. It started failing when I was doing `npm install`. The issue reported was regarding the `xcode-select` CLT. We usually avoid installing full xcode and install the CLT (Command Line Tools) using `xcode-select --install` command.

Tried to run the command again but it did not work as CLT was already installed.

I did struggle for sometime to fix the issue. Finally, I found the solution and this is what I did.

- Navigated to the folder `/Library/Developer/` using terminal.
- Removed the folder named `CommandLineTools`. _Use `sudo` if needed._
- Ran the command `xcode-select --install` which prompts for installing the command line toos. Once done, everything is back to normal for my node project.

Putting it here serves two purpose. One, It may help someone else and so won't hamper the productivity. Two, If there is another way to solve this issue, we can share it here through comment to let others know.

Have you faced this issue? If so, how you fixed it? Tell your experience and solution in comment section below.

Happy Learning!

_Image credit: Unsplash - @maxcodes_
formik v2.0.3 demo playground + stackblitz web ide
Tags: formik, react, tutorial, forms
Published: 2019-10-31 19:45:22

---
title: formik v2.0.3 demo playground + stackblitz web ide
published: true
description: simple single-serving site with demonstrating formik v2.0.3 in 4 examples sourced from preexisting tutorials / docs / issues. Put it together to help me learn, thought it might help others, so here it is.
tags: formik, react, tutorial, forms
canonical_url: https://ideas-formik-playground.web.app
cover_image: https://raw.githubusercontent.com/100ideas/100ideas-formik-playground/master/docs/2019-10-31_formik_playground_screenshot.png
---

https://ideas-formik-playground.web.app

[`100ideas-formik-playground`](https://ideas-formik-playground.web.app) is a little demo app I put together to help myself learn how to use formik v2.0.3. Its just a simple single-serving site with 4 examples sourced from preexisting tutorials / docs / issues.

Thanks to @jaredpalmer for the snappy css boilerplate (from formik-v2 codesandbox), it's sharp! Furthermore, *thank you* for creating formik & documenting it well.

also "thank you" to [@ersel for demonstrating how to recreate the functionality of `<FastField>`](https://github.com/jaredpalmer/formik/issues/1739#issuecomment-521175764) in \^v2.0.3 




#### do this!
- [Play with the live demo app](https://ideas-formik-playground.web.app) (thanks, stackblitz + google firebase!)
- [Edit on StackBlitz ⚡️](https://stackblitz.com/edit/100ideas-formik-playground)
- [Fork the repo on github](https://github.com/100ideas/100ideas-formik-playground)
- then add some more demos and send over a PR! 👍🏻
- read the `formik` docs: https://jaredpalmer.com/formik/
- discuss: 
  - [dev.to](https://dev.to/100ideas/formik-v2-0-3-demo-playground-stackblitz-web-ide-5ep9) 
  - [formik repo](https://github.com/jaredpalmer/formik) ~~~issue tracker #xx~~~ - not yet


#### demonstrations (links to src)


- [`./components/TutorialPlayground`](https://github.com/100ideas/100ideas-formik-playground/blob/master/components/TutorialPlayground.js): playing around with offical tutorial
- [`./components/FormikTutorialFinal.js`](https://github.com/100ideas/100ideas-formik-playground/blob/master/components/FormikTutorialFinal.js): official Formik Tutorial Final Result
- [`./components/FastFieldDIY.js`](https://github.com/100ideas/100ideas-formik-playground/blob/master/components/FastFieldDIY.js): FastField fix - demo of FastInputField rendering fields isolated from Form prop changes
- [`./components/DraftEditorFormik.js`](https://github.com/100ideas/100ideas-formik-playground/blob/master/components/DraftEditorFormik.js): how to hook Draft.js into formik for use as a custom field
My experience taking CS50's introduction to computer science
Tags: computerscience, c, onlinecourse
Published: 2019-10-31 19:36:16

Ever since I found out about CS50 I thought of it as the best place to learn about computer science. So when I discovered the course was on edx I was more than thrilled to enroll. Personally, youtube videos were more than enough for me, but what really stands out in the online course is the homework part.

---

Now you might think, how is the homework the distinguished part? Well, the course videos sort of explain what you need to build the program specified in the problem sets. The actual problem sets, however, are the meaty part of the course, this is where you can put your brain to work and (kind of) solve real world problems. Such problems include, retrieving lost images from a raw data file, ciphering messages and/or passwords, or even implementing your own hash table to make a spell checker. Not even does it stop there, but it continues to teach about python, how to use python for the back-end and some front-end knowledge as well.


---

One thing that I especially admired about the course Is their insistence that your code should be formatted properly. This is the kind of topic that may not be spoken of or hashed out.

<img src="https://cdn-images-1.medium.com/max/800/0*obJosdy91RPPEHC6" />

---

This is the BEST online resource anyone could take to get into computer science. No background needed. It encapsulates most of the aspects of computer science to give the student a general overview of what they're getting themselves into. I've seen many universities that fail at doing this in my region, thus creating a group of students that change their major later on and that only wastes a person's time.
I'm about to start learning Ruby, Any advice or guidance would be greatly appreciated!!
Tags: ruby, rails, discuss
Published: 2019-10-31 19:24:33

---
title: I'm about to start learning Ruby, Any advice or guidance would be greatly appreciated!! 
published: true
description:
tags: #ruby, #rails, #discuss
---

Hi All,

I'm a web developer, I use `Laravel` PHP web framework in my projects, and I wanna learn `Ruby` so in the future I will be able to use `Ruby On Rails`. so would you mind suggesting me one of these

- Book, podcast, newsletter, tutorial, roadmap, package, etc...

I know I could use Google to search for these kinds of stuff, but I want to take advice from the Ruby community members.

Thank You in Advance
Did you nest your loop perfectly? Let's check it out.
Tags: algorithms, programming, javascript, computerscience
Published: 2019-10-31 19:21:03

---
title: Did you nest your loop perfectly? Let's check it out.
published: true
description: How to perfectly nest loops so that they run as quick as possible 
tags: algorithms, programming, javascript, computerscience
---

Have you ever taught of how loops hurt the execution time of your code? if not then I think you should begin to worry about all these petty stuff when writing programs.

Let's see how we can make your loop better. Let's say we have an **array A of size 9 and an array B of size 7**, and our goal is to find the total sum when every single element in A is multiplied to every single element in B. Our code will be like below.

```js
let a = [1,2,3,4,5,6,7,8,9];
let b = [1,2,3,4,5,6,7];

let sum = 0;

for(let i = 0;i<a.length;i++){ //looping 9 elements
    for(let j = 0;j<b.length;j++){ //looping 7 elements
        sum += a[i]*b[j];
    }
}
console.log(sum);

```

Wait, let's analyze this loop. Let's assume that **a single iteration takes a second**. Then that means that the outer loop which loops through array A(9 elements) will take 9s to run and the inner loop that loops through array B will take 7s to run. But because the inner loop is inside another loop, and the inner loop is called 9 times, the whole code will then take 9+(9x7) seconds to run. Meaning it takes our code 72s(1m 12s) to run.

# How do we reduce the execution time?
As simple as it is, let's just make sure to **always nest the loop that iterates the most**. In the example above, instead of nesting the loop that goes through B, we would rather nest the loop that goes through A. 
```js
let a = [1,2,3,4,5,6,7,8,9];
let b = [1,2,3,4,5,6,7];

let sum = 0;

for(let i = 0;i<b.length;i++){ // looping 7 elements
    for(let j = 0;j<a.length;j++){ //looping 9 elements
        sum += b[i]*a[j];
    }
}
console.log(sum);

```
Then, our total time taken instead of being 9+(9x7) seconds will be 7+(7x9) seconds which is 70s(1m 10s).

Hence time saved is 72s - 70s which is 2s. Imagine the time saved in computations with large array sizes. Hope you liked it
Why I added a Bookmarks Section to my site
Tags: showdev, discuss
Published: 2019-10-31 16:58:47

I've been building my [personal site](http://uzpg.me) and today I had an idea and decided to add a bookmarked section to my website where I share all the bookmarks I've saved as I learn how to code.
I created this because it's a way to publicly keep track of all the amazing resources and tools available on the internet that have helped me.

You can [check it out](http://uzpg.me/bookmarks) and I hope it helps you. I think it's a cool idea and I would love it if you guys could share some of your best bookmarks that I'll add.

## Sections
- Ruby/Rails: everything Ruby and Rails and one thing about Jekyll
- Development in general: computer science, git, opensource and some nice tools
- beautiful sites: good looking websites ([my favorite](https://www.vincentsaisset.com/))
- Javascript: in progress
- Design: in progress
- Other: entrepreneurship, career...

@Lee_Wynne by the way your site looks really nice and I bookmarked it!
My first web developer intern position
Tags: webdev, internship, frontend, javascript
Published: 2019-10-31 19:04:15

First thing’s first. How did I even find the company? I mean, I spent weeks searching for an intern position and couldn’t find one. So the fact is that my friend found the company and told them about my website which led to me to the interview.


## The interview

I was basically asked about what I know, although he did not ask for a CV so many things that I already knew (such as git) were not mentioned at the time. The employer then asked us to finish a coding challenge to write in ANY language.

The challenge consisted of reading in an excel file, getting the names from its rows and finding the images corresponding to the names, then copying them into a new folder. (I know what you’re thinking, where’s the challenge?). However, for some reason I used `nodejs` and completely forgot about the asynchronous nature of the `fs` module, so I ended up taking a long time to finish the challenge.

## The actual Job

On the first day, we were given reading tasks to learn about gitlab, HTML/CSS/JS, a niche db manipulating package that is no longer maintained, SQL. Pretty easy right? Well…the fact is no one tells you that the niche db manipulating package that is no longer maintained is actually no longer maintained since 10 years.

The setup was nice. It was a dual monitor setup with a macbook pro.

The task that was given to me and my colleague was nowhere near as simple as what they give you in university. It required me knowing extensive knowledge in 2 different APIs that I’ve never seen before. That was part of the reason why I’m writing this. University is like when your dad tells you to get him the screwdriver, you feel like you actually did something productive and helpful, but the actual work is much more difficult than you think.

Overall, however hard it may get once you get the job done you just gained valuable experience that’s gonna help you in your career.
What Alternative Text Editors Does DEV Use? (Not VS Code 🐱‍👓)
Published: 2019-10-31 18:34:23

## Hey DEV!

I'm a huge fan of VS Code, and I use it for pair programming and occasionally when I want to use one of the awesome extensions that the VS Code community has provided.

However, I'm also a fan of diverse marketplaces. I don't really like the idea that the vast majority of developers I interact with use the same text editor.

I'm the kind of person that uses Ubuntu, Firefox, and DuckDuckGo. Not just because they are great tools (I think I'm having a better time on Ubuntu than the last year I spent on MacOS, honestly), but because I don't like the idea of a single company controlling a market.

For that reason, I wanted to start a conversation about alternatives to VS Code.

I use [Spacemacs](http://spacemacs.org/), which is a set of Emacs configurations that essentially combine the Emacs and Vim text editors. I really like that I don't have to do much tweaking out of the box, but I still have a lot of the power found in both Vim and Emacs.

### Spacemacs 👽

![A screenshot of Spacemacs](https://thepracticaldev.s3.amazonaws.com/i/v4kry57ogyecxxrdv3zu.png)

What alternatives do you use? Or, if you don't what about VS Code keeps you from using something else?
CSS clip-path property and it's advantages
Tags: css, clippath, landingpages
Published: 2019-10-31 18:18:49

CSS clip-path property is very useful when designing the landing pages and the latest web page design.clip-path to show some portion of the image or shape instead of showing the entire shape or image.

let's dive into details

## Basic Shapes

clip-path has basic-shape values such as circle, ellipse, polygon or inset to make some basic shapes circle, ellipse, polygon or rectangle respectively.
clip-path property works only when there should be basic shape or image. On top of the basic shape or image, we can clip some path out to create many new shapes.

    .circle{
        width:100px;
        height:100px;
        background:#AD2F11;
        clip-path:circle(50%)
    }

    .ellipse{
        ....
    clip-path:ellipse(25% 40% at 50% 50%) 
    }
    .triangle {
        ....
        clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
    }
## Advance shapes

Now let's take one more step ahead to make trapezoid shape using clip-path

    .trapezoid{
        ...
        clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    }

    .pentagon{
        ...
        clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }

For some old version browsers, we should use a vendor-specific prefix on clip-path such as -webkit-,-moz,-o- for Chrome, Mozilla and opera respectively.

Circle clip-path syntax can be defined also like this 

   clip-path: circle(radius at posX posY)

    .circle-advanced{
        clip-path:circle(50% at 70% 20%)
    }

Ellipse also be defined as 

 clip-path: ellipse(radiusX radiusY at posX posY)

    .ellipse-advanced{

        clip-path:ellipse(50% 65% at 70% 50%);
    }

Find the codepen below to play with the above examples

{% codepen https://codepen.io/GodtiVinod/pen/wvvPmwN %}


To explore more advanced CSS clip-path, visit the below URL.

[clipy](https://bennettfeely.com/clippy/)
[Video] Python Decorators in 15 Minutes
Tags: python, beginners, devtips, tutorial
Published: 2019-10-31 18:16:58

---
title: [Video] Python Decorators in 15 Minutes
published: true
description: Use decorators in Python to modify the behavior of a function or method without touching its code.
tags: python, beginners, devtips, tutorial
---

Decorators are an advanced feature of the Python language that allow you to modify the behavior of a function or method without touching its code. This video will teach you why decorators work and how to create your own. It will also walk through a few examples to give you a better idea of where to use Python decorators.
{% youtube r7Dtus7N4pI %}

Want to try Kite? You can download it for free [here](https://kite.com/download/?utm_medium=referral&utm_source=youtube&utm_campaign=kite&utm_content=python-decorators).
Devops Week News - Issue #158
Tags: devops, sre, kubernetes, cloud
Published: 2019-10-31 18:15:06

---
title: Devops Week News - Issue #158
published: true
description: 🔥 Devops Week News - Issue #158 http://bit.ly/2PwNvNI
tags: #DevOps #sre #kubernetes #cloud
---

🔥 Devops Week News - Issue #158 http://bit.ly/2PwNvNI