teleren/devto huggingface dataset:
Why data structures and algorithms are important for frontend?
Tags: algorithms, javascript, development, programming
Published: 2020-02-28 17:21:46


So in this blog, we are going to discuss why data structures are important. 

Yeah, I'm currently learning data structures and algorithm properly. So I decided to write a blog on this topic to improve my journal and understanding. 

Myself a frontend developer as like everyone I thought frontend developer don't need to learn how to write efficient code. But after realizing my mistake I thought I should give a shot to learn DS and Algo. Because the important part of writing efficient code is using perfect data structures and choosing which algorithm. 


### So Now can discuss, why it even matters in frontend development?


In the old frontend, development peoples are built sites that are statically rendered the HTML from the backend. But now the frontend development is more evolved than before everything is rendered in frontend(browser) and the backend is calling only for data pulling. 

You may ask like this why I need to code efficiently? Still, I'm solving most of the business problems with my current knowledge. 

If you think you don't need it means you didn't involve in the complex tasks. 

If you have only 10 list items in your list view page. Yes, you don't need to code efficiently because in the worst case also the site will run smoothly. 

But imagine you need to display 50 list items per page and each item having many more interactions and you need to implement a very good UX to the whole page. Yes, you definitely should know algorithms practice to write efficient code.


As a front end developer, I have faced so many performance issues because of re-rendering and other things. For solving those problems we should be strong DS and Algo. 


### filter vs find

One of the examples for finding particular data is a filter and find. So what is the difference between them?. the filter will do filter the whole list item and returns the expected items as an array. But find will search the list items and returns an expected item when it's found out and then stop the process. This is a major difference. Likewise, there are so many things to know to write efficient code. 


So, it's always better to know what DS, Algo and how can we use it to write efficient code. 

### It's really fun!
And more than everything if you are the one who loves code and solving problems and here warm welcome. It's really more fun than anything. 

### Improving skills definitely
Solving problems will definitely help you to think logically and efficiently you can learn any technologies at any time but those thinking and logical skills will come by more practice. More practice will give more feed to your brain. 
  
### Coming in interviews also!
This is for sure! Most of the top tech companies will ask their questions from DS and Algo from the first round itself. 

I lined so many blogs related to how to write efficient code in frontend development. So, don't forget to follow me in this community. 


If you find any mistakes in this blog, feel free to point out in the comment section.
AirSend - a new app to get work done in one space
Published: 2020-02-28 17:17:56

Have conversations in channels, share large files, track next steps, keep notes and get work done in one space with 100 GB free storage.

Currently, we're giving free lifetime membership for anyone who signs up now.

Sign up here: https://live.airsend.io/signup

Or learn more: https://www.airsend.io/

#productivity #communication #workspace #saas
Returning part of a string data using map()
Tags: javascript, functional
Published: 2020-02-28 17:14:19

Hi good people! I'm trying to solve a JavaScript challenge, but my code is not working as expected
/*
PROBLEM: Write a function called getMainArtists which takes in an array of songs
 and returns an array of the primary artists on the recordings. 
 If there's only one artist, that artist should be returned; 
 if there are featured artists, they should be ignored 
 (so only the artist to the left of "featuring" is kept.)
*/

//My Code Solution...

function getMainArtists(arr){
    return arr.map(function(val){
        if ((val.artist).includes("featuring")){
            return null;
        } else {
            return val.artist;
        }
    })
}

getMainArtists(songs);

/*
The data I'm using can be found here https://github.com/PJMantoss/iterators2/blob/master/data.js
*/

PROBLEM STATEMENT: When I run getMainArtists(songs) it returns an array of artist names excluding names that contain 'featuring'. It's suppose to also return artist names that have 'featuring', but should only leave out all the words starting from 'featuring'. Any ideas how I can refactor my code to work? Thank you for your help
Draggable Craft Stationery Free Mockup  Scene from mockupcloud.com
Tags: codepen
Published: 2020-02-28 17:01:36

<p>Download the Free scene from 
<a href="https://www.mockupcloud.com/free/art-craft-stationery-branding-mockup" target="_blank">https://www.mockupcloud.com/free/art-craft-stationery-branding-mockup</a></p>

