teleren/devto huggingface dataset:
Un problème de fichiers...
Tags: cloud, productivity, files, storage
Published: 2023-01-31 17:16:22

Ça faisait 10 ans… 

Et c'est peut-être votre cas, vous qui lisez ce post...

10 ans que j'éparpillais mes fichiers !

J’utilisais :
- 2 OneDrive Personnels
- 1 OneDrive Professionnel 
- 5 Google Drive (oui 5)
- 2 comptes HubiC (qui aujourd’hui n’existent plus)
- 1 compte MEGA
- vous voulez que je continue ?

Et je n’arrivais pas à m’en sortir… Pourquoi ? Parce que disperser mes fichiers m’empêchait de les organiser correctement. 

A vouloir profiter des stockages en ligne gratuits, j'en étais venu à enregistrer mes fichiers là où il y avait de la place... pour ne finalement jamais les retrouver quand j'en avais besoin !

Alors j’ai décidé d’agir... et d’acheter un abonnement cloud (pour la première fois de mon existence). Mais lequel choisir ?


## Éliminons quelques options…

Déjà, je n’avais pas vraiment envie de payer pour un service qui stocke mes données en clair aux Etats-Unis. Donc exit les Google Drive et OneDrive.

Je n’ai pas testé la solution qui remplace HubiC - Shadow Cloud - mais avec OVH on ne sait jamais ce qui arrivera dans 10 ans…


## Pourquoi je n'ai pas choisi pCloud ?

Est-ce que vous avez déjà entendu parler de pCloud ? L’entreprise vante notamment le fait que la règlementation suisse est la plus stricte en matière de protection des données. Ce service m’ayant l’air d’une alternative intéressante, je me suis dit que j’allais lui laisser une chance. 

Mais le fait est que les conflits étaient trop nombreux sur les fichiers en cours d’utilisation. L’objectif étant de synchroniser mes fichiers et de les modifier en même temps sur mon PC, j’ai abandonné cette solution.

## Et MEGA ?

MEGA propose déjà 20 Go gratuits, ce qui est plutôt intéressant comparé à d’autres qui ne propose que 5 (voire 2) Go.

Autre point intéressant : c’est le seul service qui chiffre vos données sans surcoût (même les comptes gratuits). Ce qui signifie que personne d’autre que vous ne peut accéder à vos données.

Ça faisait environ 1 an que j’utilisais MEGA. Je n’ai jamais eu de conflits de fichiers. La synchronisation n’est pas la plus rapide mais fait clairement l’affaire.

J’ai choisi l’abonnement Pro Lite à 400Go et 12To de transfert, qui n’est finalement pas trop chère (49,99€ pour 1 an) et est, je pense, largement suffisante pour la plupart d’entre nous.

Il n’y a peut-être pas d’intégration avec la suite Office ou Google Docs, mais ce n’est pas ce qui m’intéresse pour ce stockage. Pour le travail collaboratif, utiliser Google Drive ou OneDrive en version gratuite reste donc la meilleure solution (si vous avez des alternatives, n’hésitez pas à les partager en commentaires).

A l’heure actuelle, je ne regrette pas mon choix. J’ai ENFIN réussi à regrouper et organiser mes fichiers, et j'espère que ce poste vous aidera à en faire autant.

Alors, quel service cloud utilisez-vous ?
I build my own Shopee discount alert on Slack channel!
Tags: automation, python
Published: 2023-01-31 17:32:13

