teleren/devto huggingface dataset:
How do you know? that you need a new VSCodium(VSCode without telemetry) extension?
Tags: vscode, productivity, webdev
Published: 2020-02-22 11:20:02

Hi everyone,

Today I am going to write about how to choose a VSCodium(VSCode without telemetry) extension when it is time to add something more to your dev toolbox.

You don't know what VScodium is never heard about it? no problem read my previous article on it here [VSCodium article](https://dev.to/wolfiton/vscodium-the-open-source-version-of-vscode-without-telemetry-4dn0).

From my point of view, the best time to go searching for a new extension is when you feel that your code should be easier to maintain than now.

Also, if you experience a sudden decrease in productivity and some tasks just become repetitive.

These are the signs that you need help and it is a good time to go hunting for an extension to help you solve these problems.

For example, you write a lot of code but for some odd reason, your formatter will not format the file you were working in.

**What can we do? it happens right?**

Also, when you manage to bring the formatter to the normal state, you discover that it would be useful to see the indentations more easily.

So the next step is to open the extension icon in the editor and start searching.

**But for what?**

I find it best most of the time to start with a keyword search like `indent`, in this case. Look at the reviews and what the author wrote in the description of the extension.

I hope you enjoyed this article, **Dear Reader**.

What method do you use to search for extensions, **Dear Reader**?

Please write in the comments below, also if you like my articles don't forget to share them on social.

Have a nice weekend, **Dear Reader**!
Object To Collection
Tags: javascript, typescript, node
Published: 2020-02-22 11:09:02

**Map a plain javascript object to a simple collection with curd functionality**

Recently, I was working in a project which requires giving the users an ability to manage an application by having custom settings, after that, another requirement landed up which tells that the client needs to log users movements and show them later on, this was a little fuzzy when it comes to deal with duplication and other stuff since what I have just a plain javascript object that will be sent to backend after while and more cases I faced while I was working on it.

after a bit of writing the logic, it grows to be not good to included directly in the project for reasons!

