teleren/devto huggingface dataset:
How to reduce AntD bundle size in CommonJS/AMD environment ?
Tags: help, antd, javascript, react
Published: 2020-11-20 17:22:58

Hi,

I'm trying to maintain a project that has a bit of 'legacy'. It has a front-end of React 15.4.2 and AntD 3.23.5.

Whilst I'd like to move to React 16 and AntD 4, and use babel-plugin-import, I have to admit to being pretty nervous about that because of the potential to break dependencies - perhaps for another time.

In the meanwhile, I'm still trying to take my browser's warning seriously that I shouldn't be using whole of AntD (quite rightly) - my module is massive and it feels like reducing the weight of AntD inside it is a good place to start as 'low-hanging fruit'.

If the project was already ES6, I'd have plenty of assistance to go at on the web. Instead, I wonder if someone could talk me through how to achieve this in my current environment, which is broadly as follows.

The package.json dependencies section is this:

```
  "dependencies": {
    "antd": "^3.23.5",
    "es5-shim": "^4.5.9",
    "es6-shim": "^0.35.3",
    "moment": "^2.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
```

The code for my widgets typically begins like this (we can call this one DeviceArchitectWidget.js for argument's sake):

```
define(
    [
    	'jquery',
        'react',
        'react-dom',
        
        'nmodule/myproject/rc/Libs/antd',
        'nmodule/myproject/rc/widgetJS/js/DeviceArchitect',
        
        'css!nmodule/myproject/rc/DeviceArchitect/DeviceArchitect',
    ],
    function(
    	$,
        react,
        reactDOM,
        antd,
        deviceArchitectFileRenderDOM
    ) {
```

In the define, you can see the reference to nmodule/myproject/rc/Libs/antd. This file (antd.js) has the following content:

```
require.config({
    paths: {
        'moment': '/module/myproject/rc/node_modules/moment/min/moment.min',
        'antd': '/module/myproject/rc/node_modules/antd/dist/antd',
        'es5shim': '/module/myproject/rc/node_modules/es5-shim/es5-shim.min',
        'es5sham': '/module/myproject/rc/node_modules/es5-shim/es5-sham.min',
        'es6shim': '/module/myproject/rc/node_modules/es6-shim/es6-shim.min',
        'es6sham': '/module/myproject/rc/node_modules/es6-shim/es6-sham.min'
    },
    shim: {
        "antd": ['es5shim', 'es5sham', 'es6shim', 'es6sham','moment']
    }
});

define(
    ['antd','css!nmodule/myproject/rc/node_modules/antd/dist/antd'],
    function (antd) {
        return antd;
    }
);
```

I don't use that many of the libraries within antd: typically just buttons, tooltips, inputs, modals, tables. So I'm happy to amend the above files in any way that's reasonable in order to modularize my use of antd (even if it means changing all my existing JSX antd declarations) and thus to cut right back on the number of antd libraries that get pulled into my built module.

Could someone please explain to me what options I have for editing the above files to achieve this ? As you can probably tell by my descriptions, I'm still novice at combining JS language syntax with modularisation and dependency management.

Thanks in anticipation.
Learn how to promote your website using Search Engine Optimization (SEO)
Tags: seo, webdev
Published: 2020-11-20 17:15:35

“If you build it, they will come” - Field of Dreams

You can build a great website but that won’t guarantee that your visitors will find it easily. One of the ways to promote your website is by employing good search engine optimization practices.

Search engine optimization (or SEO) is a process of improving the quality and performance of your website in order to make it more search engine friendly. SEO is different from search engine marketing (or SEM) which is largely focused on paid marketing (think Google Ads).

SEO is a large and complex topic with many subspecialties, techniques, and strategies. In order to get started learning about SEO, check out these free resources:

moz.com
ahrefs.com
semrush.com
backlinko.com
neilpatel.com
mangools.com
wordstream.com
searchenginejournal.com

The best way to learn after you have covered the basics from the resources above, is by doing a SEO project. For example, do you have a client who is interested in SEO services? Start by trying to rank their website. Or, if you have a portfolio website, try to rank your own website on Google. 

You can utilize these free tools to help you on your SEO journey:

Google Analytics
Google Search Console
Google My Business
Google Ads KW Planner
Structured Data Testing Tool
Ubersuggest
Yoast
Rank Math
SEOQuake 
MozBar
Ahrefs
Semrush
Keyword Hero
Answer The Public

If you want to learn more about web development or SEO, visit <a href="https://cliowebsites.com" target="blank">Clio Websites</a> or <a href="https://twitter.com/natmiletic" target="blank">follow me on Twitter</a>. Happy learning! 

<a href="https://iwanttoreadmore.com/vote/nat/seo/getting-started/" target="_blank" rel="noopener">Vote For This Article</a>
Starter Templates for Hackathons and other Resources
Tags: beginners, react
Published: 2020-11-20 17:12:50

https://github.com/sahat/megaboilerplate
https://github.com/react-boilerplate/react-boilerplate
https://github.com/sahat/hackathon-starter

Learn any one of the frame works or fields like ML,WEB DEVELOPMENT ,ANDROID DEVELOPMENT, Game Development so that you can start working on something during hackathons. Learn one language like c++,Java,python,Java Script. etc.
AWS CodeStar: Is it for you?
Tags: aws, cloud, cloudskills
Published: 2020-11-20 17:11:09

AWS CodeStar was released in 2017 and has come a long way in the last three years. I did a video when it was released and wasn't very impressed. This video updates my opinion from three years ago and shares what's new. Watch this video for more details!

Table of Contents:
0:00 Introduction
0:56 Refreshed UI
1:31 CodeStar services have matured
2:03 Updated Pro: CodeStar Dashboard
4:49 Updated Pro: CodeStar Integrations
6:09 Updated Con: Getting started is complicated
7:48 Updated Con: Not enough customization
8:04 Updated Con: Services aren't very mature
9:37 Who is CodeStar for?
11:51 Can't be used with existing repositories
12:30 Final thoughts

---

🙏 Thanks for taking a look at my content!

📨 Join my newsletter for more: https://ryanlewis.dev

🎥 Subscribe to my [YouTube channel](https://www.youtube.com/channel/UCFqsAphTD7FXKYDCg5zdrOA)!

---

[YouTube](https://www.youtube.com/channel/UCFqsAphTD7FXKYDCg5zdrOA) | [Twitter](https://twitter.com/ryanmurakami) | [GitHub](https://github.com/ryanmurakami) | [Site](https://ryanlewis.dev)
CosmosDB Change Feed with Azure Functions
Published: 2020-11-20 17:09:02

## What is CosmosDB Change Feed?
> From Microsoft documentation: Change feed in Azure Cosmos DB is a persistent record of changes to a container in the order they occur. Change feed support in Azure Cosmos DB works by listening to an Azure Cosmos container for any changes. It then outputs the sorted list of documents that were changed in the order in which they were modified. The persisted changes can be processed asynchronously and incrementally, and the output can be distributed across one or more consumers for parallel processing.

## Watch the demo video
{% youtube aMmMFd5YI1g %}

Here I have used Azure Function to listen to the change feed and below is the Azure Function code 

```csharp
using System;
using System.Collections.Generic;
using Microsoft.Azure.Documents;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Host;
using Microsoft.Extensions.Logging;
using Microsoft.Azure.EventHubs;
using System.Text;
using System.Threading.Tasks;

namespace Company.Function
{
    public static class CosmosDBTriggerOrd
    {

        [FunctionName("CosmosDBTriggerOrd")]
        public static async Task Run([CosmosDBTrigger(
            databaseName: "adventureworks",
            collectionName: "Product",
            ConnectionStringSetting = "cosmos_DOCUMENTDB",
            CreateLeaseCollectionIfNotExists = true,            
            LeaseCollectionName = "reportingCollection")]IReadOnlyList<Document> input, ILogger log)
        {
            if (input != null && input.Count > 0)
            {                
                log.LogInformation("Documents modified " + input.Count);
                log.LogInformation("First document Id " + input[0].Id);

                var listTasks = new List<Task>();

                foreach (var doc in input)
                {
                    var jsonString = doc.ToString();

                    log.LogInformation(jsonString);
                }

                await Task.WhenAll(listTasks);
            }
        }
    }
}

```
How I got amazing boarding passes with JS.
Tags: javascript, node, webdev
Published: 2020-11-20 17:08:15

# Back Story
A group of friends an I were taking a trip to Florida for a week and we needed to check in for our flights which is never fun. We're taking Southwest Airlines which for those of you that may not know, they do not have assigned seating. The seating is on a first come first serve basis which makes your boarding pass/position very important.

We had a 6:05am flight so we needed to check in at 6:05am the day before. One of my friends joked "Couldn't you make a bot for this?", most of my experience is with bots and automation so this was a clever joke which i took very serious.

# The Process
Taking a look at the check in page, there is a simple form which requires your **Confirmation Number**, **First Name**, and **Last Name**.

![Check in Form](https://dev-to-uploads.s3.amazonaws.com/i/8e6vb5t5ehx17szow1wk.PNG)

I entered my information and watched the requests in my dev tools...

After clicking *Check In* i see a POST request to their API to the url `https://www.southwest.com/api/air-checkin/v1/air-checkin/page/air/check-in/review` and got an error response that my check in window has not started yet.

This was enough information to assume that the check in process is a single request. I viewed the request body and the format was very simple JSON.

```
{
  "confirmationNumber": "A1B2C3",
  "passengerFirstName": "John",
  "passengerLastName": "Doe",
  "application": "air-check-in",
  "site": "southwest"
}
```

I copied the url and post data into Insomnia to test the request outside of the browser to see if there were any Anti-Bot or user specific cookies that would prevent me from simply spamming requests to check in.

![Insomnia SS](https://dev-to-uploads.s3.amazonaws.com/i/0mb2oz0vno94l24lq4fs.PNG)

I got a different response error in Insomnia... I looked back at my dev tools and took a look at the request headers they send, I noticed the header `X-API-Key`, copying the header and the key from the requests into Insomnia. We got the outside of check in window error! Now i know that there's no other headers or cookies needed to make the request which meant I could keep sending the request.

I then used that bot the next day and secured very good boarding passes for my girlfriend and I.

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

If you would like to check the bot out and/or use it for yourself it's open sourced here on my github. [Take me to the repo](https://github.com/recaptchaToken/southwestBot)

{% github recaptchaToken/southwestBot no-readme %}
JavaScript Dart Compute
Published: 2020-11-20 17:06:46

Dart lang offers an optimistic `compute` function that can execute a code on a separate isolate(thread) to avoid blocking the main thread or to do heavy computation away from the main thread.

It will "Spawn an isolate, run callback on that isolate, passing it a message, and (eventually) returns the value returned by callback."

In contrast, JavaScript also have threads! or web workers that can
"run scripts in background threads without interfering with the user interface".

hence, we can do `compute` in JavaScript that will spawn worker, run callback on that worker, passing it a message, and (eventually) returns the value returned by callback."


{% gist https://gist.github.com/ezzabuzaid/c8c14b2ccddca6a7e16a2cbbc3bac556 %}


Example

```javascript
function factorial(number) {
  if (number <= 0) {
    return 1;
  } else {
    return (number * factorial(number - 1));
  }
};

await compute(factorial, 200);
```

References
"https://lnkd.in/d5PVjji"
"https://lnkd.in/dqqdBHt"
console.log() hack for debugging
Tags: javascript, webdev, beginners, productivity
Published: 2020-11-20 17:06:00

Languages: [🇪🇸] [Español](https://dev.to/equimancho/truco-con-console-log-para-hacer-debug-9j2) - [🇺🇸] [English](https://dev.to/equiman/console-log-hack-for-debugging-3cfi)

---

Sometimes we need to console.log multiple variables and I've seen myself creating a `console.log` with a previous title to identify the value and so on for each variable.

```javascript
   console.log("name: ", name);
   console.log("age: ", age);
   console.log("language: ", language);
   console.log("isDev: ", isDev);
```

![console.log](https://dev-to-uploads.s3.amazonaws.com/i/symvddqmsl0h040vi5v4.png)

# Hack

An easy quick way to get the same, without writing those previous titles is to put all variables inside an object `{}`.

```javascript
   console.log( {name, age, language, isDev} );
```

![console.log](https://dev-to-uploads.s3.amazonaws.com/i/jlagkde8ofy00ui3wyvg.png)

But wait a moment. It can be better. 

# Super hack

Change `.log` with `.table` and _voilá_. You will have a better view of all variable names and values.

```javascript
   console.table( {name, age, language, isDev} );
```

![console.table](https://dev-to-uploads.s3.amazonaws.com/i/70rlfbb8wa2pctn1jzjb.png)

---

# Bonus

There is an extension called [Debug Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets) dedicated to debugging that includes a lot of `console.log` combinations.

[![Debug Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vd2etexv2eswzd1lcit.png)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)

Two of those snippets are related to the hacks mentioned before.

| Trigger | Description                                                                                        | Result JS/TS                                                        |
| ------: | ------------------------ | -------------------------- |
|  `cld→` |   log with destructuring | `console.log({$name})█`                                               |
|  `ctd→` |   table with destructuring | `console.table({$name})█`                                             |

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
The full-stack dilemma
Tags: discuss, programming, career, webdev
Published: 2020-11-20 17:02:04

In recent years a new skill introduced itself to the software industry - the __full-stack__ developer. 
While back in the days there was a clear dichotomy between front-end and back-end developers, nowadays we find more job positions requiring the full-stack skill, where full-stack means mastery of both disciplines.

This new reality got me thinking -
When talking "teams" the first thing which pops to mind is sport. Sport teams are a familiar model we all know and can relate to. We fully understand how teams should work and more so, how each team member's role contributes to the joined effort of gaining the best outcome.
We can all agree that sport teams have evolved across many years to become what they are now, while what shaped them was the end goal of gaining more points and thus winning the game. 
The member roles of, say, a basketball team are well defined. Sure, they all are "basketball players" but each has his/her own role in the team. Each knows where to be in offense or defense time and what's his/her part in preventing or scoring game points. The same applies to soccer, baseball, volleyball and the list go on. Each player, while mastering the __basic__ skills of the game, is specialized in a certain role s/he has.

Comparing this model to the software teams model started raising questions in my mind - 
We see that more and more software teams are constructed from full-stack/generalist developers, which, if to refer to the sports analogy, means that each member of the team masters __all__ the roles the team requires. 
To make the argument stronger, imagine that the striker of a soccer team will be replaced by the fullback during the game and the team's overall game will not be affected whatsoever.
This just does not make sense, right? 
Yes, both players know to kick the ball and fully master the rules of the game play, but we also know that fullback is lacking the required skill and experience the striker has and
if the fullback will replace the striker the chances of the team scoring a goal will dramatically reduce.

So how come we feel that the situation and outcome are different when it comes to software teams?

Each skill of a software development role requires immense amount of knowledge and experience. Although many claim to master both front-end and back-end skills (as a full-stack developer) the harsh truth is that it is never the case, simply because BE and FE are 2 different disciplines which require a different set of skills, experience and some might say - different developer's characteristics.

Is it possible that the software industry started taking the team different roles lightly? 
Is mastery not relevant anymore in the software industry?
Can a software team made of full-stack developers produce the same products, both in velocity and quality, as a heterogenic team can?

WDYT?
Next.js 10 with Tailwind 2; in 2 Minutes
Tags: nextjs, tailwindcss, tailwind2, nextjs10
Published: 2020-11-20 16:57:51

*If you are interested in developer trends you should check out my new newsletter at: [unzip.dev](https://unzip.dev)*

---

No BS, let's get right to it.

## Create a new Next.js project
`npx create-next-app <your-app-name>`
Now cd to your project `cd <your-app-name>`

## Install dependencies
```
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```

## Configure tailwind
Then `npx tailwind init`
Now let's import the tailwind css, delete all styles in `styles` and create: `styles/tailwind.css` with the contents:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## PostCSS
Create `postcss.config.js` file (next.js uses it automatically).
```
module.exports = {
	plugins: ['tailwindcss'],
}
```
## Override the default styling
Replace `import '../styles/globals.css'` in `pages/_app.js` with: `import '../styles/tailwind.css';`

## Add a test
Let's rewrite `pages/index.js`
```
import Head from 'next/head'

export default function Home() {
  return (
    <div className="flex justify-center">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="mt-4 p-4 w-1/4 rounded bg-blue-300 text-center">
        <p className="text-blue-600">This should be very blue.</p>
      </div>
    </div>
  )
}
```

## Run
`yarn dev` and go to: [localhost:3000](http://localhost:300/)

## Result
![Result in browser](https://dev-to-uploads.s3.amazonaws.com/i/x1io9drpj14oa833ma33.png)
Show DEV: Your own link shortener that's easily deployed as a static site (for free)
Tags: showdev, opensource, static, netlify
Published: 2020-11-20 16:57:02

---
title: Show DEV: Your own link shortener that's easily deployed as a static site (for free)
published: true
description: 
tags: showdev, opensource, static, netlify
//cover_image: https://direct_url_to_image.jpg
---

[Suri](https://github.com/jstayton/suri) is your own link shortener that's easily deployed as a static site (for free).

Suri doesn't give a 💩 about "technically superior" 3xx server redirects. Suri doesn't want a server (or "serverless" 🙄), or even a database for that matter. Suri just wants a static site to get the job done – easy to deploy, and free to host in a number of places.

Suri wants you to finally use that vowel-less domain you waste $39/year on because you've never actually done anything with it.

👀

Give it a try and let me know what you think!
Function Pointer in C
Tags: c, pointer, function
Published: 2020-11-05 22:11:45

---
title: Function Pointer in C
published: true
description: Function pointer in C
tags: c, pointer, function
//cover_image: https://direct_url_to_image.jpg
---

_Taken from my personal blog [post]( https://shaikhul.github.io/personal/2020/11/03/function-pointer-in-c.html)_

Pointers in C are powerful and confusing at the same time. As we can point a pointer to structs, strings or arrays, we can point to function.

__Signature:__ `void (*POINTER_NAME) (args)`

Say for example we have a function add that adds two number `int add(int a, int b)`

```c
int add(int a, int b) {
    return a + b;
}

int mul(int a, int b) {
    return a * b;
}
```

The function pointer for this would be
```c
int (*fun_ptr) (int, int)
```

We can assign this pointer to any function that accepts two `int` params and return an `int`.

To point to `add` function we can just assign it to the `fun_ptr` pointer as follows.

Now we can use the function pointer as follows
```c
// assign it to add function
fun_ptr = add;
printf("2 + 3 = %d\n", fun_ptr(2, 3));

// assign it to mul function
fun_ptr = mul;
printf("2 * 3 = %d\n", fun_ptr(2, 3));
```

Now if we want to use function pointer as a function param we can use it directly or use a `typedef` as follows

```c
// it takes a function pointer as param
int do_op(int a, int b, int (*ptr) (int, int)) {
  return ptr(a, b);
}
printf("2 + 3 = %d \n", do_op(2, 3, add));
printf("2 + 3 = %d \n", do_op(2, 3, mul));
```

As writing the function signature as a function param is hard, we can use the `typedef` to give it a new name
```c
// using typedef
typedef int (*op_ptr_type) (int, int);
int do_op2(int a, int b, op_ptr_type ptr) {
  return ptr(a, b);
}
printf("2 + 3 = %d\n", do_op2(2, 3, add));
  printf("2 * 3 = %d\n", do_op2(2, 3, mul));
```
Here is the complete example in [repl.it](https://repl.it/@ShaikhulIslam/functionpointers)

Now, lets see how [qsort](https://en.cppreference.com/w/c/algorithm/qsort) takes advantage of function pointer.


The method signature of `qsort` is
```c
void qsort(void *ptr, size_t count, size_t size, int (*comp)(const void *, const void *));
```

Here we can see the fourth param is a callback which is used to do custom comparison. If we want to sort some numbers in ascending order we need to define the `comp` function first using the same signature
```c
int comp_int_asc(const void* a, const void* b) {
    // dereference to int
    int val1 = *(const int*)a;
    int val2 = *(const int*)b;

    if (val1 < val2) {
        return -1;
    } else if (val1 > val2) {
        return 1;
    }
    return 0;
}
```
we can use it in the `qsort` function as follows
```c
int nums[] = {5, 1, 3, 9, 10, 8, -5, 0};
int int_size = sizeof(int);
int arr_len = sizeof(nums) / int_size;
// qsort is defined in stdlib
qsort(nums, arr_len, int_size, comp_int_asc);
```
[Here]((https://repl.it/@ShaikhulIslam/qsortc#main.c)) is the full qsort example