teleren/devto huggingface dataset:
How Many Releases Do We Need?
Tags: github, opensource
Published: 2021-02-06 04:51:58

We just got our [telescope 1.6 release](https://github.com/Seneca-CDOT/telescope/releases/tag/1.6.0) this afternoon! Ya!

I want to talk our new header (including menu bar and logo) ported to the Nextjs front-end (we're moving our front-end stuff from Gatsby to Nextjs). It's amazing to see the Nextjs front-end to have about 70% similar with the old Gatsby front-end. The reason I want to talk about it is how the developer work on this issue when he got stuck. He reached out on Slack and there happen to have people having time to debug with him, they even had a 3-hour screen-sharing meeting to code together. This is something that I always want to do but never get a chance to do so. Before the pandemic, it's easy to check on each other's work when you're in the same room. You could just stand up and walk to your team member's desk and ask her for help. In this pandemic, it's impossible to gather and meet up as a group.

Anyways, what I want to discuss is, after merging this PR, we found some bug in this newly ported header. For example, the logo should be a clickable link and lead us back to home; but it isn't. And, some CSS styling is not consistent. We still push it to our 1.6 release today. And we'll be fixing these small bugs in the upcoming release. This is quite different compare with what I thought about release. I always think, there should be some criteria about a specific release, and we have to make it before the release date. The thing is, people are not perfect, and there is always something we can't expect or control. The goal of release is to make it on that release date, instead of waiting for everything is done. Because there will never be one day that **everything** is done, it's not possible. We'll always come up with new ideas for enhancement or find some new bug that we didn't notice before.

No matter how careful we were before merging a PR, we sometimes forgot things. The good thing about working as a team is we can always check each other's works, finding bugs, and fixing them. It's even better when doing an open-source project, more people are helping you to check your code! How many releases do we need for a project? There is no answer. As long as we want to make the project get better and better, we need more releases to do so.
I just made my 1st game!!!
Tags: ios, android, gamedev, unity3d
Published: 2021-02-06 04:49:42

Hello, my name is Michel and I have been working on my first ever mobile game! After two long years of work, we finally managed to release our game on IOS & Android! Considering this group is full of link minded go-getters,  and I am still fairly new to the entrepreneurial world, I would love it i you could check out the game and give me all the comments you might have in order to improve: I am sure I can learn from you all!  The game is a mobile adaptation of the notorious card game SHED! Press the link for more info: https://linktr.ee/SHEDcardgame  Hope you enjoy and please do not hesitate to DM me! CHeers!
Using Web Components
Published: 2021-02-06 04:44:53

Let's just get this out of the way.
JavaScript sucks.
Ok, now onto the real content.

## Web components
  Web components are very helpful for web development. They allow developers to create their own HTML tags and define their behavior. Using them is actually extremely easy, if you are used to the command line. npm, to be exact. One of the larger public repos of HTML tags is the [lrnwebcomponents Github repo](https://github.com/elmsln/lrnwebcomponents). But, you can find the full library at the [Web Components home page](https://www.webcomponents.org). It also has getting started resources, making this post obsolete, but I'm going to keep typing anyways. 

### Using Web Components
  Once you find a web component you like, the first step is to download it. Simply type `npm install [tag]` into your terminal. So to download moar-sarcasm, you would type `npm install @lrnwebcomponents/moar-sarcasm`. You can then reference the tag as many times as you want in your project, provided you import it first. There are different imports for different file times and resource locations. The lrnwebcomponents repo has code snippets for how to use each tag, which I relied on heavily. Basically, the best way is to use a JS import statement, which is just importing the name of the tag, like so: `import "@lrnwebcomponents/moar-sarcasm"`. (Fun note; all web components need to be hyphenated. Learned that this week.) Then you can use the tag as normal.

### My Experience with Web Components
  One last short bit. I personally love web components. The large library of already made web components gives developers a large variety of code to reuse, which I love on the front end. I am more of a back end dev, so any help and/or cheating on the front end is amazing. JavaScript is JavaScript, but maybe I just need to relearn it. Maybe then I won't hate it. Moral of the story, JS bad, WC good.

## Video
{% youtube l7T6NSuddvw %}

Remember to eat your grapes today. Or raisins. Who am I to judge how you like your grapes?
HTTP  Request Methods  (aka HTTP Verbs) 
Tags: http, post, patch, delete
Published: 2021-02-06 03:27:37

Hey guys, I wanted to review something that can be pretty confusing for newer software engineers/coders. The different HTTP Verbs, what they mean and what they do. First let's talk a little bit about what a http request method actually is. HTTP or Hypertext Transfer Protocol has defined a set of protocols or request methods to indicate a certain desired action for a given resource. Let's review some of those http verbs now.

**GET** - A get request is a request to the specified resource and it should always only _retrieve_ data. An example get request could look like this; `HTTParty.get('https://example.api.testlodge.com/v1/projects.json')` This would return a string that contains the HTML content of the requested page. Admittedly, you probably don't want to return it that way because it will be messy and possibly useless but that is a simple get request in http. 

**POST** - The post request is used to submit a new entity to the requested resource. An example post request could look like this `HTTParty.post("http://example.com/login", body: { user: "demo@me.com", password: "my_password" })` 

**PATCH** - The patch request is used to edit a resource. An example patch request could look like this `HTTParty.patch('www.me.com', body: { name: my_name, age: 100 })`

**DELETE** - The delete request is pretty self explanatory, it is used to delete an entity from the specified resource. An example could look like this `HTTParty.delete('https://me.com/v1/projects/1.json')`

These are the four most commonly used http verbs, they are others that you can checkout [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)!

I think that as developers we can get used to things 'just working' and we don't always understand what's going on under the hood. So for example when we use the `resources: movies` in our ruby `config/routes.rb` file we just know that we have all of these routes created for us and it's very nice and helpful but sometimes it's good to just go back to the basics and write out these requests manually either for practice or just so you can better understand what is happening when you are creating these routes in your app. 

Additional resources:
[Ruby Guides](https://www.rubyguides.com/2018/08/ruby-http-request/)
[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)
How To Connect Mongoose (MongoDB) With Express Application
Tags: mongodb, express, mongoose
Published: 2021-02-06 03:04:06

MongoDB is an ODM (Object Document Mapping) for databases. MongoDB makes it easy to Connecting and managing node.js applications.

what is Mongoose?
Mongoose(MongoDB) is a document database with scalability and flexibility. Mongoose is an ODM used to establish a connection with the MongoDB database in node.js. it provides schema structure for the database collection. MySQL it is called as table.

**[How To Connect Mongoose (MongoDB) With Express Application](https://www.phpcodingstuff.com/blog/how-to-connect-mongoose-with-express-application.html)**

```
const express = require("express")
const Mongoose = require("mongoose")
const app = express()

mongoose.connect("mongodb://localhost:27017/testdb", {
  useNewUrlParser: "true",
})
mongoose.connection.on("error", err => {
  console.log("err", err)
})
mongoose.connection.on("connected", (err, res) => {
  console.log("mongoose is connected")
})
const PORT = 3000
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
```
Source: [https://www.phpcodingstuff.com/blog/how-to-connect-mongoose-with-express-application.html](https://www.phpcodingstuff.com/blog/how-to-connect-mongoose-with-express-application.html)
TAWIL: How to use Typescript ️
Tags: typescript, javascript, node, tutorial
Published: 2021-02-06 02:24:20

Today at work I learnt how to do the above in preparation for a project where I want to use [type-driven design](https://lexi-lambda.github.io/blog/2019/11/05/parse-don-t-validate/). Let's fire up [VS Code](https://code.visualstudio.com/) and take the four steps needed to layer a type-system onto a JS project.

### Step 1 - Ingredients: Sugar, spice and everything niceee

In addition to [Node.js](https://nodejs.org/en/) and [VS Code](https://code.visualstudio.com/), we just need to sprinkle `npm init` onto our command line. After initializing our environment, we add a dash of `npm install typescript` then finish up with a side of `npx tsc -v` for good measure. After the smoke clears, you should see something like this appear: 
```
Version 4.1.3
```
It may not be those exact version but it means we got typescript onto our system successfully.

### Step 2 - Where do we put all this stuff?

We're going to end up summoning a regular degular javascript file with the concoction we created above so let's setup a space for it to appear!
In your command line, type `npx tsc --init`. A file titled **tsconfig.json** should appear. At line **17** in the file, remove comments from **outDir** then add **"./test"** as the key value.

### Step 3 - It's a bird, it's a plane..... it's TYPESCRIPT!

Now, let's exercise the strength in our typing fingers and bring some typescript into existence! Create a file titled **test.ts** then add this bit of code:
```
let message:string = "Hello world!";
console.log(message);
```
Here `message:string` we are setting the type of the variable **message** to string. From now til the end of time it will only accept strings.

### Step 4 - Compile!

The final step is to compile the file. This will output a regular javascript file that we can then use like usual. In your terminal, run `npx tsc`. A new file titled **test.js** should appear in the **test** folder we had created earlier.

Just like that, you've used typescript! Here's some extra enough to get you up and running:

[Typescript for JS Programmers](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
NodeJS, MongoDB - "OR" queries - series #05
Tags: javascript, express, mongodb, database
Published: 2021-02-06 02:19:41


## Intro

When querying the database in MongoDB, all "Matches" you perform are conjunctions (i.e. "AND" operations).

To perform disjunction queries (i.e. "OR" operations), I'll use a wrapper func (helper func) called "matchOr".

Here's an example. For an indepth explanation, see the Notes section below.
```js
lpromise(
  mgArr(dbEnum.nlpdb, collEnum.users_actions,
    matchExact("type", "inquiry"),
    matchOr(existsNot("isDeleted"), isFalse("isDeleted")),
    lastInserted(5),
  )
);
```

# Notes
* USECASE Let's say users of our website are submitting inquiries. We want to have a look at the last few inquiries.

* We want to exclude deleted inquiries. Deleted docs (records) are soft-deletes, meaning they are flagged as deleted (isDeleted=true) rather than actually hard deleted from the db collection.

* The disjunct (the "OR") situation is that if there is no isDeleted field then the doc has never been deleted. But if there is an isDeleted field, only in cases where it's value is true is it deleted.

* The matchExact("type", "inquiry") stage filters by only correspondence types that are inquiries (this is an "AND" filter).

* The matchOr stage reads as this, "return the record if there is no isDeleted field, OR, return the record if the isDeleted field exists but its value is false". With this we are filtering out any "isDeleted=true"

* The last stage just retrieves the last 5 inserted records.

* The raw Mongo Aggregation Framework Stage syntax would look like this...
```js
{ $match: { $or: [{ isDeleted: { $exists: false } }, { isDeleted: false }] } },
```
So we've saved ourselves a bunch of curlies. :)


## What's Next

* If you have any questions, let me know, and I'll try my best to answer them.

* Other constructs in the example code here like "lpromise" and "mgArr" were explained earlier in this article series, so make sure you read those if you are new to the series.

* Tomorrow I'll show an interesting but very common type of operation:
We want to update a document by pushing a document onto one of its fields that is of type array.


## Res

https://docs.mongodb.com/manual/reference/operator/query/or/
Workshop de Golang
Tags: go, workshop, spanish
Published: 2021-02-06 02:01:15

---
title: Workshop de Golang
published: true
description: 
tags: golang, go, workshop, spanish
//cover_image: https://direct_url_to_image.jpg
---

¡Hola Gophers!

He compilado un conjunto de ejemplos y diapositivas para aprender Go. Si quieres aprender, colaborar o conoces a alguien interesado puedes darte una vuelta por [el repo en github](https://github.com/yorodm/golang-workshop/). Si gusta no olvide dejar su ⭐️.
Package Version - Update or Not Update?
Tags: opensource, npm, javascript, github
Published: 2021-02-06 01:54:19

Packages are helpful and sometimes critical for projects. However, packages have new release all the time, so as their dependency packages. A developer should learn how to determine if we need to update the latest version of packages or not.

I've been checking on something like this these days. There is a warning while building the telescope project, it complains about one of our package is too old to get supported. And this old version package is one of the dependency of the other package. Therefore, we need to look into both packages' new versions and see if the new version of packages can fit in our project; and if they can't, how to modify our project or should we look into other packages?

Also, it's a big work for checking all these outdated packages. Should we check each of them and see if the update breaks our program? Should we build a bot to always update the packages automatically when it's just a minor update (such as 1.6.7 to 1.6.8)? Does automatically updating packages save our time or give us more work (to fixing it) in the future?

There are a lot to think about when it comes to maintaining a project with its packages. I'm glad that I have this chance to dig into this new field :)
State Chart in Real-world
Tags: statechart, xstate, javascript, react
Published: 2021-02-06 00:44:37

## Implementing Complex Requirement in React

Due to complex business requirements, the moment a React developer adds multiple `useEffect`, `useState` & `useQuery`, he/she finds that such component's code is not fun to read & change.
 
I worked on similar business requirement for our  Login component :-

* On load of Login page, fetch product offerings, and wait till it finishes. 
* Take the user to the error page if it fails.
* Verify that `product_code` query parameter present in URL belongs to one of the products in product list recently loaded, if not then redirect to product offering page.
* If `product_code` query parameter is valid, then verify if accessToken present in sessionStorage/cookie is valid and not expired, if yes redirect user to retrieve application flow.
* if accessToken is not valid, load the latest marketing campaign. Wait till it get loaded and then redirect user to OAuth based login flow (we show latest campaign on login page).

I implemented the above using plain `useEffect`, `useQuery` of apollo and `useState`, but code was complex. I spent a couple of hours making it possible to comprehend, but wasn't satisfied with the end result. Most of you surely have similar business requirements. I am curious to find how you solve such a requirement using React or any other way.

## Statechart based development

For a simple example app, it may look over-engineering to use state-machine (though [conf talks by David](https://www.youtube.com/watch?v=VU1NKX6Qkxc) explains how even, simple requirement hide complexities/bugs in it). 
We use [xstate](https://xstate.js.org/) to implement a long funnel in our application.
I was aware about state/transitions/events/guards in xstate. We used it to build the skeleton of our funnel and flow in pages. But we were yet to utilize -
* [actions](https://xstate.js.org/docs/guides/actions.html) 
* [services](https://xstate.js.org/docs/guides/communication.html).
* [Eventless Transitions](https://xstate.js.org/docs/guides/transitions.html#eventless-always-transitions)

These two concepts are what make it really useful to tackle non-trivial real world problems using state-charts. This is how my machine looked for above requirement -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdsgrmafdh86ybreqvvj.jpg)

Then I realise that state-chart spec (or XState docs) is vast because it does cover all our use cases. We still have a long way to adopt xstate fully, but I am sure it'd be worth since it offers following lofty benefits :-
1. Formalism of logic and [Visualization](https://xstate.js.org/viz/)
2. Ease of unit testing (compare to unit testing the logic written in react UI components) 
3. [Auto Generated E2E test code](https://www.youtube.com/watch?v=tpNmPKjPSFQ&t)
4. Ease of [applying Analytics](https://www.youtube.com/watch?v=RqTxtOXcv8Y&t)

I am already seeing the first two benefits in our codebase, As a team, we are trying to reach the level where we can gain the benefit of (3. & 4.).
What do you enjoy more ? Writing new code or debugging old code ?
Tags: discuss, programming, fun
Published: 2021-02-06 00:36:56

There is obvious joy in creating something from scratch but sometimes I enjoy debugging so much more because it's like a puzzle and when the bug is finally found (a major portion of the puzzle sometimes :sweat_smile:) and fixed, it's such a rush!

I'm curious to know what sparks more joy for you!
Getting out of the tutorial hell
Tags: tutorial, learning
Published: 2021-02-06 00:09:29

Learning is shaped by habits and time. If you learn to code by yourself you know that you can get addicted and stuck to learning from tutorials and when the time comes to solve a problem in your job, you think there is actually a tutorial that can solve the issue you are facing. But there is not, and even though you know that you go to YouTube, Udemy to see if your problem can be solve by watching and later implementing what you watched.

The thing is you were hired to solve problems, and problems are unique. I know there are pattern design and ways other people in the past solved issues, and I take the time here advice you to learn design patterns, but at the end of the day your problems are there for you to solve. So summarizing:

1-Start getting familiar with reading documentation. Start a project using the technology of your choice and build it using only the documentation of that particular framework or library.

2-Get a project in mind, plan how to solve it and the technologies you would use, and do it using only the docs.

I hope want that you only get into tutorials because you want genuinely want to learn something new. Thank you.
A Guide to Unit Testing React Apollo Components
Tags: react, webdev, graphql, testing
Published: 2021-02-06 00:08:55

I wrote [a step-by-step guide](https://www.dolthub.com/blog/2021-02-05-guide-to-react-unit-testing/) for mocking and testing React Apollo components using a component on [our website](https://www.dolthub.com/) as an example.

It includes:
- Setting up Jest
- Mocking Apollo GraphQL queries and mutations
- Writing tests using `MockedProvider` and mocks
- Solutions to common errors

Check it out here: https://www.dolthub.com/blog/2021-02-05-guide-to-react-unit-testing/
Top 10 Angular meetup videos in 2020
Tags: angular
Published: 2021-02-06 00:06:14

Hey guys,

2020 was a long and busy year for all of us. To provide you an overview with all the latest tricks, tips and ideas, we've decided to make a collection for you with our favourite Angular-related meetup videos.

The following selection contains talks about a wide range of subjects, including using Angular with Firebase, routing with Angular Ivy, typer-checking with Ivy, using Jamstack and Scully, using Nx for faster Angular development, and implementing micro frontends.

You can check it out here: https://blog.meetupfeed.io/top10-angular-meetup-videos/

Happy learning!
Top 8 React meetup videos from 2020
Tags: react, reactnative
Published: 2021-02-06 00:05:07

Greetings,

We've created a top 8 selection of the most interesting and useful React meetup videos from 2020.

The roundup covers a bunch of interesting topics, like creating your first app on React, using Serverless with apps, combining React with GraphQL, styling React components, using TypeScript together with React, and why using a Devtool with React Native is a good idea.

Here's the link to it: https://blog.meetupfeed.io/top-react-meetup-videos-2020/

Regards,
MeetupFeed
Top 8 JavaScript meetup videos from 2020
Tags: javascript
Published: 2021-02-06 00:04:16

Hey there,

We've recently dropped a selection of the most relevant JavaScript videos from last year. Below you can find a wide range of topics including using Elm, building a Slack clone in Supabase, how to rely less on JS, using JavaScript on microcontrollers, using modern JavaScript with Python, transitioning to modern JavaScript, fixing slow running JS codes, and much more.

Check it out here: https://blog.meetupfeed.io/top-react-meetup-videos-2020/

Regards,
MeetupFeed
How to wrap long single words into a new line using CSS?
Tags: css
Published: 2021-02-06 00:00:00

---
  title: How to wrap long single words into a new line using CSS?
  published: true
  tags: CSS
  date: Sat Feb 06 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/wrap-long-words-into-newline-using-pure-css
  cover_image: https://melvingeorge.me/_next/static/images/main-3c36e30127e567c1e3bdab8a2ef223ae.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/wrap-long-words-into-newline-using-pure-css)
  
To wrap single long words into a new line using pure CSS, you can use a property called `overflow-wrap` and set its value to `break-word`.

```css
/* Wrap long word into newline */
overflow-wrap: break-word;
```

To make it work with the majority of browsers in the market we can use a combination of properties such as `word-wrap` and `word-break` like this,

```css
/* Wrap long word into new line to support on all browsers */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
```

That's it! 🌟

See the above code running live in [JSBin](https://jsbin.com/raduziruki/2/edit?html,css,output).

### Feel free to share if you found this useful 😃.

---