teleren/devto huggingface dataset:
#DevHack: Deep linking to Microsoft Teams in Android and iOS
Tags: microsoftteams, pwa, ios, webdev
Published: 2020-10-21 15:43:09

This week #DevHack is about opening Microsoft Teams deep links from your solution/app. For a new proof of concept, I wanted to open a chat/app from my PWA app quickly. Luckily Microsoft Teams supports this with their `deep links` functionality.

> **Info**: Read more about Microsoft Teams deep links here: [deep links documentation](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links).

In the documentation, it states that you must use the `https://teams.microsoft.com/l/...` URL. The URL point to `chats`, `meetings`, `apps`, and more. In your browser, this works fine. For instance, if you use this URL in an anchor element: `https://teams.microsoft.com/l/chat/0/0?users=<email>`. It will automatically open Microsoft Teams chat for the specified user.

When I tried this approach on iOS, I faced an issue that another browser window would open on top of your PWA. When you reopen your PWA, you will have to close the browser window first before continuing the app, which is not an ideal situation.

Luckily the solution to solve it is very simple. Instead of specifying `https`, you can use `msteams`. This change will redirect your request to Microsoft Teams on your mobile instead of first opening a browser and redirecting you.

The URL would look as follows: `msteams://teams.microsoft.com/l/chat/0/0?users=<email>`.

**PS**: PWA is fun and powerful.
Simple tips to nail DevOps practice
Tags: devops, security, consulting, devopsimplementation
Published: 2020-10-21 15:36:09

Despite the downturn in economy due to the present unprecedented situation, we are witnessing a steady development in bringing back IT industry to normal with the support of innovation in technology. Though there are a lot of key players in the industry, there are still many companies that strive to make a mark due to the hardship of choosing the right service for the business needs. As far as DevOps is concerned, you can trust its capabilities of transforming your software development and release cycle that leads to more business benefits.

**DevOps Consulting Services**

In order to nail DevOps implementation, you should concentrate primarily on selecting the right DevOps consulting services. The right service provider is the one that understands and analyses your business requirement and then provides suitable solution at affordable pricing and not the ones that try to force fit their offerings that are irrelevant to your needs.
 
DevOps consulting services helps you in constructing proven architecture, ensuring continuous delivery by following best practices with the right business strategy. Thereby, a suitable DevOps consultant with remarkable experience can offer various benefits like improving agility, increase responsiveness, improve ROI, reduce time-to-market, etc.

**DevOps Assessment and benefits**

Assessment is the basic but significant activity that a good DevOps consultant should conduct. By researching about the existing policies, practices and problem-solving methods, the consultant assesses and evaluates the health of your business to help you with a perfect DevOps implementation suiting your requirements.

