teleren/devto huggingface dataset:
Chrome/Firefox Keyboard Shortcuts (for developers) ⌨️
Tags: productivity, learning, development, todayilearned
Published: 2020-05-19 15:53:35

---
title: Chrome/Firefox Keyboard Shortcuts (for developers) ⌨️
published: true
date: 2020-05-19 00:00:00 UTC
tags: productivity, learning, development, todayilearned
canonical_url: https://includejs.dev/browser-shortcuts
---

## Navigation

- `ctrl a` and `ctrl e`

For moving to the beginning/end of the line (just like in your terminal/command line!)

- `cmd + l`

Bring the URL bar into focus.

- `cmd + enter`

Duplicate the current tab (while in URL focus).

- `cmd + shift + t`

Open a tab you just closed (a lifesaver for my trigger-happy fingers).

- `cmd + d`

Add a bookmark (extra tip: when saving bookmarks to the bookmarks bar, delete all the text meaning only an icon will get displayed => you can cram many more bookmarks into your bookmarks bar 💪).

## Dev tools

- `cmd + shift + c`

Toggles the inspect element mode (and makes for faster DOM inspection).

- Toggle the `console` from dev tools by pressing `esc` key.

- `cmd+ option + i`

To open the dev tools (in the last panel you used).

- `shift + enter`

For a multi-line entry (in the `Console`)

- `cmd + [` and `cmd +]`

To focus next/previous panel in the dev tools.

## Have you ever wondered how to access `console.log` values? Wonder no more!

Go to the console, right-click on the logged value and click **Store as Global Variable**.

Now, this value will be stored in a variable `temp1` (`temp0` in Firefox). Nuts!

The subsequent values (in the same session) will be stored as`temp2`, `temp3`...

To get that data onto your clipboard type: `copy(temp1)` 🤯

## Firefox extras

- `cmd + shift + p`

To start private browsing.

- `cmd + k`

Move focus to the Search bar.
VSCode Recommended Extensions in Workspaces
Tags: vscode, ide
Published: 2020-10-08 14:05:32

---
title: VSCode Recommended Extensions in Workspaces
published: true
date: 2020-05-19 00:00:00 UTC
tags: vscode, ide
canonical_url: https://tech.serhatteker.com/post/2020-05/vscode-extensions-recommended/
---

In [VSCode] if you put your extensions in `.vscode` directory, after you open this workspace you will see below info:

