teleren/devto huggingface dataset:
How to allow your customer to edit their Shopify account
Published: 2020-12-17 14:50:58



![ How to allow your customer to edit their Shopify account](https://iliashaddad.com/static/dfe743dcd01f30bfa554c0fddf95a42e/451a4/team-shares-a-laugh-in-modern-coworking-space-in-india.jpg)

In the next four weeks, I'm planning to start a challenge it will be called #4weeksOfShopifyDev. In this challenge, I'll write technical articles related to the Shopify theme and app development.

The majority of the upcoming articles are from previous Shopify store clients I worked with

In today's article, I'll be talking about how to allow your Shopify store customers to edit their info without calling your customer support.

[Demo Page](https://ilias-demo.myshopify.com/pages/edit-profile)

### Install the Shopify app

First, we'll use a Shopify app to allow customers. they have a free plan.
![ How to allow your customer to edit their Shopify account](https://miro.medium.com/max/1400/1*PGyM06m5c9SRbmRHqm4Gxg.png)

### Configure the Shopify app

To allow your customers to edit their info, we have two solutions
Inject the code on an exciting page
Create a new page to edit the profile

In this article, I'll go with the second solution.

- Create a new page template it will be called edit-profile

![ How to allow your customer to edit their Shopify account](https://miro.medium.com/max/1400/1*3ugLxk9g4dJmYiLhPDMz-Q.png)

- Inject the Shopify app code to display the form

```
<div id='kca-embed'></div>
```

- Create a new Shopify page and choose the page. edit-profile as page template
- Now, we have the edit account form loaded as we want, but we need to match the style of the form to our design

  ![ How to allow your customer to edit their Shopify account](https://miro.medium.com/max/1400/1*OdSnmxeonRE4fLNALonMTg.png)

- Click on the settings dropdown menu and choose custom css

  ![ How to allow your customer to edit their Shopify account](https://miro.medium.com/max/1400/1*4_SMiAJsOIbfmOvQGFo9Yg.png)

- Inspect the console on the edit profile page
- Style the input and label element with your own css style and paste them into the app

![ How to allow your customer to edit their Shopify account](https://miro.medium.com/max/1400/1*7SDrdq-Fc9b0u8376E46OQ.png)

I hope you find this article useful. I'll be writing more technical in the next 4 weeks. if you joined me in this challenge,
You can find me on

- [Twitter](https://twitter.com/iliashaddad3)
- [Instagram](https://instagram.com/iliashaddad3)
- [linkedIn](https://www.linkedin.com/in/ilias-haddad/)
Git and Github best practice
Tags: github, git
Published: 2020-12-17 14:49:12

Some basic commands for newbie 

#Setup
Show current configuration:
```$ git config --list```
Show repository configuration:
```$ git config --local --list```
Show global configuration:
```$ git config --global --list```
Show system configuration:
```$ git config --system --list```
Set a name that is identifiable for credit when review version history:
```$ git config --global user.name “[firstname lastname]”```
Set an email address that will be associated with each history marker:
```$ git config --global user.email “[valid-email]”```
Set automatic command line coloring for Git for easy reviewing:
```$ git config --global color.ui auto```
Set global editor for commit
```$ git config --global core.editor vi```
Configuration Files
Repository specific configuration file [--local]:

``` <repo>/.git/config ```

User-specific configuration file [--global]:

``` ~/.gitconfig ```

System-wide configuration file [--system]:

``` /etc/gitconfig ```


##Create
Clone an existing repository:
There are two ways:

Via SSH

```$ git clone ssh://user@domain.com/repo.git```
Via HTTP

```$ git clone http://domain.com/user/repo.git```

Create a new local repository in the current directory:
```$ git init```
Create a new local repository in a specific directory:
```$ git init <directory>```
Local Changes
Changes in working directory:
```$ git status```
Changes to tracked files:
```$ git diff```
See changes/difference of a specific file:
```$ git diff <file>```
Add all current changes to the next commit:
```$ git add .```
Add some changes in <file> to the next commit:
```$ git add -p <file>```
Commit all local changes in tracked files:
```$ git commit -a```
Commit previously staged changes:
```$ git commit```
Commit with message:
```$ git commit -m 'message here'```
Commit skipping the staging area and adding message:
```$ git commit -am 'message here'```
Commit to some previous date:
```$ git commit --date="`date --date='n day ago'`" -am "<Commit Message Here>"```
Change last commit:
Don't amend published commits!

```$ git commit -a --amend```
Amend with last commit but use the previous commit log message
Don't amend published commits!

```$ git commit --amend --no-edit```
Change committer date of last commit:
```GIT_COMMITTER_DATE="date" git commit --amend```
Change Author date of last commit:
```$ git commit --amend --date="date"```
To be updated in ...

As a newbie to Git and Github, 
what are the best practice to follow. Need tips and tricks (Cheatsheet) that a newbie should use and follow?
Urpflanze: a javascript library for creative coding
Tags: javascript, creativecoding, canvas, webdev
Published: 2020-12-17 14:47:47

For some time now, I have been feeling the need to use the code not for commercial purposes, but purely for fun. 

This is why I am approaching the world of creative coding. 

One big difficulty I immediately encountered was the lack of knowledge of linear algebra and trigonometry, and this is the reason why I decided to develop a library that would make the approach easier even for the less experienced user. 

Mandalas have always fascinated me, so I started with simple shapes such as lines and  polygons, and I worked on how to distribute them on a circumference.

![Urpflanze](https://dev-to-uploads.s3.amazonaws.com/i/eoq5syrnksbq9v6biv5q.jpg)

I focused on managing every single repetition and encapsulating the generated shapes, which allowed me to create new forms starting from the previous and simpler ones.

In addition to circular repetitions, I also added the possibility of creating matrices and some effects during the drawing phase, such as viewing the previous frames or disabling the deletion of the canvas at each frame. 

Perfect to create images or animations, it can be used for texture generation, as support to other vector graphics software (thanks to SVGExporter), or to print with Penplotter.

{% instagram CJHdLA0CZBo %}

At the moment the roadmap available are:
* Documentation for other services (e.g. DrawerSVG)
* a web-based editor already under development (a very old version is at this link https://gifted-booth-1ad22e.netlify.app/)
* Rendering in WebGL
* Audio library to create sounds from shapes and vice versa

Let me know what you think about this :)

{% github genbs/urpflanze %}

[Docs and Examples](https://genbs.github.io/urpflanze/)
How to make product description tabs in Shopify without a Shopify app?

Tags: shopify
Published: 2020-12-17 14:37:12



In the fourth article of the #4weeksOfShopifyDev challenge, I'll be talking about to add product tabs without using a Shopify app

Note: I'm using the Debut theme, you may have a different Shopify theme

[Demo Product Page](https://ilias-demo.myshopify.com/products/example-t-shirt)

![ How to make product description tabs in Shopify without a Shopify app?](https://cdn-images-1.medium.com/max/800/0*7rgZnbttgj3az68W.png)

## Create a product template

- First, we need to create a custom product Shopify template and called product-tabs.liquid
  ![ How to make product description tabs in Shopify without a Shopify app?](https://cdn-images-1.medium.com/max/800/0*36UMbC1Eri9u59gD.png)

- Create a new Shopify section and called product-template-tabs and paste the code from the product-template section
  ![ How to make product description tabs in Shopify without a Shopify app?](https://cdn-images-1.medium.com/max/800/0*FMNHK-zSJZCHSS3O.png)

- Change the section in product-tabs.liquid to product-template-tabs
  ![ How to make product description tabs in Shopify without a Shopify app?](https://cdn-images-1.medium.com/max/800/0*uMuz6xCPXbHSQOQO.png)

## Install reviews app and configure tabs

- Install [Shopify product reviews app](https://apps.shopify.com/product-reviews)

* Create a new Shipping policy page
  ![ How to make product description tabs in Shopify without a Shopify app?](https://cdn-images-1.medium.com/max/800/0*Fum6jR7Imto3tkwe.png)

* Replace product.description in product-template-tabs.liquid with this code

https://gist.github.com/IliasHad/43a3ab86eb6755bae03a89c3042d7397

Et voila, you have product tabs without a Shopify app
Solving day 17 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-17 14:24:21

---
title: Solving day 17 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 17)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube kLqr2aANqLc %}
DO Hackathon - The Middi Interface (Part 3)
Tags: dohackathon, figma, design
Published: 2020-12-17 14:21:05

Before we can write a single line of code we have to have a good idea of what we're creating. We know our requirements and our stack from the previous posts, now it's time to mock up the UI.

Usually it's a good idea to start with a wireframe before getting straight into the colour mockups. Wireframes are better for iterating quickly on layout options. Since we're building a simple UI that is really only a chatbox, I figured we can move past the wireframe step and start with a full-colour mockup.

I would also recommend mapping out the user flows and how it relates back to our stories defined in the first post but since I don't expect that this app will be very groundbreaking I think it's best that we allocate our time elsewhere. There is plenty more to do.
<br/>

## Colours
I wanted to choose a colour palette that was welcoming, informal and warm to users. Since this will be a chatbot-like interaction, I wanted to give the app a friendly atmosphere.
I settled on a purple/pink palette:

![Middi color palette - purple and pink](https://dev-to-uploads.s3.amazonaws.com/i/c8n402u5blfyeee7avan.png)
I used the fantastic [coolors.co](https://coolors.co/) to get this palette together
<br/>

## First draft
![Middi Mockup 1](https://dev-to-uploads.s3.amazonaws.com/i/t857s7zwdkhjyi37xyrg.png)

I went with a blurred background image to allow an interesting and fun background without taking focus away from the main chat window. I also used a sans-serif font that was playful to keep the "informal" aesthetic.
<br/>

![Middi Mockup 2](https://dev-to-uploads.s3.amazonaws.com/i/wizboec788f756etlnvv.png)
Here's a second design which includes a login form. This demonstrates my idea of keeping the entire app inside a chat window, which includes all forms and other components. To be honest, it's probably not amazing for user experience... but it's still an interesting proof of concept so I want to see what comes of it.
<br/>

 ![Middi Mockup 3](https://dev-to-uploads.s3.amazonaws.com/i/3a59mpw8jik7nc6zraov.png)
 This next design includes a simple toggle for completing daily habits. It would be interesting to allow users to assign a color to a habit to personalize their experience.
<br/>


![Screen Shot 2020-12-17 at 10.39.38 AM](https://dev-to-uploads.s3.amazonaws.com/i/26t8js87o79s3cahgsfd.png)
 Lastly, here's the overview component which shows a summary of a habit's progress. There is some flexibility here to show some interesting stats.
<br/>

One thing not included in these designs that I wanted to keep in mind, is some fun animations/interactions to keep the app lighthearted and friendly. I want users to feel good when they complete a habit. So showing some sort of "celebration" animation when they complete a habit will be really important and there is a lot of opportunity to be creative.

Now that we've got a decent UI in mind, we can actually get into the code. In the next post we'll be looking at setting up the backend with authentication and database models.
Popular Icon Sets for VueJs Apps
Published: 2020-12-17 14:05:38

To help you build your next project in Vue, you must need some nice icons that can help you make your design much better. 
To save your time and energy, here are some of the popular icon sets available for Vue.js applications.

To continue reading [click here] (https://iconscout.com/blog/popular-icon-sets-vuejs-apps)

Connect with me on socials😊:
[Twitter](https://twitter.com/SwastikaYadav15)
[Instagram](https://instagram.com/swastika.bb?igshid=p42bc3p6aj1p)
[LinkedIn](https://www.linkedin.com/in/swastikayadav15/)
React Beginner Project Ideas
Tags: react, javascript, beginners, webdev
Published: 2020-12-17 14:05:20

Since now you are familiar with basics of React,you can start building small projects in React.Here are some ideas or list which you can refer to.

Tip:Start with 1 App and complete that first.Google wherever you are stuck.Search for the logic on youtube if you don't get it.There are various tutorials you can refer to like [Traversy Media](https://www.youtube.com/user/TechGuyWeb),[Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q),[Coding Addict](https://www.youtube.com/c/CodingAddict/featured) on Youtube and many more.Read others' code to understand the logic and implement by your own.

1.Currency Converter:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2tjd3brfhwkkpiji1j6.jpg)
Github Repository-https://github.com/kritika27/currency-converter-reactjs
Concepts to learn:Use of API,Select Options,React hooks,state,props,Arrays.
Demo Link-https://friendly-payne-18ef0b.netlify.app/

2.Quotes Generator:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jeas28gtqabn1w2exr7d.png)
Github Repository-https://github.com/kritika27/quotes-generator-react
Demo Link-https://dazzling-snyder-2f0503.netlify.app/
Concepts to learn:How to fetch data from Quotes API,arrays.

3.Bookmark:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h75o2fxp873nsfmzupqt.jpg)
Github Repository-https://github.com/kritika27/bookmark-reactjs
Demo Link-https://nervous-fermi-c86968.netlify.app/
Concepts to learn:Use of Multiple input elements,validate the entries in input box,validate url,add multiple items to array list.

4.Expense Tracker:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ahw370htq2obov328jxq.JPG)
Github Repository-https://github.com/kritika27/expense-tracker-reactjs
Demo Link-https://angry-raman-08502b.netlify.app/
Concepts to learn:Arrays,map and reduce function,local storage.

5.To Do App with Firebase:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/20y7vx5nij8ds1n2v8bo.png)
Github Repository-https://github.com/kritika27/todo-react-firebase
Demo Link-https://dreamy-mcclintock-c13cf8.netlify.app/
You can refer to my previous blog on Grocery List if you do not want to use backend.
Concepts to learn:Arrays,Firebase,delete items.

Star the project on Github if you like it.
You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27). 
Suggestions are always welcome.Happy Learning :)
Simplest way to embed a Youtube video in your React app
Tags: react, youtube, javascript
Published: 2020-12-17 13:43:43

---
title: Simplest way to embed a Youtube video in your React app
published: true
description: Embed a youtube video in React app. Fully responsive and no need to install third-party libraries
tags: react,youtube,reactjs,javascript
cover_image: https://www.youtube.com/img/desktop/yt_1200.png
---

## Overview

- Quick and simple
- No `npm i`
- Fully responsive
- Feel free to Copy & Paste

### 1\. Make a component for iframe: 

**YoutubeEmbed.js**

```jsx
import React from "react";
import PropTypes from "prop-types";

const YoutubeEmbed = ({ embedId }) => (
  <div className="video-responsive">
    <iframe
      width="853"
      height="480"
      src={`https://www.youtube.com/embed/${embedId}`}
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
      title="Embedded youtube"
    />
  </div>
);

YoutubeEmbed.propTypes = {
  embedId: PropTypes.string.isRequired
};

export default YoutubeEmbed;
```

### 2\. Add some css for responsiveness:

**styles.css**

```css
.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

```

### 3\. Use it

Couldn't be simpler. Easy-breezy:

```jsx
import React from "react";
import "./styles.css";
import YoutubeEmbed from "./YoutubeEmbed";

export default function App() {
  return (
    <div className="App">
      <h1>Youtube Embed</h1>
      <YoutubeEmbed embedId="rokGy0huYEA" />
    </div>
  );
}

```

## Result

{% codesandbox 32io4 module=/src/YoutubeEmbed.js %}
Guide to Modern Customer Identity
Tags: security, ciam, customeridentity, loginradius
Published: 2020-12-17 13:38:48

Digital technology has changed customer expectations. It’s a big assertion, but mobile devices, apps, machine learning, AI, and automation allow customers to get what they need when they need it.

These moving customer expectations are resulting in a new modern consumer—one who is continually connected, app-native, and very aware of what they can do with new innovation.

Modern technologies have created lots of opportunities, customers presently judge companies on the digital experience first. Businesses need to rethink how they interact with their customers and are turning to advance initiatives to assist them to transform that relationship.

In this e-book, you will learn:

The advantages of having a customer identity at the establishment of your digital transformation.


How to use an identity solution to improve your customer engagement and boost the value of your current marketing stack.


How to build customer trust and guarantee that your brand is protected with an identity solution to help oversee and secure customer data and protection.

Download E-book: https://www.loginradius.com/resource/guide-to-modern-customer-identity/
Generador de SAS token al vuelo con Azure function y nodejs
Tags: azure, azurefunctions, node
Published: 2020-12-17 13:26:46

En este video hago un repaso de como generar un SAS Token para Azure storage con una azure function en Nodejs

Asi puede evitar crear un SAS token de un año y agregar mas seguridad a tu Aplicacion Web.

{% youtube _fsHDS33Oho %}

Generador de SAS token al vuelo con Azure function y nodejs
Test anything that runs in the browser with Cypress and GitHub Actions
Tags: opensource, github, githubactions
Published: 2020-12-17 13:21:39

The ecosystem for end-to-end (e2e) testing JavaScript applications has evolved a ton since I began working as a full-time engineer years ago. Granted, I do not write many tests today, I am growing a lot of appreciation for tools like Cypress that grasp the full browser experience in a test environment. 

Last week I invited [Gleb Bahmutov](https://github.com/bahmutov), VP of Engineering at Cypress, to chat and teach me how to leverage Cypress with GitHub Actions to quickly get a test environment up and running. 

{% github https://github.com/cypress-io/github-action %}

What I learned in our conversation is that Cypress is not just an npm package. Through the CLI, you gain access to a base binary ready to run their testing system on all platforms (Linux, Windows, and Mac). When you start Cypress, it runs the binary to engage and work with your machine's default browser giving you the ability to see your test pass or fail in front of your eyes.

Towards the end of our conversation, we installed Cypress on my [bdougie.live repo](https://github.com/bdougie/live/pull/69) to get positive browser test results in my GitHub Action logs. 

If you have not tried out browser testing in your project, I encourage you to do so today, you are only minutes away from having the confidence e2e tests, and you can also do it with Actions! 

Watch Gleb walk me through getting it installed on my project. You can find the link below. 

{% youtube gokM_zEmWLA %}

Join me and friends live for Open Source Fridays at https://www.meetup.com/GitHub-Virtual.
Job opportunity: Developer Advocate in the UK
Tags: aws
Published: 2020-12-17 13:20:44

A little under a year ago I wrote this post:

{% link https://dev.to/aws/celebrate-the-new-year-with-a-new-job-1ba5 %}

As 2020 comes to a close, and you reflect on how your year has been it is often a good opportunity to take a look about your year ahead and possibly start to explore new opportunities or your next challenge.

As you think about next year and where you want to go, I wanted to share an exciting opportunity that has opened up in my team, the UK Developer Advocate team. These do not come up often, and the role, the team as well as the business are just amazing to work with/for.

Here is a detailed description of the role, so please reach out to me to understand more about the role, the work we do and any other questions you might have.

[Senior Developer Advocate](https://www.amazon.jobs/en/jobs/1327788/senior-developer-advocate?no_int_redir=1)
Switching Java versions by command in Ubuntu
Tags: java, version, env, jdk
Published: 2020-12-17 13:20:27

At first install multiple versions of Java from OpenJDK.
```
$ sudo apt update
$ sudo apt install openjdk-8-jdk 
$ sudo apt install openjdk-11-jdk 
```

Then you can switch java versions as follows:
```
$ update-java-alternatives --list
java-1.11.0-openjdk-amd64      1111       /usr/lib/jvm/java-1.11.0-openjdk-amd64
java-1.8.0-openjdk-amd64       1081       /usr/lib/jvm/java-1.8.0-openjdk-amd64
$ sudo update-java-alternatives --set /usr/lib/jvm/java-1.11.0-openjdk-amd64
$ javac -version
javac 11.0.9.1
$ java -version
openjdk version "11.0.9.1" 2020-11-04
```

If you set JAVA_HOME, maybe you have to change this too.
Daily Developer Jokes - Thursday, Dec 17, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-17 13:00:03

---
title: "Daily Developer Jokes - Thursday, Dec 17, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Dec%2017%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12592f4bd15.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why do Java developers wear glasses?

___A:___ Because they don't C#!
 -->