teleren/devto huggingface dataset:
Not Too Bad for an Hour's Time
Tags: javascript, vscode, vue, webdev
Published: 2019-08-05 00:18:43

---
title: Not Too Bad for an Hour's Time
published: true
description:  My initial progress with VuePress for my Peacock docs
tags: javascript, vscode, vue, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pvijhhmwuzm6ihkkeelm.png
---

[Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=devto-blog-jopapa) has grown quite a bit in the past few months. So much, in fact, that the docs in the README.md are getting long and difficult to navigate. 

I decided that I'd explore a static site generator that I could use to display the docs and make them easier to consume for y'all.

Here are the key aspects I'm aiming for:

- minimal changes to existing markdown
-  migrate all images
-  add additional links for contributions, changelog, and other useful items
- separate from peacock code, in a docs folder
- host in the cloud at a custom domain
- SEO friendly
- remove old markdown
- Keep the original README and decide what should remain there and what should link to docs
- Maintain code and other markdown styling
- Customize theming

I decided this was a great opportunity to try [VuePress](https://vuepress.vuejs.org). 

Uh oh, I have never used VuePress before! So I went to the [VuePress docs](https://vuepress.vuejs.org/guide) and started hacking away. An hour later, here is where I landed.


![](https://media.giphy.com/media/SX0HDuBWB4nm09vJZD/giphy.gif)


More to come still, but I'm thrilled that I can do all of this and not write any Vue/React/Angular code! I love those tools, and I also love that Vue is at the heart of VuePress. Why? Because this means when I need to do something custom, i can drop into Vue components. But for simply taking my markdown and making it into a docs site, it's far simpler. Not Vue knowledge required!

I'll write more on this later, but I wanted to share how quickly I was able to move forward with VuePress. If you have been considering a tool for docs, definitely give this a try.

When it is time to host it, I may consider [Azure Storage](https://docs.microsoft.com/en-us/azure/storage/?wt.mc_id=devto-blog-jopapa) or GitHub pages. Not quite ready to host it, but I'm thrilled I can think that far ahead already 😊

Thanks to [Chris Noring](htttps://twitter.com/chris_noring) for pairing with me!
[astuce] Comment installer Percona Server sur Ubuntu Bionic en 5 étapes
Tags: mysql, percona, ubuntu, tips
Published: 2019-08-08 12:12:18

---
title: [astuce]  Comment installer Percona Server sur Ubuntu Bionic en 5 étapes
published: true
tags: mysql, percona,ubuntu,tips
canonical_url: 
---

Salut les codeuses! Salut les codeurs!

Aujourd'hui je vais parler de percona server. Ce fork de mysql ultra performant et optimisé de façon native pour avoir une qualité niveau entreprise gratuitement.

Voici les 5 étapes pour l'installer sur Ubuntu Bionic.

\*\*\* correspondent à la version que vous voulez installer

1. Télécharges les fichiers .deb depuis le [site officiel de percona](https://www.percona.com/downloads/Percona-Server-LATEST/ "Télécharger percona server sur le site officiel de percona")
2. Installer les  dépendances
3. sudo dpkg -i percona-server-common\*\*\*.deb
4. sudo dpkg  -i percona-server-client\*\*\*.deb
5. sudo dpkg -i percona-server-server\*\*\*.deb

Voilà, c'est tout pour aujourd'hui. A bientôt pour de nouvelles astuces
[solution] Comment afficher image png avec fond transparent en utilisant Imagick en PHP
Tags: image, transparent, php, imagick
Published: 2019-08-08 12:13:20

---
title: [solution] Comment afficher image png avec fond transparent en utilisant Imagick en PHP
published: true
tags: image, transparent, php, imagick
canonical_url: 
---

Salut à toutes et à tous,

Après avoir bien galéré en cherchant partout sur internet, le site officiel, la documentation php, les forums, j'ai enfin trouvé une solution grâce une suggestion d'une amie:

Et si c'était pas tout simplement le fond de l'image ?

Effectivement, en inspectant le code de  la librairie Imagick avec mon IDE de prédilection PhpStorm j'ai enfin decouvert la bonne méthode qu'il fallait appeler après l'appel au construteur d'Imagick

Voici le bout de code d'exemple:

 

<samp> $image = new Imagick(<span style="color: #660000;">'example.png'</span>); <br> $image-&gt;setImageAlphaChannel(Imagick::ALPHACHANNEL_ACTIVATE);</samp>

 

A vous de jouer! Happy coding!
A Brief Look At JQuery
Published: 2019-08-04 22:36:46

If you ever thought about web developing the first thing you should know about is JQuery. It's an awesome javascript library that cuts down all the nitty gritty of programming into simple lines of code. It's essentially a shortcut for web developers! Instead of typing hundreds of lines of codes just to traverse through a document, JQuery methods will find exactly what you want and do whatever you tell it to do. But wait there's so many other libraries out there so why this one specifically? Jquery is very important to learn not only for the useful functionalities but also because of its wide reach. Over 70% of the 10 million most popular websites are created with JQuery. The library is practically a must have when building a website.

So now that you know a little more about JQuery and are itching to get started, let's talk about how to download it. There are two ways to get JQuery: downloading from JQuery.com and importing JQuery to your library, or make someone else host JQuery via CDN(Content Delivery Network). if you choose the latter, you can find a host from sources like Google and Microsoft. After you install JQuery, you're ready to build your website! However, keep in mind that although JQuery makes building websites a thousand times easier, some skills are required in HTML, CSS, and ,of course, Javascript. 

For more information on using JQuery, JQuery.com contains all the documentation of each functionalities.
The Power of Problem Solving
Tags: career, beginners
Published: 2019-08-04 22:26:06

I'm a new member of the Dev community and a junior developer who finished a Bootcamp.

Coming out of that boot camp, I really learned more than any of the technologies that I learned is the importance of problem-solving. Problem-solving, which involves patience is the most important aspect of programming which allows all developers to step back, think about, and break down a problem is the most important aspect of programming before even learning about the syntax of a language. 

I really want to document my process of getting better at programming and as I start my job search for my first job. Have a great day everyone!
If Facebook can make a blockchain to rule the web so can you
Tags: cryptocurrency, blockchain, development, postscarcityeconomy
Published: 2019-08-04 21:52:34

---
title: If Facebook can make a blockchain to rule the web so can you

published: true
description: 
tags: cryptocurrency, blockchain, development, post scarcity economy
---
Facebook is, right now, the dominant player in social media with more than 2 billion users on a planet of around  7.7 billion. This enormous scale comes with incredible power and lots of scrutiny. 

Libra Facebooks new cryptocurrency seems like a way to capitalize on Facebook’s dominance of today’s social media (and its partners’ industries) to kick-start a real, global network effect around a supra-national digital currency.

If even a fraction of Facebook’s user base converts to Libra, it’s on the path to becoming the largest and most profitable “financial institution” (albeit decentralized) in the world. 

Libra is essentially a stable coin as it is pegged to government-issued currencies such as USD, EUR, SGD, etc. Many decentralized cryptocurrencies like Bitcoin or Ethereum, are volatile in its valuation. Facebook seeks to create a more stable cryptocurrency to encourage it as a means of facilitating ordinary online consumer transactions.

Traditionally, to make financial transactions, one has to go through banks or what is available today as online money transfers such as PayPal, Transferwise, and many more. However, it is important to note that existing financial systems today are of their own technology. For the sake of being brief, what makes Libra special as compared to other financial systems, is that it is powered by the blockchain.


Develop & Trade Your Own blockchain
 
Parity Technologies, a well-known development team in the Ethereum ecosystem, launched Substrate, which is their tool that aims to radically simplify blockchain development. Overall, to conceptualize Substrate’s utility, imagine a toolkit with which developers can develop their own blockchains in several different programming languages. On top of this, the entire environment is open source and even allows users to choose between using existing, trusted consensus algorithms or creating their own.

Reportedly, what makes all of this possible is a protocol called Polkadot, which was created by Parity to enable interoperability between many different blockchains. Allowing the same open trade as other blockchains like Facebook's new Libra & Ethereum.
Solving minishift fresh instance problems
Tags: kubernetes, minishift, openshift, fix
Published: 2019-08-04 21:21:14

---
title: Solving minishift fresh instance problems
published: true
description: How to fix problems that may appear when starting a fresh instance of minishift
tags: kubernetes,minishift,openshift,fix
---

When I started working with minishift, I did not have much experience with Openshift. I was struggling with some problems and I had no idea what was going on. These were the problems:

- Builds failed to push to registry
- Deployments got stuck when pulling image
- Could not access an application via a Route
- Could not log in to the web console as administrator

The first three problems were caused by the "docker-registry" and "router" deployments on the "default" namespace that failed to start.

The solution to these problems is quite simple and involve just a few commands on the terminal:

```bash
# login first as admin user
oc login -u system:admin
# restart "docker-registry"
oc -n default rollout latest dc/docker-registry
# restart "router"
oc -n default rollout latest dc/router
# allow "admin" user to log in to the web console
oc adm policy add-cluster-role-to-user cluster-admin admin
```

Now you can work with minishift with no more problems!
The Angular (elements) gift to the Web 
Tags: angular
Published: 2019-08-04 20:51:08

##Intro in Angular Elements
Imagine that your client wants to sell her or his service on the third-party web app. You then have to somehow integrate your service on their application or redirect to your application. That is not an easy job to and user experience is awful. So how does Angular Elements helps us with that? Did you hear about Web Component Technology? 

>Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

This tech was introduced in 2011 by Alex Russell at Fronteers Conference. 
And now Angular found the way to introduce this tech into his own environment. 
Let’s see what documentation says.

>Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

Cool right!

Enough talk lets code. 
We will create element registration-form 
```
npm install -g @angular/cli 
ng new registration-form
ng add @angular/elements project=registration-form
``` 

**@angular/elements** are a package that contains all the good stuff we need for creating Angular elements. It contains document-register-element a lightweight version of the W3C Custom Elements specification.  Remember **Angular Elements** are still young. So there are still some issues. One of them is that you need to change the document-register-element version from **1.7.2 to 1.8.1** (change it in package.json and do npm install).

All the preps are done. Let's make our hands dirty. 

First, generate the new component. 
```
ng g c register-form
```
###Registration-form.component.ts
```javascript
@Component({
  selector: 'register-peeker',
  templateUrl: './register-peeker.component.html',
  styleUrls: ['./register-peeker.component.css'],
  encapsulation: ViewEncapsulation.Native
})
```
###What is going on here? 
We want to have isolated application inside of other application with our own CSS style. See the problem. To solve this.  We are got to tell Angular to use Shadow Dom (encapsulation part of the code) to isolate our CSS styles and compile it into JavaScript. So that we can bundle it into one file. There are other ViewEncapsulation strategies but Native is one preferred.
Now you can do that nice Angular magic we all love inside component.ts, component.html, and component.css component files.
But if you want to use the same CSS styles of the "parent" page. Just switch encapsulation to None and remove styleUrls. 
Let’s fast forward to the place where the real the magic happens the app.module.ts.
Managing Focus in React 
Tags: react, a11y
Published: 2019-08-04 20:21:22

---
title: Managing Focus in React 
published: true
description: The beauty of React is not having to manipulate the dom, right? Well mostly. There may be times when you need to handle the dom, such as setting focus. In this article I will show how to set focus to any element on page load with the ref atribute.
tags: #react #a11y
---















There are times when you may wish to set focus to a specific element in your react component, such as when the component first mounts, or perhaps after form submission. This is done relatively easily in react, and today I will show you how.
#Ref api
In react, you can access a dom element easily using the ref attribute. Consider the followoing simple react component.
```jsx
import React, { useRef } from 'react';
const HelloWorld = () => {
	const mainRef = useRef(null);
	return (
		<div>
			<h1 ref={mainRef} tabIndex="-1">
				Hellow World
			</h1>
			Hello World
		</div>
	);
};

export default HelloWorld;

```
Notice in the above component, I created a variable with the name mainRef, though it could have been called anything. It simply has to be initialized with ```jsx
useRef(null);
```
then when that variable is created, it can be referenced anywhere in the returned markup for the component using hte ref attribute. Here I set it on an h1 element, but it could have been set to anything. a form field, a div, a button, etc. I included a tabIndex of -1 on the h1 so that the element would be  focusable, which we will handle in the next section.
#setting focus with ref.current
Now we can set focus to a react ref by using an effect, like so:
```jsx

useEffect(() => {
		mainRef.current.focus();
	}, [mainRef]);
	```
This effect is pretty self-explanatory. it uses mainRef.current to get the dom element and then calls focus() on it. If it were an input, you could have set the value with mainREf.current.value="blah"; Anything you can do witha dom element you can do with ref.current.
#making things easier with a custom hook
You can make the task of setting focus on initial component mounting even easier with a custom hook. I created a custom hook that sets focus to a given ref as well as set the document title to a given string. It is below:
```jsx
import { useEffect } from 'react';
const useInitialfocus = (ref, title) => {
	useEffect(() => {
		ref.current.focus();
		document.title = title;
	}, [ref, title]);
};
export default useInitialfocus;
```
Here is the HelloWorld component with my useInitialFocus hook in use:
```jsx
import React, { useRef } from 'react';
import useInitialFocus from './hooks/useInitialFocus';
const HelloWorld = () => {
	const mainRef = useRef(null);
	useInitialFocus(mainRef, 'Hello World');

	return (
		<div>
			<h1 ref={mainRef} tabIndex="-1">
				Hellow World
			</h1>
			Hello World
		</div>
	);
};

export default HelloWorld;
```
Make sure to change the import to useInitialfocus depending on your folder structure, etc. I hope this post gives you some incite on how to manage focus in react. Happy coding!!!
Sideprojects Motivations and Goals
Tags: coding, career, beginners, sideprojects
Published: 2019-08-04 19:08:17

---
title: Sideprojects Motivations and Goals
published: true
tags: coding, career, beginner, sideproject
canonical_url: http://alexandrubucur.com/blog/2019/sideprojects-motivations-and-goals/
---
Hi Everyone,

This is more of an introspective blog post regarding side-projects and finding the motivation and time to do other 'work' outside of the daily job.

As you may or may not notice, I had a solid 6+ months pause from blogging.

The main issue here was the fact that I have the tendency at times in my side projects to search for the best solution, and not focus on the task at hand. Hence, this caused a lack of progress, that well, reduced the 'rewards' so the motivation all but vanished.

Since I recently re-started working on some side projects, there are a few things that I noted down that at least in my case helped to keep myself motivated.

1. If you are starting a new project, allocate time to define what a minimal viable product means for you.

    > My mistake here was that I was thinking initially that the project I want to work on will cover a broad range of features.

2. Allocate at least 30 minutes of uninterrupted time to work on your project.

    > Don't keep reddit, youtube, ycombinator or any other sites open while you work on your project since at least for me, I am tempted to do a refresh and read new things. That, in turn, makes the limited available time for the side project to get that much smaller.

3. Don't chase magical solutions that cover all cases, but work on your product and do clean up as you advance.

    > You will be tempted to work on the 'best' solution since you're not at your daily job and be strongly against cutting corners. But the issue here is that without real deadlines you will not progress and the project world, in general, is full of imperfect solutions that get their job done.

4. If you choose a technology that takes you out of your comfort zone, have a good reason to do it or just stick to your best technology.

    > When I initially started on the project, my main motivation was working more with C# . At some point I was asking myself if this isn't something that just keeps me back on being more productive than just writing the backend in something I'm more comfortable with (mainly PHP, Python or Javascript), but at the end of the day it's more important for me to get out of my comfort zone.

Hopefully, this will ring a bell and help somebody else go over their impasse and continue to have fun and progress when working with new things or doing side projects.
Style React component with styled-components : Part-1
Tags: javascript, react, styledcomponent
Published: 2019-08-04 19:02:31

Styling your React component is an important part for any real world application.
We can style react components in a couple of ways. such as –
1. inline styling
2. CSS modules
3. emotion
4. styled-components

We will talk about styled-components in this article.


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

We are gonna create one simple animated loading spinner component.

We can install the package from npmjs using npm or yarn cli.
`npm i styled-components --save`
Or
`yarn add styled-components`

We can import that in our Component module like
`import styled from "styled-components";`

Now I will use the styled API to create the spinner.We are using one DIV as a target for that spinner.

```javascript
const StyledSpinner = styled.div`
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;</code>
 
  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
`;
```

Now we can use this like a react component.

```javascript
class Spinner extends Component {
  render() {
    return (
      <StyledSpinner />
    );
  }
}
```
We don’t need any other tool or webpack to build this css. It will work just fine.

I will continue writing more on styled-components.

<b>Update Part 2 is available at</b>
[Style React component with styled-components : Part-2](https://dev.to/destro_mas/style-react-component-with-styled-components-part-2-3d78)

Cheers!
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>


PS: You can also have a look on my blog site https://shahjada.me
Major Key Alert: Hide your API Keys 
Tags: ruby, beginners, tutorial, codenewbie
Published: 2019-08-04 18:35:43

---
title: Major Key Alert: Hide your API Keys 
published: true
description: A quick guide for hiding API keys and why you should take the time to do it
tags: ruby, beginners, tutorial, codenewbie
---

I love integrating public APIs (Application Programming Interface) into my side projects in order to add in more functionality. However, this raises the issue of dealing with hiding API keys! This post will walk you through what an API key is used for, why you need to hide them and provide a guide of how to accomplish this in a Ruby project.

# What is an API key?
An API key is a unique identifier used to control access to an API service provider. The API key links to the user who has been assigned the key and can be keeping track of amount of calls to the API being made by a user or which areas of the API the user is allowed to access. 

# Why do I need to hide my API keys?
Hiding your API keys is necessary because it is an identifier for your access to a resource. If you make that identifier publicly available someone else can use to it to represent themselves as you and abuse your access to the resource which could lead to your access being shutdown. Protect your access and your project by hiding those keys in a file that has been .gitignore(d) so that when you push your project up to it's github repository those API keys are not public and vulnerable. 


# Hide those keys! (Ruby)

- Add gem 'dotenv-rails' to your Gemfile and bundle install

- While in the root of your project's directory use the command '$ touch .env' 
- In that .env file create an variable (uppercase only) and assign it to your API key

```
#Inside the .env file

YELP_API_KEY=your_developer_api_key_from_yelp
```

- Add your .env file to the .gitignore file
```
#Inside the .gitignore file

.env
```

- You can access your API key throughout your ruby project like the example below
```
def yelp
   yelp = ENV["YELP_API_KEY"]
   yelp_url = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=#{category}&location=#{location}"
   res = HTTParty.get(yelp_url, :headers => {"Authorization" => "Bearer #{yelp}", "x-requested-with" => "XMLHttpRequest"})
    render plain: res.body.squish
end

```
Happy API Key Hiding!

# Common Troubleshooting
- Can't find your newly created .env file after .gitignoring it? 
Check the settings on your text editor to see if it makes hidden files visible in the project tree.
- Have you already pushed your API keys up to github? Check this out: https://help.github.com/en/articles/removing-sensitive-data-from-a-repository