While implementing DevOps, the primary focus usually is on CI/ CD pipeline. [Continuous integration and continuous deployment/ delivery (CI/ CD)](https://ter.li/stbt3u) plays a crucial part in the modern tech-era and do not limit its benefits to cost saving or improving ROI but also has an effect on stakeholders, teams and the users. The DevOps consultants are responsible to educate your teams about proper implementation of CI/ CD pipeline and clarify all their queries to derive a resolution that helps you to reap more benefits.

Automation is the core of DevOps practice. Tasks like testing and back up modules are automated to make application development robust and consistent. Thus, it saves manual costs and increase revenue eventually. 

**Conclusion**

When you implement DevOps culture in the right way, it gives a lot of benefits to your business. These benefits have an impact on your organization by amplifying your business growth when you associate with the right [DevOps consulting](https://ter.li/lctbhz) service provider. Learn more about your consultant, their works and testimonies to know how they can add value to your business.
5 Visual Studio Code extensions I like to use
Tags: vscode, extensions, tips
Published: 2020-10-21 15:24:44

Check out some extensions and themes that I've known throughout my career as a programmer and that help me to be more productive.

# #1 [TabNine](https://www.tabnine.com)
This is an extension to auto-complete your code. However, it makes use of artificial intelligence for you to code faster since it identifies patterns in your project and thus improves the quality of the suggestions.

![Captura de Tela 2020-10-21 às 12.21.32](https://dev-to-uploads.s3.amazonaws.com/i/2tr7tgunlkyk5shjz77k.png)
___

# #2 [Dracula](https://draculatheme.com)
This is a super famous color theme created by the brazilian Zeno Rocha. It can be installed in almost all code editors and terminals.

![1*XjBry9powIU3GM4aiO-J-A](https://dev-to-uploads.s3.amazonaws.com/i/m37d92y20xls9iqc7f4x.png)
___

# #3 Code Spell Checker
Another great help we have is this, which checks if the words were spelled correctly. This avoids, for example, that common mistake of typing the word *lenght* instead of **length**.

![1*p_shTMURDx5rDvflBVGMVA](https://dev-to-uploads.s3.amazonaws.com/i/1q1rzecu31xnlx3zgx8y.gif)
___

# #4 Material Icon Theme
A theme that has a wide variety of icons based on Material Design. It applies an icon corresponding to the folder's name or the extension of the files, which makes it easier to identify them.

![1*qeTqrzEgUGslpv7snK31hA](https://dev-to-uploads.s3.amazonaws.com/i/4fn8ekzbgiyupgspmk6d.gif)
___

# #5 [Color Highlight](https://github.com/egonyans/vscode-ext-color-highlight)
As simple as her name, Color Highlight highlights colors supported by css like HEX and RGB. Very useful for working on the frontend.

![1*kF_WOgW6HyGp_ywoiT9RKw](https://dev-to-uploads.s3.amazonaws.com/i/2xsfhdgcq2x3h0ei0mnk.gif)
___

The cool thing is that in VS Code, when you hover your mouse over the color, it opens a panel to change to any other color or also change its transparency.

# Use Settings Sync from Visual Studio Code
With this option enabled, you can save settings, keyboard shortcuts and installed extensions to your Microsoft or Github account. Thus, you can share your configuration setup on all your machines.

Learn how to activate Settings Sync at [this link](https://code.visualstudio.com/docs/editor/settings-sync).
Learnings from Hacktoberfest.
Tags: hacktoberfest
Published: 2020-10-21 15:19:30

## What I Learned From Hacktoberfest

I was a beginner in open source and was new to git and GitHub so I thought I should give it a try and tried the challenge.
I learned how git and GitHub works and also learned that helping a project creates a good impact on the whole project and we learn by creating and applying our knowledge.
TIL: How to wait after user input in Angular forms
Tags: angular, reactiveforms, todayilearned
Published: 2020-10-21 15:09:10

Welcome to the very first series of Today I Learned (Also, my first post after creating a dev.to account for more than a year 😊 ). I have decided to post "Today I Learned" for 30 days to keep myself motivated and share my knowledge. 

Let's get straight to the point. I was trying to extract a url from the user input and get a web preview on the fly. I could only get that once I figure out the user has stopped typing. So I wanted to add a delay just before I execute my method to extract the url from the input text.

I have my `PostMessageComponent` like:
```typescript
@Component({
	selector: 'post-message',
	templateUrl: './post-message.component.html',	
})
export class PostMessageComponent implements OnInit, OnDestroy {
  message = new FormControl('');
  webLink: string;
  
  messageSubscription: Subscription;
  constructor() { }
  ngOnInit() {
	this.messageSubscription = 
        this.message.valueChanges.pipe(
	  debounceTime(2000),
	  distinctUntilChanged()
          ).subscribe(newMessage => {
		this.webLink = 
                    this.getUrlFromString(newMessage);
	  });
    }

  ngOnDestroy(): void {
    this.messageSubscription.unsubscribe();
  }
``` 

I created a message `FormControl` which has `valuChanges` as `Observable`. Through RxJs you can always use `.pipe()` function to run operators one after the other. In this case, I used the `debounceTime(2000)` which emits the observable after 2s has passed. After the function is executed it runs `distinctUntilChanged()` which basically is another function that emits all the items the source Observable will emit only if the value is different from the previous one.

This way, I can now use `getUrlFromString` method after waiting for 2s from the time the user finishes typing. I then use `this.webLink` to call an external service/api and perform other actions.

There could be a better way of solving this, but this is how I tried to solve it. Happy to get everyone's thoughts on it.

PS: If you are subscribing to something, don't forget to unsubscribe. That's why I have a `messageSubscription` which calls the `unsubscribe()` once the component is destroyed.
15, But Completed HacktoberFest, Here's how.
Tags: hacktoberfest, beginners, github, opensource
Published: 2020-10-21 14:51:23

Hi there! I'm MalwarePersus a Self-Taught Dev and I completed Hacktober Fest 2020 while I was still 15 (Turned 16 2 days ago :wink: ) with the PRs I submitted on Day 1.
Here's how I Went about it.

## Selection | Which Issues should I get into?
So as soon as the Fest started people started spamming any kind of repo they thought they could contribute to. I started looking for repos where there was not much crowd and was a good one to contribute to and I hopefully found several Repos where I Could contribute.

## Making Quality PRs
Now that I had Repos to contribute to I spent my afternoon and evening working on the issues in the Fork that I Created, when my work was complete I Went on to Make a PR, but as by that time a lot of people had already submitted their work, I Knew I had to stand out somehow. So I went through a guide available on dev.to and accordingly, added comments and sqaushed my commits and wrote a nice and descriptive Title & Description. 

And Hopefully all the Repos I Contributed to, Merged my PRs :relieved:

## So, What Next?
Yes, so that was it, my pretty small but amazing journey of hacktober fest 2020, but wait, did you think that i stopped there? huh? Nooo, I kept on Contributing and submitting PRs (which usually get rejected :joy: ) and still am doing.
It's all about learning more and more and helping others wherever you can, cause this is the community! the world of Open Source!

Hope you are having a Safe but Spooky Hacktober :jack_o_lantern:
Keep Hacking! One Pull Request At A Time!:relieved:
Searching for Innovative Places
Tags: discuss, career, design
Published: 2020-10-21 14:49:45

Hi everyone 👋 

I'm fascinated by organizations that combine design and engineering in some way. Usually in the form of a studio or lab of sorts, these places take the analytics of technical thinking and apply it to the creative needs of society's biggest areas for improvement.

Some of my favorites are:

- [Studio Roosegaarde](https://www.studioroosegaarde.net/projects)
- [X, the Moonshot Factory](https://x.company/)
- [MIT Media Lab](https://www.media.mit.edu/research/?filter=groups)
- [Frog Design](https://www.frogdesign.com/work)

My question is, does anyone know of any more companies / teams / organizations doing similar innovative work to the ones I've listed? Or even more well-known companies that have teams dedicated to creating experiences at the intersection of design and engineering - like how the Moonshot Factory is to Google.

I've come across many design studios and engineering-centered labs but rarely places that encourage both. 

Any ideas? 🤔
Use Caasy.io to build a personal blog with your DEV articles
Tags: showdev, javascript, webdev
Published: 2020-10-21 14:43:02

I recently launched [Caasy.io](https://caasy.io), a headless CMS that uses standardized elements to manage content. I've added a DEV integration, that allows you to import your published articles to Caasy. This is super useful if you use Caasy to manage posts of your personal blog and want to import articles from your DEV account. In the following I will show how easy it is.

First, we need to select one of our sites in Caasy and navigate to "Integrations" in the menu on the left.

![Caasy integrations](https://dev-to-uploads.s3.amazonaws.com/i/ms8datdpqfqgz0hovzzt.png)

The first card on the top says "Import Articles from DEV". Click the "Import" button to start the import.

![DEV username](https://dev-to-uploads.s3.amazonaws.com/i/km4zuc7vqz1um4o0hg72.png)

This will open a modal that asks for your DEV username. Enter it into the input field and click "Next".

![DEV articles](https://dev-to-uploads.s3.amazonaws.com/i/vvw5rc1uqhvceb2fchn6.png)

Now, we will see all the DEV articles published by the provided user. We simply select all the articles that we want to import to Caasy and confirm the selection by clicking "Import".

![Successfully imported](https://dev-to-uploads.s3.amazonaws.com/i/n0qq81u994qcg2re57zl.png)

Once, all the articles are imported, we will see a confirmation message and can navigate to "Blog Posts" in the menu on the left.

![Caasy blog posts](https://dev-to-uploads.s3.amazonaws.com/i/qlkebsiugutpifmybpbp.png)

We can see that the imported articles are unpublished by default.

![Caasy blog post details](https://dev-to-uploads.s3.amazonaws.com/i/18r54i28jvdp7tuw55j2.png)

We can click on the imported articles to make changes to the content if desired and publish the blog post by clicking on the toggle on the right and saving the changes.

That's it! It's as simple as that. You can now build your own personal blog or use our starter template to present your articles. Visit our [demo blog](https://demo-blog.caasy.io/) for an example.

If you are interested in using Caasy for your personal blog with our [free blog template](https://github.com/jz222/caasy-nextjs-blog-template), you can find a detailed [guide](https://docs.caasy.io/docs/getting-started-with-the-blog-template) in our docs.


### Additional Links

#### 💻 [Caasy Blog Template](https://github.com/jz222/caasy-nextjs-blog-template)

#### 📚 [Getting Started](https://docs.caasy.io/docs/getting-started-with-the-blog-template)
🎈SVGWave🌊 - A miniproject - courtesy of hacktoberfest
Tags: showdev, webdev, hacktoberfest, design
Published: 2020-10-21 14:42:07

✨As I mark the completion of hacktoberfest, I would say that the one thing which helped me cross the barrier to enter the world of open source, is hacktoberfest.

A slight of background before introducing [svgwave](https://svgwave.in), this was early of October I just heard of hacktoberfest, and although I was bit hesitant, I finally took up an issue to work on. The task was to implement a feature to add an SVG wave generator to an existing stencil js app. It was fascinating to me because I was pretty familiar with svgs, paths, & bezier curves. I immediately started working on the simple vanilla js version of svg generator, & built in a day or so. ➰

But this was where the hard part started for me. I was overwhelmed to see the big codebase/structure of the application. Although it was the first time I was looking something more than a personal project, I thought I would it pick up in a day or two. Since the project was based on stencil, I looked up a few docs and articles. In the end, I didn't grasp much and ask the maintainer to unassign myself from the issue and gave up.😢

Few days gone, I finished my four ❤ hacktoberfest PRs ( easy ones ), now it was time to do something of my own. Then suddenly an idea popped up to scale my small & simple vanilla js app to something bigger. I quickly looked up for some lightweight components based frameworks and decided upon using preact ⚛. And to my surprise, I was able to finish building the desired SVG wave generator within 4-5 days.🚀

![Github to vercel](https://dev-to-uploads.s3.amazonaws.com/i/0ww5i3txn2pr1qbcaxiq.gif)

I was delighted with the result and decided to showcase, and the same day I bought a domain -- svgwave.in, quickly deployed my app on vercel, configured DNS servers, and boom app was live in 10 mins.

## Svg wave - a tiny, customizable SVG wave generator
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/05gc4hlumbkk5b5znht9.png)
So, the tool I built is called SVG wave. Svg Wave is a fast, customizable SVG wave generator for UI/Website Designs. It offers minimal GUI toolbar to customize layers, colors, crests and heights of the wave to suit your designs. Visit - [svgwave.in](https://svgwave.in) to see it live. 

Final say - apart from all the spam PRs many maintainers are facing, hacktoberfest is doing its job in welcoming people to contribute.

I would also like to thanks all the contributors who helped the project. I would appreciate the feedback. 

⭐ us at [Github - svgwave](https://github.com/anup-a/svgwave)
What I Learned From Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-21 14:39:16

## What I Learned From Hacktoberfest

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
it is all about the love for open source software and it always help to learn something new.
“CSS Flexbox Cheatsheet” v3.1
Tags: css, vscode, html, beginners
Published: 2020-10-21 14:36:40

I’m really excited to share a new minor update to my [“CSS Flexbox Cheatsheet”](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet) VS Code extension! 🎉

The main change in this version is adding support for selecting the **directionality** to be used in the interactive demos.

I think it’s important to have developer tools that support changing of writing direction because there are a ton of websites and apps out there using languages that are written from right-to-left. Assuming everyone is using English or another left-to-right language is not inclusive enough. We need to think more broadly.

Here’s how the new setting works:

![Changing directionality demo](https://dev-to-uploads.s3.amazonaws.com/i/9facqq34t2dis3bxexj3.gif)

In case you need a quick refresher, directionality refers to the writing direction of the element’s text. It is specified by using the global `dir` attribute which can be added to any HTML element. The `dir` attribute can take `ltr`, `rtl` and `auto` as values.

The `rtl` value, which means right-to-left, is to be used for languages that are written from the right to the left (like Arabic).

To learn more about directionality, check out this [MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

This is a first iteration of the functionality. It’s not perfect but it makes the point. I’m now looking forward to your feedback! Tell me what you like about it and what you would like to see more of. I’ll make sure to add it in a future update 🙂

Go [grab it](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet) while it’s hot 🔥
Pt: 3 Needles to Nuxt: Building a Website for a Tooth and Nail Tattoos
Tags: vue, javascript, codenewbie
Published: 2020-10-21 14:25:29

If you're jumping in here, [here's part one](https://dev.to/drewclem/needles-to-nuxt-building-a-website-for-a-tooth-and-nail-tattoos-pt-1-4odi).

Also, [here's part two](https://dev.to/drewclem/pt-2-needles-to-nuxt-building-a-website-for-a-tooth-and-nail-tattoos-1med)

## Update Summary:
Thing have been moving forward for this project. Not as quickly as I would like, but progress is progress.

So far, my focus is getting static versions of the different homepage sections in place

The site is live on Netlify and you can check it out [here.](https://vibrant-varahamihira-3dc933.netlify.app/)

## What have I learned?

### SVG's win a lot of the fights

The first thing I learned is that it is _very difficult_ (for me at least) to use a complex SVG as a frame for images. I can only imagine compounding that with there being a carousel to deal with as well.

After fighting for hours, I relented and currently have a png placeholder for now. _I'd love some advice/suggestions if you know of a way to accomplish this with svg's._

![A hero section of a website](https://dev-to-uploads.s3.amazonaws.com/i/cubng1f312u02fc915h5.png)

### Carousels are rad

The second and super fun thing I learned was building a carousel with [Vue Awesome Swiper](https://github.com/surmon-china/vue-awesome-swiper). Just below the fold is a carousel that reveals itself from behind a cutout of a tattooer.

My first attempt at building this went horribly wrong. I tried to get overly complicated with positioning the carousel and using a clip-mask and a gradient.

Technically, it worked... on desktop... on chrome... only. I stripped it out and realized there was a much simpler way to go about it. Here's a quick overview of my solution

1. The carousel spans the full width of its container.
2. An empty div with a gradient matching the background color to transparent is absolutely positioned on top of the carousel and to the right.
3. The tattooer's image is positioned on top of those.

And here are the results!

![An image slider](https://dev-to-uploads.s3.amazonaws.com/i/2ruaxcrdbxg9ybnmup18.png)

![An image slider](https://dev-to-uploads.s3.amazonaws.com/i/e0f3f039o62atmowih3d.png)*Johnny Cool Hat is removed on mobile for a better user experience*

You can check out some of the code [here](https://github.com/drewclem/tooth-n-nail/blob/main/pages/index.vue). I still need to break parts of it out into components. But hey, it's a work in progress.

### Deploying to Netlify is a dream

I pushed the site to Netlify last night. Partly for fun, partly to test easier on different devices. I sent it to the client as well, and they're super stoked on the progress.

Netlify couldn't make deploying any easier. I clicked 'New Site', selected the repo I needed, and the rest was magic! And it rebuilds anytime I push to main!

## What's next?

- Finish homepage
- Wire in Firebase
- Attempt to build micro-cms with Firebase as back-end
- If all else fails, abandon cms idea and deliver a solid static site
Hacktoberfest 2020 
Tags: hacktoberfest, hacktoberfest2020, github, edviconedu
Published: 2020-10-21 14:23:06

Hacktoberfest 2020

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub. Hacktoberfest is open to everyone in our global community! You just need to make four contributions to open source before October 31 and can receive a free Hacktoberfest t-shirt.

Visit https://hacktoberfest.edvicon.org and follow instructions.

Language Stack: HTML, C#, Python

Until the end of October ONLY
Installing from local package failed ! 
Published: 2020-10-21 14:14:27

Hi everybody! 
I've started to use CKeditor for my strapi project. The CKeditor's build from strapi blog was missing some features, i started to build my own using CKeditor's online builder. After downloaded custom file from CKeditor ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uczi0y95bp26x99sdv88.png) i ran npm install && npm run build. In strapi project I ran npm install --save ./external/ckeditor5-strapi ( I copied to my strapi directory). All needed packages are inside node_modules and package.json ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wx5gfwfaqanylgfrb6t0.png) ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nydoqw5tcd7e1sazgfba.png)
But running npm run build still result in module not found? Am I install local package in a wrong way?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ariuy3qq3mqd7twicujb.png)