teleren/devto huggingface dataset:
Fullscreen Background Image in React Native
Tags: react, reactnative, android, javascript
Published: 2018-09-24 08:08:07

---
title: Fullscreen Background Image in React Native
published: true
description: Fullscreen Background Image in React Native
tags: #react #reactnative #android #javascript
---

Post Link : <a href="https://www.skptricks.com/2018/09/fullscreen-background-image-in-react-native-application-android.html" > Fullscreen Background Image in React Native</a>

This post explains how to Set Background Image as Full Screen in React Native application. if you are the user of Whatsapp, Hike etc. then  you may have seen colorful background image in that application. Also you can customize the image and set is as background wallpaper for your application.

<a href="https://www.skptricks.com/2018/09/fullscreen-background-image-in-react-native-application-android.html" > Fullscreen Background Image in React Native</a>

<img src="https://1.bp.blogspot.com/-XmzeDjkp8MQ/W6iVAHYBS7I/AAAAAAAAB60/HZoE9qBOi3ouuXn8x7RJhAjfAwXr5YonQCLcBGAs/s640/bck1.png" />

<a href="https://www.skptricks.com/2018/09/fullscreen-background-image-in-react-native-application-android.html" > Read More...</a>
Resetting the password of an Ubuntu on Windows installation
Tags: ubuntu, linux, windows, password
Published: 2018-09-24 06:49:32

---
title: Resetting the password of an Ubuntu on Windows installation
published: true
description: We forget passwords sometimes, and that's okay
tags: ubuntu,linux,windows,password
---
I installed Ubuntu on Windows quite a while ago, and today I found myself unable to remember the password I had used. It happens, and considering this isn't a bank account or a nuclear missile, I figured it shouldn't be too hard to reset the password. And good news, it isn't.

## Resetting your password
1. Take note of your username on Ubuntu. You'll need this later.

2. In the Windows (admin) command line enter:
`ubuntu config --default-user root`

3. Load up Ubuntu with the `ubuntu` command. It should now show you as the root user. Now within Ubuntu enter:
`passwd <your ubuntu username>`

4. You'll be prompted to change your password. Go through the prompt and set your desired password, then exit from Ubuntu with the `exit` command.

Congrats, you're done. Now you'll probably want to set your user back to being the default user. Just run this in the Windows command line:
`ubuntu config --default-user <your ubuntu username>`
Vue Laravel Tutorials
Tags: vue, laravel
Published: 2018-09-24 06:49:17

---
title: Vue Laravel Tutorials
published: true
description: Vue Laravel Tutorials
tags: Vue, Laravel
---
Hello to all, I am here to tell something about Vue laravel.
Vue laravel are both in the top charts.
Both are use to make SPA(Single Page Applications).
On my blog, I have shared some important Tutorials about Vue laravel for beginners.