![VSCode Recommended Extension](https://tech.serhatteker.com/img/content/2020/vscode-rec-extensions.png)

The format for `.vscode/extensions.json` should be like below:

```json
{
    "recommendations": [
      "batisteo.vscode-django",
      "dbaeumer.vscode-eslint",
      "donjayamanne.githistory",
      "EditorConfig.EditorConfig",
      "golang.go",
      "ms-python.python",
      "vscode-icons-team.vscode-icons",
      "vscodevim.vim",
    ],
}
```

So now it is easy to share your __extensions__ with your team for project base or globally.

For futher reading about the subject please go:
[Vscode Recommended Extensions Script for Workspaces]

### Extra
If you want to see my _extensions_ go to: [My VSCode Extensions]. Also you can check out my whole __VSCode__ _backup_: [My VSCode Backup]

All done!

[VSCode]: https://code.visualstudio.com/
[Vscode Recommended Extensions Script for Workspaces]: https://tech.serhattker.com/post/2020-05/generate-vscode-extensions/
[My VSCode Extensions]: https://gist.github.com/SerhatTeker/7a7deb63f7836ac659bc19e07e974e7f#file-extensions-json
[My VSCode Backup]: https://gist.github.com/SerhatTeker/7a7deb63f7836ac659bc19e07e974e7f
opt-in-script: letting visitors choose
Tags: javascript, privacy
Published: 2020-05-20 07:25:43

---
title: opt-in-script: letting visitors choose
date: 2020-05-19 00:00:00 UTC
published: true
tags: javascript, privacy 
canonical_url: https://hannuhartikainen.fi/blog/opt-in-script/
---

I used to have [utteranc.es](https://utteranc.es) for comments in my blog. I think it's a nice, lightweight, usable system (it's basically Github issues).

But it's a third party script. I may have read the source and I may trust the maintainers, but some of my visitors might not. So forcing it on everyone feels a bit immoral. And after switching my blog to [Zola](https://getzola.org) I didn't add *any* JS on my blog -- until now.

I've thought about *opt-in analytics* before: I'd like to have analytics on my site, but I don't want to track my visitors without consent or give their data to third parties[^1]. The solution might be a *please track my visit* button. Perhaps not that many people would click, but maybe I'll try it someday.

The general idea seems more suited for comments, though: maybe you want to read comments or write one, and one click isn't a big annoyance. Meanwhile the visitors that don't care about comments (ie. most, I guess) avoid some unnecessary traffic and content.

So I wrote [opt-in-script](https://github.com/dancek/opt-in-script) which takes something like this

```html
<opt-in-script src="analytics.js"
               some-attr="123-456-7">
  <button>Enable analytics!</button>
  Note: this will log foo, bar and baz to my server.
</opt-in-script>
```

and only after the button is clicked, turns it into a real `<script>` tag that the browser will load and run:

```html
<script src="analytics.js" some-attr="123-456-7"></script>
```

You may see it in action in [my blog post footers](https://hannuhartikainen.fi/blog/opt-in-script/#footer), wrapping the comments section. Check what happens in the browser devtools network tab when you click!

I'm hoping to see more websites that respect their visitors. Maybe you could consider something similar on your site?

[^1]: Note that you should not trust me. I probably will start tracking visitors if I ever see a significant benefit in doing so. Such is human nature.
Coffee Companion App LS:003
Tags: swift, swiftui, ios, coffee
Published: 2020-05-18 23:20:38

---
title: Coffee Companion App LS:003 
published: true
description: Summary of what I did in the live stream.
tags: [swift, swiftui, iOS, coffee]
series: Coffee Companion App
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t5qp1m3b3a3ci523p0dl.png
canonical_url: https://ko-fi.com/post/Coffee-Companion-App-LS003-W7W71Q6K9
---

{% youtube vMNtxSnL9Hw %}

I had some technical difficulties at the beginning of the stream, but eventually it got fixed.

# What did I do on May 18th?

- Wrote an extension to the Double type to output a given number of decimal places. The extension is based on another extension that I made for [iHog](https://ihogapp.com). 
- Add buttons to cancel and save coffee amount.
- Got the timer to work. If you want to read a detailed post about how to make a count up timer, then read it on [my blog](https://appsbymw.com/blog/2020/05/07/make-count-up-timer).

# What am I planning on May 25th?

- Make the edit screen work

# Looking for more about the project?

- Make sure to watch the next stream on [my Twitch](https://twitch.tv/appsbymw)
- Want to know what tasks need to be done? [Check out the Trello board](https://trello.com/b/KgqJHA8o/coffee-app)
- Want to see the code? [Look at the GitHub repo](https://github.com/appsbymw/coffee-app) and star it!
- Want to help crowdfund the app? Buy me a coffee or two on [Ko-Fi.com](https://ko-fi.com/appsbymw)
What’s your alternative solution? Challenge #46
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-18 21:41:50

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function to calculate the distance between two points defined by their x, y coordinates

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge41

println(getDistance(100, 100, 400, 300));

function getDistance(x1, y1, x2, y2)
{
    var l1 = x2 - x1;
    var l2 = y2 - y1;
    
    return Math.sqrt(l1 * l1 + l2 * l2);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
How to add basic unit test to a Python Flask app using Pytest
Tags: python, testing
Published: 2020-05-18 21:40:00

Are we all agree that we need to add some tests to our apps, right? In this small post, I'll show you how to add test to a pretty basic [Flask](https://flask.palletsprojects.com/en/1.1.x/) app using [Pytest](https://docs.pytest.org/en/latest/). BONUS: I'll show you how to add Github Actions CI to your repo.

Let's say we have a simple "hello world" response in our `/` route, just like:

```python
from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return jsonify({'hello': 'world'})


if __name__ == '__main__':
    app.run(debug=True)
```

So let's begin by creating a `tests` directory and there the `conftest.py` file:

```python
import pytest

from app import app as flask_app


@pytest.fixture
def app():
    yield flask_app


@pytest.fixture
def client(app):
    return app.test_client()
```

This file will initialize our Flask app and all [fixtures](https://docs.pytest.org/en/latest/fixture.html) you need.

Now, pytest will discover all your test files, let's create some test files with `test_` prefix in the same directory. In this case I'll test that the route responds with my hello world dict.

```python
import json


def test_index(app, client):
    res = client.get('/')
    assert res.status_code == 200
    expected = {'hello': 'world'}
    assert expected == json.loads(res.get_data(as_text=True))
```

And that's it. Now you can run the tests with this line:

```bash
python -m pytest
```

[The reason why](https://docs.pytest.org/en/latest/usage.html#calling-pytest-through-python-m-pytest) the command looks like the above instead of just `pytest` is becase we need to add the directory to the current `sys.path`.

## BONUS

To setup github actions and get your precious badge for your readme file, you just need to add the following tasks to you YAML file

```yaml
    - name: Install Dependencies
      run: |
        python -m pip install --upgrade pip
        pip install -r requirements.txt
    - name: Run Tests
      run: |
        python -m pytest
```

You can see the complete [YAML file](https://github.com/po5i/flask-mini-tests/blob/master/.github/workflows/flask.yml) in my sample repo if you want to use it as reference for your app:

{% github https://github.com/po5i/flask-mini-tests %}

Update: Also crossposted on [Globant's Medium](https://medium.com/globant/how-to-add-a-basic-unit-test-to-a-python-flask-app-using-pytest-79e61da76fc2).
Building a coding interview platform from scratch. Creating a challenge repo.
Published: 2020-05-18 21:28:18

Hi folks! 👋

Here comes the very first piece of the coding platform we'll be building. And that is where the assignments will live - Github.

I chose Github because every developer has an account there and more or less familiar with that interface.

Now let's see how we can organize the workflow.

# 🏰 Create an organization
These days you can do it for free even with private repositories included.

![CoreSkills Org](https://dev-to-uploads.s3.amazonaws.com/i/612inzm89d3iq44bs87l.png)
[_CoreSkills Github Organization_](https://github.com/coreskills)


# 👯‍♂️ Create a challenge repo and turn it into a template

![Template](https://dev-to-uploads.s3.amazonaws.com/i/e4xb3o44zve33tdclu5a.png)
[_Template Example_](https://github.com/coreskills/account-management-api-level-1)

It will allow for easy cloning of the challenge per candidate.

# 👀 Define an issue template with the challenge description
![Issue](https://dev-to-uploads.s3.amazonaws.com/i/y9tw65ttvnkh1eunn6ru.png)
[_Issue Example_](https://github.com/coreskills/account-management-api-level-1/issues/1)

This will allow you to easily create an issue with the task description.

# 🥦 Add the necessary boilerplate to the repo
![Boilerplate](https://dev-to-uploads.s3.amazonaws.com/i/d4xjldbxih9cxpumxen6.png)
_Boilerplate Example. Add whatever makes sense in your case._

This is to help candidates spend less time setting up the environment.

# 📨 Send your challenge to a candidate
Make a copy of the repo.
![Copy](https://dev-to-uploads.s3.amazonaws.com/i/grizn0jm2wd3h9gwqg38.png)

# ⛄️ Invite the developer
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/grizn0jm2wd3h9gwqg38.png)

# 👍 That's it for now
In future posts, we'll continue with automating flows like inviting a candidate and submitting test results.

# 💡 If you don't want to miss the next post
![Follow](https://dev-to-uploads.s3.amazonaws.com/i/gt1ljg13yjqftt33vhb6.png)
Don't forget to click "Follow" below 👇.

# 👨‍💻 If you interview developers
I'd be curious to learn about your setup. Feel free to share a few words in the comments below. ✍️
My second fullstack project 🤩️
Tags: webdev, node, vue, mongodb
Published: 2020-05-18 21:18:23

### Hello everyone! 🤗️
Today I would like to present to you my second little full-stack project. In theory, it is just a site that lets you see my latest projects and cool resources to browse from! 

### What's the technology? 🤔️
I used Vue.js for the Front End and Node.js in combination with Express.js and MongoDB for the Back End, also I would like to note that I used NProgress for some final touches.

### What is my goal? 🏅️
The goal from this website is to establish all of my projects in a proficient way and with no hassle and also to deliver the latest cool resources to people who are in need of them.

You can check the project [here](https://eldarshub.netlify.app/).
Creating a Date Picker #Flutter
Tags: flutter, datepicker, flutterbuilds, flutterawesome
Published: 2020-05-18 21:11:35

this tutorial focuses on adding a Date Picker to a Flutter app. 

so let's do this...

we will first create a simple button on which we can press and get our date picker pop.

```dart
FlatButton(
    child: Text("Date: " + selectedDate.toString()),
    onPressed: () async{
        DateTime date = await showDatePicker(
        context: context, 
        initialDate: DateTime.now(), 
        firstDate: DateTime(2010), 
        lastDate: DateTime.now().add(Duration(days: 1)));

        if (date != null){
            setState((){
                selectedDate = date;
            });
        }
    },
)
```

here, the **initialDate** represents the current selected date, **firstDate** represents the date from where your calendar will start and the **lastDate** represents the ending date of your calendar.

you can even use it's **"then"** function to get the value selected from that picker.

so that's it go and try.
Web Dev Week 5: jQuery
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-05-18 20:50:45


####This week was jQuery from Colt Steele The Web Developer Bootcamp.

###Intro to jQuery  
        -Why Use jQuery
        -Including jQuery
        -Selecting with jQuery
        -Text and HTML
        -Attr and Val 
###Advanced jQuery  
	-jQuery Events: Click
	-jQuery Events: Keypress
        -jQuery Events: On

###Intro to jQuery  
jQuery is known as write less do more. It is a DOM manipulation library. 
jQuery is a JavaScript library that interacts with HTML/CSS, document object model, and much more.
With jQuery it is possible to
Select Elements, Manipulate Elements, Create Elements, Add Event Listeners, Animate Elements, Add Effects and Make HTTP Request (AJAX).
It is simple to include jQuery in projects either by downloading from the website or linking to the CDN.
https://jquery.com/


###Why Use jQuery
It is not always necessary to use jQuery. jQuery has a purpose but it is not always a first option to get something done. 
http://youmightnotneedjquery.com/

jQuery was first created to fix broken DOM API, but now most issues with the DOM API have been addresses there are not as much broken features which renders most of jQuery unnecessary. 
####These are the reasons not to use jQuery 
	  The DOM API is no longer broken
	  It doesn’t do anything that you cant do on your own
	  It is an unnecessary dependency 
	  Performance issues
	  Lots of people are moving away from jQuery
####These are the reasons to use jQuery 
	  There is a lot of projects that use jQuery
	  It is a popular framework
	  It is still a supported JavaScript library	
	  It expands the concept of DOM manipulation 
###Including jQuery
Similar to bootstrap, jQuery can be downloaded from the website to your local machine or you can link the jQuery CDN into your project. 
###Selecting with jQuery
$() is used to select elements with jQuery 
$(“selectGoesHere”) this selector is similar to querySelectorAll 
.css() is used to style elements with jQuery
.css(property, value) 

###Text and HTML
.text() is jQuery version of .textContent in that it returns every element as text only 
.html() is jQuery version of .innerHTML in that it returns every element as html. 
###Attr and Val 
.attr method is used to set the value of attributes. Setting multiple attributes or using values returned by a function. 
.val method is primary used to get the values of form elements such as input, select and textarea. 
###jQuery Events: Click
        Click() will add a click listener to the elements. 
	$(“#submit”).click(function() {
	Console.log(“Another click”)

###jQuery Events: Keypress
        keypress() will add a keypress listener to the elements. 
	$(“input [type=”text”).keypress(function() {
	alert(“text input keypress”)

###jQuery Events: On
       on() supports all types of events
	$(“button”).on (“db click, function() {
	alert(“clicked)



####jQuery is a beneficial tool to utilize when it comes to DOM manipulation.
TIL about testing commands
Tags: ruby, commandline, todayilearned, microlearning
Published: 2020-05-18 20:35:09

---
title: TIL about testing commands
published: true
description: How to test the output of a command line program with RSpec
tags: ruby, command_line, TIL, microlearning
series: Learning while Doing
cover_image:
---
_This is a walk-with-me-while-I-do-things series, I'm going to tell you what I learned while I'm learning_

If this was our program
```ruby
# my_tool.rb

# Removes and returns the first item from the command-line arguments
command = ARGV.shift

puts command
```

you can test this code using RSpec with

```ruby
# specs/my_tool_spec.rb

RSpec.describe "my_tool" do
  it "says hello" do
    expect { system "ruby my_tool.rb hello" }.
      to output("hello\n").
      to_stdout_from_any_process
  end
end
```

Here we have three fundamental pieces:
1. the method `Kernel#system` that invokes a command as if we were on the command line itself. The argument passed as a string will be the command being executed;

2. the RSpec matcher `output` that checks against the expectation and passes if the expectation block on which it is invoked outputs `to_stdout` or `to_stderr` the string passed as an argument;

3. the `to_stdout_from_any_process` that we have to use instead of `to_sdtdout` because the `system` call is actually spawning a subprocess, and RSpec wouldn't be able to access `$stdout` otherwise. 

If we weren't testing a command line invocation, we could have written

```ruby
expect { print "Same process" }.
  to output("Same process").
  to_stdout
```

More sources are [here](https://medium.com/@joejamesio/testing-command-line-tool-output-with-rspec-8960bedeb1ce). To use RSpec for capturing the output and where you can go to [the official doc](https://www.rubydoc.info/gems/rspec-expectations/RSpec%2FMatchers:output).
iOS Code Signing and Deployment, Explained
Tags: mobile, ios
Published: 2020-05-18 20:23:27

---
title: iOS Code Signing and Deployment, Explained
published: true
description: by Tom Hartz
tags: #mobile, #ios
---

For the uninitiated, deploying apps onto iOS devices can be a daunting and downright confusing process. When developing a mobile app, simulators are great for rapidly going through the code-test loop. However it is still a good idea to test your app on physical devices early and often. Eventually you will want to distribute versions of your app for both internal testing and for production releases as well. XCode has improved quite a bit over the years, making this a lot easier than it used to be. This article will attempt to make clear the requirements for deploying to iOS devices and describe the process of getting an app onto devices.

To deploy applications on iOS, you will need a computer running OS X (MacBook). You will also need to enroll in the [Apple Developer Program](https://developer.apple.com/programs/), for which Apple charges $99 per year. You then will have to register devices manually in the apple iOS dev website, or automatically through XCode. Note that you are limited to registering 100 devices of each type, to which you can deploy directly via USB (100 iPhones, 100 iPads, 100 Apple Watches, etc). When you connect a device through USB, XCode can automatically create a "provisioning profile" for your app, which is essentially a digital signature that allows the app to run on a device. Development builds that are deployed in this manner expire after 90 days.

Another way to deploy dev builds is with Apple's [Test Flight](https://developer.apple.com/testflight/). You can create a Test Flight configuration where you can build your app and upload the ipa file (app bundle) to Apple. Each version of your app can then be released to your team for testing. Here, the limits are 1000 users with 10 devices each. Test users will first need to register and install the Test Flight app, through which they can access and install the released app versions. Again, builds deployed this way will only be able to run on the device for 90 days.

To deploy to the app store, you must build and sign your app for release, and upload it to Apple. You can then configure an app submission through [App Store Connect](https://appstoreconnect.apple.com/) (formerly iTunes Connect). Once the team from Apple has reviewed and approved your submission, your app will appear in the app store and be available for download. Releases deployed this way will not expire.

To deploy releases without the app store, you will need to enroll in the [Apple Developer Enterprise Program](https://developer.apple.com/programs/enterprise/) which costs $299 per year. This is a separate account, in addition to the $99 Developer Program if you still want to deploy to App Store! The Enterprise program will allow you to create provisioning profiles that can be deployed to devices without the app store. These builds can be deployed by hosting the app with an internal website/download link, and via USB or third party tools like HockeyApp.