teleren/devto huggingface dataset:
dev.to/Twilio Hackathon Project: Mood Tracker!
Tags: twiliohackathon, node, livestream, announcement
Published: 2020-04-22 06:21:06

---
title: dev.to/Twilio Hackathon Project: Mood Tracker!
published: true
date: 2020-04-22 02:00:21 UTC
tags: twiliohackathon, nodejs, livestream, announcement
series: Twilio-Hackathon-Mood-Tracker
canonical_url: https://www.jaysonjphillips.com/blog/2020/04/dev-to-twilio-hackathon-project-mood-tracker/
---

I've finally decided on the project I want to develop for the [Dev + Twilio Hackathon](https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8): A Mood Tracking SMS application to make it easy, even in low-bandwidth or low-wifi situations, to be able to check-in on how you're feeling and see trends over time.

#### The What

The goal is get a full web application up and running with Twilio SMS (and maybe MMS) integrated with secure authentication.

I will be building the application using node.js for the web services and React for the front end experience. I'll probably go with SQL for the data storage, likely Postgres, and I'll use Heroku (may change my mind later) to host the application.

#### The Why 

During this time of sheltering-in-place, it may be hard to be in isolation from the social spheres you've had in _any_ form. It's also a time that may be hard to form habits that haven't been your routine, such as meditation, journaling, deep self-reflection and/or reaching out to friends and talking over the phone.

So, this app aims to meet anyone where they are, with a technical approach to making an accessible, lo-fi way for you to simply record your current mood/feeling.

#### The How

The application will a few main aspects to the experience:

- User Registration and Authentication
- SMS delivered mood prompts and check-ins (for the user to reply to)
- A dashboard to see trends over time
- A trusted contacts area where you can add one or more phone numbers to request a contact to check in on you as well as allow you to send a check in message to your contact
- Schedulable mood prompts so that you get prompted when you want to

#### The Where