[Vue laravel tutorial part 6 Form submission](https://therichpost.com/vue-laravel-tutorial-part-6-form-submission)

[Vue laravel tutorial part 5 Vue Routing](https://therichpost.com/vue-laravel-tutorial-part-5-vue-routing)

[Vue laravel tutorial part 4 form-validation](https://therichpost.com/vue-laravel-tutorial-part-4-form-validation)

[Vue laravel tutorial part 3](https://therichpost.com/vue-laravel-tutorial-part-3)

[Vue laravel tutorial part 2](https://therichpost.com/vue-laravel-tutorial-part-2)

[Vue laravel tutorial part 1](https://therichpost.com/vue-laravel-tutorial-part-1)





Hope it will help.

Thank you.
Therichpost
GitHub Unfold News
Tags: opensource, showdev, gituhb
Published: 2018-09-24 04:16:57

---
title: GitHub Unfold News
published: true
description: Auto unfold news on GitHub dashboard.
tags: #opensource, #showdev, #gituhb
---

> Starting from someday, news are folded on GitHub dashboard page. <br />
> I do't really like it, so I build this browser extension to control them.

## Screen shot

![kapture](https://user-images.githubusercontent.com/12113222/45936602-e71e0180-bffb-11e8-8aad-0c5873379cbf.gif)

## Install

<a href="https://chrome.google.com/webstore/detail/github-unfold-news/hmihjhffenpipakeeplcjmeceafielki">
<img border="0" src="https://developer.chrome.com/webstore/images/ChromeWebStore_BadgeWBorder_v2_496x150.png" width="172">
</a>
<br/>
<a href="https://addons.mozilla.org/en-US/firefox/addon/github-unfold-news/">
<img border="0" src="https://addons.cdn.mozilla.net/static/img/addons-buttons/AMO-button_1.png" width="172" height="60">
</a>


GitHub Link: https://github.com/xxhomey19/github-unfold-news
Node.JS and AJAX
Tags: node, ajax, mongodb, crud
Published: 2018-09-24 02:24:09

---
title: Node.JS and AJAX
published: true
description: How to use AJAX with NODE.JS
tags: Node.js, AJAX, MongoDB, CRUD
---

REST defines a set of conventions to create HTTP services.  The basic four methods can create CRUD (Create, Read, Update, Delete)
	• POST: Create a resource
	• GET: Read a resource
	• PUT: Update a resource
	• DELETE: Delete a resource


In frontend side, you could do CRUD with form input as an example.  The following is an example with POST.  This case is pretty simple to run POST method only with HTML from front-end side.

```HTML
///HTML Front-end: 

{{<form action="/api" method="post">
    <input type="text" class="form-control" name="text">
    <button class="btn btn-default" type="submit">
</form>}}
```
```javascript
/// NODE.JS Back-end:
router.post('/api', (req, res) => {
	const todo = new Todo({
	text: req.body.text,
	completedAt: Date.now()
	});
	todo
	.save()
	.then(todos => res.redirect('/'))
	.catch(err => res.status.send(err));
});
```

However, if you don't have form input or form input may take different types of methods within it, you may need to take a different approach such as AJAX.

The following is an example of AJAX.  Combining HTML and AJAX is front-end operation while Node.JS with DB (e.g. MongoDB) is the backend operation.  

(1) Take button click event and take attribute from 'data-id'.  
(2) Run AJAX DELETE method. You should make sure that its Method and URL are correctly match between AJAX side and Node.JS + DB side.   
(3) I was trying to redirect by using res.redirect('url')  in back-end side, but it didn't work.  I learned that you cannot send redirect response to AJAX call, but you should let the browser reload the page.  "window.loaction.reload()" does the job here. 

```HTML
/// Front-end : HTML side: 
<button class="btn-danger" id="delete-btn" data-id="{{this._id}}">X</button>
```
```javascript
///Front-end: AJAX side; 
$('.todo-list-group').on('click', '#delete-btn', function(event) {
	event.preventDefault();
	const id = $(this).attr('data-id');
	$.ajax({
		url: '/api/delete/' + id,
		method: 'DELETE',
		data: { id: id }
		}).done(function(res) {
			if (res.success) {
			console.log('id from ajax call is', res);
			window.location.reload();
		} else {
			console.log('error...ajax');
			}
});

/// Back-end: Node.js + Mongoose (MongoDB)
router.delete('/api/delete/:id', (req, res) => {
	Todo.deleteOne({ _id: req.params.id })
	.then(() => {
		res.json({ success: true });
	})
	.catch(err => {
		res.status.json({ err: err });
	});
});

```
How can you swap two variables without using a third?
Tags: challenge, computerscience, interview, memory
Published: 2018-09-24 00:21:05

---
title: How can you swap two variables without using a third?
published: true
description: This is a very basic interview question in Computer Science
tags: challenge, computerscience, interview, memory
cover_image: http://simplecore.intel.com/newsroom/wp-content/uploads/sites/11/2017/03/moores-law-quote-2x1.jpg
---

*Moore's law is just an observation and not a real law like the Law of Gravity.*

Over the years, developers have taken the increasing CPU speeds and Memory sizes for granted. Here's a warm-up interview question that I ask every candidate.

**Let's assume the working memory for your function is 8-Bytes. You are given two 32-Bit Integers and you need to swap them. In other words, how can you swap two variables without using a third?**

Please take your time to solve this and refrain from looking up solutions online or for answers below. This is your first step in becoming a Computer Scientist!

---

<center>If you accepted this challenge, ❤️ it and [follow me on Twitter](https://twitter.com/intent/follow?screen_name=theoutlander).</center>


{% link https://dev.to/theoutlander/how-to-improve-your-debugging-skills-3j5p %}
TIL#2: patches in GitHub gists and reasons why jekyll won't generate my pages
Tags: todayilearned
Published: 2018-09-24 14:54:50

---
title: TIL#2: patches in GitHub gists and reasons why jekyll won't generate my pages
published: true
tags: til

canonical_url: http://an-ti.eu/today-i-learned/2018/09/24/til-2-patches-in-github-gists-and-reasons-why-jekyll-won-t-generate-my-pages/
---

## Patchfiles Syntax highlighting in GitHub gists

Someone sent me gist today with a patchfile in it. To my delight, I noticed that they are highlighting the changes nicely.This improves the readability of a patch tremendously.Check out this patchfile: [https://gist.github.com/pxlpnk/357a32e789b63d5d809a40d886bc9337](https://gist.github.com/pxlpnk/357a32e789b63d5d809a40d886bc9337)

It is important that the filename ends in `.patch`.

## Jekyll and future dates

This morning I spent around 15 minutes trying to figure out why a post using [jekyll](https://jekyllrb.com/) would not show up.Some furious google searching resulted in a case of _This makes a lot of sense, but why?_

It turns out, that jekyll will not generate anything that has the date set to a future time.In my case, the date was set for today, but one hour into the future.

Here is what I learned on why it might not generate posts:

- The post is not placed in the \_posts directory.
- The post has an incorrect title. Posts should be named YEAR-MONTH-DAY-title.MARKUP (Note the MARKUP extension, which is usually .md or .markdown)
- The post's date is in the future. You can make the post visible by setting future: true in \_config.yml (documentation)
- The post has published: false in its front matter. Set it to true.

Big thank you to StackOverflow and their users for helping me out one more time: [https://stackoverflow.com/questions/30625044/jekyll-post-not-generated](https://stackoverflow.com/questions/30625044/jekyll-post-not-generated)
Unit Testing Sequelize 4 ES6 class models
Tags: es6, javascript, node, testing
Published: 2018-09-24 16:18:56

---
title: Unit Testing Sequelize 4 ES6 class models
published: true
tags: es6, javascript, node, testing
canonical_url: https://codewithhugo.com/unit-testing-sequelize-4-es6-class-models/
---

In [“Using ES6 classes for Sequelize 4 models”](https://dev.to/hugo__df/using-es6-classes-for-sequelize-4-models-17ga) we explored how to define Sequelize models using ES6 classes.One of the benefits of such an approach is that it allows easy unit testing, it allows you to instantiate the model without the baggage of all of Sequelize (and/or a database).

The examples will use Jest module auto-mocking but should be portable to other module mocking libraries (eg. Proxyquire) with some modifications.

We’ll be testing the following model:

```js
const { Model } = require('sequelize');

class MyModel extends Model {
  static init() {
    return super.init(
      // Config, see "Using ES6 classes for Sequelize 4 models"
    );
  }
  
  isAvailable (date) {
    if (!Array.isArray(this.meetings)) {
      throw new Error('meetings should be eager-loaded');
    }
    return !this.meetings.find(
      ({ startDate, endDate }) => (startDate < date && endDate > date)
    );
  }
}

module.exports = MyModel;

```

At the module level, we want to:

- mock out Sequelize
- import the model

In the test:

- Instantiate the model that we’ve defined (without crashing)
- Set some properties on that instance
- Run some methods
- Assert on the output

```js
jest.mock('sequelize');
const Model = require('./model');

test('It should not throw when passed a model containing an empty list of meetings', () => {
  const model = new Model();
  model.meetings = [];
  expect(model.isAvailable.bind(null, new Date(Date.now())).not.toThrow();
});

```

## Alternative with `Object.assign`

If we’re setting more than a single instance property, using `Object.assign` can be easier to manage:

```js
jest.mock('sequelize');

const Model = require('./model');

test('It should not throw when passed a model containing an empty list of meetings', () => {
  const model = Object.assign(
    new Model(),
    {
      meetings: []
    }
  );
  expect(model.isAvailable.bind(null, new Date(Date.now())).not.toThrow();
});

```

Using ES6 classes with Sequelize makes testing easier and more natural, [sign up to the newsletter](https://buttondown.email/hugo) to stay in the loop for the upcoming Sequelize ES6 Cheat Sheet.

[Elevate](https://unsplash.com/@elevatebeer?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge "Download free do whatever you want high-resolution photos from Elevate")
Testing keychain in iOS
Tags: keychain, ios, text
Published: 2018-09-21 19:34:15

---
title: Testing keychain in iOS
published: true
description: 
tags: keychain, ios, text
---


![](https://cdn-images-1.medium.com/max/1600/0*Kt0PVlvJfhRO89zM.jpg)


Today I was upgrading [Keychain](https://github.com/hyperoslo/Keychains) to swift 4, and take this opportunity to fix the test. The tests pass on macOS, but on iOS, I get -25300 error for

    var status = SecItemCopyMatching(query as CFDictionary, nil)

It is because there is no Keychain entitlement for test target. But this is a framework, how can I add entitlement 🤔 The solution is to use a [Test Host](https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/testing_with_xcode/chapters/05-running_tests.html) to host the XCTest tests. See my [pull request](https://github.com/hyperoslo/Keychains/pull/14)

**Create test host target**

![](https://cdn-images-1.medium.com/max/2000/0*W6oTAvwTo-0_XFzW.png)

First create an iOS app to act as a test host

**Enable Keychain capability**

Then enable Keychain capability to let Xcode automatically create an entitlement file for you. Note that you can just enter the Keychain group. You don't need go to Apple Developer dashboard to configure anything

![](https://cdn-images-1.medium.com/max/2000/0*agu6L6QUNHjWEQg1.png)

**Specify Test Host**

Then in you test target, specify Test Host by using $(BUILT_PRODUCTS_DIR)/TestHost_iOS.app/TestHost_iOS

![](https://cdn-images-1.medium.com/max/2000/0*mxADBtFEGGJtH9xL.png)

Now run your test again, it should pass 🎉

Original post https://medium.com/fantageek/testing-keychain-in-ios-9360c1f38a28
The Best React Native Apps (And What You Can Learn From Them)
Tags: reactnative
Published: 2018-09-23 19:38:15

---
title: The Best React Native Apps (And What You Can Learn From Them)
canonical_url: https://www.mindk.com/blog/the-best-react-native-apps/
cover_image: https://www.mindk.com/blog/wp-content/uploads/2018/07/обложка-min-720x460.png
published: true
tags: React Native
--- 

The idea that technology developed by one company just for one service has turned into a popular framework for Android and iOS app development sounds a bit fantastic. Anyway, it is all about React Native. But why do famous companies choose this technology for building their apps? Let’s find out!

In the mobile world, split into two main operating systems, choosing a right technology for an app is almost half the battle.

The aim of this article is not only to brief on stories of success of popular apps using React Native but also to reveal the potential of this technology.

So, we invite you to take a look at the top React Native apps list and conclude whether this framework is a good idea to use for building an app for your business.

#What is React Native: a Short Intro

React Native is the next generation of React, a JavaScript library developed by Facebook. It became open-sourced in 2013 and quickly earned the trust of dozens of companies and hundreds of developers all over the world.

Here are a few React Native features to help you get acquainted with this framework before diving deeper into the React Native app examples:

Faster development. When we speak about the development process, everything that is able to speed it up is highly appreciated, isn’t it? Thanks to a number of pre-formed elements and copy and paste approach the development time can be considerably shortened.

Code reuse. Code on React Native can be applied to both iOS and Android platforms, meaning you can have more than one app with a one-time effort.

Focus on User Interface. It provides users with a very responsive interface by means of asynchronous Javascript interactions between Reathect Native and the Native environment of the mobile device. It improves the loading time of the app and helps it run well and continuously.

Less time to learning. Knowing JavaScript significantly simplifies learning React Native. It means that it allows any front-end web developer to become a mobile developer in short order. Knowing JavaScript, a number of native UI elements, platform APIs, and any other platform-specific design patterns is a key to success.

#Famous Examples of Apps Made with React Native

Among thousands of React Native apps available both on iTunes and Google Play Store, we have selected the most trendy and respectable ones. You surely may have half of these apps in your smartphone.

Intrigued?

[Let’s start!](https://www.mindk.com/blog/the-best-react-native-apps/)
Best/Worst Day
Tags: discuss, career, programming
Published: 2018-09-23 17:45:27

---
title: Best/Worst Day
published: true
description: 
tags: discuss, career, programming
---
In the movie _City Slickers_, one of the slickers was asked what were the [best and worst days of his life](https://www.youtube.com/watch?v=rMEbZRTkrfw).  He described the best first, at some length.

Then, asked about the worst, he said "The same."

I can say that about a single day in my career.

From early in life, I'd intended to be a teacher.  After college, when I was teaching at Embry-Riddle, I was what we then called a [Young Turk](https://www.urbandictionary.com/define.php?term=Young%20Turk).  And my dean was definitely an [Old Fogy](https://www.dictionary.com/browse/old-fogy).  We did not, shall we say, get on well.  Eventually he was able to make my job go away, thus ending what I'd worked for, looked forward to, and enjoyed.

That set my feet on a new path in computer software.  For the next forty years, I did what I now know I was born to do.  In software, I've done fifteen gigs:  three as a documentor, five as a developer, and the rest in test automation.  Got paid pretty well, too.

So sometimes, a defeat can be the beginning of a victory.  (Always look for opportunity.)

What about your best/worst?

Note:  See also the wonderful Somerset Maugham short story ["The Verger."](http://www.teachingenglish.org.uk/sites/teacheng/files/Maugham_The_Verger_0.pdf)
Advice for blogging
Tags: blog
Published: 2018-09-23 17:17:35

---
title: Advice for blogging
published: true
description: Any advice about beginning in the fine art of blogging?
tags: blog
---

Well, in a few days from now (depending on my free time) I'm aiming to *start my own blog*.

Since I've been reading a lot of awesome people here on Dev.to whom are bloggers at the same time, wich advice could you give me on the next topics?
- Preparing a post
- How to be motivated to keep writing.
- Things to do and things to avoid.

__Thanks in advance__.

PS: I have a few ideas in mind of what I want to do, so any advice (no matter how random it seems) would be appreciated.
Set Background Color of Root View in React Native
Tags: react, reactnative, android, mobile
Published: 2018-09-23 16:21:12

---
title: Set Background Color of Root View in React Native
published: true
description: Set Background Color of Root View in React Native
tags: #react #reactnative #android #mobile
---

Post Link : <a href="https://www.skptricks.com/2018/09/set-background-color-of-root-view-in-react-native.html" > Set Background Color of Root View in React Native </a>

This post explains how to set or change background color of RootView in React Native application using CSS stylesheet design. You can change the background of main activity/screen, by specifying backgroundColor attribute of stylesheet design in parent view layout (or RoorView) . This will make App’s starting screen look and feel better.

<a href="https://www.skptricks.com/2018/09/set-background-color-of-root-view-in-react-native.html" > Set Background Color of Root View in React Native </a>
<img src="https://2.bp.blogspot.com/-oqZF5l7N8qs/W6e6mHpKRTI/AAAAAAAAB6c/pEjlHtWHnzY_lQHIZcZCBMrxSrXTG-tpwCLcBGAs/s640/bckc.png" />


<a href="https://www.skptricks.com/2018/09/set-background-color-of-root-view-in-react-native.html" > Read More... </a>
retyst: A React Typescript Starter
Tags: react, typescript, webpack, styledcomponents
Published: 2018-09-23 11:19:56

---
title: retyst: A React Typescript Starter
published: true
description: 
tags: react, typescript, webpack, styled-components
---

## [check retyst out on GitHub](https://github.com/bartw/retyst)

## scripts

```shell
npm install
npm start
npm run build:dev
npm run build:prod
npm run detach
```

## about

This is a simple starter repo to quickly get a React Typescript project going.

The dev dependencies include Typescript and Webpack with ts-loader, html-webpack-plugin, webpack-cli and webpack-dev-server.

The dependencies are react, react-dom and styles-components.

I will try to keep this repo up to date whenever I use it (and that might be never).

## usage

You can test this repo by executing `npm install` followed by `npm start` and then browse to http://localhost:8080/.

You can use the `npm run build:dev` and `npm run build:prod` to check out the generated bundles.

The `npm run detach` script removes all connections to retyst and the .git folder so you can start your own project.

## license

This repo is licensed under the [MIT License](LICENSE).
BxJS Weekly Episode 29 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-09-23 10:09:17

---
title: BxJS Weekly Episode 29 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 29 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-29-2018-09-22.md).

You can also watch or listen to this episode on:
- [YouTube](https://www.youtube.com/watch?v=3flXLSiYw3U)
- [Castbox](https://castbox.fm/episode/BxJS-Weekly-Ep.-29-Sept-22%2C-2018-(javascript-news-podcast)-id1378315-id93202911?country=us)

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Medium](https://medium.com/@yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