teleren/devto huggingface dataset:
Help: How to make a multilanguage website?
Tags: help, html, webdev, beginners
Published: 2019-07-25 22:10:24

Hi everyone!

I'm building a website the simple way — HTML, CSS, and vanilla JavaScript, that's it. I'm trying to keep it as light and simple as I can. It's looking pretty good so far, but everything is in English and I will eventually need to add translations, mainly Spanish in the very near future, but then probably a couple more. (I can do the translation part).

I have been looking around for options and tools to implement this. My first thought was, since the site is static, only has about 5 pages, (and mostly because I have the time and enthusiasm to do it and keep it updated in more than one language), I'll just do it all by hand! When everything is about ready in English, I'll just duplicate the pages, translate the content, and add a button to switch between the different versions of the same page — manually linking each page. *Yes, I actually consider this a viable option.* Please don't judge!

Most of the answers, tutorials, and solutions I've found include using a CMS (which I don't think this site needs, and again, I'm trying to keep it as bloat-free as possible. Heck, I've been avoiding jQuery, even though it means writing some functionality from scratch. I like the challenge.)

Or they suggest using PHP or MySQL, which I know the basics of, but definitely would entail a learning curve, and again — keeping it as light as possible.

Or they suggest using the Google Translate API, which...just, no.


### Get to the question already!

So my question is, is this actually doable? Have you done it before? *Is it insane?* Any tips, for example, on how to keep the same content on different pages related, in the eyes of search engines' robots?

Or, am I delusional, and should I give up and add in some PHP? If so, how would you do it? Any guides, or tutorials, ideas, etc?

I would highly appreciate any help, tips, links, funny judgmental gifs, or anything else in the comments!
VR AKA Virtual Reality AKA The Matrix
Published: 2019-07-25 22:04:06

The goal of VR is really to create an entirely “new reality” you can enter and interact with.

VR Technology aims to utilize a combination of immersion and interaction to create a seemingly “real” experience for the user.

VR Tech is moving closer and closer to more realistic and immersive experiences, and while we aren’t quite on the level of the Matrix just yet, we’re certainly on our way.

I wanted to look into VR and what all it takes to pull something like this off, and how hard would it be to get into VR.

Here's a list of common things you'll need in order to play, and some options if you're feeling fancy.

**VR set ups:**

**Headsets**

-Oculus Rift
-HTC Vive
-Sony PlayStation VR
-Google Cardboard
-Samsung Gear VR

**Controllers**

-Samsung Gear VR Controller
-Oculus Rift
-HTC Vive
-HTC Steam Controller

**Where to Play:**

-Steam - a digital library and platform for video games for PC platforms. 
-Oculus VR
-PlayStation VR

***Notable Games***

-Beat Saber - Guitar Hero with Lightsabers
-EVE Valkyrie: Warzone - Space Based Dog Fighting Game
-Keep Talking and Nobody Explodes -  A Multiplayer Bomb Defuser Game with time limits
-Lone Echo - A Space Survival Game that takes place on a base orbiting Saturn
-Fruit Ninja - Hone your Samurai skills against impending bombardment from fruits

**Skills to become a VR developer**
-Languages Like C/C++/C#
-3D Modeling and Rendering Experience


**Popular Game Engines**
-Unity - uses C#
-Unreal Engine - Uses C++ and a node-based language called Blueprints Visual Scripting


**Useful 3D Modeling Software**

-Blender - Open Source 3D modeling software
-Autodesk Maya - Computer Animation Software
-Autodesk 3Ds Max - 3D Modeling Software catered more for games and visualization


**Interesting 3D Scanning Softwares**

-Structure Sense - used for 3D Scanning and Mixed Reality on Ipad 


**Places to get 3D Models**
-TurboSquid - Library of already 3D modeled objects
-Free3D - 3D model library


**How can I take my web knowledge to VR???**
-WebVR is an open standard with a JavaScript API that makes VR in your browser possible
-A-frame. A framework for building virtual reality experiences with HTML and an Entity-Component-System approach. It was developed by the Mozilla VR team and provides one of the most powerful ways to develop WebVR content.
-React 360 - a React framework built to render 3D experiences in Browser
-Three.js - a javascript library used for rendering 3d objects in browser


