teleren/devto huggingface dataset:
How to use scss with Svelte?
Published: 2021-02-08 14:56:50

It might sound a simple question but it took me enough time to almost get frustrated learning svelte. It is simple, but documantations are not simple. So I wanted to walk through this process.

#Table of Contents
* [Svelte Installation](#svelte-installation)
* [Svelte Preprocess](#svelte-preprocess)
* [Sass](#sass)

### Svelte Installation <a name="svelte-installation"></a>
```npx degit sveltejs/template my-svelte-project```
```npm install```
```npm run dev```

### Svelte Preprocess <a name="svelte-preprocess"></a>
```npm install -D svelte-preprocess```
After installation, 
1)import svelte-preprocess in rollup.config.js. 
2)add **preprocess: sveltePreprocess()**
-[source for svelte preprocess](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md)
```javascript
import svelte from 'rollup-plugin-svelte'
+ import sveltePreprocess from 'svelte-preprocess';

export default {
  ...
  plugins: [
    svelte({
+     preprocess: sveltePreprocess(),
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
        css.write('public/bundle.css')
      },
    }),
  ],
}
```
### Sass <a name="sass"></a>
```npm install -D sass```
-[source for this step](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md#1-installation)
```html
<style type="text/scss">
   @import "./styles.scss";
</style>
```
OR
```html
<style lang="scss">
    ...
</style>
```
How to create a responsive navigation menu in Tailwind CSS?
Published: 2021-02-08 14:35:31

In this tutorial we’re creating a fully responsive navigation menu with Tailwind CSS. I will teach you how you can leverage Tailwinds utility classes to create a horizontal menu layout that transforms into a vertical hamburger style menu on smaller screen sizes.

Read the full article here

https://www.themes.dev/blog/responsive-navigation-menu-tailwind-css/
Count number of tabs in Safari
Tags: applescript
Published: 2021-02-08 14:27:09


Finder → Go → Utilities → Script Editor:

``` applescript
tell application "Safari"
	count of tabs of front window
end tell
```

Or:

``` applescript
tell application "Safari"
	count every tab of every window
end tell
```

Don't worry, if any AppleScript has a bug and doesn't run, then it won't affect Safari. It simply gives an error in the Script Editor.
Building a Telegram bot: share the words!
Tags: go, tutorial, programming, bots
Published: 2021-02-08 14:06:47

In the second post of this series, we added a package to make requests to the [WordsAPI](https://www.wordsapi.com). In this last post, we'll use it to search words from the user input and share the results in any channel.

#### Configuring the bot 🤖
We want the bot to be accessible from any conversation in Telegram, to achieve that we need to make it an [Inline bot](https://core.telegram.org/bots/inline).
This needs to be configured with [@BotFather](https://t.me/botfather). We need to run the `/mybots` command, select the `@share_the_word_bot` from the list, go to the bots settings, and turn on `Inline mode`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2bihpns8iwssediaaklk.png)
Once this setting is enabled, we can invoke the bot by typing `@share_the_word_bot` followed by the word we want to search for:
```
@share_the_word_bot cat
```
This will generate a query to our bot with the selected word as a string.

#### Reacting to the query ↩️
We'll need to change our bot handler to listen for any query (`telebot.OnQuery`) instead of listening for any text (`telebot.OnText`) and then capture the word from the query:
```golang
bot.Handle(telebot.OnQuery, func(q *telebot.Query) {
	word := q.Text
}
```

#### Using the API client 
First, we'll need to initialize our `pkg/words` client to get the word definition:
```golang
api := words.New(
	"https://wordsapiv1.p.rapidapi.com/words",
	os.Getenv("WORDSAPI_TOKEN"),
	http.DefaultClient,
)
```

Next, in the query handler, we'll make the request:
```golang
bot.Handle(telebot.OnQuery, func(q *telebot.Query) {
	word := q.Text

	// get the word definitions
	definitions, err := api.Word(word)
	if err != nil {
		log.Printf("error searching for word: %s", err)
	}

	// format the results to send back to Telegram
	results := make(telebot.Results, len(definitions))
	for i, def := range definitions {
		results[i] = createResult(word, def, i)
	}

	// send the answer back
	err = bot.Answer(q, &telebot.QueryResponse{Results: results})
	if err != nil {
		log.Println(err)
	}
})
```
Each word definition is converted into a `telebot.Result`:
```golang
func createResult(word string, def words.Result, i int) *telebot.ArticleResult {
	result := &telebot.ArticleResult{
		Title:       word,
		Description: def.Definition,
	}

	result.SetContent(&telebot.InputTextMessageContent{
		Text:      def.Format(word),
		ParseMode: telebot.ModeMarkdownV2,
	})

	result.SetResultID(strconv.Itoa(i))
	
	return result
}
```

That's it! We can finally use our bot, just run
```go
PORT=[port of our chice] \
WEBHOOK_URL=[public url] \
BOT_TOKEN=[bot token provided by @BotFather] \
    go run cmd/dictiobot/main.go
```
and try it!
<img width="50%" style="width:50%" src="https://media.giphy.com/media/VNPJUcNMd9iUbpOKL2/giphy.gif">

Check the code: https://github.com/albarin/dictiobot/tree/03-share-the-words

Thank you! 😊👋
Opportunity for React Js
Tags: react, html, javascript, career
Published: 2021-02-08 14:01:45

Currently we are hiring for Front End Developer for Bhubaneswar and Bengaluru location(India).
Experience required: - 1-4 Years
Job Description:-

· Strong coding and debugging skills in Javascript & ReactJS
· Strong interface & layout development skills with HTML & CSS
· Strong understanding of the basic web technology stack (HTTP, WebSockets, APIs)
· Experience building real-time applications is a plus

Interested candidate can email their resume at careers@phoenixrobotix.com
JS Test #8: Zero timeout
Tags: beginners, javascript, codenewbie
Published: 2021-02-08 13:43:11

Which of the messages will be printed first?	

<!--more-->

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In JS, `setTimeout(func, delay)` takes a function `func` and delays its execution by `delay` milliseconds.

It may seem that if we set the delay to `0`, then the function will be executed immediately, but it’s not the case.

The function will be placed in the **message queue** to run asynchronously. This will happen only after the current synchronous execution is done.

The `console.log` in the second line is a part of the synchronous execution and will run before the `console.log` in the first line.

In most web browsers `setTimeout(f, 0)` has a delay of approximately 3 ms which is determined by the speed of internal processing.

---

**ANSWER**: The message `plain log` will be printed first and then the message `timeout log` will follow.
Get your SQL functions in DQL
Tags: symfony, dql, sql
Published: 2021-02-08 13:42:44

## SQL Functions

In SQL you have plenty functions which help you to improve your work. For example this is some usefull functions :
* SUM() Calculate the sum of the result
* MAX() Get the maximum result
* MIN() Get the minimum result
* COUNT() Count the number of row of the result

And fortunatly we can use them in DQL... but unfortunatly not all of them !

## DQL

When I code with Symfony and I need to query my Database, I always use DQL. I love that thing, I can customize it and write PHP to be more specific.
But few days ago, I needed to display only the date (not the time) from my UserRepository. In SQL you do this => `SELECT DATE_FORMAT(date, format) WHERE ...`, so I started to write my code in DQL :
```php
public function findByCreatingDate(User $userId)
    {
        return $this->createQueryBuilder('u')
            ->select('DATE_FORMAT(u.createdAT, "%d-%m-%Y)')
            ->andWhere('u.id = :userId')
            ->setParameter('userId', $userId)
            ->getQuery()
            ->getResult()
        ;
    }
```
I refreshed the page and the scariest red smilling ghost appeared and told me **"Error: Expected known function, got 'DATE'"**

This is one of some functions that DQL does not support. Well I had 3 choices :

1. Type in SQL
2. Write my own [DQL function](https://www.doctrine-project.org/projects/doctrine-orm/en/2.8/cookbook/dql-user-defined-functions.html)
3. Google the error !

The first choice has been removed because either I write all in SQL or in DQL, I never mix and I did'nt want to rewrite all my queries.
I Google my error before doing the second choice 🙄 and I found exactly what I was looking for in this [Github](https://github.com/beberlei/DoctrineExtensions).
I just needed to do `composer require beberlei/doctrineextensions
` then in my doctrine.yaml under orm :
```yaml
dql:
    datetime_functions:
       date_format: DoctrineExtensions\Query\Mysql\DateFormat

```
Refresh the page and goodbye terrible red ghost 👻

## Conclusion 

I hope it's gonna be usefull to you as it has been to me

Cheers
LGTM Devlog 37: Sprint 4 Retrospective
Tags: devjournal, python, github, agile
Published: 2021-02-08 13:26:59

Short sprint! And we got a lot done!

![End of sprint](https://dev-to-uploads.s3.amazonaws.com/i/flkp5yrs7ybgbomxhgh3.png)

# Retrospective
The refactoring done last sprint paid of, justifying the extra time it took and missed targets. I was able to very quickly code up the first quest and pull together the profiles.

Not only was the code to post issues from characters done, I also pulled forward detecting comments from users, which wasn't in the original plan for this sprint. Meaning we're actually ready for the first phase of content generation, rather than having to wait another sprint. It also enabled some items of technical debt to be cleaned up - tests are no longer done on the prod data, for example, meaning I run less risk of clobbering player data.

All in all, we're in a really good place, and overall the whole project is going faster than I had anticipated, it might not even take the whole of 2021 to get it released!
Junior JS Interview prep (free ebook): 35 JavaScript code snippets with answers and detailed explanations
Tags: beginners, codenewbie, javascript, discuss
Published: 2021-02-08 13:41:59

## TD;DR
The e-book is available for free on [Gumroad](https://gumroad.com/l/javascript-interview-35).

## Intro

Hey there! So, it's been a couple of months since I've started posting beginner JavaScript tutorials and interview questions on my programming blog [learn.coderslang.com](https://learn.coderslang.com).

Over the weekend I've compiled 35 code snippets with answers and explanations into an ebook, made a [Gumroad product](https://gumroad.com/l/javascript-interview-35), and posted a link to it on [Reddit](https://www.reddit.com/r/learnjavascript/comments/lejy6g/junior_js_interview_prep_free_ebook_35_javascript/). Even though the ebook is free, a couple of people chose to pay for it and received my immense gratitude.

The overall reception was good and I got quite a few upvotes. But there was one particular comment that said that this stuff is useless and horrible.

## Questions

1. Do you remember the last coding interview that you've failed hard? What was the type of questions that you had trouble with?
2. I'm also posting the same interview questions [here on dev](https://dev.to/coderslang/series/11099), but they hardly get any views. Thoughts?
Day 9: Password Generator
Tags: 100daysofcode, python
Published: 2021-02-08 13:27:21

A password generator that asks the user how many passwords to generate and at what length.

```python
#!/bin/python3

import random

print('''
Password Generator
==================
''')

chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@£$%^&*().,?0123456789'

number = input('number of passwords?')
number = int(number)

length = input('password length?')
length = int(length)

print('\nhere are your passwords:')

for pwd in range(number):
  password = ''
  for c in range(length):
    password += random.choice(chars)
  print(password)
```
Top 15 Famous Websites Built With Python
Tags: python, technology, code
Published: 2021-02-25 12:46:51

---
title: Top 15 Famous Websites Built With Python
published: true
date: 2021-02-08 12:54:51 UTC
tags: #Python #Technology #code
canonical_url: https://www.botreetechnologies.com/blog/top-15-websites-built-with-python/
---

![Top 15 Popular Websites built with Python](https://www.botreetechnologies.com/blog/wp-content/uploads/2021/02/websites-built-with-python.png)

Python programming language is an advanced programming language that has gained high popularity. It has applications in web development, data science, Machine Learning, Deep Learning, Big data, and more. Today, many companies are moving towards Python web programming for their technical requirements.

Some of the top tech companies using Python include Google, Pinterest, Instagram, Spotify, and more. [Python developers](https://www.botreetechnologies.com/hire-python-developers) love the language because of its readability and simple syntax. It is widely useful in game development, social networking applications, and data visualization as well. 

In this article, we will look at the top 15 apps made with Python. We will outline how they are using [Python web development services](https://www.botreetechnologies.com/python-development) in their technology stack.

**Read more: [Pros and Cons of Python](https://www.botreetechnologies.com/blog/pros-and-cons-of-python/)**

###Top 15 websites made with Python

Here’s a list of the top 15 web applications built with Python:- 

1.[Netflix](https://www.netflix.com/)

The world’s most popular streaming website, Netflix, was built with Python. Because of its batteries-included standards libraries, developers choose Python for development. The clean and expressive syntax makes website building with Python an easy task. The programming language in scaling and handling massive amounts of traffic.

2.[Google](https://www.google.com/)

Another popular website using Python is Google. The language and its complementary framework allow developers to switch the traffic and handle the search requirements for each and every level. Google is a [Python web application](https://www.botreetechnologies.com/blog/python-development-perfect-web-app-framework-choice-for-startups/) that runs seamlessly without many issues in the development process.

3.[YouTube](https://www.youtube.com/)

A sister concern of Google, YouTube was majorly written in Python. It offers multiple features and libraries that make the experience interactive for the users. It has been coded in a way that simplifies the process of uploading videos, downloading, and sharing them. YouTube is now the world-leader in online video streaming.

The post [Top 15 Popular Websites built with Python](https://www.botreetechnologies.com/blog/top-15-websites-built-with-python/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
Formik vs React-hook-form Cases Part II
Tags: javascript
Published: 2021-02-08 13:25:46

<h3>Nested Arrays</h3>
react-hook-form handle it with [useFieldArray](https://react-hook-form.com/api#useFieldArray).

formik handle array fields with [FieldArray](https://formik.org/docs/api/fieldarray)
{% codesandbox focused-galois-5918f %}

<h3>Nested Array Validation</h3>
react-hook-form by default validate input inSubmit only.
To enable it on other events, you need custom changes.
see [trigger](https://react-hook-form.com/api#trigger).

formik by default validate input in all events.

{% codesandbox validate-nestedarr-formikreacthookform-8owd9 %}

<h3>Integrate with Material UI</h3>
react-hook-form we can integrate external controlled components like `react-select` with [Controller](https://react-hook-form.com/api#Controller)

formik you can render external controlled component by itself. Look at example
{% codesandbox sweet-wright-c0vx5 %}
"Don't Make Me Think" Summary for UI/UX  designers [Third Chapter]
Tags: ui, ux, design, books
Published: 2021-02-08 13:21:41

Hello everyone. Today I'm gonna speak about the third chapter. This chapter contains a lot of information, so let's immediately dive into it. 


##Chapter number 3: Billboard design 101  [Design for scanning, not reading]


####1. Take advantage of conventions:
 conventions like the logo identifying in the top-left corner, the search icon
![Examples of conventions](https://dev-to-uploads.s3.amazonaws.com/i/e5hcfj6swg5ixweo8vzl.png)
**Notice**: We can break conventions when it is:
       1. so clear and self-explanatory that there is no learning curve
       2. or adds as much value that’s it’s worth a small learning curve

####2. Create effectively visual hierarchy:
-
      1. The more important something is, the more prominent it is
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fcjxjbkpqqsq0mfqn2pg.png)
      2. Things that are related logically are related visually
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dmmazeeupmt24rp73syd.png)
      3. Things are "nested" visually to show what's part of what
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ch835bfa22dpzfn0aohk.png)
####3. Break pages up into clearly defined areas

####4. Make it obvious what's clickable

####5. Eliminate distractions:
 * Shouting: everything on the page is clamoring for your attention. resist your desire to make a lot of things necessary to be noticed 
 * Disorganization: use grids and organize everything
 * clutter: a lot and a lot of things on the page: When you’re editing your Web  

####6. Format content to support scanning:
   * Use plenty headlines
   * Keep paragraphs short
   * Use bulleted lists:
Just look at your paragraphs for any series of items separated by commas or
semicolons and you’ll find likely candidates
   * Highlight key terms:
 Don’t highlight too many
things, though, or the technique will lose its effectiveness. just the most important things 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6di5ojmbz4dotkoz54b1.png)
ModelOps for Google CDAP
Tags: cdap, datafusion, googlecloud, machinelearning
Published: 2021-02-08 13:12:15

In a previous [post](https://dev.to/predictiveworks/ml-for-google-cdap-3com), we shared our approach to developing CDAP into a full-spectrum machine intelligence platform with 150+ plugins, from deep and machine learning, business rule processing to natural language processing and more.

Many ML/AI platforms focus on model building and training, and often operationalization is an afterthought or left to someone else.

In contrast, Google CDAP has all batteries included to implement a complete ML/AI model lifecycle, enclosing a model registry, automated version management, tracking and serving.

Model training on the one hand and serving models in production on the other hand: *What is the main difference?*

With CDAP, both phases can be supported by configurable data pipelines that have plugins in common for pre- and post-processing. Model specific plugins, however, differ. For training purposes, we use model plugins that work as **producers**. In production, we leverage **consumer** plugins.

![ModelOps for Google CDAP](https://dev-to-uploads.s3.amazonaws.com/i/8a65z9d0maq43oe5wjk8.png)

No longer additional platforms like MLflow or others. It is all in one, and that's what makes machine learning work.
Generating Infographic ROI Report PDF From Low-Code App
Tags: dronahq, lowcode, inforgraphicreport, roicalculator
Published: 2021-02-08 13:08:48

Hi!

I have recently worked on a project, to self generate and download an infographic report after using an [Low-Code ROI calculator by DronaHQ](https://www.dronahq.com/quantifying-roi-of-low-code-development/). The report consists of the choices the user made and it is shown in a visual manner.

I also published an article about the making of the PDF report on Medium.
[Read Here](https://ambar-04.medium.com/real-people-real-stories-generating-infographic-roi-report-pdf-from-low-code-app-d290944f3b76)

Please check it out and let me know what you think about the report. Also, tell me how you would have approached this project.
Advanced TypeScript Trickery - open mic meetup
Tags: typescript, meetup, techtalks, eventsinyourcity
Published: 2021-02-08 12:50:39

🐰 Join in on our second Open Mic session of **Advanced TypeScript Trickery Meetup** group - a space for all things TypeScript-y. 🎤

Working on an interesting project? Show it!
Discovered a fun, curious insight? Share it!
Need advice or expertise of fellow TS lovers? This is the place for you.

If you have something that you'd like to present to the community, get in touch with us via this Typeform: https://prisma103696.typeform.com/to/rad9tFrl

Tim Suchanek, the TypeScript Wizard of Prisma, will facilitate the session, making sure that everyone's voice is heard.

RSVP to the event for the Zoom call link.

[You can watch the previous edition here.](https://www.youtube.com/watch?v=7vsJBGQAx9c)

Hoping to catch you there! 🤗

![Advanced TS Trickery](https://dev-to-uploads.s3.amazonaws.com/i/80o9coxhq3nv8vv7iw4u.png)
Resources for learning data structures
Tags: beginners, tutorial
Published: 2021-02-08 13:08:02

Hello everyone, in this post I show you some resources to learn about data structure and improve your skills.

- [geeksforgeeks](https://www.geeksforgeeks.org/). I like this page, because it has many resources for learn, about data structures, algorithms, languages and more.

- [Introduction to data structures
](https://www.youtube.com/watch?v=92S4zgXN17o&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P). This is a video tutorial about data strucutres, the complete course is `c++`.
Some tips to improve our team work
Tags: discuss
Published: 2021-02-08 13:04:22

Hi everyone, in this post I'm going to recommend some tips to improve as a real team.

# Request feedback

This is important because we can improve our skills such as the tasks you've been assigned.

For example you need to create a service to create customers and send the email to them when it's created. You can get feedback of some members of our team about this feature. This shows a good impression of you, because this shows that you trust in our team.

Other examples could be that you need to do `Pub/Sub` service and you don't have much experience with that, so if you get feedback of some members of our team, together we can find a better solution or avoid some mistakes previously. To get feedback is important because it allows us to improve and gain confidence with our team.

# Drive your team to improve

A good idea to encourage your team to improve is to do some activities to learn new things related to their jobs.

I remember that in a former job I made two activities, These activities were:

1. Every two weeks each member must show some technologies or good practices about code or whatever they wanted to show. I liked this activity, because I learned different things that I didn't know and it was a good strategy to balance the knowledge in our team.

2. The second activity was competitive programming. For that I created an activity in the calendar and sent the invitation to each participant. This activity didn't last too long for reasons of time but it was funny.

3. Another activity that I saw in several companies was "Game Space", I like it very much because it allows us to meet our partners beyond the workplace.

# Be nice

It's important to be nice with our partners when your are sending feedback o when You are correcting a mistake made by a colleague, if you aren't nice with our partners this could generate inconvenience with them. This is not always so easy but we can do our best. We will not always agree with the ideas of others or they will not agree with our ideas. Always remember to be nice to all of them.

These tips may be relevant or irrelevant to you, depending on your current case. The most important thing here is to create a good place to work.