I love discounts and I bet you are too. My fav online shopping platform is [Shopee MY](https://shopee.com.my/). But, how come I can always 24/7 checking on the App to get notified when the seller promotes the products with DISCOUNT? It is not works for me.

So, I build my own Shopee alert.

### How to get the information? 
The first thing is I need to get the information from the Shopee. But, do I have the Shopee API? No. I don't. My next option is **web scraping**. By using `requests` and `BeautifulSoup`, it is possible to do so with a few tricks.

```python
...
headers = {
    "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0",
    "X-Requested-With": "XMLHttpRequest",
    "Referer": link,
}
page = requests.get(URL, headers=headers)

if page.status_code == 200:
    soup = BeautifulSoup(page.content, "html.parser")
...
```

### Where do I store the information?
Next, I must **store the data** to compare the price/discount before sending the alert. Why do we always need the alert when the price is not the lowest?

I build for my own use; I just need a simple database. Below is the database in my list:

- Google Sheet 
- Baserow ✅
- Excel and store in AWS S3

After few consideration, I choose to use [Baserow](https://baserow.io/). But why?

- open-source with API capability
- backend using Postgres
- better admin panel

```python
...
res = requests.get(
    url=f"{base_url}database/rows/table/{table_id}/?user_field_names=true",
    headers=headers,
)

if res.status_code == 200:
    data = res.json()
    res_data = data["results"]
    df = pd.DataFrame(res_data)
...
```

### Notification or alert
If the price is the lowest (compared with the historical data), it should alert me.

For this project, I am using Slack channel to get the alert. Slack is one of the easiest alert integration compared to Telegram or Discord.

```python
...
def sendToSlack(itemRes, no_data=False):
    if no_data:
        payload = getPayloadEmpty()
    else:
        payload = getPayload(itemRes)

    slack_webhook = os.environ.get("SLACK_URL")
    requests.post(slack_webhook, json=payload)
...
```

Now, let's see how the alert looks like


![Slack alert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/779cmdz2gbcqtjrpnxd9.png)

It's contain the discount and link to the product.

### Deploy the script
I am using **cron job** running in the AWS Lightsail instance. Schedule to run the `bash` script every 3rd hour from 1 AM to 11 PM. 

```bash
export PYTHONPATH=/home/amzar/Documents/python_env/shopee-tracker/bin/python3 

/home/amzar/Documents/python_env/shopee-tracker/bin/python3 

/home/amzar/Documents/shopee-tracker/app.py
```

Cron expression `0 1-23/3 * * * /home/amzar/scripts/run_shopee_tracker.sh`


### Full Code
[Github](https://github.com/amzar96/shopee-tracker) follow the installation step in README.md
Sustainable Web Design- Question of Relevance
Published: 2023-01-31 17:25:36

Sustainable Web Design- We can measure it, but how much does it matter?

https://alistapart.com/article/sustainable-web-design-excerpt/

In the excerpt from chapter 2 of _Sustainable Web Design_, on alistapart.com, Tom Greenwood, a bonified expert in Green Web Design, explains the ways in which we can measure the carbon footprint of websites/ website design. He identifies two ways in which we are studying the footprint of web design: through the weight of data transfer of the website, and the carbon intensity of electricity required. Green also briefly describes the various lenses with which these items can be observed.
While I found the tactics outlined wildly creative, and thus found interest in the article, I was left with more questions than answers. 
With the huge fossil fuel burning factories across the planet and all means of gas burning transportation scarring the ozone, what do our tiny little electrical signals in our websites have to offer to the big picture?
Being that this is an excerpt, I hope that context and meaning is applied to the full text, and honestly I think I am going to have to go find a copy so that I can fulfill these questions.
Daily message Slack bot
Tags: webdev, javascript, slack, serverless
Published: 2023-01-31 17:07:31

I built a bot that posts for daily code challenges in a VetsWhoCode (VWC) Slack channel.

The first iteration of it was using [Slack's workflow builder](https://slack.com/features/workflow-automation). I just made a slew of scheduled messages. Each message was a different day. So, when all the messages were posted, I needed to go back in and reschedule with what the new date was. After doing this a few times I felt like it was time for a change.

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

The next iteration is a super simple Node.js AWS Lambda connected to a daily event bridge trigger. The Lambda sends an authenticated POST request to our Slack app's web hook.


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

The code reads a markdown file of code challenges delimited by `---`. It then divides the number of days in a year by the challenge array length. That way it will post a challenge every day.

Future work that could be done with it is:
* Build a Challenge explorer/editor
* Update the bot so it could work in multiple channels so you can have different kinds of languages
* Setup Continuous Deployment. I currently just log in to the AWS account and manually update the challenges/code.

In the end, it's as simple as I could think to make it. I like to build that way, with room to expand.
How to Ace Coding Interviews — 21 Problem Solving Lessons
Tags: webdev, programming, career, codenewbie
Published: 2023-01-31 16:54:05

![Programming is less about learning syntax and more about problem solving.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2wir9mwrjuf6dhveldg.png)

In the last 5 years, I have given **20+ coding interviews**.

Reflecting back, I have documented my learnings in 21 lessons that improved my problem solving skills significantly.

These will help you in your upcoming coding interviews.

Let's go! 🚀

1. Problem solving skill = Knowing toolbox of techniques + Practice of applying it in different situations

2. Understanding the problem is the most important step of problem solving.

3. Don’t rush into solving. Before that ask:
Can I simplify the problem?
Can I break the problem into easier problems?

4. When stuck on the problem. Be curious, not frustrated.

5. Spend some time thinking about more examples and edge cases of the problem.

6. Forget code first. Consider how a human can ‘systematically’ solve the problem.

7. It’s ok to temporarily ignore the difficult parts and approach them later.

8. Solving on whiteboard is 10x easier than keyboard.

9. Diving into code without planning will only give you stress.

10. Think of multiple solutions, before committing to one.

11. Start with brute-force solution and then fix the suboptimal parts.

12. Create step by step high level plan and validate if it leads you to desired solution.

13. Try simplifying the solution. Simpler solutions are easier to code.

14. If you are struggling with implementing your plan, write pseudo-code first.

15. Use pseudo-code as program comments and while coding translate each comment into code.

16. Focus on making a solution work before making any improvements.

17. Verify if your solution works for all possible scenarios and edge cases.

18. You only get better by solving lot of problems. Cliche for a reason.

19. For interviews, prioritize practicing most asked and frequently asked problems by the company.

20. Don’t stop at working solution. Learn other ways of solving the same problem.

21. Relax and see failure as feedback. It just tells you what NOT to do.

That's it!

Hope you found these lessons helpful.

If you liked this post, follow me for more of these 🙂
Also, share ONE lesson from your failed programming interview👇
Linked List
Tags: javascript, algorithms, programming
Published: 2023-01-31 16:44:56

Hey, let´s talk about linked Lists and what are the differences between an array and a linked list.

**Linked List**
A linked list is structured by objects, each object have a **head** and a **next** value.

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

**A linked List in javascript will look like this
**

```
const list = {
    head: {
        value: 1
        next: {
            value: 20                                             
            next: {
                value: 22
                next: {
                    value: 21
                    next: null	
                    }
                }
            }
        }
    }
};

```

Some disadvantage that linked list have are the following.

- It is slower because random access like in an array is not allowed.

- It uses more memory because of the storage of the pointer


Creating a javascript class as a ListNode

```
class ListNode{
  constructor(data){
    this.data = data
    this.next = null
   }
}
```

Crating a javascript class as a Linked List

```
class LinkedList{
  constructor(head = null){
   this.head = head
   }
}
```


**Now we will put all it together
**
We`ll create two list nodes and then a pointer from node 1 to node 2

```
let node1 = new ListNode(2)
let node2 = new ListNode(5)
node1.next = node2
```

If we break down the code we will see that on the the first line we are defining node1 equal to a new listNode(2) where 2 is the value we are assigning to node1, then we do the same on the second line.
On the third line however we are defining the value of the node1 pointer where we are telling to it to be equal to node2.

Now we`ll create a linked list with the node1

```
let list = new LinkedList(node1)
```

Here we are defining list to be a linked list and we are assigning it the node1 value.

Let`s try to access to it.

```
console.log(list.head.next.data) 
```

It will return 5, but why?
Let`s see, when we access **list.head.next** we are telling it to go to the next node and the last data is to access the data when we are in a linkedList.

Thanks for reading it, i hope you found it somehow helpful.

Lautaro.
HTML: A Fine Art of Writing Clean Code
Tags: html, web, webdev, beginners
Published: 2023-01-31 16:39:01

HTML is an art of coding, it is the backbone of any website. Whether you are a beginner or an experienced developer, it is always possible to miss small details. In this blog, we will go through 10 important points that every developer should keep in mind while writing HTML. 

These tips will help you write clean and optimized HTML code, and will work seamlessly with React, Angular, and Vue.

**1. File Naming Conventions**

The names of your HTML files should be in lowercase, with no spaces or special characters. The name should reflect the function of the file and should be in string format.

**2. Extension Matters**

Always use _.html_ as your file extension.

**3. Validate Your HTML Code**

Use an HTML validator to check for any errors or issues in your code.

**4. Formatting Matters**

Always keep your code well-formatted, it makes your code readable and maintainable.

**5. Title Tag**

Use the title tag to improve accessibility for users and search engines.

**6. Semantic Tags**

Use semantic tags to give meaning to your HTML code. They help search engines and assistive technologies to understand the structure of your web page.

**7. Folder Structure **

A clear folder structure is a must. Create separate folders for styles, javascript, fonts, images, and other files.

**8. External Styles and JavaScript** 

Use external CSS and JavaScript files instead of inline styles and scripts. It keeps your code clean and reduces the overall size of your HTML file.

**9. Avoid Inline JavaScript Events**

Avoid using inline JavaScript events, instead, use IDs or HTML elements to refer to JavaScript.

**10. Optimize Your HTML Code**

Always strive to optimize your HTML code, it helps to reduce the loading time of your web page and enhances the user experience.

In conclusion, writing clean HTML code is an art, and like any art, it takes time and effort to perfect. Keep these 10 tips in mind, and you will be well on your way to writing clean, optimized, and accessible HTML code. 

Happy learning!
How to work more efficiently with Angular and Node.js
Tags: javascript, typescript, node, angular
Published: 2023-01-31 16:38:53

Angular and Node.js are two of the most popular technologies for building dynamic web applications. Both of these technologies are powerful, but working with them can also be challenging, especially if you're looking to increase your efficiency. In this blog, we'll go over some tips and tricks that can help you work more efficiently with Angular and Node.js.

1. Plan your project: Before you start coding, it's important to take the time to plan your project. Start by defining your goals and breaking down the project into smaller, manageable tasks. This will help you stay focused and avoid making unnecessary changes later on.

2. Use a starter kit: There are many starter kits available for Angular and Node.js that come pre-configured with all the tools you need to get started quickly. Using a starter kit can save you time and help you focus on writing code.

3. Automate repetitive tasks: Automating repetitive tasks can save you a lot of time and reduce the chance of errors. Tools like Grunt, Gulp, and Webpack can be used to automate tasks such as code linting, testing, and bundling.

4. Write reusable code: Writing reusable code can reduce duplication and increase efficiency. For example, you can create a library of reusable components or functions that can be used across multiple projects. This will make your code easier to maintain and debug.

5. Use code snippets: Code snippets and templates can help you avoid having to write repetitive code from scratch. There are many code snippet libraries available online that you can use.

6. Stay organized: Keeping your code organized is important for efficient work. Use consistent naming conventions, comment your code, and break it down into smaller, manageable files. This will make it easier to navigate your code and make changes.

7. Test your code: Regularly testing your code is important for catching bugs early and avoiding wasted time debugging. Tools like Karma, Mocha, and Jest can be used to automate your tests.

8. Debug effectively: Debugging can be time-consuming, so it's important to be efficient about it. Use debugging tools like the browser dev tools and Node.js debugger to quickly find and fix bugs.

By following these tips, you can work more efficiently with Angular and Node.js. Of course, there are many other ways to increase efficiency, so feel free to experiment and find what works best for you. Happy coding!
How to master JavaScript, from beginner to expert
Tags: javascript, webdev, productivity, node
Published: 2023-01-31 16:32:11

JavaScript is a versatile and popular programming language used to build dynamic websites and web applications. Whether you are a beginner or an experienced programmer, mastering JavaScript can greatly benefit your career and help you build cutting-edge projects. Here are some tips on how to do it:

1. Get familiar with the basics: Start by learning the basics of JavaScript syntax, variables, data types, loops, functions, and arrays. Familiarize yourself with the concepts of event handling, DOM manipulation, and AJAX.

2. Practice, practice, practice: The more you practice coding in JavaScript, the better you will get at it. Start by building simple projects like a calculator or a to-do list, and work your way up to more complex projects.

3. Learn the latest features: JavaScript is constantly evolving, so it is important to keep up with the latest features and updates. Stay up-to-date with ES6 and beyond, and learn about new features such as arrow functions, destructuring, and spread operators.

4. Utilize online resources: There are numerous online resources available to help you master JavaScript. Sites like Codecademy, FreeCodeCamp, and Udemy offer comprehensive courses on JavaScript and related technologies.

5. Join online communities: Join online communities and forums to connect with other JavaScript developers. Participate in discussions, ask questions, and share your knowledge with others.

6. Get involved in open-source projects: Contributing to open-source projects is a great way to learn and practice your JavaScript skills. You can find projects on sites like GitHub and collaborate with other developers.

7. Work on real-world projects: Nothing beats working on real-world projects in terms of gaining experience and building your skills. Start small and work your way up to more complex projects.

8. In conclusion, mastering JavaScript requires a combination of theoretical knowledge and practical experience. Follow these tips, and you will be on your way to becoming an expert in no time!

Happy coding!
Simplify debugging to remove complexity from embedded systems
Tags: embedded, productivity, microservices, luos
Published: 2023-01-31 16:30:00

👉 Debugging embedded systems is more complex than ever as features keep on being added. Thankfully, there are some practical ways to simplify the process.

Read this article created by Nicolas Rabault for TechCrunch, available in complete on our [blog](https://www.luos.io/blog/simplify-debugging-to-remove-complexity-from-embedded-system-development)
Fixing Material UI and Emotion's handling of Transient Options
Tags: webdev, react
Published: 2023-01-31 16:01:58

## Passing Props to custom Emotion styles with Material UI

Photo by <a href="https://unsplash.com/@amandavickcreative?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amanda Vick</a> on <a href="https://unsplash.com/photos/zw_oaDbfzyE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Recently I encountered an issue with the Material UI that I couldn't wrap my head around. What was happening?

Modern libraries for managing custom CSS, like Styled Components or Emotion, have accustomed us developers to the possibility to use styled elements as real, reusable components. They can even extend other styles or other components. CSS becomes building blocks like React, and that's just great.

Using Material UI means using Emotion. It works similarly to Styled Components, although the syntax is slightly different. One of the advantages of using these libraries with React is that you can pass them props and you can change the style according to their values.

However, it turns out that Emotion with Material UI lacks proper handling of this feature (as of now at least), which is called transient options. So if you pass a boolean value as a prop and use it like this:

```js
  // component
  <MyStyledBox isdarktheme={true} />
  
  // style file
  import { Box } from '@mui/material'

  export const MyStyledBox = styled(Box)(
    ({isdarktheme}) => ({
      color: isdarktheme ? 'white' : 'black'
    })
  )
```

React will throw a warning saying: 'Received `true` for non-boolean attribute `isdarktheme`'. It will work, but the warning will stay.

How to fix it? I found that there's an issue opened with Emotion about this, and here's [the best working workaround answer.](https://github.com/emotion-js/emotion/issues/2193#issuecomment-766173118)

So here's how I followed it and implemented it. In one util file, I added:

```javascript
  export const transientOptions: Parameters<CreateStyled>[1] = {
    shouldForwardProp: (propName: string) => !propName.startsWith('$'),
  }
```

This identifies the props starting with $ as transientOptions through the React hook shouldForwardProp. As the name says, it will allow the prop to be passed.

Then I can import the method and use it as an option for the emotion component. Here's with TS:

```typescript
  import { transientOptions } from 'utils'
  
  type Props = {
    $isdarktheme: boolean
  }
  
  export const MyStyledBox = styled(Box, transientOptions)<Props>(({ theme, $isdarktheme }) => ({
    color: $isdarktheme ? 'white' : 'black'
  }))
```

The warning disappeared and the prop is correctly taken by Emotion.

Thank you for reading! Let's connect on [Twitter](https://twitter.com/AlexBuaiscia) or [Mastodon](@alex_@uiuxdev.social)!