teleren/devto huggingface dataset:
Forcing the usage of yarn (and at a specific version)
Tags: javascript, node, npm, yarn
Published: 2019-10-11 05:33:45

---
title: Forcing the usage of yarn (and at a specific version)
published: true
date: 2019-10-11 03:40:46 UTC
tags: javascript, node, npm, yarn
canonical_url: https://leonardofaria.net/2019/10/11/forcing-the-usage-of-yarn-and-at-a-specific-version/?utm_source=rss&utm_medium=rss&utm_campaign=forcing-the-usage-of-yarn-and-at-a-specific-version
---

_Also published in [my blog](http://bit.ly/2VH2g1P)_.

People and organizations often have preferences for a specific package manager. At work, we decided to use Yarn due to emoji support (jk) but how to keep everybody using Yarn? 

We can use the [preinstall hook](https://docs.npmjs.com/misc/scripts) to check if the user run `npm install`or `yarn install`. Here is one example:

```javascript
"scripts": { 
  "preinstall": "node -e \"if(process.env.npm\_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
}
```

If you run `npm install`:

![](https://leonardofaria.net/wp-content/uploads/2019/10/npm-install.jpg)

If you want to ignore the checking (CI environment for instance), use the `--ignore-scripts` option: 

`npm install --ignore-scripts`

Moreover, you can use the [engines option](https://docs.npmjs.com/files/package.json#engines) of NPM to force a specific version of Node, and/or Yarn. Here is an example:

```javascript
"engines": { 
  "yarn": ">1.19.1", 
  "node": ">12"
},
```

![](https://leonardofaria.net/wp-content/uploads/2019/10/npm-engines.jpg)
How I demonstrated Growth Mindset recently
Published: 2019-10-11 16:56:42

"It’s not that I’m so smart, it’s just that I stay with problems longer." –Albert Einstein.

Developing a growth mindset will teach you to embrace failure and find new ways of succeeding. Think of it as a new superpower for your brain. Never ever count on failures more than your achievements because as you continue to focus on weaknesses you will end up find that you are always a loser but focus on what you have accomplished and think about where you start from, you will never find any other superpower like you.

A growth mindset is key to my everyday accomplishments because I always make mistakes and use them to reach success. I work hard not just because it is recommended because I hope to gain many things. I am not afraid of making mistakes or failure I learn from them, I have been doing an internship in the last eight weeks, some of what I was working on It was my first time to use them but I correct many errors which were my motivation to get to know many things. It was challenging and need to work hard but I gain something new from it. Do you thing this can be done without a Growth mindset? 

By stop looking for our failures and open our eyes to be positive, we can do something big and be the superpower of our brains. This world needs us not to be have a fixed mindset because we will limit ourselves if we think that Things can't be changed. So being positive, work hard, overcome challenges, learn from our failure and make changes is all about having a growth mindset.
About Stephen Odzer
Tags: stephenodzer, aboutme, newyork
Published: 2019-10-11 17:33:38

Stephen Odzer went to Yeshiva of Flatbush High School and then to the Brooklyn College Scholars Program. Stephen Odzer started his first company at the age of 18 out of his parents' basement. Stephen Odzer was named the Ernst and Young Entrepreneur of the Year in 2000 in the area of distribution.  Stephen Odzer has been in the distribution business for over 30 years.
What's a better way to start a conference talk than "Uh... okay, so I guess it's time to get started?"
Tags: discuss
Published: 2019-10-12 01:47:16

I'm giving my first conference talk at [CONNECT.TECH 2019](http://connect.tech/) in Atlanta, GA next week, and I am excited!

Over the past few months, I've spent a lot of time studying the subject, fine tuning my slides, and working through the talk itself. But there is one thing that is hanging me up: the kick-off.

I have seen a bunch of talks at different conferences, and it seems like the default "start" is a diffusing question or statement like: "Alright, so I guess I'll begin."

There has got to be a better way!

**What are some of the great talk kick-offs that you've heard? What do you like and what do you dislike? How would you start your tech talk?**
My Hacktoberfest personal challenge: I'm writing a game in 7 days! (Days 7)
Tags: hacktoberfest, showdev, gamedev, javascript
Published: 2019-10-12 12:46:03

---
title: My Hacktoberfest personal challenge: I'm writing a game in 7 days! (Days 7)
published: true
description: Update on the progress of the challenge. 
tags: #hacktoberfest, #showdev, #gamedev, #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yl88dj9eygy4ff64ggnr.png
---

Welcome back to my improvised dev journal where I'm recording the journey of working on my personal Hacktoberfest challenge.

I'm creating a game in 7 days. More specifically, a Platformer Typing game, you can read more about the idea [here on my first day's journal](https://dev.to/deleteman123/my-hacktoberfest-personal-challenge-i-m-writing-a-game-in-7-days-eg).

Today I'm covering the 7th and final day, the challenge ends here, so let's see what I was able to make in 7 days, shall we?

# The plan for day 7

As it was the final day, I needed to provide some sense of purpose for the player, and that translated into giving the points a meaning as well as having a final screen where results are shown.

Luckily for me, I was able to achieve just that, I made it so every right word provided points as well as coins collected and enemies killed as well. 
The final screen shows a result of how many points you managed to obtained as well as the number of words you got right and wrong.

I've added a full gameplay video of the end result in this tweet:

{% twitter 1182995585558896640 %}

The video is short, since an adult already familiar with typing can finish the game in under a minute. But my kid liked it and it proved a challenge to him, so I would call this mission accomplished!
Furthermore, he even started providing suggestions for improvements for new bosses and stages, so it picked his interest as well.

# What now?

Well, the challenge is done and I need to go back to my normal routine, but as I've really enjoyed the process, I'm going to be doing two things:

1. I'll write a quick post-mortem about the entire experience, the usual list of the things that went right, what went wrong and an account of my learnings.
2. I'll also write a series of articles about melonJS and how it can be used to create a game. And for this, I would ask if you had any suggestions about topics to cover since I'm hoping to write 2 or 3  based on this experience.

But alas, this challenge is over and so is this journal, it was a fun experience and I hope I get to re-do it again soon!

Thanks, everyone who's followed along, I really appreciated the support and if this inspired you to do your own #1Game7days challenge, share your progress, I'd love to follow along!
CSS-only low-poly Earth Globe
Tags: css, scss, codepen, nojs
Published: 2019-10-12 21:42:15

CSS-only Earth Globe experiment on CodePen: https://codepen.io/jperals/full/ExYqwyJ

(Visit with caution: it's a bit resource hungry)

Features:

- CSS 3D transforms
- CSS animations
- CSS gradient backgrounds
- CSS pseudo-selectors (`:before`, `:after`, `:nth-child`)
- SCSS with trigonometric functions

The hardest part was to stretch the tiles according to the spherical surface (note that they are trapeziums, not rectangles, otherwise they would cross and overlap each other). For this an extra `:before` pseudo-element was required which gets a slight 3D rotation. I wrote an isolated CodePen with the formula that finds the exact 3D transformation to render a specific trapezoid, which can be found [here](https://codepen.io/jperals/pen/WNeBqBG).

[This other CodePen](https://codepen.io/jperals/pen/eYObWYW) shows how the tiles with part ground and part sea are achieved (using CSS gradient backgrounds).

Finally, CSS provides 3D transformations but not light simulation, so I added an `:after` pseudo-element to every tile that basically animates from opaque white to transparent to opaque black. To "shade" according to angle, each tile in the row has a different animation delay.
Wrote Scalable Theme module for React Native
Tags: reactnative, design, uiweekly, typescript
Published: 2019-10-13 00:49:41

Hello everyone,

In entire app, `colors`, `typography` and values for `margin`/`padding`/`height`/`width` are typically defined in each component, which makes it hard to change. Theme module, defines all colors, typography and sizes at a single place, so that only few changes in value can change the overall look of the app.

Wrote a project on Github regarding this https://github.com/alexakasanjeev/react-native-theme

Please checkout the project, and share your ideas on How it could be improve, contribution are welcomes.
Kubernetes Patterns : The DaemonService Pattern
Published: 2019-10-13 12:48:49

What is a Daemon?
A daemon is a process that runs in the background. Typically, a daemon does not produce visible output to the user; it does not accept inputs. Daemons exist to perform background jobs. For example, in Linux, we have the httpd to respond to HTTP requests, sshd to grant remote users secure remote-shell access. We also have several kernel daemons that do not accept users input; they exist to perform housekeeping and other essential tasks that the kernel needs to function correctly. Sometimes, users may create or install their demons. For example, logrotated is a popular Linux daemon that routinely archives old log files in configurable paths according to user-defined settings. Another example is log shippers (filebeat, fluentd,etc.) that periodically send logs to a log aggregation service like ELK stack for analysis and correlation.
for more information  visit: https://www.magalix.com/blog/kubernetes-patterns-the-daemonservice-pattern
Image caching in Xamarin Forms
Tags: xamarin, caching, images, xamarinforms
Published: 2019-10-13 19:15:50

---
title: Image caching in Xamarin Forms
published: true
date: 2019-04-18 01:23:13 UTC
tags: Xamarin,caching,images,Xamarin.Forms
canonical_url: https://blog.torib.io/2019/04/17/image-caching-in-xamarin-forms/
---

Someone asked me about an issue they were having when showing a ListView that had an image for each cell. When the user would scroll the images would flicker and the UI would turn a bit slow. The images were being loaded from the internet.

The problem the person was having was that they were not using a correct caching strategy for the images and now I’m going to explain how you can fix this problem in case it happens to you.

## Enough context, let’s do the caching

If you want to add cache to your image you should use something like this:

<script src="https://gist.github.com/eatskolnikov/33a3ae1cff2492f940ab1db8171c7d4d.js"></script>
## Some explanations ensue

When you want to show an image you know you specify the **Source** of the Image. Probably as a URL or a route to a resource, both look like strings but if you look a bit further you will notice the Source property of the Image is actually of type **ImageSource** and it can be assigned any value that inherits from it.

In the code sample, we set the Source to an instance of **UriImageSource.** This class has more properties but the three properties we want to focus on are:

- **Uri:** This is the address of the image we want to show.
- **CachingEnabled:** This is a boolean value that will Enable or Disable the caching. The default value is true.
- **CacheValidity:** The timestamp when the cache will be dismissed. The timestamp parameters are Days, Hours, Minutes, Seconds. In the Code sample, we are setting the cache to 7 days. In the XAML sample to 30 days.

And that’s it. Pretty concise and quite useful. Hope you liked reading it as much as I did writing this article. You can get more information on working with images and the source for the feature image in this article from [the official Xamarin Documentation.](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos) Bye!

The post [Image caching in Xamarin Forms](https://blog.torib.io/2019/04/17/image-caching-in-xamarin-forms/) appeared first on [Enmanuel Toribio](https://blog.torib.io).
Manipulating DOM Elements With React Hook useRef()
Published: 2019-10-13 20:27:15

It is usually advised to avoid using refs in React for anything that can be done declaratively, but there are few cases when you need to imperatively modify DOM element. One of it, to access or modify a child outside of the typical dataflow, like managing focus, selecting text or media playback.

## How To

Ref attributes may not be used on function components because they don't have instances, but React Hooks introduced a function `useRef()`, which holds and returns a mutable object `.current`.

The function takes the optional initial value as an argument, and if you forgot to pass it, don't worry, you will be able to do it later.

```jsx
const refContainer = useRef(initialValue);
```

And the returned mutable object exists through the whole lifetime of the component

The best ilustration how `useRef()` works would be with the example of `input` field manipulation:

```jsx
function App() {
    const inputRef = React.useRef();

    return (
        <>
            <input ref={inputRef} />
            <button onClick={() => inputRef.current.focus()} />
        </>
    )
}
```

The `inputRef` holds the reference to the DOM element `input`, and all properties of the element can be accessed directly through the `inputRef.current`. As a side effect of clicking the button, we can manipulate the `input`, like setting it on focus `inputRef.current.focus()`.

## Not only for DOM

As the hook holds a mutable object, we can use it not only for accessing the DOM elements, but to hold any value: strings, numbers, other objects, functions. You can store previous state values inside it in case you need to access it later.

The example below demonstrates how the number value is stored inside the mutable object, and on every component render it updates, increments and renders the count to the browser. Now you will know how many times your component was re-rendered unnecessarily :)

```jsx
function App() {
    const ref = React.useRef(0);
    React.useEffect(() => {
        ref.current += 1;
    });

    return (
        <div>{ref.current}</div>
    )
}
```

Also, need to keep in mind, that changes to the mutable object `.current` does not notify you, so the component will not re-render when you modify the object.

## Final notes

`useRef()` creates a simple JavaScript object, I think it's a great hook for holding and accessing not only refs but any data like we do it with the fields of the class components.
Image Resizing from the shell
Tags: linux, macos
Published: 2019-12-21 22:41:07

---
title: Image Resizing from the shell
published: true
description: How to resize images in your shell, using ImageMagick
tags: linux, macos
---

Here's a scenario I encounter pretty often:

1. I download an image from Unsplash
2. I move the image into the folder of a webapp
3. The image is like 1GB because it's so high quality, and that's no good for download speeds from the webapp
4. I need to resize it to make it smaller.

You could open up a GUI to resize the image (preview on MacOS works really well for this).. but sometimes I just want to stay in teh terminal.

The tool to solve the problem in the terminal is ImageMagick.

There are two commands I typically use. The first is `identify <image>` which will tell you the current width & height of the image.

The second I use is `convert <source_image> -resize 1000x <destination_image>`. This will resize the source image to a width of 1000px, and will maintain the aspect ratio for the height.

There's a lot more you can do with ImageMagick tools. If you know some tricks, let everyone know in teh comments!

---

Hopefully this is useful for you. If you're looking for more tips on Linux & development, follow me here on dev.to or on [Twitter @connorbode](https://twitter.com/connorbode).
Self-learning
Published: 2019-10-14 01:38:05

Self-learning, something I never really gave much thought to until I 

started learning to code. to be honest by the time I hit junior high I 

thought I did not like school. Looking back now I realize that I did 

like school, I had just had some not so great experiences. Which led me

to believe the opposite was true. But honestly, I do like learning. as 

an adult most of that has been self-learning, just like so many others. 

These days to be a self-learner all you need is some sort of computer 

and access to the internet. From there your options are plentiful all 

need to do is decide what you want to learn. If you don't know where to 

start you can always Google it. Just ask Google for the best websites to 

learn your desired topic. But even before the internet, I was a self-

learner. First is being a young newly single female living on her own 

for the first time and learning how to be handy around the house.How-to 

books were my go too. Then thankfully the internet became accessible to 

everyone, which was very helpful. Then came you tube which added to your 

self-learning options. Now as an older adult I have been blessed with

 the opportunity to learn computer coding in a classroom environment

 while also utilizing self-learning. And I love it, I honestly wish for

 more hours in the day to continue learning to code.
My first ever Hacktoberfest Event experience 
Tags: hacktoberfest
Published: 2019-10-14 02:24:22

Its been a day of since we held our Hacktoberfest in Bulawayo event, the first one of its kind in my city Bulawayo in Zimbabwe and I was the the event's orgarniser.

My intentions in organizing the event although I myself am a total newbie to open source were: I am currently on a drive to improve my soft skills. I am especially focused on public speaking and technical writing. 

One thing in my short techie life I've learnt is that you always have to be constantly learning and evolving. You must set challenges for yourself which might seem impossible to achieve and just take the plunge. 
All you have to do is be humble enough to ask questions, collaborate and implement feedback basically just get things done. No matter how huge a task might seem to be, nothing is impossible to achieve.

That's been my story over and over again in my coding journey. On paper Im a woman, a mother and in my 30s. But I still got my first professional gig as a junior software developer, in 8 months with no background in programming.

So I went out and got things done and sought the assistance of anyone whom I thought could help. And in the end we had an epic team. The Tech Village was kind in enough to host the event, and we had brilliant speakers onboard: Alistair Holmes, Micheal Dera and Jeff Chiveya and the local techie community came in numbers to participate.

The speakers came up with the most brilliant and informative presentations, throughout out the whole event I was totally captivated kept at the edge of my seat. And am proud to say I'm now an open source convert!


Although I played a small part in yesterday's event. I did a basic intro to the event. I overcame my fear of speaking publicly. Despite sweaty palms and heart palpitations I did it!I overcame my anxieties. For me just that is a feat on its own. I know surely as I continue to volunteer to speak more I will improve.

_Thank you for reading my story.
Now let me get back to working on my PRs;)_
React Native Developers Hiring Guide for 2019
Tags: reactnative, devops, hiring
Published: 2019-10-14 07:17:41

React Native commenced as an inner hackathon project on Facebook but became one of the most famous frameworks across developers.

Introduction To React Native

A few facts in case React Native is a new term for you. React Native was created by Facebook in January 2015. Before that Developers at Facebook have published React.js to manage code maintenance problems in Facebook Ads webpages. React.js was introduced in May 2013 as an open-source project.

Since then, React Native is continually growing its customer base as well as capacities. Whether it is redesigning and make the framework more flexible and enable easier integration with existing apps or making the bridge simpler to make it lightweight.

let’s shed some light on the advantage of React Native:-


1. Time and cost reduction:- You can use the same code to deploy an app on iOS 
   and Android.
2. Cross-platform:- React Native does a good job of supporting multiple 
   platforms.
3. No rewriting:- In React Native you can expand your mobile application without 
   a complete rewrite of the code.
4. Flash Fast:- React Native has a great variety of components. With the help of 
   these, the development of an app happens much faster.
5. A different approach:- React Native lets you use more of an agile, web-style 
   approach. Hybrid frameworks can’t provide you with that.

Features


1. React Native allows a developer to create a high-end app for both Android as 
   well as iOS.
2. It provides optimum quality and sustainability.
   This employs JavaScript as its programming language.
3. It enables developers to avail React [a JavaScript library platform] in 
   constructing user interfaces.
4. Its UI is easy to navigate and offers a pleasant user experience.
   React Native apps are lightning-fast for all capabilities.
5. iOS and Android apps built on React Native use fewer resources than native 
   apps.
6. It supports automated code updates, which enable the faster release of new app 
   features.
7. General-purpose developers can create applications with little or no support 
   from mobile app specialist.


To know more about React Native - https://codersera.com/blog/react-native-developers-hiring-guide-for-2019/
Hacktoberfest 2019 Information
Tags: hacktoberfest, opensource, github, pullrequest
Published: 2019-10-14 15:10:50

Hacktoberfest is a month-long celebration of git and open-source organised by DigitalOcean and DEV Community.

Do you want to participate?????

~ If you are new to programming/learning to code/Junior developer - Do participate in this open-source project contributions.
~ Doing open-source contribution will help you to learn a new skill.
~ You can learn how to use Git and Github.
~ You can meet like-minded people at the event, learn from mentors and connect with the developer.
~ Also if you do 4 pull request in this month you will get a Hacktober t-shirt and lots of swags🥳

Let's keep coding and have fun✅

Check this website to participate- https://hacktoberfest.digitalocean.com/

Thanks, and have fun!