teleren/devto huggingface dataset:
Mastering JS' 5 Best forEach Tutorials
Tags: javascript, node, vue, codenewbie
Published: 2021-07-09 13:51:42

At Mastering JS, we typically recommend using `for/of` loops to [iterate through an array in JavaScript](https://masteringjs.io/tutorials/fundamentals/array-iterate). However, `forEach()` is still very common, and it is sometimes more convenient for one-liners.

![loop comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apasfs6amoie7ms5kuz1.png)

Here's some of our best tutorials for [JavaScript `forEach()`](https://masteringjs.io/tutorials/fundamentals/foreach):

1) [Iterating Through an Object with `forEach()`](https://masteringjs.io/tutorials/fundamentals/foreach-object)

JavaScript arrays have a `forEach()` function, but general objects do not. This tutorial explains 3 ways to iterate through an object using `forEach()`: using `Object.keys()`, `Object.values()`, and `Object.entries()`.

2) [How to Break Out of a JavaScript forEach() Loop](https://masteringjs.io/tutorials/fundamentals/foreach-index)

You can't use the `break` statement with `forEach()`, because `forEach()` is a function, **not** a loop. If you want to break out of a `forEach()` loop, the easiest way is to use `.every()` instead of `.forEach()`. This tutorial presents 3 ways to simulate `break` in a `forEach()`.

3) [Get The Current Array Index in JavaScript forEach()](https://masteringjs.io/tutorials/fundamentals/foreach-index)

The `forEach()` function calls your [callback](https://masteringjs.io/tutorials/fundamentals/callbacks) with 3 parameters. Most `forEach()` loops only use the first parameter, the _value_. The 2nd parameter is the current array _index_. This tutorial shows you how to get the array index.

4) [Using Continue in JavaScript forEach()](https://masteringjs.io/tutorials/fundamentals/foreach-continue)

Because `forEach()` is a function, **not** a loop, you can't use `continue`. However, with `forEach()`, `return` behaves like `continue`. This tutorial presents 2 alternatives for simulating `continue` with `forEach()`.

5) [How to Use forEach in an Async Function](https://masteringjs.io/tutorials/fundamentals/async-foreach)

The `forEach()` function doesn't work well with [async await](https://masteringjs.io/tutorials/fundamentals/async-await). This is one of the major reasons why we recommend `for/of` over `forEach()`. This tutorial presents 2 alternative patterns that simulate async `forEach()`.
My Quick Study Guides For Exam DP-100 Designing and Implementing a Data Science Solution on Azure
Tags: datascience, azure
Published: 2021-07-09 13:45:38

[On this blog post, I am going to share with you My Quick Learn Data Science and Study Strategy For Validate Skills on Microsoft Exam DP-100: Designing and Implementing a Data Science Solution on Azure. Check it out](https://www.truongbui.com/posts/dp-100)
Swift Vs React Native- Which One To Choose In 2021?
Tags: swift, reactnative
Published: 2021-07-09 13:35:09


If you’re looking to build iOS app, you’ve got a list of languages to work with. Swift and react native are some of them. A question we often get in 2021 is whether to choose React native or swift for iOS app development. Both platforms are used to create excellent native apps that run smoothly on iOS, but they need different skill sets and resources to build. There are many factors to consider while choosing a language for app development. So here we will compare Swift vs React Native with different parameters to help you decide the most appropriate one for your project. But before digging to the comparison, let us see overview of each technology in detail.

#What Is Swift?
Swift is a modern, general-purpose and multi-paradigm programming language designed by Apple to build applications for iOS, Mac, Apple Watch, Apple TV, and Linux OS. It is distributed on Apache License, that makes it available for community to use. Swift is easy to read, write and maintain with human friendly syntax. Also, it interoperates with objective C and Apple’s Cocoa and Cocoa touch frameworks. Modern software design approach makes it an efficient, expressive and reliable general-purpose language to develop complex apps with fast performance.

Slideshare, Airbnb, Twitter are popular apps built with Swift.

#What Is React Native?
React Native is a cross platform open source native app-development framework for iOS and Android that is maintained by Facebook. Main focus is on Android and iOS. There is no official support for macOS and watchOS, react native works on these platforms also. React Native is written with combination of XML-Esque markup and Javascript that is also known as JSX. It is supported by Facebook. 

Facebook, walmart, instagram, Wix are some of the popular apps build with React native.

Also know- Amazing steps to optimize the performance of React Native Applications

#Swift Vs React Native-
**1. Architecture-**
*Swift-*
Viper, Clean, MVVM, MV are some architectures used for apps built in Swift. Clean architecture has Xcode templates that generate components and these template components can be modified according to the requirements. Viper architecture is used with SwiftUI that separates functions, which are easy to test, maintain and helps in rapid app development. 

*React Native-*
React Native possesses a bridge between Native thread and Javascript thread. According to this functionality, Javascript code communicates with the platform and Native API. In IOS, React native uses JavascriptCore separately to run code, and it combines JavascriptCore within the android app. This may increase the app size and resulting in performance issues.

**2. Performance-**
*Swift-*
Know more at- [https://solaceinfotech.com/blog/swift-vs-react-native-which-one-to-choose-in-2021/]
Building multiple themes with CSS..
Tags: html, css, beginners, webdev
Published: 2021-07-09 13:33:26

---
title: Building multiple themes with CSS..
author: saketh kowtha
tags: html, css, beginners, webdev
---
This article is about building a site with multiple color schemes. It will change the theme without reloading the document, without adding theme class names dynamically and without duplicating the code.

I am using CSS variables in this example. You can try this even if you are using SASS or LESS.

In this example we will create a document that has background color, Dropdown (to pick scheme) , card, heading and paragraph. Here I am creating six color schemes and have given random names to them. Below are the names
- Light
- Dark
- Sunset
- Moon light
- Cartoon
- bluecrystal

In dropdown you will find the system option i.e., your OS theme. If your are using Dark mode in your OS, it will be Dark. Else, it will be `Light`. 

For each scheme i defined four colors 
- --main-bg-color (Body backgound color)
- --card-shadow-color (Card shadow)
- --primary-text-color (Heading text color)
- --secondry-text-color (Paragraph text color)

#### Important
- We are getting system theme with the help of `prefers-color-scheme` media query.
- I am using `data-theme` attribute to set color scheme. Whenever scheme changes just we need to update `data-theme` attribute value.

Here is the Codepen. You can find color schemes and some other styles for Card, Heading and Paragraph in CSS section.



{% codepen https://codepen.io/saketh-kowtha/pen/OJmXGXN %}
StretchShop 0.5 - Subscriptions, Price Levels & Videos
Tags: javascript, vue, node
Published: 2021-07-09 13:19:26

StretchShop version 0.5 (codename Boron) was released, and it comes with new features and a YouTube channel. This release aims to prepare the platform for first occasions in the wild.

#Subscriptions
Have you ever wanted to offer your services but couldn't find a way to put them into existing e-commerce solutions? With StretchShop, regularly **purchasing services or items is as easy as buying products.** It may be your SaaS solution or your video-on-demand service.
![Subscription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11vcglxycobvxn9m4df5.jpg)

#Price levels
When you need to reward your partners that help your business to have special prices, price levels may suit your needs. Get **price according to user type**, including the option to set it individually per product or generate them for all.
![Price levels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkn5z1i87j20h33kahvh.jpg)

#Administrative features
Version 0.5 also comes with updates for administration. You can set **dates when products or pages are active**. When publishing a page, you can now add **related categories and URLs to its menu**. The administrator can **manage standard users** and help them with issues from their point.

#YouTube channel
We introduce the [StretchShop YouTube channel](https://www.youtube.com/channel/UCWge8fht1i0Wp0q2g9q2t6Q) to show what it is, how it works. We start to create a knowledge base about this platform with a [presentation for potential customers](https://youtu.be/BHR94-IVcDc) and developers' installation guide.

Subscribe to the channel for notifications about new content at (https://www.youtube.com/channel/UCWge8fht1i0Wp0q2g9q2t6Q)

{% youtube OfzU6--DjvM %}
How to deal with theory in software engineering
Published: 2021-07-09 13:19:15

Hi Dev, 

I started my new job as a frontend developer few months back.

I have bought a Angular Course at Udemy from a very popular instructor.

I have finished half of the course..

But now since there is lot of theory involved, Theory is giving me nightmares...I don't want to study theory. How ever I am very much interested in web development.

Can you please share some advice .How can I deal with theory involved, specially not in Angular but overall, While learning new technology.

I love Technology, but whenever I encounter theory I just feel like giving up. Please HELP
Scrape Google Spell Check with Python
Tags: python, html, webscraping, tutorial
Published: 2021-07-09 13:01:17

Contents: intro, imports, what will be scraped, process, code, links, outro.

### Intro
This blog post is a continuation of Google's web scraping series. Here you'll see examples of how you can scrape Google Spell Check with Python. An alternative API solution will be shown.


### Imports
```python
from bs4 import BeautifulSoup
import requests, lxml
from serpapi import GoogleSearch
```

### What will be scraped
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh5xqgj7mubu7z6wu29w.png)
 

### Process
Selecting `CSS` selector that support autocompletion on all languages
<img width="100%" style="width:100%" src="https://media.giphy.com/media/5H32C40aVuWPJeGnT1/giphy.gif">

Process of using SerpApi from the playground search query to the final output
<img width="100%" style="width:100%" src="https://media.giphy.com/media/La93jnCuKdhZlU6G2f/giphy.gif">


### Code
```python
from bs4 import BeautifulSoup
import requests, lxml

headers = {
    'User-agent':
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19582"
}

params = {
  'q': 'fush ro dah',
  'hl': 'en',
  'gl': 'us',
}

html = requests.get('https://www.google.com/search?q=', headers=headers, params=params).text
soup = BeautifulSoup(html, 'lxml')

corrected_word = soup.select_one('a.gL9Hy').text
corrected_word_link = f"https://www.google.com{soup.select_one('a.gL9Hy')['href']}"
search_instead_for = soup.select_one('a.spell_orig').text
search_instead_for_link = f"https://www.google.com{soup.select_one('a.spell_orig')['href']}"
print(f'{corrected_word}\n{corrected_word_link}\nSearch instead: {search_instead_for}\n{search_instead_for_link}')

-------
'''
fus ro dah
https://www.google.com/search?hl=en&gl=us&q=fus+ro+dah&spell=1&sa=X&ved=2ahUKEwiIwb3ykMzxAhVWSzABHQtlDeMQkeECKAB6BAgBEDA
Search instead: fush ro dah
https://www.google.com/search?hl=en&gl=us&q=fush+ro+dah&nfpr=1&sa=X&ved=2ahUKEwiIwb3ykMzxAhVWSzABHQtlDeMQvgUoAXoECAEQMQ
'''
```

### Using [Google Spell Check API](https://serpapi.com/spell-check)
SerpApi is a paid API with a free trial of 5,000 searches.



```python
from serpapi import GoogleSearch
import os

params = {
  "api_key": os.environ["API_KEY"],
  "engine": "google",
  "q": "fus ro dish",
  "gl": "us",
  "hl": "en"
}

search = GoogleSearch(params)
results = search.get_dict()

print(results['search_information']['organic_results_state'])
print(results['search_information']['spelling_fix'])

--------
'''
Some results for exact spelling but showing fixed spelling
fus ro dah
'''
```


### Links
[Code in the online IDE](https://replit.com/@DimitryZub1/Google-Search-Scrape-Spell-Check-python-serpapi#bs4_result.py) • [Google Spell Check API](https://serpapi.com/spell-check)

### Outro
If you have any questions or something isn't working correctly or you want to write something else, feel free to drop a comment in the comment section or via Twitter at [@serp_api](https://twitter.com/serp_api).

Yours, 
Dimitry, and the rest of SerpApi Team
🖼 Resize and re-compress your photos with squoosh.app
Tags: graphics, squoosh, webapp
Published: 2021-07-09 14:35:10

---
title: 🖼 Resize and re-compress your photos with squoosh.app
published: true
date: 2021-07-09 12:58:00 UTC
tags: 
- graphics
- squoosh
- webapp
canonical_url: https://www.gozgeek.com/posts/2021/resize-and-re-compress-your-photos-with-squoosh-app/
cover_image: https://cdn.collinsoft.com/file/cdn-collinsoft/gozgeek.com/img/2021/squoosh/squoosh-1024x.png
---

Have you needed to quickly resize or recompress a picture and don’t want to wait for Affinity Photo or Photoshop to load? Then do I have a web app for you!

## Squoosh is in the house

[Squoosh](https://squoosh.app/) is a Google project that was created to highlight offline apps in the browser. The site allows you to not only convert photos to other formats, but to also resize and reduce the number of colors in a photo.

These two techniques can let you compress photos to at least 90% without any noticeable effects.

## CLI now included

But you’re a developer, and you want to be able to automate these conversions. Well, Google [also has you covered](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli). You can now run the conversions from the commandline.

## Uses for you

I find myself using [Squoosh](https://squoosh.app/) quite a bit for quick compressing and resizing. It works well for these simple tasks when you want something down now!
Beautiful design illustrations for Free
Tags: design, ux, devjournal
Published: 2021-07-09 12:47:55


Beautiful design illustrations enhance your startup's website, app & marketing journey. 

Below is the list where you can get them.

Name : [@unDraw_co](https://twitter.com/unDraw_co)
Link : https://undraw.co/ 
Key Aspect : Images can be completely free and without attribution. File format: SVN, PNG 

Name : [@Blush](https://twitter.com/blushdesignapp) 
Link : https://blush.design/ 
Key Aspect: Free and Paid plans are available. 
All Illustrations published on Blush can be used for free.
Figma and Sketch plugins are available. 
File format: SVN, PNG 

Name : OpenDoodles
Link: https://www.opendoodles.com/	
Key Aspect: Free for Commercial and Personal Use. No need to credit, license, or anything.
File format: SVN, PNG (Blush)

Name : [@_illlustrations](https://twitter.com/_Illlustrations)	
Link : https://illlustrations.co/	
Key Aspect: Free for Commercial and Personal Use.
File format: SVN, PNG

Name : [@DrawKit Illustrations](https://twitter.com/UseDrawKit)
Link : https://www.drawkit.io/	
Key Aspect : Free and Paid plans are available. Images can be completely free and without attribution.
File format: SVG

Name : [@Icon8](https://twitter.com/icons_8) or Ouch!	
Link :https://icons8.com/illustrations	
Key Aspect: Free and Paid plans are available. Images can be completely free and without attribution.
File Format: AI, SVG, PNG, EPS, Figma File

Name : [@Leni Kauffman](https://twitter.com/lenikauffman)
Link : https://fresh-folk.com/	
Key Aspect: Free to use with attribution 
 

<h4>Looking to hire a designer? <h4>

[Women Who Draw](https://www.womenwhodraw.com/)
[People of Craft](https://peopleofcraft.com/#Illustrator)
[Queer Design Club](https://queerdesign.club/directory/)
[Designer Hunt](https://www.designerhunt.io/)
[Blacks Who Design](https://blackswho.design/)
[Latinxs Who Design](https://www.latinxswhodesign.com/)
[Dribbble Illustration](https://dribbble.com/shots/illustration)

Note:Thanks to Brad Neathery for title photo via@unsplash 🎁

Reach me on my  [Twitter](www.twitter.com/royswapan)

Other item to look into: 
{% post https://dev.to/swapanroy/translate-pdf-to-text-to-audio-1li %}

{% post https://dev.to/swapanroy/dictionary-using-api-calls-in-python-with-audio-pronunciation-3hjp %}
Prevent line breaks with CSS
Tags: css, webdev, beginners, codenewbie
Published: 2021-07-09 12:29:18

##A CSS trick in a React component🧚##
Recently I encountered an interesting problem, let’s say, there are some **list items** to display using the basic React code like below 👇

![1_rnbP3ABwGNdc6V9creIC7w](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dj4zxkppz5p6gswbwzm.png)a very simple `<ul><li> …`

✨ Notice those items should be side by side (**inline** and of course without any **line breaks**) like the result below👇

![1_TQSt2hG-9LPjCqEizo_TSQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if7utwxatoede2ty1lr9.png)
responsive lists view

I wrote some simple css: 
![1_CoYp9iE8Zn5Hf9sokdkhmw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8mecyo5dox91x986cum.png)
I want that the items are side by side **👉display: inline**

And the Result was 💥
![1_pOUDtDCy5C_p5C_ppu28UA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/063xt53o4jc5066z184v.png)
Ops, line breaks 🙅‍♀️

See the **line breaks**? Ugly enough…
🤞 Here comes my simple solution:
![1_D_1uwqGEGyv7u93T9t3fFw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sfoj99eazpwesbg6lde.png)
prevent line breaks

That’s it! 🌸

The **white-space** CSS property sets how white space inside an element is handled, it collapses white space, but it does not allow wrapping.

The **overflow** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

The **text-overflow** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.

That was a quick simple css trick, hope you enjoy it! 💫

Thanks for reading!
Is there a place for a small startup launch without a big promotional budget?
Tags: productmanagement
Published: 2021-07-09 12:26:54

---
title: Is there a place for a small startup launch without a big promotional budget?
published: true
description: Making a Product: Transcripto, ep. 7
tags: productmanagement
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
'Making a Product: Transcripto' is an mkdev.originals web series that will see a small team of two making a working product step by step, from conception to designing and coding to the release! Join Kirill and Leo on the journey of creation of TRANSCRIPTO, a small but useful service for transcribing audio into text.

In ep. 7, Leo tries to overcome the procrastination syndrome and explores the possibilities to announce the approaching release of Transcripto:

{% youtube c391J_id6yc %}

***

* [Episodes 0 & 1](https://dev.to/mkdev/the-road-to-mvp-planning-first-steps-and-brainstorming-the-product-features-in-miro-kb9): Introduction & The Road To MVP.
* [Episode 2](https://dev.to/mkdev/how-to-design-a-logo-for-your-startup-with-the-help-of-an-artificial-intelligence-40l5): How to design a logo with the help of an AI.
* [Episode 3](https://dev.to/mkdev/how-to-build-a-transcription-service-prototype-in-90-minutes-with-ruby-on-rails-and-aws-3884): How to build a service prototype in 90 minutes.
* [Episode 4](https://dev.to/mkdev/making-website-design-for-a-transcription-service-in-2-days-3m4): Making website design in 2 days.
* [Episode 5](https://dev.to/mkdev/the-impostor-syndrome-episode-adding-features-with-ruby-on-rails-and-having-fun-with-figma-and-css-2f4m): The Impostor Syndrome.
* [Episode 6](https://dev.to/mkdev/how-to-calculate-aws-stripe-costs-define-the-price-for-your-product-and-make-a-profit-on-the-way-1f8d): How to calculate AWS & Stripe costs.
* [Episode 7](https://dev.to/mkdev/is-there-a-place-for-a-small-startup-launch-without-a-big-promotional-budget-202n): Startup Launch.
* [Episode 8](https://dev.to/mkdev/aws-copilot-and-another-6-ways-to-easily-deploy-apps-to-aws-1njb): AWS Copilot.
* [Episode 9](https://dev.to/mkdev/you-ve-launched-a-new-product-now-what-4dkm): Now what?
Technology Websites
Tags: tech, lists
Published: 2021-07-18 00:33:41

---
title: Technology Websites
published: true
date: 2021-07-09 12:24:00 UTC
tags: tech,lists
canonical_url: https://dils.blog/technology-websites/
cover_image: https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fHdlYnNpdGVzfGVufDB8fHx8MTYyNjA5MjYwNw&ixlib=rb-1.2.1&q=80&w=2000
---
A friend wanted to know some sites to keep up with technology. Here is the list I recommended.

- [Ars Technica](https://arstechnica.com/)
- [Engadget](https://www.engadget.com/)
- [Hacker News](https://news.ycombinator.com/)
- [MacRumors: Apple Mac iPhone Rumors and News](https://www.macrumors.com/)
- [Mashable](https://mashable.com/)
- [Product Hunt -- The best new products in tech.](https://www.producthunt.com/)
- [TechCrunch -- Startup and Technology News](https://techcrunch.com/)
- [The Register: Sci/Tech News for the World](https://www.theregister.co.uk/)
- [The Verge](https://www.theverge.com/)
- [TNW](https://thenextweb.com/)
- [WIRED](https://www.wired.com/)

Hacker News is probably my favorite. I find so many gems on there, like this one about Angampora -- [Capturing Sri Lanka’s Ancient, Almost Lost Martial Art - Atlas Obscura](https://www.atlasobscura.com/articles/angampora-sri-lanka-martial-art)