teleren/devto huggingface dataset:
How to be a Front-end Developer . Tips and Resources
Tags: beginners, career, webdev, resources
Published: 2020-07-07 01:51:09

---

```html
<h1>Hello World</h1>
```
A front-end developer is converting data to a graphical interface so that the end user can view and interact with that data. Quincy Larson has created fundamental walkthrough on [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements) where you get a Responsive Web Design certificate and work on some challenges.

Download an editor in your local machine to have hands-on work to practice and run your code I personally love __VSCode__ you can [download](https://code.visualstudio.com/download) right away. *Thank me later*😁

Collaboration between developers has been a crucial case to be handled in the beginning of there career, well i think __Git__ is the biggest collaboration tool ever made and i really like to use Github. Ask for Help when stuck
>__"If someone is stuck on a problem in isolation, the more time passes, the more shame they’ll feel about asking for help."__

Get started with version control with __Git__ and __Github__ on [Udacity's Version Control With Git](https://www.udacity.com/course/version-control-with-git--ud123) and [Here](http://rogerdudler.github.io/git-guide/) is a great simple guide.

I think we can speak the same language now, we are going to add some dynamicity and special effects to our webpages using Javascript and don't worry i got you. Work through [Freecodecamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript) Javascript certificate to get some fundamentals.

When you feel comfortable with Javascript Fundamentals, push yourself and work on [freecodecamp](https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-simple-jsx-element) React challenges.

Ready? Not yet? OK when you feel ready to dive into React i have a surprise for you 📦. Stephen Grider has a masterpiece course on [Udemy](https://www.udemy.com/course/react-redux/),  at the end you'll be the developer who explains how Redux works to everyone else, because you know the fundamentals so well .😉

In the end, Randall Kanna has made a [ultimate guide](https://randallkanna.com/become-a-software-engineer-guide/). She is sharing her Accountability, insight and knowledge in getting started as Software Engineer.
>"You are going to find out if coding is for you before you enroll in an expensive bootcamp, go back to school for a CS degree, or quit your job to become an engineer.  When you’ve finished the guide,  you’ll know how you can become a software engineer and more importantly—if it is a good career choice for you.

" 

___

If you have any other resources or tips that may be helpful dont't hesitate, Please share it in the comments.
How Dev create auto social share image
Published: 2020-07-07 01:49:31

---
title: How Dev create auto social share image
published: true
description: 
Tags: dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wd1tg7b0y0ptsx6x05oa.png
---
just curious about that feature where the code that refers to that feature can someone give some guide
eCommerce without backend?
Tags: discuss, html, javascript, beginners
Published: 2020-07-07 01:13:08

Well, I know that at this moment, that's no possible (if you want a solid project). But the fact is that I'm learning Frontend, and I'm learning it building an ecommerce website.

So, this is what I have been thinking to send the buycart to administrator:

```javascript
    orderNow() {
        let ms = `--Test message--%0A%0A`;
        cart.forEach(product => {
            ms += `* ${product.title} x ${product.amount} units -> *apx* ${product.price * product.amount}.%0A`;
        });
        ms += `%0A*TOTAL APX: ${totalCartPrice}*`;
        ms = ms.split(" ").join("%20");
        window.open("https://api.whatsapp.com/send?phone=${adminNumber}&text=%20" + ms);
    }
```

When the user click on "Order now" button, the buycart is sent to the admin via whatsapp. The problem with this way, is that the user can change the order via whatsapp, and that is not safe neither efficient.

So, I'm searching for a faster way to sent the buy cart to the admin without use Backend (for now), while I learn and practice Frontend.

If you know any other way I could use for a solution (without php), I would be thankfull to hear you.

See u there!
Using Node.js sourcemaps with Node.js and Babel
Tags: node, webdev
Published: 2020-07-07 01:11:03

---
title: Using Node.js sourcemaps with Node.js and Babel
published: true
description: How to make Sentry point to the original source code when transpiling code using Babel.
tags: node, webdev
---

I've searched Google for variations of "Node.js sourcemaps with Node.js and Babel" and surprisingly found no results that explain how to make sentry.io point to the original source code when transpiling code using Babel.

![Without sourcemaps](https://dev-to-uploads.s3.amazonaws.com/i/wba9g5wzkgzlteodss9p.png)

[Sentry.io documentation](https://docs.sentry.io/platforms/node/typescript/) make it even more confusing by talking about TypeScript transpilation and bundling all files into a single executable.

However, it turns out that all you need is:

1. Enable [`sourceMaps`](https://babeljs.io/docs/en/options#sourcemaps) when transpiling code using Babel.
2. Use [`babel-plugin-source-map-support`](https://www.npmjs.com/package/babel-plugin-source-map-support) to override stack trace.
3. Use [`RewriteFrames`](https://docs.sentry.io/platforms/node/pluggable-integrations/#rewriteframes) plugin to correct path to script.

Regarding `RewriteFrames`, it wasn't immediately obvious what to configure the `root` configuration to. Mainly because [Sentry documentation is making suggestions](https://docs.sentry.io/platforms/node/typescript/#changing-events-frames) that this is somehow difficult.

> [..] we have to somehow detect and pass the root directory of our project. [..] Unfortunately, Node is very fragile in that manner and doesn’t have a reliable way to do this. The easiest and the most reliable method we’ve found, is to store the __dirname or process.cwd() in the global variable and using it in other places of your app.

It it not clear why they are suggesting this since your path should be relative to the build directory and stable. In my case, it was simply:

```js
createSentry({
  dsn: argv.sentryDsn,
  integrations: [
    new RewriteFrames({
      root: path.resolve(__dirname, '..'),
    }),
  ],
});

```

After which we will get Sentry errors with stack traces pointing to the original source files.

![With sourcemaps](https://dev-to-uploads.s3.amazonaws.com/i/mhz03leqe7wdrmkfz6c1.png)
Simplify APNs configuration 
Published: 2020-07-07 00:47:05

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/an4oztkgcuofb4y7hlb9.jpg)
<span>Photo by <a href="https://unsplash.com/@jamie452?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jamie Street</a> on <a href="https://unsplash.com/s/photos/push-notification?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

Do you know we can set up iOS Push Notification using *APNs Auth Key* (token-based)? If not, keep reading.

This week I was setting up Push Notification for iOS in one of our marketing tools (Responsys) and, I noticed you can choose APNs Auth Key (Token-based) over Certificate-based connection to APNs.

This way, we could use 
- Same token for multiple providers server
- One token to distribute notifications for all your company's app
- We don't have to renew the Push notification certificates every year as we do with Certificate-based.

How do you achieve this - 

1. Log in to your [Developer Account](http://developer.apple.com/)
2. Go to Certificates, Identifiers & Profiles
3. Keys section
4. Add
5. Register a New Key
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xj5ktiwfbm3zxqosx7x1.png)
  - Enter the key's name
  - Select the APNs service
  - Go to the next step

When you request a key, Apple gives us the following - 
  - A 10-character string with the Key ID
  - An authentication token signing key, specified as a text file (with a .p8 file extension)

*Note:* We need to secure both pieces of information carefully.

You can learn more about this at - https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/establishing_a_token-based_connection_to_apns
Django Shopify Webhook HMAC Verify
Tags: django, shopify, webhook, python
Published: 2020-07-07 00:13:49

## In this article, I will show you how you can verify Shopify Webhook Hmac in a Django Application.
**In Shopify:**
Go to **Settings > Notifications > Webhook**
1. Create a Webhook  
2. Add Webhook URL

*Create Webhook*
![Create Webhook](https://miro.medium.com/max/1400/1*0YjHPThLMVVLdoQpFyAD2A.png)

You can use  **ngrok** for development and testing purpose

    SHOPIFY_WEBHOOK_SIGNED_KEY
![SHOPIFY_WEBHOOK_SIGNED_KEY](https://miro.medium.com/max/1256/1*tsg66P6JY4ul6Wp_qvZwvA.png)
After adding the webhook URL you will find a Signed Key for webhook just below of the Webhook URL list.
**In Django:**  
Add a variable in **settings.py** file

    SHOPIFY_WEBHOOK_SIGNED_KEY = env.str('SHOPIFY_WEBHOOK_SIGNED_KEY', '')

Then in your **views.py** file,  
I used **django-rest-framework** views, response, and status

    from django.views.decorators.csrf import csrf_exempt  
    from rest_framework import status  
    from rest_framework.decorators import api_view  
    from rest_framework import status  
    from rest_framework.response import Response
    import hmac  
    import hashlib  
    import base64
    
    def computed_hmac(secret, body):  
        hash_code = hmac.new(secret.encode('utf-8'), body, hashlib.sha256)  
        return base64.b64encode(hash_code.digest()).decode()
        
    def verify_hmac(secret, body, shopify_hmac):  
        return computed_hmac(secret, body) == shopify_hmac
    
    @csrf_exempt
    @api_view(['POST'])  
    def api_view_webhook(request):
	    # get hmac from shopify webhook request  
        shopify_hmac = request.headers.get('X-Shopify-Hmac-Sha256')  
        if verify_hmac(settings.SHOPIFY_WEBHOOK_SIGNED_KEY, request.body, shopify_hmac):  
            print('valid')  
            return Response(status=status.HTTP_200_OK) else:  
        else:
	        print('invalid')  
	        return Response(status=status.HTTP_400_BAD_REQUEST)

In your  **urls.py**  file,

    from .views import_ api_view_webhook
    urlpatterns = [  
        path('webhook/', api_view_webhook, name='api_view_webhook'),  
    ]

If **verify_hmac** is **True** then it will print **“valid”** in terminal console otherwise it will print **“invalid”.  
**That’s it.  
Thanks.
  
  
You can find this article in [medium](https://medium.com/kothabangla/django-shopify-webhook-hmac-verify-bf6f23e992c1) also
How to get the URL of a webpage using JavaScript?
Tags: javascript
Published: 2020-07-07 00:00:00

---
  title: How to get the URL of a webpage using JavaScript?
  published: true
  tags: JavaScript
  date: Tue Jul 07 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-url-website-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-42db829108247a1ccdd9555f8410c769.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-url-website-javascript)
  
![direction boards](https://melvingeorge.me/_next/static/images/main-42db829108247a1ccdd9555f8410c769.jpg)

<p class="text-center">
  Photo by
  <a href="https://unsplash.com/photos/C7B-ExXpOIE" target="blank">
    Javier Allegue Barros
  </a>
</p>

Suppose we are in a webpage with the URL of `https://dummywebsite.com/blog?page=1`.

## To get full URL

To get the full URL of the current webpage programmatically in Javascript, you can use the `URL` property available in the `document` object.

```javascript
// get full url
const fullURL = document.URL;

console.log(fullURL); // https://dummywebsite.com/blog?page=1
```

## To get only the origin URL

To get only the origin URL i.e, the main URL.

you can use the `location.origin` property in the `document` object.

```javascript
// get only origin url
const origin = document.location.origin;

console.log(origin); // https://dummywebsite.com
```

## To get the pathname

To get the pathname of URL i.e, url coming after the main URL.

You can use the `location.pathname` property in the `document` object.

```javascript
// get pathname of url
const pathname = document.location.pathname;

console.log(pathname); // /blog
```

## To get the query used in URL

To get the query term used in the URL, you can use the `location.search` in the `document` object.

```javascript
// get query term
const query = document.location.search;

console.log(query); // ?page=1
```

If no query, it will return `""`, a blank string.

## To get the protocol used in the URL

You can use the `location.protocol` in the `document` object.

```javascript
// get the protocol used
const protocol = document.location.protocol;

console.log(protocol); // https:
```

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

---
TIL: git commit accepts several message flags (-m) to allow multiline commits
Tags: webdev, git
Published: 2020-07-09 09:30:18

---
title: TIL: git commit accepts several message flags (-m) to allow multiline commits
published: true
date: 2020-07-07 00:00:00 UTC
tags: webdev, git
canonical_url: https://www.stefanjudis.com/today-i-learned/git-commit-accepts-several-message-flags-m-to-allow-multiline-commits/
---

When you use git on the command line you might have used the message flag (`-m`). It allows developers to define commit messages inline when calling git commit. 

```
git commit -m "my commit message"
```

I'm not the biggest fan of this approach because I prefer to edit the commit message in vim (which I only use for writing commit messages). It gives me the opportunity to double-check the files I'm committing.

Today I learned that the git commit command accepts multiple message flags. 😲

It turns out that you can use the `-m` option multiple times. [The git documentation](https://git-scm.com/docs/git-commit#Documentation/git-commit.txt--mltmsggt) includes the following paragraph:

> If multiple -m options are given, their values are concatenated as separate paragraphs

If you run the following command

```
git co -m "commit title" -m "commit description"
```

it will result in this commit.

```
Author: stefan judis <stefanjudis@gmail.com>
Date:   Tue Jul 7 21:53:21 2020 +0200

    commit title

    commit description

 test.txt | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
```

You can use multiple `-m` flags to create "multiline commits", and I have to admit that this can be very handy in some cases.

*Edited*: Several people pointed out that you can achieve the same commit structure including a title and body (multiple lines) by opening quotes, pressing enter and closing the commit with quotes again.

```
git commit -m "commit title
>
> commit description"
[master 2fe1ef8] commit title
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 test-2.txt
```

---

If you want to see this command in action, [I shared a short terminal session on Twitter with a little video](https://twitter.com/stefanjudis/status/1280493911434297344?s=20).

And thanks to [Stephan Schneider](https://twitter.com/zcei_GER) who shared that little git tip in our company slack. 🙇‍♂️
Svelte Pomodoro Timer
Tags: javascript, showdev
Published: 2020-07-06 23:37:20

I have been wanting to beef up my Svelte skills and what better way than a quick project! I just finished up a simple [Pomodoro Timer](https://en.wikipedia.org/wiki/Pomodoro_Technique).

Check out the app [here](https://svelte-pomodoro.vercel.app/) and the source [here](https://github.com/austincrim/timer).

Let me know what you think!
Edpresso spotlight: Chisom Nwokwu
Tags: webdev
Published: 2020-07-06 23:27:26


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


>  "My first article on Edpresso had the highest traffic of the month; this is something that I almost abandoned because of fear! Keep pushing; Keep winning."


[Chisom Nwokwu](https://www.linkedin.com/in/chisom-c-nwokwu-4b5787186/) is the author of, ["Object-oriented concepts as explained to a 6-year-old"](https://www.educative.io/edpresso/object-oriented-concepts-as-explained-to-a-6-year-old), the shot that received the most views of any community-contributed shot in June 2020. She has been a part of the Edpresso community for one month. 

Chisom's interest in coding began in college when she took a programming course on Java. Before then, she had been exposed to computers but had no programming knowledge whatsoever.

"The major thing that amazed me about coding was the ability to talk and communicate with the computer and make it do whatever I want."


Chisom has been coding since September 2019 and, during that time, has become quite active within the online developer community. She loves how blogging and having visibility online gives her the power to help someone out there either with debugging a program, getting inspiration, or just entertainment. 


"I can't count how many people's blog posts, articles, and online presence has helped me in my journey as a developer. This is something that everyone should encourage and strive to venture into. You could be the light for someone in a dark tunnel."


For Chisom, blogging is about leaving her comfort zone. She knows that​ "we can access the best versions of ourselves when we move out of our comfort zone and step over that huge line of fear.” Because of this, Chisom pushes herself to do something that scares her every single day. 


##### Connect with Chisom on [LinkedIn​](https://www.linkedin.com/in/chisom-c-nwokwu-4b5787186/) or follow her on [Twitter](https://twitter.com/tech_queen).

> [Edpresso](https://www.educative.io/edpresso) is a free database of short, concise articles on dev topics written by Educative community members.
Golang - EP01. Intro 
Tags: go, tutorial
Published: 2020-07-06 22:31:11

# เกริ่น...
บทความในซีรี่ Golang tutorial ต่อไปนี้ อาจจะไม่มีคำหยาบหรือมุกตลกให้ทุกท่านได้ขำขันเฮฮากัน จะมีก็แต่ความรู้จากประสบการณ์การใช้ภาษา Go มาตลอด 2 ปี ผสมกับมุกแบบเนิร์ดๆ ฝืดๆ ที่แทรกเข้ามาอยู่บ้าง ถ้าผิดพลาดประการใด ก็ขอภัยมา ณ ที่นี้

สวัสดีครับ ผม ชาญยุทธ์ aka บิ๊ก ... ตามที่เกริ่นไว้ว่าใช้ golang มาประมาณนึง เลยอยากจะรวบรวมความรู้มาไว้เป็น Tutorial Blog สั้นๆ เอาไว้ใช้เป็นชุดความรู้สำหรับเทรนน้องๆที่เข้ามาร่วมงานใหม่ที่ studio ส่วนถ้าใครหลงเข้ามาอ่านก็ยินดีที่ได้รู้จักครับ และหวังว่าจะได้ประโยชน์กลับไปมิใช่น้อย ถ้ามีคำถามอะไร comment ไว้ได้เลย จะพยายามมาตอบให้ครับ

ใน Tutorial นี้จะแบ่งเป็น post ย่อยๆ ตามนี้
+ [Ep02. เตรียม Dev environment](https://dev.to/chanyut/golang-ep02-dev-environment-3kme)


ค่อยๆอ่านเรียงๆกันไป แต่ถ้าใครเน้นไวอ่านข้ามไปข้ามมา กระผมขอไม่รับประกันความพึงพอใจมาไว้ ณ ที่นี้ด้วยนะครับ ถ้าพร้อมแล้วมาเริ่มต้นกันที่ [Ep02. เตรียม Dev environment](https://dev.to/chanyut/golang-ep02-dev-environment-3kme)
Day 168: Get Up, Stand Up
Tags: hiphop, code, coding, lifelongdev
Published: 2020-07-06 22:26:03

_liner notes_:
- Friday : Had the day off since it was Fourth of July the next day. Don't really celebrate because people that looked like me weren't part of America gaining its independence. So I worked on my van. I'm making window coverings. They can go for over $1200! Nope. So I got some magnets, Reflectix,and a black table cloth and got to work. Finished one window and it actually works! Also did some coding on my side project. 

- Saturday : Got up a little earlier to work on my van's windows before the radio show. Got a little bit done. Not as much as I would like. Did the radio show. Lately, doing the show has been a place I can release frustration. haha Florida's new covid-19 cases seems to keep going up. Breaking records like 3 times a week! You've got police officers mocking a person they murdered like a few weeks earlier! I don't know. So yeah, the recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of 3 police officers mocking the murder of Elijah McClain with the words July 4th 2010, #AllCountriesMatter](https://dev-to-uploads.s3.amazonaws.com/i/p7fgtp5h3tchnmnhxshc.jpg)

- Sunday : Spent more time in my van. Got all the magnets cut for the window frames and coverings. Just need to cut the Reflectix, glue on the magnets, and cover with the table cloth. Finally did my taxes! Actually going to get some money back. Finished up some post radio show work. Worked some more on my side project. Got it hooked up to Firebase Functions and getting a session from OpenTok. Pretty productive day.

- Professional : Had a couple of meetings today. Went well. Got to show a co-worker a web app I made to help her with her live stream show. Came up with some other features that would really make it easier to do her show. For the rest of the day, worked on those features and also looked into the feedback left on my pull request for the Web Component I pushed to the repo last week.

- Personal : Been watching this anime called "DoroHeDoro". It's about a person who had their head turned into an alligator by a sorcerer and his journey to figure out who, why and how to get it reversed. Pretty wild stuff.

![Overhead view of a beach in Painted Trail Cove, Oregon](https://dev-to-uploads.s3.amazonaws.com/i/20u61zzgiiifrcmah4e8.png)

It was raining after I finished up with work, so I didn't really get to work on my van. I did order a floor liner for the van. Want to try and keep it as clean as possible. Already got some scuff marks and I'm thinking with the aluminum framework, it may scratch it a lot. Thing is that it may throw off the measurements I took earlier so once it comes in, I'll install it and retake them. For the rest of the night, I'm going to continue working on my side project. Getting pretty close to finishing up the dashboard.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube RhJ0q7X3DLM %}