teleren/devto huggingface dataset:
How To Generate Icons for a Progressive Web App from SVG File With a Single Command
Tags: icons, pwa, nextjs
Published: 2023-07-30 11:02:50

✨ [**Watch on YouTube**](https://youtu.be/gzvlMyGpH_U)  |  🐙 [GitHub](https://github.com/radzionc/reactkit/tree/main/app)

Let's generate all the necessary icons for a progressive web app with a single command.

Here, we have an assets folder with two SVG icons, but having one icon is enough. A dark mode option is nice to have, as it only provides a different splash screen for iPhone users with a dark mode preference.

In the folder for static files, we need to have a `manifest.json` file for our PWA. In NextJS, we would put it in the `public` folder and omit the icons field because our command will fill it for us.

```json
{
  "short_name": "ReactKit",
  "name": "ReactKit",
  "start_url": ".",
  "display": "fullscreen",
  "theme_color": "#1a1a1a",
  "background_color": "#1a1a1a",
  "description": "A React components system for faster development",
}
```

Here's our `generate_pwa_icons.sh` script:

```sh
#!/bin/zsh -e

icon=./assets/light-mode-app-icon.svg
bg=#ffffff

out_dir=./public/images/app-icon
manifest=./public/manifest.json
icons_path_base=images/app-icon
index=./pwa_icons_meta.html

npx pwa-asset-generator $icon $out_dir --manifest $manifest --opaque false --icon-only --favicon --type png --path-override $icons_path_base --index $index
npx pwa-asset-generator $icon $out_dir --manifest $manifest --background $bg --icon-only --path-override $icons_path_base --index $index

npx pwa-asset-generator $icon $out_dir --manifest $manifest --background $bg --splash-only --path-override $icons_path_base --index $index

# comment this block if you don't have an icon for a dark mode
dark_mode_icon=./assets/dark-mode-app-icon.svg
dark_mode_bg=#1a1a1a

npx pwa-asset-generator $dark_mode_icon  $out_dir --manifest $manifest --background $dark_mode_bg --splash-only --path-override $icons_path_base --dark-mode --index $index
```

First, we create a few variables:
* `icon` - path to our icon
* `bg` - background color for splash screen and maskable icon
* `out_dir` - path to the folder where we want to put our icons
* `manifest` - path to the manifest file
* `icons_path_base` - path for meta tag links. Here, it is the same as `out_dir`, but without the `./public` prefix
* `index` - path to the .html file where we want to put meta tags. Since there are no .html files in NextJS, we use a gitignored file that we will use for the command to dump all the links. We can then copy them to a React component and reference it in the `Head` at the `_document.tsx` file.

To generate icons, we use [pwa-asset-generator](https://github.com/elegantapp/pwa-asset-generator). The first command generates a favicon icon with a transparent background, the second one creates all the necessary icons for a progressive web app, and the third one creates images for splash screens. The last command is optional, in case you have an icon for dark mode.
VUE.JS FORGE 4 HACKATHON
Tags: webdev, hackathon, vue, frontend
Published: 2023-07-30 10:59:22

📣 Gleam Competition alert 📣

Join Vue.js Forge & win a share of $5,000 in prizes!

👵 
@VueSchool_io
 Lifetime access
💚 
@MasteringNuxt
 Courses
🏆 
@vuejscertify
 Exam
👕 
@kadena_io
 Hoodie
🎟️ Vue.js Workshops

And so much more!

Follow the steps below 👇
Help me win a share of over $5,000 in prizes in this awesome free competition from Vue.js Forge and Vue School! 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1awnc4zywn6hoymcxcm.png)https://wn.nr/v2ZGMmK
📢 Calling all Go Developers! 🚀✨Be prepared to level up your Go programming skills with the upcoming Go 1.21 release! 🎉
Published: 2023-07-30 10:58:28

Generics have long been a highly anticipated feature in the Go programming language. With the release of Go 1.21.
This comprehensive guide aims to provide a detailed exploration of generics in Go 1.21, shedding light on their benefits, syntax, implementation, and best practices.

[Continue Reading](https://younisjad.medium.com/go-1-21-generic-functions-comprehensive-guide-6528b37feb5c)
Popper.js with Framework
Tags: popper, angular, npm, package
Published: 2023-07-30 10:31:11

새로운 feature 기능이 들어가면서, 기존에 사용하던 popover에 UI에 이슈가 생겼다.

우리 팀은 **[ngx-bootstrap](https://valor-software.com/ngx-bootstrap/#/documentation)**을 사용중인데, popover에 component를 넣는 방식을 사용하자 간헐적으로 그 위치가 맞지 않고 덜덜거렸다. 
(**+** 기존의 popover도 hover시, 다른 popover의 position에 영향을 미치는 버그는 있었다😂)

열심히 구글링한 결과, ngx-bootstrap의 고질적인 이슈로, 버그가 수정되지 않고 계속 있는 것 같았다. 

시니어분께 상황을 공유하니 이참에 새로운 popover 라이브러리로 갈아타는게 어떻겠냐고 의견을 주셨다. 기존에 있던 버그 + 현재 발생한 이슈를 동시에 다 해결할 수 있는 방법이었다.

여러 패키지들을 조사한 결과, [poppper.js](https://popper.js.org/)가 가장 대중적이고 널리 쓰이는 듯 했다. 

해당 패키지를 바로 Angular에 적용하면 되는 줄 알았는데, 
알고보니 popper.js는 **순수 Javascript 모듈이기 때문에 Angular에서 사용 가능하게 wrapping 된 버전**(= Angular 구조에 맞게 popper.js를 사용할 수 있도록 해놓은 것)을 또 찾아야 했다.

**👉 Tip:** Angular 관련 모듈을 검색할 땐, `ng` or `ngx`를 앞에 붙여 찾으면 더 쉽게 찾을 수 있다.

ex) `ng popper`, `ngx popper`

검색 결과, [ngx-popper](https://github.com/MrFrankel/ngx-popper)를 쓰기로 결정했다.

ngx-popper의 `package-lock.json`을 보면 아래와 같이 popper.js에 dependency가 걸려있다. 최소 `1.14.3` 버전을 사용해야 하는것.

```json
"popper.js": {
  "version": "1.14.3",
  "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
  "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
  "dev": true
}
```

우리 서비스는 popper.js `1.12.9` 버전을 사용중이었기 때문에 버전을 올려야했다. dependency가 걸리는 패키지들까지 업데이트 후 적용하니 잘 동작하는 걸 확인할 수 있었다.

---

이번 일을 통해, 아래와 같이 2가지 사항을 배울 수 있었다.

**1. 사용하는 Framework에 맞게 라이브러리를 wrapping 하여 사용하기**
**2. 새로운 라이브러리를 추가할 땐, dependency 반드시 확인하기**

시니어 분께서 "사용하는 Framework에 맞게 라이브러리를 wrapping 하여 사용하기"는 나중에 시간 될 때 한 번 꼭 해보라고 추천도 해주셨다.

Angular 구조를 이해하고 라이브러리가 프레임 워크 안에서 어떻게 동작하는지 알 수 있을것 같았다. ([관련 링크](https://medium.com/angular-in-depth/wrapping-commonjs-library-in-angular-8-directive-on-the-example-of-mark-js-976cbcd5d10a))

시간 될때 꼭 해보고 포스팅까지 해보는 걸로💪🏻
Technical writing day three
Published: 2023-07-30 10:50:00

**Principles of effective technical writing**

- Writing for your audience
knowing how to perfectly write for your audience is to Know who your audiences are – your intended Readers.  It is very essential to being successful as a technical writer and this is why you need good research skills in technical writing.
- Writing to solve problems
- Providing the right information
- Crafting effective and readable sentences
- Making your document visually appealing
TAISIM-Simulation Library for Computer Vision Applications
Published: 2023-07-30 10:41:45

🚀 Exciting News for Python Developers! Introducing Taisim - The Open-Source Simulator for Python 🐍
🎯 Are you passionate about simulations and Python development? Say hello to Taisim - a powerful open-source simulator that's taking the Python community by storm!
🔗 GitHub Repository: https://github.com/Amporu/Taisim
🎉 Key Features of Taisim:✅ Simple and Intuitive: Taisim makes simulations a breeze, whether you're a Python pro or just starting your coding journey.
✅ Versatile Simulations: From physics to social systems modeling, Taisim caters to a wide range of applications. The possibilities are endless!
✅ Extensible and Customizable: Tailor simulations to your unique needs. Taisim's modular architecture allows for easy customization and experimentation.
✅ Realistic Visualizations: Watch your simulations come to life with stunning visualizations. Gain valuable insights and present your findings with impact.
📖 Getting Started:Ready to dive in? Access comprehensive documentation, tutorials, and examples in the repository's wiki section.
🙌 Join the Community:Taisim is all about collaboration and shared learning. Join a vibrant community of developers, researchers, and simulation enthusiasts.
📢 Spread the Word:Excited about Taisim? Help us spread the word by sharing this post with your network. Let's build an inclusive community around this fantastic project!
🤝 Contribution Opportunities:Open-source thrives on contributions! Whether it's ideas, bug reports, or pull requests, we welcome your input. Together, we can shape the future of Taisim!
🚀 Embrace the Power of Python:Take control of your simulations with Taisim. Embrace the power of Python and unlock new possibilities.
#Taisim #Python #OpenSource #Simulation #DeveloperTools#PythonSimulator #CommunityPowered
🔗 GitHub Repository: https://github.com/Amporu/Taisim
Headless WooCommerce Theme: Built on Next.js, TypeScript, Tailwind CSS, and WooCommerce REST API
Published: 2023-07-30 10:00:30

Hey there,

I hope you're all doing well! Today, I'm thrilled to introduce our new headless WooCommerce theme, which is powered by Next.js, TypeScript, Tailwind CSS, and WooCommerce REST API.

## The Quest for a Full Stack Headless WooCommerce Premium Theme

As many of you might have noticed, there are numerous WooCommerce themes available in the WordPress ecosystem. However, I faced a challenge when searching for a complete stack headless WooCommerce premium theme. Unfortunately, I couldn't find one that ticked all the boxes. That's what inspired me to develop a headless premium theme, which enables anyone to kickstart their project quickly and easily.

## Where to Find the Theme

You can access the theme right here - [WooCommerce React Theme](https://jstemplate.net/item/woocommerce-react-theme)


![Headless WooCommerce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ot4y5e674kiz86nas7k.png)

## The Advantages of Headless WooCommerce

You might be wondering, "Why choose headless WooCommerce with Next.js?" Allow me to share some compelling reasons:

### 1. Content Management and SEO Made Easy

By utilizing WordPress dashboard, you can effortlessly manage your content and optimize it for SEO. This seamless integration empowers you to leverage the strengths of both platforms effectively.

### 2. Super Fast Loading Speeds

With Next.js powering your headless WooCommerce site, you can achieve lightning-fast loading speeds. This is a crucial aspect, as it significantly improves user experience and contributes to better search engine rankings.

### 3. Simple and Efficient Management

Managing a headless WooCommerce site is a breeze. The decoupled architecture allows you to work on frontend and backend separately, streamlining the development process and making it more efficient.

### 4. Enhanced Security

Security is a top priority for any website owner. The headless approach can bolster your site's security by reducing potential attack surfaces and vulnerabilities.

### 5. Scalability for Future Growth

As your business grows, your website needs to keep up. The headless WooCommerce setup can handle increased traffic and content demands, ensuring that your site scales without a hitch.

## Get Started with Headless WooCommerce Today!

Are you ready to experience the power of headless WooCommerce? Don't wait any longer! Head over to our [WooCommerce React Theme page](https://jstemplate.net/item/woocommerce-react-theme) and kickstart your project with Next.js, TypeScript, Tailwind CSS, and WooCommerce REST API.

Thank you for being part of our community. If you have any questions or need assistance, feel free to reach out. We're excited to see what you create with this cutting-edge headless WooCommerce store!

Happy developing!

Zelal Hossain
Twillio Direct Audio call integration with Nodejs Express
Published: 2023-07-30 09:58:32

Hi, Today we will discuss about the end to end/direct calling using Twilio API. I assume that you have knowledge of Twilio and why it is used for.

**BASIC FLOW OF DIRECT CALLING USING TWILIO**


### Step 1: Purchase Twilio number

For this task user need to purchase a twilio number on which user will call for interacting IVR or making direct end to end call.


### Step 2: Set callback url 

For this task we need to login into the twilio console. After login on console scroll down the page and click **Phone Number** option at the bottom of the page. After redirecting the page there will be a section named **Manage Numbers** under which there will be list of active phone numbers like below screenshot


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/515ney96py95dorigsow.png)

Now click on the twilio number and set the callback api url like below screenshot:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg9hvv2gwoyyeiq1pl2h.png)

Now we have performed all the task needed at twilio platform. So now the task which is left is callback api creation in nodejs express.


### Step 3: Create Callback API

So now we have following code which  is doing the actual job to return the end user phone number to the twilio.

``````router.post('/make-call', (req, res) => {
const VoiceResponse = require('twilio').twiml.VoiceResponse;
 
const response = new VoiceResponse();
const dial = response.dial({
callerId: '+12121111', // Purchased twilio number
});
dial.number('+91878765456'); // phone number of end user to forward the call
res.send(response.toString());
});``````

Pretty cool! Finally our task completes here.

That’s all for now. Thank you for reading and I hope this post will be helpful for beginners who are going implement twillio calling.

Let me know your thoughts over the email **demo.jsonworld@gmail.com.** I would love to hear them and If you like this article, share with your friends. 

This article is originally posted over [jsonworld](jsonworld.com)
5 Mistakes Junior Developers Make When Programming 🙀🤯
Tags: webdev, programming, developers, beginners
Published: 2023-07-30 09:58:20

Programming is a complex and challenging field that requires a lot of dedication and hard work. Junior developers are often eager to learn and improve their skills, but they may make mistakes along the way. In this article, i will discuss some of the common mistakes that junior developers make when programming.

**1. Not Testing Code Properly**
**2. Overcomplicating Code**
**3. Not Seeking Help When Needed**
**4. Not Following Best Practices**
**5. Not Documenting Code.**

1. **Not Testing Code Properly**
 One of the most common mistakes that junior developers make is not testing their code properly. Testing is a crucial part of the development process, as it helps to identify and fix bugs and errors in the code. .

2. **Overcomplicating Code**
 Junior developers may sometimes overcomplicate their code, making it more difficult to read and understand. Overcomplicated code can also be more difficult to maintain and debug.

3. **Not Seeking Help When Needed**
 Junior developers may sometimes be hesitant to seek help when they encounter a problem or issue. However, seeking help from more experienced developers can be a valuable learning experience.

4. **Not Following Best Practices**
 Another mistake that junior developers make is not following best practices. Best practices are established guidelines and standards that help to ensure that code is written in a consistent and efficient manner

5. **Not Documenting Code**
 Documentation is an important part of the development process, as it helps to ensure that code is well-documented and easy to understand.

  **My Advice for Junior is ;**

- They should take the time to test their code thoroughly, using both manual and automated testing methods


- They should strive to write simple, clear, and concise code that is easy to read and understand.


- Do not be afraid to ask questions or seek help when needed.


- Take the time to learn and follow best practices, such as using meaningful variable names, commenting code, and writing modular code.


- And also take the time to document the code, including comments and documentation files, to help other developers understand the code.


**In conclusion**
 junior developers may make mistakes when programming, but these mistakes can be avoided by following best practices, testing code properly, seeking help when needed, and documenting code. By learning from these mistakes and striving to improve their skills, junior developers can become successful and skilled programmers.
How can I convert Pinescript trailing tp&sl to pybit?
Tags: pinescript, pybit, trailing, stoploss
Published: 2023-07-30 09:48:34

Hey guys,
I tried to convert below sample code from pinescript to pybit that is about trailing stop loss and take profit but I confused
please help me.

```
trail_stop_pct = input.float(0.5, title = "trailing stop activation (%)", group = "Exit Long", inline = "LTS", tooltip = "Trailing Threshold %")
trail_offset_pct = input.float(0.5, title = "trailing offset (%)", group = "Exit Long", inline = "LTS", tooltip = "Trailing offset %")
trail_stop_tick = trail_stop_pct * close / 100
trail_offset_tick = trail_offset_pct * close / 100

sl_pct = input.float(2, title = "SL", group = "SL and TP", inline = "SLTP")
tp_pct = input.float(9, title = "TP", group = "SL and TP", inline = "SLTP")

long_sl_price = strategy.position_avg_price * (1-sl_pct/100)
long_tp_price = strategy.position_avg_price * (1+tp_pct/100)
short_sl_price = strategy.position_avg_price * (1+sl_pct/100)
short_tp_price = strategy.position_avg_price * (1-tp_pct/100)

strategy.exit("Long Exit", "Long", stop = long_sl_price, limit = long_tp_price, trail_points = trail_stop_tick, trail_offset = trail_offset_tick)
strategy.exit("Short Exit", "Short", stop = short_sl_price, limit = short_tp_price, trail_points = trail_stop_tick, trail_offset = trail_offset_tick)

```
Publishing Pelican Created Site
Tags: code, python, frontend, pelican
Published: 2023-08-04 21:56:14

---
title: Publishing Pelican Created Site
published: true
date: 2023-07-30 09:30:00 UTC
tags: Code,Python,Code,Frontend,Pelican
canonical_url: https://justincooksey.com/blog/2023/pelican-created-site.html
---

[![](https://justincooksey.com/blog/2023/pelican.png)](https://getpelican.com/)

This is the second part ([see part 1 here](https://dev.to/jscooksey/pelican-static-site-generator-4p8f-temp-slug-2831331)) of my migrating a static web site over to [Pelican Static Site Generator](https://docs.getpelican.com/en/latest/index.html), after my inital posting Pelican Static Site Generator

## Google Analytics

To transfer over [Google Analytics](https://developers.google.com/analytics/devguides/collection) web site code to the Pelican created site was as simple as adding it in to pelicanconf.py as a varible and done. This is all well docmented on the [Pelican doumentation](https://docs.getpelican.com/en/latest/settings.html).

**pelicanconf.py**

```
GOOGLE_ANALYTICS = your_site_code

```

## Hosting and Replacing on Netlify

As the GatsbyJS site was hosted on Netlify which also supports Python and Pelican builds rehosting on Netlify was relatively easy.

First though was getting the source repository ready. Starting with making sure the requirements.txt file exists, as Netfliy build process will be using this to install the required python libraries for the site. I generally keep this up to date as I work, but simply creating it again with the usual command is easy enough:

```
pip freeze > requirements.txt

```

Then making sure the **publishconf.py** file has all the correct settings for the final published site. This was pretty much correct and needed only confirming that it had the correct variables in it for the final site. Overwriting the development variables stored in **pelicanconf.py**.

A **netfliy.toml** file in the root of the repo will give Netlify the commands to build the site and location of the built site files to publish:

```
[build]
command = "pelican content -s publishconf.py"
publish = "output"

```

also a block to specificy the page (HTML file) to display for a 404 page not found repsonse:

```
[[redirects]]
from = "/*"
to = "/404.html"
status = 404

```

## Linking in the new repo

After those things are all settled it is just a matter of [linking the GitHub repo to the the Netlify site](https://docs.netlify.com/configure-builds/repo-permissions-linking/), and Netfliy will do the rest. Building the site and publishing it ready for use.

## So is that it?

Well, while I have the Pelican built site now the active builder for the static pages on the site, I still have plenty to work on. Plenty to upgrade including the theme, which is still not quite right, and of course content on the site for other projects and well whatever else is happening in life......
difference between AI engineer and ML engineer
Tags: tutorial, development, ai, machinelearning
Published: 2023-07-30 09:25:22

AI Engineer vs. ML Engineer: 🤖📊

1. **Focus Area**:
   - AI Engineer: AI Engineers work with a broader spectrum of artificial intelligence, including natural language processing, computer vision, robotics, and more. 🌐👁️🤖
   - ML Engineer: ML Engineers specialize in machine learning algorithms, data analysis, and model deployment. 📈🔍💻

2. **Scope**:
   - AI Engineer: They handle AI system architecture, designing complex AI solutions for various applications. 🏗️📚
   - ML Engineer: They concentrate on creating and optimizing machine learning models to solve specific problems. 🛠️🎯

3. **Skill Set**:
   - AI Engineer: Requires a broader skill set in AI technologies, programming languages, and deep learning frameworks. 🧠📝🧪
   - ML Engineer: Focuses on expertise in data preprocessing, feature engineering, model training, and evaluation. 📊🔬💡

4. **Applications**:
   - AI Engineer: Works on diverse applications like virtual assistants, autonomous vehicles, and AI-powered systems. 🗣️🚗💡
   - ML Engineer: Applies ML algorithms in areas such as recommendation systems, fraud detection, and sentiment analysis. 💼🕵️‍♂️📈

5. **Data Focus**:
   - AI Engineer: Handles both structured and unstructured data, dealing with large-scale datasets. 📊🔢🔠
   - ML Engineer: Primarily works with structured data, creating models based on historical data patterns. 🗂️📈📉

6. **Responsibilities**:
   - AI Engineer: Responsible for end-to-end AI project development and system integration. 📈🔄🚀
   - ML Engineer: Focuses on building and fine-tuning ML models, optimizing for accuracy and efficiency. 🎯🔧💻

7. **Tools**:
   - AI Engineer: Utilizes AI development platforms, cloud services, and AI-specific libraries. ☁️📚🧰
   - ML Engineer: Works with ML frameworks like TensorFlow, scikit-learn, and PyTorch. 🧠📊🔍

8. **Career Path**:
   - AI Engineer: Career opportunities in AI research, software development, and AI system deployment. 🧪💾👨‍💻
   - ML Engineer: Career growth in data science, ML model development, and deployment in various domains. 🔢📈💼

9. **Job Demand**:
   - AI Engineer: Growing demand due to AI's integration across industries and automation advancements. ⬆️🌱🏢
   - ML Engineer: High demand driven by data-driven decision-making and personalized services. ⬆️📈🔍

10. **Collaboration**:
    - AI Engineer: Collaborates with cross-functional teams to integrate AI into various applications. 🤝🌐💼
    - ML Engineer: Works closely with data scientists, software engineers, and domain experts. 🤝🔍🧑‍💻

In summary, AI Engineers focus on a broader range of AI technologies, while ML Engineers specialize in creating and optimizing machine learning models. AI Engineers handle diverse applications and large-scale data, while ML Engineers work with structured data for specific problem-solving. Both career paths offer exciting opportunities and cater to the ever-growing demand for AI and ML expertise in various industries. 🚀📊💻