**Resources**
*[Here](https://pusher.com/tutorials/realtime-reactvr) is a great tutorial on making a real-time VR React APP*
*[This](https://www.udacity.com/course/introduction-to-virtual-reality--ud1012) is a Udemy Course on intro to VR, always a good place to start*
*[Here](https://docs.unrealengine.com/en-US/Videos/index.html) is the link to the Unreal Engine documentation*
HELP!!:Installing Sass in Lite-Server
Tags: help, sass, discuss, coding
Published: 2019-07-25 21:18:41

---
title: HELP!!:Installing Sass in Lite-Server
published: True
description: Trouble with processing Sass 
tags: help, sass, discuss, coding
---

I am having trouble in processing my sass files and it is making it challenging to render changes on my index.html file. I am using lite-server as my local server for a fun project I'm working on. 
I will post the structures of my files and in the hope of getting assistance. I do not know where I'm going wrong.. Any assistance will be appreciated. Thanks 


Here is my file structure:

![](https://thepracticaldev.s3.amazonaws.com/i/mmd09y048xlr21pe4dv5.PNG)



Here is my sass index.html link[referencing]:

![](https://thepracticaldev.s3.amazonaws.com/i/wfxaya9xbb9v9lxezp2s.PNG)


 Error displayed after compiling:

![](https://thepracticaldev.s3.amazonaws.com/i/59i6s2tfchhd7inb0sfm.PNG)
Body BackgroundColor change with Date object
Tags: beginners, javascript, webdev, discuss
Published: 2019-07-25 20:56:45

If you want to try out Date object in javascript ,this is a perfect example.

There are differnt methods in date object. I used __getHours()__ method to change the color according to time.
Here is the html code

![](https://thepracticaldev.s3.amazonaws.com/i/ol5jwxvyrkc7bi9x05ko.png)

Here is the code for javascript code
![](https://thepracticaldev.s3.amazonaws.com/i/jo2so7ihel0ophvlbkgj.png)


* Here is the codepen [link] if you want play/implement.
+ If you want to get deeper into Date methods, then have a look at MDN [docs].
+ Post your best use of Date in comments and love to see yours.Hope you like this  example.

__Good Stuff__
[link]:https://codepen.io/yashwan46084805/pen/GVjopq
[docs]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
HTML code on CatPhotoApp
Published: 2019-07-25 20:44:06

<html>
<h1>What more is needed in HTML to edit this?</h1>


<h2>CatPhotoApp</h2>
<main>
  <p>more cat photos here<a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>
</html>
Python as terminal commands
Tags: python
Published: 2019-07-25 20:30:04

---
title: Python as terminal commands
published: true
description: python
tags: python
cover_image: https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FJlxFcvNuzlPYA%2Fgiphy.gif&f=1
---
Python is often used when creating scripts. But did you know you can run it straight from the command line?

No, I don't mean running a .py file from the command, but running a program input.

### Whats Python?

Python is a programming language. 

The code below won't make sense if you don't know the <a href="https://pythonprogramminglanguage.com/">Python</a> programming language. You should be familiar with the idea of for loops.

### Python code as command

You can run Python on a single line with command line as input, like this:

    python -c "for i in range(1,10): print(i)"

This then outputs the numbers.
Now you can use the alias command to create custom commands that run this python command

    alias forloop='python -c "for i in range(1,10): print(i)"'

Then in your terminal

    # forloop

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F3oKIPnAiaMCws8nOsE%2Fgiphy.gif&f=1">

You can store these commands in your .bashrc file.

Is this a good idea? from a security point of view probably not. 
See <a href="https://dev.to/petercour/inject-code-in-python-process-3cfh">Inject code in Python process</a>.
Looking for online courses for mobile design
Tags: help, ui, discuss
Published: 2019-07-25 20:26:30

Hello everybody!
Can anyone suggest me some online platform where I can follow courses to design the UI for a mobile applications?

I just recently realized that in order to develop a good looking app I should first throw down a design that convinces me and then apply it instead of continuing to make small adjustments that I'm never satisfied with.

If anyone has any general advice about the ui/ux on mobile applications, any suggestions are appreciated!

Thanks a lot!
Using the repository pattern in Laravel for caching
Tags: php, laravel
Published: 2020-01-04 08:20:34

---
title: Using the repository pattern in Laravel for caching
published: true
date: 2019-07-25 20:20:18 UTC
tags: PHP,Laravel
canonical_url: 
---

I started using the repository pattern a little while ago to provide some abstraction and so that I could have my eloquent queries in a central place. But one really nice thing about doing this that only occurred to me recently is that it allows you to centralize things like caching one’s queries. Caching one’s queries saves having to make expensive database calls. This is how my repository class looks like for getting a quiz setting:

```
app/Repositories/QuizSettingRepository.php

<?php
namespace App\Repositories;

use \App\Models\QuizSettings;
use \Cache;

class QuizSettingRepository implements QuizSettingRepositoryInterface
{
    public function get($quizid, $keyname)
    {
        $value = false;

        $cacheKey = 'quizsettings' . $quizid . "_" . $keyname;

        if (Cache::has($cacheKey)) {
            $value = Cache::get($cacheKey);

        } else {
            $quizsettings = QuizSettings::where('quizid', '=', $quizid)->get()->keyBy('keyname');

            if(isset($quizsettings[$keyname]))
            {
                $value = $quizsettings[$keyname]->value;
            }
    
            Cache::put($cacheKey, $value, now()->addSeconds(10));
        }

        return $value;
    }
}
```

One could take this a step further and implement caching for all repositories in a global place using the decorator pattern as described here: [https://matthewdaly.co.uk/blog/2017/03/01/decorating-laravel-repositories/](https://matthewdaly.co.uk/blog/2017/03/01/decorating-laravel-repositories/)
What's you experience working with functional programming?
Tags: discuss, opinion
Published: 2019-07-25 19:38:32

Hey guys! I'd like to know how was your experience in general(Javascript) with any funcional programming library in production environments using or not libraries(Ramda, RxJS, etc). 
How do you make that possible when you work (probably) with people which are not fully prepare for that and other aspects like maintainability, hard parts, test, performance and how do you implemented using different frameworks or environments(NodeJS, React, Vue, Angular or just vanilla JS).
The D programming language is not a corporation
Tags: d, opensource
Published: 2019-07-25 19:16:03

Time for a short rant related to open source projects.

I just went to the D programming language [forum](https://forum.dlang.org/). There was not one but two posts instructing D Programming Language, Inc. to change it's business strategy.

First there was this:

> This is a huge market and the largest number of user groups ever. D core team should take mobile serious and provide basic support.

What does that even mean? They should put together a team of paid developers to conquer the mobile development market? There are no paid developers, only volunteers working on their own stuff.

Then this:

> no one on the D team is competent enough with Windows to make it work with the default expected value

That might be true, but these are volunteers, most of whom don't use Windows as their main desktop. Windows developers aren't willing to volunteer to do the work for their OS of choice. Complain to them, not "the D team" that was willing to do the work to make it usable on Windows in the first place.

I see this all the time. Some things to keep in mind:

- Nobody's paid to work on the D compiler or ecosystem.
- There's no business going after markets.
- There's no paid product.
How to start with Automation testing using Selenium, Mocha and Javascript
Tags: selenium, javascript
Published: 2019-07-25 19:07:22

###What is automation testing?

Automation testing is a Software testing technique to test and compare the actual outcome with the expected outcome. This can be achieved by writing test scripts or using any automation testing tool like Selenium!. Test automation is used to make testing process faster and check other testing tasks which are difficult to perform manually.

###Why use automation testing?
Because we are human we have limited amount of energy and attention to focus on repetitive tasks so we make mistakes. It's almost impossible not to miss a single test in million of functionality of a software. 

But we still want to use manual testing because computers does not have good judgement like humans. automated test scripts don’t pick up visual, audio and human senses issues.

Human testers can quickly identify when something looks “off” when a tester interacts with software as a user would, they’re able to discover usability issues and user interface glitches. Automated test scripts can’t test for these things.

Not everything that can be done with automation, But it would be great if you can automate those repetitive boring tasks or tests.

![](https://i.makeagif.com/media/7-25-2019/-NUURV.gif)

###What is Selenium?

***Selenium automate web applications across different browsers and platforms. That's it!***

Selenium is great, and it can be integrated with many different languages, and today I will show you how to do it with JavaScript. This is an ongoing project, and I plan to update more examples or test cases in the future blogs.

###What is Mocha?

Mocha is a testing library for Node.js, created to be a simple, extensible, and fast testing suite. It's number one chosen testing framework by developers.

1. **Installation**

You need to install either Yarn or Node on your machine. In this project, I will use Node for installing packages and running scripts.
First, we need to start a project

`yarn init or npm init`

Then install dependencies

`npm add chromedriver selenium-webdriver`
`npm add mocha -D`

2. **Getting started**

After that, we can start writing our test cases

![](https://thepracticaldev.s3.amazonaws.com/i/6rfhjo3q046kcg5sbxco.png)

3. **Run The Test Case**

Whenever you want to run the test, just use this command:

`npm run test`

The below result shows that the test has been successfully completed.

`vizushu$ npm run test`
`npm run v1.9.4`
`$ mocha --recursive --timeout 10000 test.js`
`Checkout Google.com`
    `✓ Search on Google (2058ms)`
`1 passing (3s)`
`Done in 3.79s.`


That's all you need to start with your automation testing! I will continue with more test cases next blog and how to get the selectors likes xpath(), Css() for your automation testing!

###Happy Testing!


![](https://media1.giphy.com/media/gG6OcTSRWaSis/giphy.gif)
Hide the new Twitter sidebar: a simple, locally-hosted Chrome extension
Tags: hacking, twitter, css, showdev
Published: 2019-07-25 18:51:23

---
title: Hide the new Twitter sidebar: a simple, locally-hosted Chrome extension
published: true
description: Quickly remove that distracting side-bar
tags: hacking, twitter, css, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f7e5eorrlajwnwkzkyrl.png
---

After seeing folks complain about the new Twitter design for days, I finally got it. Indeed, the meat of the page seems to be lost. After realizing I could quickly get rid of the right side-bar by simply hiding it, I decided to write a Chrome extension so I wouldn't have to go in and do that again.

![the new Twitter, before changes](https://thepracticaldev.s3.amazonaws.com/i/yxem7tqeodzx2smwax9c.png)

To install this guy, head to [the github repo](https://github.com/AmberWilkie/make-new-twitter-suck-less) and follow the README instructions. If you've never played around with Chrome extensions, this is a great intro - an incredibly simple extension that adjusts the CSS on one page. Extensions are really neat, and there's a world of things you can make with them.

![the new Twitter, after removing the sidebar](https://thepracticaldev.s3.amazonaws.com/i/f7e5eorrlajwnwkzkyrl.png)

The extension will run locally on your machine. If at any time you want to see the side bar again, just turn off the extension (at `chrome://extensions`) or click the little icon for the extension and remove its permissions.

Happy tweeting!
Problem whit my code(Im just starting) 
Tags: javascript, html, codequality, beginners
Published: 2019-07-25 18:15:13

Visual Studio says me I have a problem whit my code, Im just starting whit Javascript and I don't know where is the problem.
Code:

DOCTYPE html
html
head
meta charset="utf-8"
title Functions/title
<meta name=" Functions" content="Functions whit days"
/head
body
p id="output"/p
img id="face"
Script type="text/javascript"
function esFinDeSemana(){
const día = new Date().getDay ();
if (dia 0 || dia === 6){
return true;
} 
else{
return false;
} 
let ValorSrc;
if (esFinDeSemana()){
ValorSrc = 'CaritaFeliz.png'
else{
ValorSrc CaritaTriste.png
} 
document.getElementById(' face' ).src = ValorSrc;
/script
/body
/html
Deep Learning, Object detection with Python
Tags: python, machinelearning, deeplearning
Published: 2019-07-25 18:01:56

---
title: Deep Learning, Object detection with Python
published: true
description: python, deep learning
tags: python,machine-learning,deep-learning
cover_image: https://thepracticaldev.s3.amazonaws.com/i/01ebohu51mww31pjdzn5.jpg
---
Luminoth is a Deep Learning toolkit for Computer Vision. It uses tensorflow underneath, so install tensorflow or tensorflow-gpu (if you have a gpu).

    pip install luminoth

One of these then

    pip install tensorflow
    pip install tensorflow-gpu

One of the things you'll need is a faster computer (and probably a GPU). In my case, running scripts like this sometimes freezes my computer.

Download an image, like this one

<img src="https://cdn.pixabay.com/photo/2016/01/25/15/33/bicycling-1160860_960_720.jpg">

Then run the command

    lumi predict bicycling-1160860_960_720.jpg

Then confirm you want to download

    Checkpoint not found. Check remote repository? [y/N]: y
    Retrieving remote index... done.
    2 new remote checkpoints added.
    Checkpoint not present locally. Want to download it? [y/N]: y
    Downloading checkpoint...  [####################################]  100%
    Importing checkpoint... done.
    Checkpoint imported successfully.

Results in this json output:

    {"objects": [{"prob": 0.9997, "bbox": [294.0, 231.0, 468.0, 536.0], "label": "person"}, {"prob": 0.9971, "bbox": [494.0, 289.0, 578.0, 439.0], "label": "person"}, {"prob": 0.997, "bbox": [727.0, 303.0, 800.0, 465.0], "label": "person"}, {"prob": 0.9965, "bbox": [555.0, 315.0, 652.0, 560.0], "label": "person"}, {"prob": 0.9934, "bbox": [569.0, 425.0, 636.0, 600.0], "label": "bicycle"}, {"prob": 0.9932, "bbox": [326.0, 410.0, 426.0, 582.0], "label": "bicycle"}, {"prob": 0.9334, "bbox": [744.0, 380.0, 784.0, 482.0], "label": "bicycle"}, {"prob": 0.8723, "bbox": [506.0, 360.0, 565.0, 480.0], "label": "bicycle"}, {"prob": 0.8142, "bbox": [848.0, 319.0, 858.0, 342.0], "label": "person"}], "file": "bicycling-1160860_960_720.jpg"}

You can get the list of checkpoints

    lumi checkpoint list

you can run the progrma

    #!/usr/bin/python
    from luminoth import Detector, read_image, vis_objects

    image = read_image('traffic-image.png')
    detector = Detector(checkpoint='traffic')
    objects = detector.predict(image)

    print(objects)

    vis_objects(image, objects).save('traffic-out.png')


then outputs the objects like above.

Related links:

* <a href="https://tryolabs.com/blog/2018/04/17/announcing-luminoth-0-1/">Luminoth module</a>
* <a href="https://pythonprogramminglanguage.com/">Python tutorial</a>
Regex to match markdown links in Javascript
Tags: regex, markdown, javascript
Published: 2019-07-25 16:50:12

---
title: Regex to match markdown links in Javascript
published: true
description: Regular expression to match markdown links
canonical_url: https://davidwells.io/snippets/regex-match-markdown-links
tags: 
  - regex
  - markdown
  - javascript
---

> Original posted on [davidwells.io](https://davidwells.io/snippets/regex-match-markdown-links)

Handy little regular expression to parse links from markdown files.

Links in markdown look like this:

```md
[View the analytics docs](https://getanalytics.io/)
```

To parse `.md` links programmatically with a regular expression use this pattern:

```js
/* Match only links that are fully qualified with https */
const fullLinkOnlyRegex = /^\[([\w\s\d]+)\]\((https?:\/\/[\w\d./?=#]+)\)$/

/* Match full links and relative paths */
const regex = /^\[([\w\s\d]+)\]\(((?:\/|https?:\/\/)[\w\d./?=#]+)\)$/

const string = "[View the analytics docs](https://getanalytics.io/)"

const myMatch = string.match(regex)

console.log(myMatch)
/* ["[View the analytics docs](https://getanalytics.io/)", "View the analytics docs", "https://getanalytics.io/", index: 0, input: "[View the analytics docs](https://getanalytics.io/)", groups: undefined] */

// de-structure the array
const [ full, text, url ] = myMatch

console.log(text)
// 'View the analytics docs'

console.log(url)
// 'https://getanalytics.io/'
```

See the demo on [regex101](https://regex101.com/r/m9dndl/1)

## Parsing all links out of file

To grab all the links of of a file, you can use this:

```js
const regexMdLinks = /\[([^\[]+)\](\(.*\))/gm

// Example md file contents
const mdContents = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[hello link](/admin/table_edit/table_edit.cfm?action=edit&table_name=organizationsXcategories)

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[otherLink](https://google.com)

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

[third link](https://google.com)
`

const matches = mdContents.match(regexMdLinks)
console.log('links', matches)

const singleMatch = /\[([^\[]+)\]\((.*)\)/
for (var i = 0; i < matches.length; i++) {
  var text = singleMatch.exec(matches[i])
  console.log(`Match #${i}:`, text)
  console.log(`Word  #${i}: ${text[1]}`)
  console.log(`Link  #${i}: ${text[2]}`)
}
```

Comment below if you have any questions or updates to this snippet!