so It's ended up to published on NPM, perhaps it will help anyone.
[DocumentStorage](https://www.npmjs.com/package/@ezzabuzaid/document-storage), the name looks weird a bit, but I didn't find a good one.

You can find the documentation in the [link](https://www.npmjs.com/package/@ezzabuzaid/document-storage)


also, you can find my other personal project [here](https://github.com/ezzabuzaid)
Advanced TypeScript Exercises - Answer 4
Tags: typescript, javascript
Published: 2020-02-22 10:41:39

--- series: Advanced TypeScript Exercises ---

The question was about creating utility generic type which will be able to get any function type and create a new type which will have one argument more at the front.

## Solution 1: Using [Parameters](https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterst) and [ReturnType](https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypet) utility types
```ts
type AppendArgument<F extends (...args: any) => any, A> 
 = (x: A, ...args: Parameters<F>) => ReturnType<F> 

// using
type FinalF = AppendArgument<(a: number, b: string) => number, boolean> 
// FinalF is (x: boolean, a: number, b: string) => number 👍
```
What we did here:

- first argument `F` is narrowed to only function types `(...args: any) => any`, such narrowing is crucial in order to use `Parameters` and `ReturnType`
- we create a type which first argument is type `A` and other arguments are spread by `...` from the original function by `Parameters` which produce arguments types of the original type
- we say that our new type returns the same thing as the original was by `ReturnType`


## Solution 2: Using infer

```ts
type AppendArgument<F, A>
  = F extends (...args: infer Args) => infer Return
  ? (x: A, ...args: Args) => Return
  : never

// using
type SomeF = (a: number, b: string) => number
type FinalF = AppendArgument<SomeF, boolean> 
// FinalF is (x: boolean, a: number, b: string) => number 
```
The second proposition isn't using any utility types, but we use directly `infer` which is a tool for getting types from generic types, and function is this kind of a type, parameterized by two parameters - arguments type and return type.

> **Note** we can understand utility types ReturnType and Parameters as types abstraction which are using `infer` in the definition, so they are kind of abstraction over construct we did in solution 2

What we did here:

- we infer all arguments by `...args: infer Args` and return type by `=> infer Return`
- we are putting newly obtained types in the definition, with putting as first argument type `A` exactly as we did in solution 1
- take a look that we needed to use conditional type, as this is the only way we can work with `infer`

If you want to know more about `infer` check the [Answer 1 from the series](https://dev.to/macsikora/advanced-typescript-exercises-answer-1-59ge)


**This series is just starting**. If you want to know about new exciting questions from advanced TypeScript please follow me on [dev.to](https://dev.to/macsikora) and [twitter](https://twitter.com/macsikora).
My WebDev Notes
Tags: html, css, javascript
Published: 2020-02-22 10:15:14

---
title: My WebDev Notes
published: true
description: A series of notes about my experiments in web development covering stuff from HTML, CSS, JavaScript, and everything in-between.
tags: html, css, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dq5tyg1hlhvhi7h09sj2.jpg
series: My WebDev Notes
---

## __Introduction__

As the title indicates, this post will link to a series of articles which are __my experiments__ and __learning endeavors__ in Web Development.

Each article in the series will go into great detail about the experiment(s) or what I was trying to learn and how I eventually figured it out.

The code snippets for each post will be available [in a repository](https://github.com/ziizium/my-webdev-notes) on GitHub.

##__List of articles__

* [MyWebDev Notes: CSS Loaders](https://dev.to/ziizium/my-webdev-notes-css-loaders-398m)
* [MyWebDev Notes: Filter table](https://dev.to/ziizium/my-webdev-notes-filter-table-4f5f)
* [My WebDev Notes: Center page elements with CSS Grid](https://dev.to/ziizium/my-webdev-notes-center-page-elements-with-css-grid-3gke)
* [My WebDev Notes: Photo gallery with CSS Grid](https://dev.to/ziizium/my-webdev-notes-photo-gallery-with-css-grid-a7k)
* [My WebDev Notes: Fullscreen overlay navigation](https://dev.to/ziizium/my-webdev-notes-fullscreen-overlay-navigation-7gk)
* [My WebDev Notes: A simple TO-DO List application](https://dev.to/ziizium/my-webdev-notes-a-simple-to-do-list-application-469n)
* [My WebDev Notes: HTML noscript tag and script blocking extensions](https://dev.to/ziizium/my-webdev-notes-html-noscript-tag-and-script-blocking-extensions-o4k)
* [My WebDev Notes: A simple and accessible accordion](https://dev.to/ziizium/my-webdev-notes-a-simple-and-accessible-accordion-4076)
* [My WebDev Notes: How to create a tooltip with HTML and CSS](https://dev.to/ziizium/my-webdev-notes-how-to-create-a-tooltip-with-html-and-css-d37)
* [How to create a modal](https://dev.to/ziizium/how-to-create-a-modal-12bi)

## __Credits__

Cover photo by [Thought Catalog on Unsplash](https://unsplash.com/@thoughtcatalog).
QR Code Scanner for React Native Tutorial
Tags: react, reactnative, javascript, beginners
Published: 2020-02-22 10:09:42


In this video, we cover installing the react-native-qrcode-scanner component for react native. It uses the react-native camera module to allow you to capture QR codes visible via the component. We also cover a couple of extra things such as using react-native-qrcode-svg library to display the QR codes we scan and display them in a resizable SVG format.
{% youtube e7qf9UJvoC0%}
**Included in this video:**
* Installing React Native Camera
* Installing React Native QR Code Scanner
* Installing React Native QR Code SVG
* Setting up the Depencencies required for the project
* Fixing undocumented bugs for getting the project up and runing
* Capturing QR codes and calling functions when they are detected
* Outputting SVG QR codes on the mobile device

QR codes have heaps of uses, from scanning discount vouchers to using them as quick membership cards for example. Hopefully this video will help you get started using them if you were considering it.

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [Patreon](https://www.patreon.com/adriantwarog)
* [Twitter](https://twitter.com/twarogadrian)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Learn how to make a Triangle in CSS once and for all](https://dev.to/adriantwarog/learn-how-to-make-a-triangle-in-css-once-and-for-all-2pfe)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [How to implement Dark Mode with CSS new media call: prefers-color-scheme](https://dev.to/adriantwarog/how-to-implement-dark-mode-with-css-new-media-call-prefers-color-scheme-3h65)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Tech Trends Taking Over The iOS App Development Industry
Tags: ios, devops
Published: 2020-02-22 10:00:19

Mobile app development has quickly established itself as a force to be reckoned within the past few years. With the growing usage of mobile phones combined with the sharp decline in the price of the internet, mobile apps have become a force to be reckoned with.

Let’s take a quick look at one of the two stalwarts of this sphere – iOS app development.

When it comes to iOS app development, there is nothing more important than constantly innovating yourself. Being at the cutting edge of technological advancements is an integral part of the way the business functions. Although this phenomenon holds true for any business venture, in a digital medium such as iOS app development, it is doubly so.

Let’s look at some tech trends that have begun to shape the industry and will make a huge impact in the upcoming years.

Read Full Article: https://www.inoru.com/blog/tech-trends-taking-over-the-ios-app-development-industry/
Viewing more with less - color syntax
Tags: linux, less, ubuntu, sourcehighlight
Published: 2020-02-22 09:50:49

If you are using Linux command-line a lot (out of love or out of necessity) you probably use less command a lot too. When you need to check the contents of some file less is here to help you to do it quickly. Maybe you didn't know but less can do more than help you view your text files, for example, you can check the contents of your archive using less:

`$ less go1.13.7.linux-amd64.tar.gz`

![View archive contents](https://dev-to-uploads.s3.amazonaws.com/i/a11xzn1nil5i03sc2np8.png)

## Syntax highlighting for less - source-highlight

The only issue I had with the default less configuration on my Linux machines (Ubuntu 16.04 & 18.04) was that all of my source files were shown without any syntax highlighting. For me it was not just an issue of form, it was an issue of function - syntax highlighting makes reading source files much easier.

Fortunately, for Linux environments, you can use a [GNU Source-highlight](http://www.gnu.org/software/src-highlite/source-highlight.html) project which can be [used by less command to add syntax highlighting](http://www.gnu.org/software/src-highlite/source-highlight.html#Using-source_002dhighlight-with-less) to files opened using less command.

Just install syntax-highlight for your favorite Linux distribution and configure two environment variables less uses to get syntax highlighting in your favorite pager command.

```bash
sudo apt install source-highlight
export LESSOPEN="| /usr/share/source-highlight/src-hilite-lesspipe.sh %s"
export LESS=' -R'
```

If you want to have these settings applied permanently to your system add something like this to your ~/.bashrc or ~/.profile file:
```
# less syntax highlighting + source-highlight installation
export LESSOPEN="| /usr/share/source-highlight/src-hilite-lesspipe.sh %s"
export LESS=' -R'
```

The result can be easily seen if you open for example JSON file and compare how less command shows it with highlighting vs. without highlighting:

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

## Customizing source-highlight - adding new languages

There are some languages that you won't find on the [list of supported languages](http://www.gnu.org/software/src-highlite/source-highlight.html#Supported-languages) for the source-highlight project. Often, you can find a solution to this problem with some help from the development community on the Internet. For example, YAML is not supported by default but you can find [a solution created by user tkfm-yamaguchi and available as a GitHub gist](https://gist.github.com/tkfm-yamaguchi/c4952b355bb7a27552a5f23e0c53b65f). Basically you have to add make two small changes (one new configuration (language) file and small change of the existing configuration file) to enable syntax highlighting for your YAML files.

The result is visible below:

![YAML](https://dev-to-uploads.s3.amazonaws.com/i/tdwi1fm60941tndzi5xs.png)
Phaser meets Vue
Tags: gamedev, devlog, phaser, vue
Published: 2020-02-22 09:39:04

_Originally published at [Medium](https://medium.com/@pincfloit/game-development-diary-vi-ba0f7af76a10) on Jul 6, 2019_

As you may or may not know, before I started working on Radio Liberty I made a couple of videogames using Vue, a JavaScript framework (and [talked](https://www.youtube.com/watch?v=K13DFYOCaC4) about that at WTM Barcelona — talk is in spanish). Obviously it has some limitations when it comes to the complex interaction you usually need for a videogame, but, being a framework for web applications, it also makes UI things much more simpler. If you have some CSS knowledge, you will see the pain that it represents <a href="https://labs.phaser.io/edit.html?src=src\display\align\in%20right%20center.js">aligning something</a> with Phaser, compared to using flexbox, absolute positioning, or even floats.

I started working on an inventory UI for Radio Liberty, sort of a grid to list all the items, possibly with the need to scroll or paginate if you have too many items to fit in the screen.

Obviously I couldn’t stop thinking how much easier would it be for me to do it in CSS. And then I thought… wait, Phaser is JavaScript, it’s running on a website, what’s stopping me from using Vue?

I created a new project with [Vue CLI](https://cli.vuejs.org/), moved my phaser files into `src`, copied the old webpack config into `vue.config.js` (that’s my favourite part about the Vue CLI: no need to eject to provide full webpack configuration!), added an extra `div` to the `index.html` file, and **that’s it**. It was that easy.

Now I can display the inventory easily and I can reuse the water, food and health stats component that I had done for a [previous Vue game](https://nuria-live.netlify.com/).

Obviously, the Vue app and the Phaser game need to communicate between them. The player picks up an object on the Phaser game (handled with a collision), the Vue inventory needs to update. If any of the stats reach 0, player must die and Phaser game must respond accordingly. But hey, it’s all JavaScript! They can communicate easily via Events.

Right now there are a bunch of events sent and received through many files, but in the future I’ll probably create a service to manage those, and all (or most) of the game state will be centralized in the Vue store, managed with [Vuex](https://vuex.vuejs.org/).

Here you can check the current status of the game, with stats and inventory: https://www.youtube.com/watch?v=mbqEcUb4k0Y

With the inventoy and the stats solved, I have all the basic pieces to build the game. Now, it’s time to focus on doing a lot of pixel art (oh no), sound, and build the remaining scene to finish **Chapter 1**!
Immersive Big Data Visualization
Tags: immersion, bigdata, infovis, xr
Published: 2020-02-22 08:24:19

Virtual immersive environments offer great opportunities in many areas, but there are few studies on their usefulness as an information visualization tool. The results are promising!

Read more about it here: https://www.linkedin.com/pulse/immersive-big-data-visualization-tiago-martins-peres/
Business Card Using Bootstrap 4
Tags: beginners, todayilearned, todayisearched, css
Published: 2020-02-22 08:02:25

Bootstrap has a great element to make attractive user-interface and responsive too. So here we designed business cards using bootstrap 4 card components with some css3 properties.

In these elements, we used custom background colors and also used the bootstrap grids. Also, we modify some bootstrap 4 custom classes which already used in bootstrap frameworks. Here we used media queries to make this element responsive and user-friendly. Also, we used border-radius properties in main card headings and used flex properties for the image.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Download Source code:-

https://w3hubs.com/business-card-using-bootstrap-4/
چرا PHP افول کرده است؟
Tags: php, programing, visualbasic
Published: 2020-02-22 07:53:24


چیزی که در رتبه بندی بهترین زبان های برنامه نویسی 2019 به وضوح مشخص است، از دست رفتن جایگاه PHP است که از سال 2001 به بعد همواره در لیست 10 تایی Tiobe حضور داشت. تحلیلگران Tiobe درباره افول PHP چنین توضیح داده‌اند:

از ابتدا PHP ویژوال بیسیک برای طراحی وب بود، سادگی یادگیری و سادگی توسعه. اما اساساً به وسیله طراحان وبی به کار می‌رفت که پس‌زمینه مهندسی نرم افزار محدودی داشتند. رکود PHP بیشتر به دلیل سادگی استفاده از حفره‌های امنیتی آن بوده است....


موافقید؟!

منبع: https://faceit.ir/

https://faceit.ir/news/15577/best-programing-language-2019/
Go for Beginners - Installation
Tags: go, webdev, beginners, productivity
Published: 2020-02-22 07:37:20

This is a continuation of my Go for Beginners series. Let's look at how we can install Go across different platforms.

__MacOS__
For MacOS users, you can find installation instructions via the official Go website or through this link - https://tecadmin.net/install-go-on-macos/

__Windows__
For Window users, you can find installation instructions via the official Go website or through this link - https://www.freecodecamp.org/news/setting-up-go-programming-language-on-windows-f02c8c14e2f/

__Linux(Ubuntu)__
For Linux users, you can find the installation instructions via the official Go website or through this link - https://www.howtoforge.com/how-to-install-go-programming-language-on-linux-ubuntu-debian-centos/
Functional Typescript Series
Tags: typescript
Published: 2020-02-22 07:36:30

Function composition is the process of combining two or more functions to produce a new function. Composing functions together is like snapping together a series of pipes for our data to flow through.

```typescript
const trim = (s: string) => s.trim();
const capitalize = (s: string) => s.toUpperCase();
```

{% gist https://gist.github.com/kaanguru/24d0cf946ee572a2de8c77d473121349 file=composeMany.ts  %}
Migrate to Google Cloud DNS
Tags: googlecloud, cloud, gcp, dns
Published: 2020-02-28 07:48:21

---
title: Migrate to Google Cloud DNS
published: true
date: 2020-02-22 07:21:11 UTC
tags: google cloud,Cloud,GCP,dns
canonical_url: https://blog.yongweilun.me/migrate-to-google-cloud-dns-ck6x9y6pu0599d9s1x2a7tk11
---

What is Cloud DNSReliable, resilient, low-latency DNS serving from Google's worldwide network.Definition taken from docsWhy Cloud DNSHaving DNS management together with your Google Cloud Project is very convenient. You can assign IAM roles to ...


Read original post at [my blog](https://blog.yongweilun.me/migrate-to-google-cloud-dns-ck6x9y6pu0599d9s1x2a7tk11)
Compile-time polymorphism !!
Tags: cplus, oop, programming, designpattern
Published: 2020-02-22 07:11:13

**Curiously recurring template pattern** is one of the rarely used design patterns in general programming, normally this is referred to as **CRTP**. We all are well familiar with dynamic polymorphism implementation in C++, and how it compiler handles dynamic features using virtual functions.

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


The above diagram show, how B and C have their own implementation of the write method, it is very straightforward. Once your program compiled, compiler basically creates VPtr table(virtual pointer table) and stores the addresses of virtual methods in that table. Once the Virtual Table is created, it is shared across all the instances of the class.

The compiler only creates one single instance of VTable to be shared across all the objects of a class. Every instance of the class B or C has its own version of VPtr. 

Normally, compiler adding 4 bytes for VPtr and If we print the size of a class object containing at least one virtual method, the output will be sizeof(class data) + sizeof(VPtr).

So, what is the issue here? well, if you are working on a high throughput system where every single function call is matters, and collectively delaying the overall process. If your program heavily implementing a virtual function, then frequently calling this writing method in the above example ends up in frequent lookup of VTable. 


Now let's jump into compile-time polymorphism where bindings happen during compile time.

```c++
template <class T>
class Writer
{
  public:
    Writer()  { }
    ~Writer()  { }

    // Look at this declaration
    void write(const char* str) const
    {
      static_cast<const T*>(this)->writeImpl(str); 
    }
};

class FileWriter : public Writer<FileWriter>
{
  public:
    FileWriter(FILE* aFile) { mFile = aFile; }
    ~FileWriter() { fclose(mFile); }

    //here comes the implementation of the write method on the subclass
    void writeImpl(const char* str) const
    {
       fprintf(mFile, "%s\n", str);
    }

  private:
    FILE* mFile;
};


class ConsoleWriter : public Writer<ConsoleWriter>
{
  public:
    ConsoleWriter() { }
    ~ConsoleWriter() { }

    void writeImpl(const char* str) const
    {
      printf("%s\n", str);
    }
};


// Driver code 
int main() 
{ 
    // An Writer type pointer pointing to FileWriter 
    Writer<FileWriter>* pWriter = new FileWriter; 
  
    
    pWriter->write("Hi I am faster"); 
  
    
  
    return 0; 
} 
```

Now, the compiler won't allocate that 4-byte extra memory to hold VPtr, and it will execute really faster during the high-frequency function calls. Please note that CRTP won't really fit in all the use cases, the developer should decide the places where it can fit to reduce the overhead of VTable lookup.
Web Development Company in India
Published: 2020-02-22 07:07:41

IMG Global Infotech is an ISO 9001:2008 certified Software Development Company which provides various software solutions to its customers. Some of the services provided by IMG are - Software Development, CMS and Mobile Application Development, Website Development, SEO/SMO Services, Internet Marketing, ECommerce Website Development, Graphic Design, Android App Development and Corporate Training. We strive to become one stop emporium for our client's entire spectrum of IT requirements. IMG Global Infotech is a dynamic amalgamation of capabilities, talents and dedication.