teleren/devto huggingface dataset:
Import and Rename Named Exports
Tags: javascript, webdev, modules
Published: 2021-02-02 21:56:21

---
title: Import and Rename Named Exports
published: true
date: 2021-01-27 00:00:00 UTC
tags: ['javascript', 'webdev', 'modules']
canonical_url: https://chan.dev/posts/import-and-rename-named-exports/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/r55b0u79sck1q7olw89z.jpg
---

JavaScript Modules have a syntax for remaning named exports, at import.

```js
import { exportedName as localName } from "…";
```

I think about this as "given name" and "nickname". _Michael Chan_ is the name my creators gave me but — on this site — I go by _chantastic_.

```js
import { michaelChan as chantastic } from "./michael-chan.mjs";
```

This is one of two tools we have for avoiding naming collisions between modules.

## Rename named exports to avoid a collision [#](#rename-named-exports-to-avoid-a-collision)

In my last post — [Import Named Exports](https://chan.dev/posts/import-named-exports/) — we imported two functions from the `string-utils` module: `hype` and `chant`.

```js
import { hype, chant } from "./string-utils.mjs";
```

What if the modules we're working in already has a `hype` function? Are we stuck stuck? Do we have to refactor our code to consider the new module?

Nope!

We use the `as` keyword to rename named exports locally.

```js
- import { hype, chant } from "./string-utils.mjs";+ import {+ hype as hypeText,+ chant+ } from "./string-utils.mjs";
```

With `as`, we have full control of the module we're working in.  
We can assign named exports to any free, local identifier.

## My take [#](#my-take)

The `as` keyword gives us a way to avoid naming collisions, or use a name that's more contextually accurate. This is great for working with modules in a codebase _and_ the larger npm ecosystem.

However, I find this to be a less ideal form collision avoidance than importing all of a module's contents into a single variable.

But we'll cover that in a future post 😅.

## Go pro [#](#go-pro)

This is part of a course I'm build on modules at [lunch.dev](https://www.lunch.dev/).  
When live, members get access to this and other courses on React.

<script src="https://cdn.podia.com/embeds.js" async="async"></script>[Join lunch.dev for videos](https://www.lunch.dev/member)
Building in public: how I'm preparing for a side-project launch [Day 1/7]
Tags: showdev, productivity, startup, beginners
Published: 2021-01-26 23:57:57

# Short intro

I made a simple don't break the chain online tool, that let you track a habit in a calendar view. 

It's called [iplan.to](https://iplan.to)

![ezgif-2-0a444c07c8aa](https://dev-to-uploads.s3.amazonaws.com/i/ndw5bwp8hzvi8sxn9n0x.gif)

I'm planning to launch it in a week, so I'll be researching and investing time on it these days. I thought it could be a good idea to make this in public. Hopefully it can help someone else in the same boat, and I can get some early feedback 🙂

**Disclaimer: I'm quite new with this thing, don't expect a tutorial, it's just some kind of journal.**

# Main goals

Found two main sites to launch the app:

🎯 Product Hunt

🎯 Hacker News

It seems you have one shot in these sites, so better to prepare in advance.

# Start building momentum

A list of other communities where I'll be posting content:

✅ [Reddit](https://reddit.com): multiple subreddits that are a good fit to gather some feedback (eg- r/startups, r/growmybusiness, r/Entrepeneur, r/design_critiques, r/indiebiz)

✅ [Makerlog](https://getmakerlog.com/): you can log your daily dev-related tasks and share your progress

✅ [DEV](https://youtu.be/dQw4w9WgXcQ): you're here 📌

⬜ [Twitter](https://twitter.com): post gifs, quotes and follow people

⬜ [Indie Hackers](https://www.indiehackers.com/): share stories about your startups

⬜ [AlternativeTo](https://alternativeto.net/): does your idea work like an alternative to another one?

⬜ [10words](https://10words.io/): submit an startup in just 10 words

⬜ [Quora](https://quora.com/): Google the problems your product solves, find the questions and answer honestly why you think your idea can help

I'll update later how it goes, and if it was worthy or not to spend time on them.

# Cool resources

📑 [GoGoGrow.It](https://gogogrow.it/explore-channels/): ton of directories, blogs, magazines, investors, advertisors, and communities. It has some cool filters and tags!

📑 [Directory of business strategies](https://airtable.com/shrxDphvku8V1GzPU/tbl18ApN1HYWHpPu6): lot of short summaries about startup articles

# Thanks!

That's all for now, I'll continue working on it and update tomorrow. Any feedback will be appreciated!
21 React YouTube Channels you should Follow 
Tags: react, youtubechannels, javascript, beginners
Published: 2021-01-26 23:49:30

> _It’s not necessary to know all the answers, but the channel of who may have it._

As a child, I believed that older people knew all the answers in the world. So you can imagine my frustration when my questions were landing with an IDK answer from my parents or another family member. But one day, my dad gave me a piece of advice I will never forget: _You don’t have to know everything. Just have the phone number of those who may have the answers._ And gave me the phone number of a library.

I’m recalling this now when a new year is barely starting and I’ve been finding tons of comments about people beginning the journey with a new programming language.

For those that are trying to keep up with React and Javascript and feeling exhausted, please don’t throw it the towel. Grab a cup of coffee (or tea, or a beer — I'm not judging), follow these 21 “phone numbers” (YouTube channels, you know what I mean), and play some videos. You will find what you’re looking for — from inspiration to education. Mastering is about persistence, patience, and have access to the right information. Just keep going!

1. Fun Fun Function: https://www.youtube.com/c/funfunfunction/featured
2. Wes Bos: https://www.youtube.com/user/wesbos/featured
3. FreeCodeCamp: https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ
4. Traversy Media: https://www.youtube.com/user/TechGuyWeb
5. Academind: https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w
6. The Net Ninja: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg
7. Techsith: https://www.youtube.com/user/techSithTube/featured
8. Pusher: https://www.youtube.com/user/pusherapp/about
9. The Coding Train: https://www.youtube.com/user/shiffman/featured
10. Hitesh Choudhary: https://www.youtube.com/user/hiteshitube/featured
11. LearnCode.academy: http://www.youtube.com/user/learncodeacademy
12. Dev Coffee: https://www.youtube.com/channel/UCqr-7GDVTsdNBCeufvERYuw
13. ReactCasts: https://www.youtube.com/channel/UCZkjWyyLvzWeoVWEpRemrDQ
14. Facebook Developers: https://www.youtube.com/user/FacebookDevelopers
15. Rally Coding: https://www.youtube.com/channel/UCQCaS3atWyNHEy5PkDXdpNg
16. Rem Zolotykh: https://www.youtube.com/user/MrRemchi
17. Codevolution: https://www.youtube.com/c/Codevolution
18. Ben Awad: https://www.youtube.com/user/99baddawg
19. Kent C. Dodds: https://www.youtube.com/channel/UCz-BYvuntVRt_VpfR6FKXJw
20. Programming with Mosh: https://www.youtube.com/user/programmingwithmosh
21. NodersJS: https://www.youtube.com/channel/UC7tUsO3S7424TMcgSCUOCow/

**Hope this will help you. Thanks for reading!**
Using range based for loops on legacy arrays
Tags: cpp
Published: 2021-01-26 23:45:44

# Introduction:
A short example on how to use range based for loops on legacy arrays

# Background
Recently I came across a pattern in our legacy software which looks something like this. This is a sample snippet which is extracted for showing this, just imagine we are doing a lot more uglier stuff here so that we cannot use any STL algorithms here.
```cpp
#include <cstdio>
#include <string>

int main() {
  int arr[5]{};

  for (auto i = 0; i < 5; ++i)
  {
      std::puts(std::to_string(arr[i]).c_str());
  }
}
```
This can be easily converted to ranged based for loops which is shown in the next section.

# Range-based for loop on C arrays:
```cpp
#include <cstdio>
#include <string>

int main() {
  int arr[5]{};

  for (auto i : arr)
  {
      std::puts(std::to_string(i).c_str());
  }
}
```
I think this really improves the readability of the section of the code, as we can now give a proper name to the variable instead of accessing it with index.

## How range based for loops works on C arrays?
Using the https://cppinsights.io/ we can see that the above snippet of code is expanded to the following.
```cpp
#include <cstdio>
#include <string>

int main()
{
  int arr[5] = {0, 0, 0, 0, 0};
  {
    int (&__range1)[5] = arr;
    int * __begin1 = __range1;
    int * __end1 = __range1 + 5L;
    for(; __begin1 != __end1; ++__begin1) 
    {
      int a = *__begin1;
      puts(std::to_string(a).c_str());
    }
    
  }
}
```
Reference: https://cppinsights.io/s/bd5b4336

# Conclusion:
When you see this kind of pattern in your code base remember you can replace it with range based loop or using some STL algorithms to make it more readable. Hope you enjoy this!
Wrap any rest API with GraphQL from the frontend
Tags: javascript, graphql, webdev, webperf
Published: 2021-01-26 23:19:22

After discussing with my direct network about this topic and how this could be achieved, I noticed that some people might still think that this is impossible or really difficult to put in place.

Following the link at the end of this post, will guide you to my personal blog where I will raise few options that will allow you to interact with your current rest API endpoint with a GraphQL client even if nothing is ready on the backend side.

So, if you have **less than 5 minutes** to discovers how this could be done, check this post in my personal blog [here](https://www.wallyfrikh.com/#/post/1pxTRvJWXGNGYK1Ji4oMDN)

If you are in a hurry, you can just read the code below.

```js
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { RestLink } from 'apollo-link-rest';
import { gql } from 'apollo-boost';
// the gql import above is supposed to be like the following
// import { gql } from 'graphql-tag';
// For some reason it's not working in codesandbox and I just found this workaround

// setup your `RestLink` with your endpoint
const restLink = new RestLink({ 
  uri: "https://rickandmortyapi.com/api",
  responseTransformer: async response => response.json().then(data => data.results) ,
});

// setup your client
const client = new ApolloClient({
  link: restLink,
  cache: new InMemoryCache(),
});

const query = gql`
  query allcharacters {
    characters @rest(type: "Character", path: "/character") {
      name
    }
  }
`;

// Invoke the query and log the person's name
client.query({ query }).then(response => {
  console.log(response.data.characters);
});
```

As said above more details and useful links about this topic, [in my personal blog post](https://www.wallyfrikh.com/#/post/1pxTRvJWXGNGYK1Ji4oMDN)


Hope it will help you to crack the subject

Wally
Simple Composition with Array.Reduce
Tags: javascript, functional
Published: 2021-01-26 22:50:02


While looking at [functional-php](https://github.com/lstrojny/functional-php), I saw a pretty neat way of doing composition with an array_reduce method, and wanted to recreate it in JavaScript. There are plenty of libraries that implement this (and do so more effectively), but it's pretty fun knowing that you can get this functionality with a couple lines of plain JavaScript.

Here it is:

```js
const compose = (...funcs) =>
  funcs.reduce((previous, current) => x => current(previous(x)));
```

First, the spread operator here has the effect of accepting all the arguments as a single array, allowing us to use array methods on function's parameters.

```js
const compose = (...funcs) => // return composed function
```

So later, we won't have to pass an array of functions, and can just pass an arbitrary number of parameters:

```js
const timesTwo = x => x * 2;
const timesThree = x => x * 3;

const timesTwelve = compose(timesTwo, timesTwo, timesThree);
```

Since the compose function must itself return a function, we need to pass a callback function to the reduce method that returns a function:

```js
const callback = (previous, current) => x => current(previous(x));

funcs.reduce(callback);
```

_Previous_ will start as funcs[0] and _current_ as funcs[1], but _previous_ will accumulate each function in the array with each call of the callback function: 

```js
previous = x => funcs[1](funcs[0](x)); // first run...
previous = x => funcs[2](previous(x)); // second run...
previous = x => funcs[3](previous(x)); // third run...
```
Once it's reached the end of the array, you have a function that contains calls to each function in the original array, with the very first function call containing your initial x. By returning functions that accept an x with each callback, you ensure that the x can be passed all the way back to the first function call. 

For composition to work, the functions must all be unary (i.e. the must all take just one parameter). This is why curried functions are so useful - they make it much easier to compose functions together.

With compose, you can then create functions by simply stringing other functions together:

```js
let phrase = "No imperative code examples here!";

const dropLastWord = s => s.split(" ").slice(0, -1).join(" ");
const firstLetterOfEachWord = s => s.split(" ").map(w => w[0]).join(" ");
const removeSpaces = s => s.split(" ").join('');

const decodeMessage = compose(
    dropLastWord,
    firstLetterOfEachWord,
    removeSpaces
);

decodeMessage(phrase) // Nice
```
And also: if you prefer to have functions evaluated from right to left, you can use reduceRight instead:

```js
const compose = (...funcs) =>
  funcs.reduceRight((previous, current) => x => current(previous(x)));
```
Problem Solving Approach
Tags: javascript, html, css, webdev
Published: 2021-01-26 22:47:07


---
title: Problem Solving Approach 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Intro to Problem Solving
                       -Understand the problem 
                       -Concrete Examples
                       -Break it down
                       -Solve or simplify
 
             


###Intro to Problem Solving 

 Steps to take to solve an unknown problem. How to get started when faced with uncertainty. 

An algorithm is a process or sets of steps to accomplish a certain task. 

Everything in programming involves some kind of algorithm. 
Understanding how algorithms function is the foundation of developing strong programming skills. 

To improve algorithmic programming skills, it is important to fist devise a plan for solving problems, then master common problem solving patterns. 



###Understand the problem 
There is a process to understanding problems. Before it is possible to come up with a solution, it is important to understand what needs to be fixed. 

1. Restate the problem in your own words.
2. What are the inputs that go into the problem?
3. What are the outputs that should come from the solution to the problem?
4. Can the outputs be determined from the inputs? Is there enough information to solve the problem? 


###Concrete Examples
Explore existing examples. Go out and find the solutions that may already exist for a programming problem. There is infinite amount of ways to solve programming problems, therefore, seeing solutions may show you how a proper solution may work. 

Research how and why that particular solution may or may not be most successful for solving that particular problem. 

Once you see enough examples and understand the fundamentals of solving problems, the existing solutions will stick out to you as being obvious how they were solved. 



###Break it down
Simplify a complex problem to find a simple solution. 
Explicitly write out the steps you need to take. Think of how each line of code works and will function with other parts of the bigger code block. Does the interaction makes sense to program the solution in that way? Maybe there is a better way.. 



###Solve or simplify
When you figure out what problem is and what the solution may be then it is time to solve the problem. After solving it, it is beneficial to go back and review the code and the output to see if it is working the way it suppose to. Also, it may be possible to rewrite the code in a way that is easier to read and more simplified.
ACF Repeater with Separator
Tags: acf, wordpress, repeater
Published: 2021-01-26 22:26:15

Comma separated ACF Repeater except for last row.

```
<?php $variable = get_sub_field('repeater_field'); ?>
<?php if ( $variable ): ?>
<?php $notLast = $variable;
      foreach ($variable as $v ): ?>
        <?php the_field('field_name', $v); if (next($notLast)) { echo ','; } ?>
<?php endforeach; ?>
<?php endif; ?>
```
Day 295 : Fingers
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-26 22:07:37

_liner notes_:
- Professional : Got up early to take part in some team building exercises. We did these before but these were new ones. Had a great time on each occasion. Really good to get a chance to hang out with my team mates "outside" of work. Also had a one on one meeting with another team member. It was a really good day. Spent the rest of the day working on fine tuning my slides for the presentation tomorrow.

- Personal : Last night, I finished up creating the slides for my presentation. Did some fine tuning. Ran into some CSS issues and getting things to look how I want. Then went to sleep early since I was getting up early.

![A field of tall green grass in Great Bookham, United Kingdom](https://dev-to-uploads.s3.amazonaws.com/i/d4o63x1k9a5h7lb0pl8m.jpg)

Going to finish up my script for the presentation and run through it a couple of times and make sure the site works. I haven't had to use it since this time last year when I gave a presentation. Hopefully it all still works. haha It should, I haven't changed anything. Fingers crossed. One way or another, it will be done tomorrow. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube o1v7mGD14lo %}
Removing Useless Expressions - JavaScript Best Practices
Tags: codequality, webdev, programming, javascript
Published: 2021-01-26 21:42:06

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

To make code easy to read and maintain, we should follow some best practices.

In this article, we'll look at some best practices we should follow to make everyone's lives easier.

# No Constant Expressions in Conditions

We shouldn't have constant expressions in conditions.

They either always run or never run if they're present.

For instance, don't write:

```
if (false) {
   foo();
}
```

Instead, write:

```
if (x === 1) {
   foo();
}
```

# No Control Characters in Regex

We shouldn't have control characters in a regex.

They are rarely used and it's probably a mistake to check for them.

Instead of writing:

```
const pattern = /\x1f/;
```

or:

```
const pattern = new RegExp("\x1f");
```

We write:

```
const pattern1 = /\x20/;
const pattern2 = new RegExp("\x20");
```

instead.

# Don't Use debugger 

`debugger` sets a breakpoint in our JavaScript code so we can inspect the variables.

This shouldn't be in our production code.

So instead of writing:

```
const isTruthy = (x) => {
  debugger;
  return Boolean(x);
}
```

We write:

```
const isTruthy = (x) => {
  return Boolean(x);
}
```

# No Duplicate Arguments in Function Definitions

Duplicate argument names isn't valid syntax.

It'll throw an error if strict mode is on.

Instead of writing:

```
function foo(a, b, a) {
  console.log(a);
}
```

We write:

```
function foo(a, b) {
  console.log(a);
}
```

# No Duplicate if-else-if Conditions

We shouldn't have duplicate conditions in our `if` statements.

The duplicate is useless and causes confusion.

So instead of writing:

```
if (isSomething(x)) {
  foo();
} else if (isSomething(x)) {
  bar();
}
```

We write:

```
if (isSomething(x)) {
  foo();
}
```

# No Duplicate Keys in Object Literals 

Duplicate keys are confusing and useless.

So we shouldn't write:

```
const foo = {
   bar: "baz",
   bar: "qux"
};
```

Instead, we write:

```
const foo = {
   bar: "qux"
};
```

# No Duplicate case Label

`switch` statements shouldn't have more than one `case` label.

As with other duplicates, they cause confusion and are redundant.

So instead of writing:

```
switch (a) {
  case 1:
    break;
  case 2:
    break;
  case 1:
    break;
  default:
    break;
}
```

We write:

```
switch (a) {
  case 1:
    break;
  case 2:
    break;
  default:
    break;
}
```

# No Empty Block Statements

Empty blocks are useless. So we should remove them.

Instead of writing:

```
if (foo) {
}
```

or

```
while (foo) {
}
```
or

```
switch(foo) {
}
```

We write:

```
if (foo) {
  bar();
}
```

or

```
while (foo) {
  bar();
}
```

or:

```
switch(foo) {
  case 1:
    //...
    break;
}
```

# Conclusion

We shouldn't have duplicates of most things.

Also, we should remove control characters from regexes and `debugger`.
Open-source DAW + Audio Engine Update (#4)
Tags: music, audio, sound, audioengine
Published: 2021-01-26 21:38:37

---
title: Open-source DAW + Audio Engine Update (#4)
published: true
description: 
tags: music, audio, sound, audioengine
//cover_image: https://direct_url_to_image.jpg
series: Funktional Projects Updates
---

Hello.
In the past few days, I started implementing the audio engine. If you haven't read the previous posts, here they are: [part 1](https://dev.to/amuuu/i-m-making-an-open-source-daw-1l1), [part 2](https://dev.to/amuuu/choosing-the-tech-stack-for-my-open-source-daw-2oa4), [part 3](https://dev.to/amuuu/open-source-daw-update-long-time-no-see-3-g6m).

I broke down the project into a few implementation phases:

1) Just make some sound as the output
2) Just make a simple virtual instrument play an output
3) Make multiple simple virtual instruments play their outputs together
4) Just make a simple effect for a virtual instrument
5) Process effects sequentially for a track and generate a single output buffer representing the track.
6) Just play an audio file
7) Write to an audio file
8) Multiple callback functions for different occasions.

At the end of phase 7, the engine will have the basic functionality. I can come back to each phase and enhance them or add new stuff to them.

I'm currently in the beginning of phase 4. The UML chart of the project that I worked on for a few weeks is helping a lot, although some details of it change as the project goes on. I'll put the diagram on the [GitHub repo](https://github.com/funktional-stdo/ava) once I update it.

It's pretty easy to build the project thanks to cmake scripts, although I haven't checked if it works properly on other computers and OSs yet (dependency issues.)

The GitHub repository is public and available [here](https://github.com/funktional-stdo/ava)! It doesn't have documentation or a wiki yet. I may use doxygen but I still have to add comments for the code. It does have a kanban board on GitHub so everyone can see how it's progressing.
Role/Status Based CRUD Application Using Laravel 7
Tags: php, laravel
Published: 2021-01-26 21:36:45

This Application is demonstration for managing visa center applicants, in terms of receiving passports and managing visa status (received, pending, rejected or approved).

**code sample for form that handle status with consideration to current status of a ticket:**
{% gist https://gist.github.com/theahmedlatif/7d4c2b03b6a71e6299fe08999d84a8a7 %} 

Also in this application I included a function assign a ticket to specific user to work on it.

This all come along side with basic dashboard to display aggregation of each status for last 30 days and for same day

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

###**So Let's go to the presentation**

{% youtube 15LzQRlW1cs %}