<p>It works best on <strong>full screen desktop</strong> view</p>

<p>There are multiple layers, the shadow is a separate layer to blend with the background. Anything else is straightforward, having a draggable plugin that works with jQuery.</p>

{% codepen https://codepen.io/chris_tudor/pen/WNvjLwZ %}
== (or) ===? What do you prefer and why?
Tags: discuss, javascript, functional
Published: 2020-02-28 17:00:18

I prefer === because I personally feel that we as devs should have control over our code. Though javaScript is a tricky language, we should have control of what's being stored in a variable. For example,

isAlive is a boolean which should have false, true and not null.


I know it's a hard thing to follow but trust it does wonder when we have control over what's being stored. Especially on Frontend codebase.

Your thoughts? Keen to learn something new :)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-02-28 16:55:01

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![happy-donkey](https://media.giphy.com/media/3djolNOedd5pS/giphy.gif)

Happy Friday!
Announcing our first set of speakers for our free, remote React conf
Tags: react, showdev, webdev
Published: 2020-02-28 16:52:12

👋 Kristian from Bytesized Code here – super excited to announce the first set of speakers for **[Byteconf React](https://www.bytesized.xyz/react-2020), a free live-streamed React conference, taking place on May 1st, 2020!**

Real quick, if you haven't heard of Byteconf ✋ it's a free developer conference series, live-streamed on YouTube 🍿

Since 2017, **five** Byteconfs have gone live to people around the world:

- 🆕 [Byteconf GraphQL](https://www.bytesized.xyz/graphql-2020), our most recent conf, this past January
- ☕️ [Byteconf JavaScript](https://www.bytesized.xyz/js-2019), a two-day JavaScript conference (our biggest so far!) in March of last year
- ⚛️ [Byteconf React 2018](https://www.bytesized.xyz/react-2018)
- 📱 [Byteconf React Native](https://www.bytesized.xyz/react-native-2018)
- 🧠 [Byteconf ReasonML](https://www.bytesized.xyz/reason-2018) (we dig doing mini-confs for new, cool stuff too 😎)

💬 **Byteconf React will go live on May 1st.** While the talks premiere, many of **our speakers will join us in the live chat for the conference** – it's an awesome twist on the conference format that allows speakers to give more context to their talks, and to allow conference attendees to ask questions directly and immediately to speakers.

With today's announcement of our first set of speakers, the conference is getting into gear! If you want to attend, go to our website and RSVP for your free ticket – we'll send you an email when the conference goes live, so you won't miss it.

**[🎟 RSVP for Byteconf React 2020 →](https://www.bytesized.xyz/react-2020)**

[![Announcement Image](https://blog.bytesized.xyz/content/images/2020/02/Byteconf-React-Initial-Speaker-Announcement-Twitter.png)](https://www.bytesized.xyz/react-2020)

**We're super excited to work with our first set of speakers for Byteconf React: Kent C. Dodds, Ali Spittel, and Shawn Wang!** Learn more about them below, and make sure to follow them on Twitter 🐦 For more announcements and updates on the conference, make sure to follow our account, [@bytesizedcode](https://twitter.com/bytesizedcode), as well! We're super excited to hear from you, so make sure to **let us know you're attending on Twitter** 👍

**Kent C. Dodds** (@kentcdodds), software educator, speaker, and author of Testing JavaScript.

**Ali Spittel** ([@aspittel](https://twitter.com/aspittel)), teacher at We Learn Code, co-host of Ladybug Podcast.

**Shawn Wang** ([@swyx](https://twitter.com/swyx)), Developer Experience Engineer at Netlify, /r/reactjs moderator, Egghead.io instructor.

Over the next few months as we get closer to the conference, I'll continue to post updates on the conference – make sure to **[RSVP for your ticket on our website](https://www.bytesized.xyz/react-2020)**, and see you at Byteconf React on May 1st!
Wizar devlog 06 - Maintenance time
Published: 2020-02-28 16:43:03

Boring log for a maintenance week.

On Crafter side: a lot of maintenance
- switched to monorepo with Yarn workspace
- migrated from TSLint to ESLint
- installed barbone for a new packages to connect Crafter to React (called Crafter-React) which I shamelessly copied on Mobx-React.

Also, I had a little victory this week. I found an [issue in TS](https://github.com/microsoft/TypeScript/issues/36851) which has been qualified as bug!
You probably don't need a version manager for Ruby
Tags: ruby, linux, vagrant, provisioning
Published: 2020-02-28 15:57:30

---
title: You probably don't need a version manager for Ruby
published: true
description: This manual explains how to install a recent stable version of Ruby on Linux, without using rbenv or alternative version managers.
tags: ruby, linux, vagrant, provisioning
---


This manual explains how to install a recent stable version of Ruby on Linux, without using [rbenv](https://github.com/rbenv/rbenv) or alternative version managers. My goal was to find a fast and reliable approach for provisioning expendable virtual machines for Rails development environment.

Basic assumptions:

1. Installation speed matters.
2. Only one version of Ruby is required system-wide.
3. We're using Ubuntu, or any other Debian-based Linux distribution.

## Step 1. Install prebuilt Ruby from Brightbox

Notice the `dev` package that should be installed in addition to the primary one. It is required to build native extensions for Ruby gems.

```bash
sudo apt-get install software-properties-common
sudo apt-add-repository ppa:brightbox/ruby-ng
sudo apt-get update
sudo apt-get install ruby2.6 ruby2.6-dev
```

Brightbox manual proposes a tool called [ruby-switch](https://www.brightbox.com/docs/ruby/ubuntu/#switching-the-default-ruby-version) that can help to switch between multiple Rubies on the same system. Since there will be only one of them, this step is unnecessary.

## Step 2. Make gem work without sudo

By default, `gem` will try to install new gems to the system folder (e.g. `/var/lib/gems/2.6.0`), which is no good. Ruby version managers override this path with something under user home directory. But the same operation could be done manually. To permanently set target directory to the user home, and  these lines to your `~/.bashrc`:

```bash
export GEM_HOME=$HOME/.gem/ruby/2.6.0
export PATH=$HOME/.gem/ruby/2.6.0/bin:$PATH
```

Here is the most important thing you need to know about Ruby version managers to understand what exactly they do in system configuration:

> "RubyGems' default local repository can be overridden with the `GEM_PATH` and `GEM_HOME` environment variables. GEM_HOME sets the default repository to install into. `GEM_PATH` allows multiple local repositories to be searched for gems" — [rubygems.org](http://guides.rubygems.org/command-reference/)

## Step 3. Run a quick ad-hoc test

Log into the shell, and execute these commands to ensure `gem` and `ruby` binaries are available, gem home path is configured correctly, and native extensions could be built:

```bash
cd
gem install bundler rails
rails new testapp
```

Or just execute `gem env` to see the paths without installing anything.

Here is a full `Vagrantfile` to provision new Linux VM with Ruby development environment: {% github dreikanter/vagrant-rails %}

Peace ✌️
การเปรียบเทียบข้อมูลของ Go
Tags: go
Published: 2020-02-28 15:55:25

แน่นอนว่าภาษาเขียนโปรแกรมต้องมีวิธีการเปรียบเทียบข้อมูลในตัวภาษาให้เราใช้งาน สำหรับ Go เตรียม operator สำหรับการเปรียบเทียบเอาไว้แล้วได้แค่

* == เท่ากัน
* != ไม่เท่ากัน
* \> มากกว่า
* < น้อยกว่า
* \>= มากกว่าหรือเท่ากับ
* <= น้อยกว่าหรือเท่ากับ

แต่ว่า operator ที่ลิสต์มานี้ก็มีเงื่อนไขตามแต่ละประเภทข้อมูลอีกว่าอะไรบ้างที่เปรียบเทียบกันได้ ซึ่งเงื่อนไขก็มีได้แก่

* Boolean ข้อมูลประเภท bool เปรียบเทียบว่าเท่ากันหรือไม่เท่ากันได้ แต่เปรียบเทียบมากกว่าหรือน้อยกว่าไม่ได้ ซึ่งก็ง่ายๆเลย true เท่ากับ true และ false เท่ากับ false เพราะ bool มีค่าที่เป็นไปได้แค่นี้ ก็จะใช้ได้กับ operator == และ != เท่านั้น ใช้กับ operator อื่นๆที่เหลือไม่ได้

* Integer ข้อมูลแบบจำนวนเต็ม เปรียบเทียบกันว่าเท่ากันหรือไม่เท่ากันได้ และ เปรียบเทียบมากว่าหรือน้อยกว่าได้ด้วย ดังนั้นก็ใช้ operator ทั้งหมดได้หมดเลย

* Floating-point ข้อมูลแบบทศนิยม เปรียบเทียบกันว่าเท่ากันหรือไม่เท่ากันได้ และ เปรียบเทียบมากว่าหรือน้อยกว่าได้ด้วย แต่ก็ขึ้นอยู่กับมาตรฐาน IEEE-754 ที่เป็นมาตรฐานการเก็บข้อมูลแบบทศนิยมบนคอมพิวเตอร์

* Complex ข้อมูลจำนวนเชิงซ้อน Go เป็นภาษานึงที่รองรับข้อมูลตัวเลขแบบนี้ในตัวภาษา ซึ่ง เปรียบเทียบว่าเท่ากันหรือไม่เท่ากันได้ แต่เปรียบเทียบมากกว่าหรือน้อยกว่าไม่ได้

* String ข้อมูลแบบสตริง เปรียบเทียบกันว่าเท่ากันหรือไม่เท่ากันได้ และ เปรียบเทียบมากว่าหรือน้อยกว่าได้ด้วย ซึ่งการเปรียบเทียบมากน้อยเนี่ย จะไล่เทียบข้อมูลภายในทีละ byte เลยโดยเรียงจากตั้งแต่ byte แรก ถ้าเท่ากันก็เทียบ byte ถัดไป

* Pointer ข้อมูลแบบ pointer ที่เก็บ memory address นั้นก็เปรียบเทียบว่าเท่ากันหรือไม่เท่ากันได้ แต่เปรียบเทียบมากกว่าหรือน้อยกว่าไม่ได้ คือถ้าจะเท่ากันก็ต้องเป็น address เดียวกัน หรือค่าเป็น nil ทั้งคู่นั่นเอง

* Channel ข้อมูลแบบ channel ก็ เปรียบเทียบกันว่าเท่ากันหรือไม่เท่ากันได้ แต่เปรียบเทียบมากกว่าหรือน้อยกว่าไม่ได้ คือ channel เนี่ยเราสร้างค่ามันได้โดยใช้ฟังก์ชัน make ก็คือถ้าตัวแปร channel เกิดจากที่สร้างด้วย make ค่าเดิมก็แสดงว่าเท่ากัน หรือว่าเป็น nil ทั้งคู่ก็เท่ากันเช่นกัน

* Struct ข้อมูลแบบ struct ก็ เปรียบเทียบกันว่าเท่ากันหรือไม่เท่ากันได้ แต่เปรียบเทียบมากกว่าหรือน้อยกว่าไม่ได้ ข้อมูลจะเท่ากันก็ต่อเมื่อทุก fields นั้นเป็นข้อมูลที่สามารถเปรียบเทียบกันได้ มีข้อมูลเท่ากัน

* Array ข้อมูลแบบ Array  ก็ เปรียบเทียบกันว่าเท่ากันหรือไม่เท่ากันได้ แต่เปรียบเทียบมากกว่าหรือน้อยกว่าไม่ได้ ข้อมูลจะเท่ากันก็ต่อเมื่อทุก ค่าในแต่ละตำแหน่งเทียบกันได้ และมีค่าเท่ากัน

* ส่วนค่าของ Slice, map และ function นั้นเปรียบเทียบกันไม่ได้ เว้นแต่ว่าจะเทียบว่ามีค่าเท่ากับหรือไม่เท่ากับ nil เท่านั้น

สำหรับ Go นั้นเราเปลี่ยนแปลงกฏการเปรียบเทียบเหล่านี้อีกไม่ได้แล้ว เพราะเป็นสเปคของภาษาเลย ถ้าเราต้องการเปรียบเทียบด้วยกฎเกณฑ์อื่นๆ เราทำได้คือเขียน function หรือ method ในการเปรียบเทียบเองเท่านั้น ไม่สามารถแก้ไขกฎของ operator เหล่านี้ได้เอง

สำหรับการเปรียบเทียบค่าของ  Interface นั้นก็เปรียบเทียบได้เช่นกัน แต่กฏค่อนข้างซับซ้อนเดียวแยกอธิบายอีกโพสต์นึงต่างหากเลย

กฎที่ยกมาสรุปนี้จริงๆแล้วก็เอามาจากรายละเอียดสเปคของภาษานั่นแหละ อ่านได้ที่ https://golang.org/ref/spec#Comparison_operators
Three ways to Theme a React App
Published: 2020-02-28 15:30:46

---
title: Three ways to Theme a React App
published: true
description: Three of many ways I found to theme React app
tags: 
---

Whether it might be to let the user toggle between light & dark themes or let them choose one of the many color themes, themes make websites better.

Here are 3 ways I found to theme a React App:

## Using CSS Variables

This one is fairly simple and can also enable you to add themes quite easily event after you built your website without considering adding theme. This method isn't event restricted to just React apps, you can even use this method to theme a Vanilla JS app.

[Github link](https://github.com/juzQrios/odin-restaurant-react)

[Theming with React.js or any in minutes with CSS Variables](https://medium.com/@harishv6665_49536/theming-with-react-js-or-any-in-minutes-with-css-variables-11d4ebecdb41) by [Harish V](https://medium.com/@harishv6665_49536)

## Using React Context

This one was hard for me to get it to work. 
[Here's how I got it to work](https://github.com/juzQrios/odin-weather-app/tree/react-dev)
Unfortunately I lost the link to the article I used to learn about this - fortunately I also used [React Context docs](https://reactjs.org/docs/context.html) while learning it.
I'll update this section as I think I understood this better

## Using Higher Order Components from other frameworks/libraries

[Styled Components](https://styled-components.com/docs/advanced#theming)

[CSSinJS Theming](https://github.com/cssinjs/theming)

[Material UI theming](https://material-ui.com/customization/theming/)
How to find the perfect solution
Tags: programming
Published: 2020-02-28 15:14:51

---
title: How to find the perfect solution
published: true
description:  Let's say you have a huge programming problem to solve. How do you solve it? What's your approach?
tags: programming
cover_image: https://cdn.shopify.com/s/files/1/0243/9469/4761/articles/rubber-duck-debugging_670x.jpg?v=1558873639
---

Let's say you have a huge programming problem to solve. This is one of the approaches I’ve found to work.

* You spend hours scouring Google, StackOverflow and some obscure tutorials
* You try tons of approaches, none of which work
* PANIC
* Defeated, you try to explain it to a colleague in search for help
* You suddenly find the perfect solution while you explain the problem to your colleague
* You go back to your desk and solve your problem

I’ve found solutions to my problems this way more times than I’d like to admit. 

That's the power of [rubber duck debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging)!
Sapper with Typescript
Tags: svelte, sapper, typescript
Published: 2020-02-28 15:09:31

Now we can develop sapper app with full power of typescript and we can refactor current project progressively.

Template project: https://github.com/mistlog/sapper-template.

This was made possible by [svelte-draft](https://github.com/mistlog/svelte-draft), see [examples](https://github.com/mistlog/svelte-draft-tutorial) or visit online playground: https://codesandbox.io/s/svelte-draft-tutorial-22mdl.
2020 Bash Scripts for React
Tags: react, bash, startup, shell
Published: 2020-02-28 15:08:00

#### I wrote a few BASH scripts to help in the Git and React World

####All instructions are in the README
[Bash Scripts](https://github.com/skylerwebdev/bash)

#### File 1 - Bash Aliases - to make your life easier...

## Script 1 - setup-react.sh

1. Asks for an app name and creates it in the current folder
2. Installs react-router and react-router-dom
3. Creates a file / folder structure:
 - `configs/AppRouter.jsx`
 - `configs/PrivateRoute.jsx`
 - `components/reuse/NavBar.jsx`
 - `components/pages/Header.jsx`
 - `components/pages/Footer.jsx`
 - `pages/user/Home.jsx`
 - `pages/user/Contact.jsx`
 - `pages/user/About.jsx`
4. Writes the Routes for the pages and puts content into each of them
5. Rewrites the App.js file to contain:
 - `<Header />`
 - `<AppRouter />`
 - `<Footer />`
6. Rewrites index.js to wrap the App component in BrowserRouter

## Script 2 - Git Create Branch
1. Asks for branch name
2. Creates a new branch
3. Sets the upstream for the branch

## Script 3 -- Git Deploy
1. Asks for a Commit message
2. Adds files
3. Commits files with commit message
4. Pushes files to current branch as long as the upstream is set

## Script 4 - Clean Node Modules
- Digs down deep to remove node modules folders
"El Carrillon" project  featured in the RaspberryPi magazine MagPi
Tags: iot, raspberrypi, coding, smalltalk
Published: 2020-02-28 16:06:58

---
title: "El Carrillon" project  featured in the RaspberryPi magazine MagPi
published: true
date: 2020-02-28 15:05:38 UTC
tags: IoT,RaspberryPi,Coding,Smalltalk
canonical_url: https://marianopeck.blog/2020/02/28/el-carrillon-project-featured-in-the-raspberrypi-magazine-magpi/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/oqnr4f2wnw9n4via9u3w.jpg
---

Some time ago [I blogged about a fantastic project Gerardo Richarte and I were doing with an 18-bell tower located in Argentina](https://dev.to/martinezpeck/developing-testing-and-mocking-the-largest-midi-instrument-of-the-world-with-a-raspberry-pi-and-a-diy-leds-piano-7el).

Back then, I showed some details of the architecture, code, and how I mocked-up “El Carrillon” with a homemade LED piano so I could test it at home.

Later on, I wrote [another post](https://dev.to/martinezpeck/el-carrillon-playing-midi-songs-on-an-18-bell-tower-with-a-raspberry-pi-and-smalltalk-3f1f), where you can see it running live and read some great news about the project (including an award!).

In this quick post, I am so happy to share with you some BIG NEWS:  
[El Carrillon](https://github.com/gerasdf/carrillon) is the first [VASmalltalk IoT](https://www.instantiations.com/iot/index.html) project to appear as a showcase in [the official RaspberryPi magazine, The MagPi!](https://magpi.raspberrypi.org/issues/91). It was a pleasure for me to work on the project with Gerardo Richarte, and thanks to Instantiations for their support! 

Thanks for re-sharing via twitter or [linkedin post](https://www.linkedin.com/posts/mariano-martinez-peck_vasmalltalk-iot-raspberrypi-activity-6638911668254490625-qLQ7).

{% twitter 1233142691858440193 %}
Kubernetes Namespaces Explained in 15 mins
Tags: kubernetes, devops, docker, beginners
Published: 2020-02-28 15:02:13

This is a short but thorough video about Kubernetes Namespaces. ***What they are and how they can help you manage your Kubernetes resources.***


In detail I'll go through the following topics:
- What are Kubernetes Namespaces?
- Explain the 4 Default Namespaces
- Why to use Namespaces with 4 Use Cases
- Characteristics of Namespaces
- Demo of how to create components in Namespaces
- Change the active namespace

Happy watching 🤓 💙


{% youtube K3jNo4z5Jx8 %}

-----------------

I'm happy to connect with you on 
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
Vertical Parallax Gallery
Tags: codepen
Published: 2020-02-28 14:41:35

<p>You can use this nice <strong>vertical gallery</strong> that has a logo parallax on the background of the image. 

The text itself is also moving with a delay. On Fullscreen it is a nice effect. 

Disabled on mobile as it was not tested the behaviours. The parallax had been deactivated for tablet and mobile but keeps responsive on tablet and mobile.</p>

{% codepen https://codepen.io/chris_tudor/pen/qBEwzam %}