I'll also be livecoding the journey over at [my channel on Twitch](https://twitch.tv/jaysonjphillips) (depending on when you read this, might not be any videos there yet, but check back soon!), usually around 7PM PST (but maybe earlier). Your best bet is to check in on my channel page or my Twitter ([@\_jjphillips](https://twitter.com/_jjphillips)) for any changes. I'll also have a series recapping from start to submission (due in 9 days!?!?!!) on [my site](https://jaysonjphillips.com) and syndicating it on my [dev.to](https://dev.to/jaysonjphillips) page (you might be reading this on one or the other).

4/22 7:00PM PST - the journey begins!
100 pages about how 4000 people work remotely in a distributed system
Tags: freelance, remote
Published: 2020-04-22 01:59:05

For over a decade, Toptal has thrived as a fully distributed global company, with over 4,000 individuals working in a fully remote environment, in over 100 countries. They have no office, and now they're sharing insights in their Remote Playbook at https://www.toptal.com/remote-work-playbook#trust-nothing-but-your-top-programmers

It is quite insightful and talks about:
- people
- culture
- productivity
- security
- support
- tools
- common problems

The "Common problems" is especially good as it shows what issues a company that's switching to remote will encounter, and how to address them.

Spend half an hour and read through it to gain all the insights.

P.S. If applying as a developer or as a client, please use my referral link and get my help in prepping to the screening https://www.toptal.com/talent/apply?as=developer#trust-nothing-but-your-top-programmers
APPEND (PYTHON3)
Tags: python, codenewbie, method
Published: 2020-04-22 01:33:55

The append() method in python adds a single item to the existing list. It doesn't return a new list of items but will modify the original list by adding the item to the end of the list. After executing the method append on the list the size of the list increases by one.

num = [100,200,300,400]
num.append(900)
print(num)





 Example from Sololearn
 FRANCNSTEIN © 2020 | Created 𝗐𝗂𝗍𝗁 ❤
Logical OR (||) vs 
Nullish Coalescing Operator (??) in JavaScript
Tags: node, javascript, opensourc
Published: 2020-04-22 01:32:23

With the latest release of version 14, the Nullish Coalescing Operator (??) is now supported in NodeJS. In this post let us see what is the use case of this operator and how is it different from the logical OR.

### Logical Or (||)
```javascript
const paginate = (options = {}) => {
  return [1, 2, 3, 4, 5].splice(0, options.limit || 3);
}

paginate(1); // expected: [1], output: [1]
paginate(); // expected: [1, 2, 3], output: [1, 2, 3]
paginate(0); // expected: [], output: [1, 2, 3]
```

How the logical or operator functions is, it returns the right hand value if the left hand value coerce to false. And that not only includes `undefined` and `null` but also `0` and `''`.

In many of our use cases, like the one above this causes unexpected results and we end up using the `typeof` operator.

### Nullish Coalescing Operator (??)
This solves the problem for us. This operators returns the right hand value only if the left hand value is either `null` or `undefined`.

```javascript
const paginate = (options = {}) => {
  return [1, 2, 3, 4, 5].splice(0, options.limit ?? 3);
}

paginate(1); // expected: [1], output: [1]
paginate(); // expected: [1, 2, 3], output: [1, 2, 3]
paginate(0); // expected: [], output: []
```

*Share your quick JavaScript bites in comments.*
Dear Younger Me
Tags: discuss, career
Published: 2020-04-22 00:40:46

Many of us (especially older developers) have been in this game a long time. We remember the days before the internet...yes, there were a lot of computers then too. As everyone grows in their career, you think back to what you have learned and from where. 

If you could send a letter (or email) to your past self, what advice would you give about your career? What to focus on? What work patterns (not design patterns) or ways of attacking problems would you gift to your past self?

Thoughts?
Client wants to modify the SPA website in the future.
Tags: angular, webdev, help
Published: 2020-04-21 23:51:29

Hello! I'm writing this in search of some help.

My client wants the website the team is building with Angular to be customizable in the future, when he asked me if that was possible he pointed out website builders like Wix. I don't really know if that's possible, but never heard before about uploading a web page and being able to play around with it using a website builder.

I don't think it's crazy to think this could be possible with a static web page, but since my team is building a SPA with angular, I just think I have to talk to the client and tell him that what he wants isn't possible. At the time of this writing I'm investigating and playing around with Wix, Webflow and others. 

I'd like to know if someone else has been in this situation before, if so, what they did and if you know about this topic, any recommendation will be of help and very well appreciated.
MIJO chatbot store site manager PART 2
Tags: twiliohackathon, ecommerce, chabot, gatsby
Published: 2020-04-21 23:29:31

---
title: MIJO chatbot store site manager PART 2
published: true
description: Manage a simple store through a chatbot and Twilio WhatsApp
tags: twiliohackathon, ecommerce, chabot, gatsby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ynbvqf74zth5exfby7iq.jpg
---
# Previous Post 

{% link fabianbg/mijo-chatbot-store-site-manager-part-1-1j5j %}

# Goals
1. Create the ExpressJS project DONE
2. Customize Gabsty Ecommerce template 
3. Integrate with Twilio API
4. Improvements

## Progress
This article covers the second and third goals, I refactored the project to organize better the code so I divided on domain and application. For the domain is all the business logic and for application all the endpoints.
The project has two kinds of endpoints Twilio and app.

![Project structure](https://dev-to-uploads.s3.amazonaws.com/i/eid1bzwmg5bdjvcak6mt.png)

Twilio endpoints expose:
* Create store create a new gatsby site based on a template
* Add a product add products to the Gatsby site
* Updates store site Deploy the static site
* Delete a product removes a product

App endpoints expose:
* Place order which sends a message to the store owner with the details and contact info.

### Gatsby theme
I customized the Gatsby site and it gonna be the first theme for the site, in the future I expect to add more themes.
The final result of the custom theme:

![Store theme 1](https://dev-to-uploads.s3.amazonaws.com/i/4nwo3zwfdi3sjwn7smxq.png)

All the created sites gonna have this theme.

### Twilio Integration
For the integration in the app I defined a folder that contains all the integration logic of sending a message through WhatsApp, and a body parse for Twilio chatbot requests.

I used the *Programmable SMS* and *Autopilot* services to generate a simple bot that can take some basic commands and send a request to the API.

The bot has an action for each endpoint:
![Bot tasks](https://dev-to-uploads.s3.amazonaws.com/i/p8w7t7n70ir44qirl44f.png)

I tested all with the Watsapp sandbox and exposing my app with Ngrok and all the integration is simple and very easy. All the info is in the documentation of Twilio.
The bot is very simple but does what I want with more time it can be improved and make more human-like.

I think the media handler for images gonna be a headache but it was pretty simple Twilio do the bigger part of handling the media and asking for it, the validation is done it too.

![Bot chat](https://dev-to-uploads.s3.amazonaws.com/i/3vbcxuu6fpvk0kb1y9d9.jpg)

![Created store item](https://dev-to-uploads.s3.amazonaws.com/i/5lfkinjvj4czawkpbdf3.png)


### Next steps
All the core idea is implemented, so the next step is to deploy the app so I gonna dockerize the app and add some improvements and bug fixes.
Pretty Up That Web APP!
Tags: design, beginners, javascript, css
Published: 2020-04-21 23:16:22

Hey Gang! 

I’m back to blogging about fun and helpful tools for working on all those cool apps you’re making. As I started up one of my first JavaScript(JS) webapps I had a bit of a rocky start on how I was going o organize all the content on my page. Would it be best if I included a navbar at the top, hmmm.. Or maybe the side? Where am I going to display the bulk or body of my data?! All these ideas started to swirl in my head and then one day a fellow developer introduced me to a grid organizer and wireframing app!

It was extremely helpful to start creating content in places where I had ideas of what was to go there. To start, CSS Grid Generator by sarah_edo is so helpful when it comes to paying out all the locations you want to place your data. Simply select the grid marks on the DOM and the grid generator will output code for your CSS so you can assign those div’s a class! Amazing!

![Step 1](https://dev-to-uploads.s3.amazonaws.com/i/s1tomvm5tkqa48xx5pnj.png)

![Step 2](https://dev-to-uploads.s3.amazonaws.com/i/7vwf4s0u8fx8pg438nub.png)
#CSS
![Step 3](https://dev-to-uploads.s3.amazonaws.com/i/4mehxoi8krw6ij8oufiv.png)
#HTML
![Step 4](https://dev-to-uploads.s3.amazonaws.com/i/cwcq0iqdbxc16sjpdrje.png)

https://cssgrid-generator.netlify.app/

If you need a bit more planning or wireframing with your project I also found that figma can be extremely helpful in making your projects come to life and keep your vision in line. Figma is a wireframing app the allows you to, well.. Wirefame--A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. ... Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations. 

![Frame](https://dev-to-uploads.s3.amazonaws.com/i/yq38rgd0ucobjbthuc7t.png)

https://www.figma.com/

Give it a shot! I’m sure you’ll find these just as helpful as I did.
JavaScript Quiz Question #1: Array Sort Comparison
Tags: javascript, challenge, webdev, programming
Published: 2020-04-21 23:12:31

---
title: JavaScript Quiz Question #1: Array Sort Comparison
published: true
description: Consider the following arrays. What gets logged in various sorting conditions?
tags: javascript, challenge, webdev, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gffod695zp2c6pr0k3ie.png
---

Consider the following arrays. What gets logged in various sorting conditions?

```javascript
const arr1 = ['a', 'b', 'c'];
const arr2 = ['b', 'c', 'a'];

console.log(
  arr1.sort() === arr1,
  arr2.sort() == arr2,
  arr1.sort() === arr2.sort()
);
```

A) true true true
B) true true false
C) false false false
D) true false true

Put your answer in the comments!
Creating & Running Expressjs Projects With create-express-app
Tags: node, express, javascript
Published: 2020-04-21 22:32:30

Create Express App is a command-line interface tool that helps you to initialize, develop and maintain your Expressjs applications. It offers a modern build setup with no configuration. At the same time, it still offers the flexibility to tweak the config of each tool.
Starting new Express projects used to be a huge hassle — there were dozens of dependencies, configuration files, and other up front requirements before you could even start writing a single line of code.
Install it on your machine
You’ll need to have Node >= 8.10 on your local development machine Installation is done using the npm install command: 
```npm install -g create-expressjs-app```
It’s really simple to create a new app — simply run create-expressjs-app followed by the desired name of your application, and it will scaffold a new app for you. Lets try it out: 
```create-expressjs-app init my-app```
The folder my-app was created by create-express-app and houses all of our new application's code. The project layout should look like this:

```my-project
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
|   ├── logo64.png
|   ├── logo128.png
│   └── logo256.png
└── src
    ├── App.js
    └── App.test.js
```
Building & running an application
npm start
Runs the app in development mode. Open http://localhost:3000 to view it in the browser.
npm build
Convert TypeScript or ECMAScript 2015+ code into a backwards compatible version of JavaScript
npm test
Runs the test watcher in an interactive mode.
We encourage you to contribute to create-expressjs-app!
[GitHub](https://github.com/getspooky/create-express-app)
Happy Coding !
Day 121 : React
Tags: hiphop, code, coding, lifelongdev
Published: 2020-04-21 21:38:24

_liner notes_:
- Professional : Internal Hack-a-thon Day 1. Had a group meeting to see what projects everyone submitted and allow anyone who didn't submit one to be able to join one. I want to refactor an older side project I made a few years ago to use the APIs we offer. I cloned my project and got it up and running! Awesome, this is going to go smoothly, I thought. Nope! haha The thing is that I used React to create the project. React has changed quite a bit since I created the project originally. When I tried to import our client SDK, it blew up! haha Turns out that I had to update React, which took longer than I would have liked. haha Rest of the day, I am going through step by step to rework the site's flow to use our APIs. The logic I used previously as far as determining certain values and when to show different UI elements will have to be worked a little to fit with the APIs. It's going...slowly. hahaha  

- Personal : Last night, I "finished" and published my second Web Component!! I was even able to place it into a simple CodePen example of how I plan to use it. Not going to lie. Felt pretty awesome to see it working so well.


![A stream in Beverley Brook, United Kingdom with grass and trees on the banks.](https://dev-to-uploads.s3.amazonaws.com/i/r7ycp06baf97gqqyk90n.png)

Going to keep working on refactoring this project. I think I'm on a roll.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube ynxVs2aB80M %}
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2020-04-21 21:17:51

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@catalinmpit offered some great answers to **[What are the hardest parts about working from home?](https://dev.to/ben/what-are-the-hardest-parts-about-working-from-home-3m5i)**.  On that last point, check out this "[How to turn off at the end of the day](https://dev.to/peter/when-working-from-home-how-do-you-turn-off-at-the-end-of-the-day-49g)" discussion thread from way back:
{% devcomment nnlc %}

@spoike pointed out a gotcha in response to a truly wonderful post: **[⭐️🎀 JavaScript Visualized: Promises & Async/Await](https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke)**:
{% devcomment nmaf %}

@jwp talked about the ongoing battle to continue learning in **[Dear Junior Web Developer...](https://dev.to/ruheni/dear-junior-web-developer-273c)**:
{% devcomment o1k9 %}

@gergelyorosz added on to a wonderful article: **[I Passed The Google Technical Interviews; You Can Too.](https://dev.to/emmabostian/i-passed-the-google-technical-interviews-you-can-too-4i6m)** with some thoughts of their own:
{% devcomment nnh9 %}

@ekafyi talked about their reasons for using Tailwind in **[Looking for a CSS framework that I don't have to fight against it (also Vue Framework)](https://dev.to/patarapolw/looking-for-a-css-framework-that-i-don-t-have-to-fight-against-it-also-vue-framework-j3f)**:
{% devcomment noj7 %}

See you next week for more great comments ✌
Take 12 Weeks to Help Your IT Team Work Smarter, Not Harder
Published: 2020-04-21 21:08:36

---
title: Take 12 Weeks to Help Your IT Team Work Smarter, Not Harder
published: true
description: by Wendy Ivany
tags: 
---

Here’s a question: does it seem like your IT team barely has time to blink?

We’ve all been there. Technology is such a fast-paced industry, it can sometimes take everything you’ve got just to keep up.

But let’s take a step back and think about all the elements that go into running a successful IT team. From talent to tools to processes, there are a lot of parts to keep track of and make sure are running at their highest potential.

Because running a successful IT team means making sure each element is optimized and working together in the most efficient and effective way.

Kind of like how brewing the perfect beer requires just the right ingredients, brewing process and technique. Or how the Ryder Cup brings together the very best in the game of golf, to create a dream team, optimized for competition.

When you’re in the weeds of the work, it can be hard to take a big picture look. But I’m here to tell you, investing the time to take a step back before moving forward to ensure you’re working smarter, not harder will pay off dividends in the long term.

Leading EDJE has been proud to partner over the years with IT departments from some of the nation’s top companies to help them and uncover the big and small steps teams need to take to bring out the best in everyone.

That’s why we’re so excited to introduce **EDJE Optimization – our proven 12-week process to optimize the success of IT teams.**

![Horizontal Process](https://dev-to-uploads.s3.amazonaws.com/i/c6b7e8iu8q1w6goquon2.png)

Through taking a look at six critical segments of technology, we come alongside IT teams to take a look at what’s working and what’s not, and develop a strategic plan for success grounded in research and best practices.

Is your team ready to take the next big step? Let's talk about EDJE Optimization and how together, we can help your team perform at its highest level. You can find out more at [www.leadingedje.com/optimization](optimization.html) , or drop us a note at ContactUs@LeadingEDJE.com
Jessitron & Avdi Learn About Alloy
Tags: formalmethods, domainmodeling
Published: 2020-04-30 22:53:27

---
title: Jessitron & Avdi Learn About Alloy
published: true
date: 2020-04-21 21:04:49 UTC
tags: formal methods, domain modeling
canonical_url: https://avdi.codes/jessitron-avdi-learn-about-alloy/
---

The other night Jess & I drank vodka mango drinks while she showed me [Alloy](http://alloytools.org/), which is “a language for describing structures and a tool for exploring them”, according to the website. I think of it as a model checker, although that may not be the correct term. The truth is there's a lot I don't understand about Alloy, but Jess did a great job explaining to me why this kind of model analysis matters.

Check out the stream recording (and bonus cocktail recipe) below!

{% youtube jnsT3lLcVF4 %}


P.S. the cocktail we were drinking, which I hereby dub the “Alloy Cocktail”, was as follows:

- 2oz vodka
- 1/2oz Aperol
- Mango juice (from concentrate)
- Splash of cranberry juice (the pure stuff, not the watered-down sweet stuff)
- Top off with club soda

Pour all ingredients into a glass full of ice, stir it up a bit, garnish with whatever's handy.

![](https://i1.wp.com/avdi.codes/wp-content/uploads/2020/04/IMG_20200418_154254_833.jpg?fit=768%2C1024&ssl=1)
Vintage Bundles talk at Magnolia JS
Tags: webperf, javascript, webdev
Published: 2020-04-21 21:03:19

More developers are starting to understand that web performance matters. From higher mobile search rankings to bottom-line revenue impacts, performance can make or break your web app. However, fixing performance can feel like a quagmire of expert-level nuanced understanding on so many topics. What would you think if I told you you could cut your JavaScript bundle size up to 50% by doing one thing only? Nearly 90% of worldwide web traffic runs on modern browsers, but we're transpiling all of our JavaScript down to ES5. That transpilation has a cost.

In this talk, we'll learn about differential serving, or serving modern bundles to modern browsers and legacy, transpiled bundles to older browsers. We'll talk about strategies, what to watch out for, and how to implement it using webpack. This talk is framework agnostic, and it's best if you have at least a basic understand of JavaScript.

[Magnolia JS](https://magnoliajs.com/) was my second virtual conference, and I had a blast participating. This video is the full day 1 video, and you can find my talk at 2:51:00. Check out the other talks that day too! Enjoy!

{% youtube Qkc8p4D6JM0 %}


---

This article was originally published on [sia.codes](https://sia.codes/posts/vintage-bundles-magnolia/). Head over there if you like this post and want to read others like it, or sign up for my [newsletter](https://buttondown.email/sia.codes) to be notified of new posts!