teleren/devto huggingface dataset:
Grid gallery, Product carousel, Full page content | Module Monday 31
Tags: showdev, opensource, webdev, javascript
Published: 2019-03-11 15:20:35

---
title: Grid gallery, Product carousel, Full page content | Module Monday 31
published: true
description: Module Monday 31
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/v1552092188/screenshots/gallery_40.gif
canonical_url: https://guide.anymod.com/module-monday/31.html
---

## Open-source web modules you can use anywhere

All the mods below are open source and free to use in any project you choose. [Anymod](https://anymod.com) lets you quickly add features to any website or web app.

Click a mod to see it in action along with its source code.


## Grid gallery with tags
View, sort, and zoom your images.
<a class="btn btn-sm" href="https://anymod.com/mod/nkknmm?v=20">View mod</a>

<a href="https://anymod.com/mod/nkknmm?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1552092188/screenshots/gallery_40.gif"/>
</a>

## Full page next / previous
Huge content. Easy to edit, easy to leaf through.
<a class="btn btn-sm" href="https://anymod.com/mod/kddabo?v=20">View mod</a>

<a href="https://anymod.com/mod/kddabo?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1552098055/full-page_upigbk.gif"/>
</a>

## Hero unit
Complete with a video background and scroll button.
<a class="btn btn-sm" href="https://anymod.com/mod/baanba?v=33&preview=lorem&w=900">View mod</a>

<a href="https://anymod.com/mod/baanba?v=33&preview=lorem&w=900">
  <img src="https://res.cloudinary.com/component/image/upload/v1552181853/hero_hrtzxy.gif"/>
</a>

## YouTube banner with modal
Split screen preview & click to view.
<a class="btn btn-sm" href="https://anymod.com/mod/lllamb?v=20&preview=lorem">View mod</a>

<a href="https://anymod.com/mod/lllamb?v=20&preview=lorem">
  <img src="https://res.cloudinary.com/component/image/upload/v1552101538/youtube_qpy5gt.png"/>
</a>

## Product carousel
Show off your wares with an interactive slider.
<a class="btn btn-sm" href="https://anymod.com/mod/raarbm">View mod</a>

<a href="https://anymod.com/mod/raarbm">
  <img src="https://res.cloudinary.com/component/image/upload/v1552181553/products_oprem3.gif"/>
</a>

<hr>

I post new modules [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
React Native App not opening
Tags: reactnative
Published: 2018-11-27 08:56:01

---
title: React Native App not opening
published: true
description: problem with opening Android App
tags: react-native
---

I made a switch to React Native this month from Angular 7. My major attraction to this fascinating framework is the fast interaction of components (powered by babel for jsx) unlike the .ts controlled HTML templates in Angular 7 which sometimes need a refresh to update the GUI. The capability of HTML in js code is the peak of this framework transition.

I hope to find the relevant help I need here.

However, I am battling with the difficulty to create apk file from my React Native project using Android Studio. I succeeded in creating a signed apk which was installed on my Techno W2 device without any error; but the app isn't opening, and has no visible launch icon too. Although it is listed in the installed apps in settings. After installing, the 'open' button is inactive.

Any help on this will be greatly appreciated, as I cannot continue my React Native development unless this is resolved. I want to be creating my apk files locally, and not using Expo services which produce huge file sizes.
Note: My React Native Project is generated by 'expo init project-name', then ejected by 'expo eject' in order to regenerate the android & iOS directories.

Thank you.
Stay DRY with Template Layouts in
Tags: expressionengine, eecms
Published: 2019-03-11 15:11:00

---
title: Stay DRY with Template Layouts in 
published: true
date: 2019-03-11 15:11:00 UTC
tags: ExpressionEngine,eecms
canonical_url: https://u.expressionengine.com//article/stay-dry-with-template-layouts-in-expressionengine
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/b6qtw42ztdodsq80n3rb.png
---
Learn the basics of organizing your templates in a clean, maintainable way.

YouTube: {% youtube jzRIymlfU1w %}
How to create Post and API for that post? 
Tags: wordpress, beginners, help, javascript
Published: 2019-03-11 15:03:40

---
title: How to create Post and API for that post? 
published: true
description: 
tags: wordpress, beginner, help, javascript 
---
Does anyone know some good tutorials for creating Post and API for that post? Trying to make a FAQ Wordpress plugin.
Consecutively return a random item from a JavaScript array
Tags: javascript
Published: 2019-03-11 15:03:29

---
title: Consecutively return a random item from a JavaScript array
published: true
description: The other week I was working on a side project where I needed to consecutively return a random item from an array via a button click.
tags: javascript
---
_View this post on [alexcarpenter.me](https://alexcarpenter.me/posts/2019/03/random-item-array/)_

The other week I was working on a [side project](https://github.com/alexcarpenter/standup-starter) where I needed to consecutively return a random item from an array via a button click.

To do this, I first created a function that returns a random item from an array.

```js
function randomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}
```

The problem with using only the `randomItem` function here, is that it was not uncommon to return the same item twice in a row.

To fix that issue, I made use of a `do...while` loop to call the `randomItem` function until it returned a result which is not equal to the previously selected item.

So while `prevItem` is equal to `currentItem`, run the `randomItem` function.

```js
var fruit = ['Apples', 'Oranges', 'Pears'];

var currentItem = randomItem(fruit);

btn.addEventListener('click', function () {
  var prevItem = currentItem;
  do {
    currentItem = randomItem(fruit);
  } while (prevItem === currentItem);
}, false);
```

Now when we click the button, we will never get the same item returned consecutively.

Checkout the [demo](https://codepen.io/alexcarpenter/pen/QoMKNv?editors=1011) and open the console to see it in action.
So you think you're just gonna `npm install`? Think again
Tags: npm, node, javascript, tips
Published: 2019-03-11 14:57:47

---
title: So you think you're just gonna `npm install`? Think again
published: true
description: installing dependencies is not the same for development as it is for continuous integration systems, in this post I share why.
tags: npm, nodejs, javascript, tips
canonical_url: https://www.lirantal.com/blog/2019-03-10_so-you-think-you-can-npm-install
---

We embraced the birth of package lockfiles with open arms, which introduced: deterministic installations across different environments, and enforced dependency expectations across team collaboration.

Life is good! Or so I thought…
what would have happened had I slipped a change into the project’s `package.json` file but had forgotten to commit the lockfile along side of it?

Both Yarn, and npm act the same during dependency installation . When they detect an inconsistency between the project’s `package.json` and the lockfile, they compensate for such change based on the `package.json` manifest by installing different versions than those that were recorded in the lockfile.

This kind of situation can be hazardous for build and production environments as they could pull in unintended package versions and render the entire benefit of a lockfile futile.


Luckily, there is a way to tell both Yarn and npm to adhere to a specified set of dependencies and their versions by referencing them from the lockfile. Any inconsistency will abort the installation. The command line should read as follows:

* If you’re using Yarn, run `yarn install --frozen-lockfile`
* If you’re using npm run `npm ci`

--

I also wrote a complete [10 npm security best practices](https://snyk.io/blog/ten-npm-security-best-practices/) you should adopt in a post that includes a high-resolution printable PDF like the snippet you see below.

Thanks for reading and to [Juan Picado](https://twitter.com/jotadeveloper) from the Verdaccio team who worked with me on it. [Check it out](https://snyk.io/blog/ten-npm-security-best-practices/)

[![Node Version](https://thepracticaldev.s3.amazonaws.com/i/yvey2bykpvbjcxrurqoz.png)](https://snyk.io/blog/ten-npm-security-best-practices/)
Apple push notifications
Tags: python, apns, pushnotifications, pyapns2
Published: 2019-03-11 14:50:57

---
title: Apple push notifications
published: true
description: Send push notifications using pyapns2 python
tags: python, apns, push notifications, pyapns2
---

To send push notifications to any apple device using apns, I had to spend a considerable amount of time looking at all the alternatives available in python. Then i found an open source library [pyapns2](https://github.com/Pr0Ger/PyAPNs2). I had almost rejected this library when I was exploring because it did not say any where in the documentation that it supports batching or token based authentication. 
When I searched the source code, I was astonished to see that it had support for both but was not documented. 

So I updated the documentation and raised a [pull request](https://github.com/Pr0Ger/PyAPNs2/pull/75).

For any one who has been facing similar issues below is the example code on how to use the library.

```python
from apns2.client import APNsClient
from apns2.payload import Payload

token_hex = 'b5bb9d8014a0f9b1d61e21e796d78dccdf1352f23cd32812f4850b87'
payload = Payload(alert="Hello World!", sound="default", badge=1)
topic = 'com.example.App'
client = APNsClient('key.pem', use_sandbox=False, use_alternative_port=False)
client.send_notification(token_hex, payload, topic)

# To send multiple notifications in a batch
Notification = collections.namedtuple('Notification', ['token', 'payload'])
notifications = [Notification(payload=payload, token=token_hex)]
client.send_notification_batch(notifications=notifications, topic=topic)

# To use token based authentication
from apsn2.credentials import TokenCredentials

auth_key_path = 'path/to/auth_key'
auth_key_id = 'app_auth_key_id'
team_id = 'app_team_id'
token_credentials = TokensCredentials(auth_key_path=auth_key_path, auth_key_id=auth_key_id, team_id=team_id)
client = APNsClient(credentials=token_credentials, use_sanbox=False)
client.send_notification_batch(notifications=notifications, topic=topic)
```


To learn about token based authentication you can have a look at this wonderful resource [here](http://gobiko.com/blog/token-based-authentication-http2-example-apns/)

**Benchmark:**

 When I used `send_notification` for sample token size of 2000 it took me around `10 minutes` to send all the notifications. 
When I used `send_notification_batch` for same sample token size it took less than `5 seconds` to send out all the notifications.
Using SDL: Pong 4
Tags: cpp, sdl, pong
Published: 2018-11-27 04:13:56

Our game is almost done. We have our Ball on the screen and it moves. But, the motion of the ball is only one dimensional. It can only move left or right but not take a diagonal trajectory.

I want to show a few preliminary changes that were made to the `Ball` class before moving on to the main changes.

First, the `m_velocity` member variable was renamed to `m_velocity_x` to better reflect the fact it is the velocity for the x-axis. Plus, for the y-axis, we have `m_velocity_y`. And finally, `m_y` for the position of the y-position.

```cpp
private:
    int m_velocity_x;
    int m_velocity_y;
    double m_x;
    double m_y;
    ...
```

Now for the main event.

All we really need to do is set a value for `m_velocity_y`. One option is to have a hard-coded value of an arbitrary value. Another and better way to do it is to have a random value created for the velocity.

```cpp
void Ball::init(SDL_Renderer *renderer, int x, int y)
{
    ...
    std::uniform_int_distribution<> dist_y(1, 3);
    m_velocity_y = dist_y(rand_gen);

    if(dist_x(rand_gen) == 0)
    {
        m_velocity_y = -m_velocity_y;
    }
}
```

We create a new `std:uniform_int_distribution` and we set the range between 1 and 3. But now the diagonals will only have a downward trend to them. To fix this, we randomize a value between 0 and 1. If it is a 0, we invert the velocity allowing it to travel in an upward trend. We'll reuse `dist_x()` since it already has the range from 0 to 1.

Before we compile and run, we have to change the `Ball::update()` method to reflect our changes:

```cpp
void Ball::update(double delta_time)
{
    m_x = m_x + (m_velocity_x * delta_time);
    m_y = m_y + (m_velocity_y * delta_time);
    m_position.x = m_x;
    m_position.y = m_y;
}
```

Compile and run.

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

## What's next

For the next post, we'll get around to implementing collision detection for our paddles and the ball.

Github repository: https://github.com/Noah11012/sdl2-tutorial-code
What is the best way to update a property on a model using React hooks
Tags: react, reacthooks
Published: 2019-03-11 14:13:04

---
title: What is the best way to update a property on a model using React hooks
published: true
description: 
tags: react,react-hooks
---

I'm switching from angularjs to react, and still learning the basic philosophy behind react.

I ran into an issue trying to bind an input element to a property on a model.  I first tried using `useReducer`, which worked fine to update the model.  The problem is that it does not trigger a re-render of the component, since the model is still the same model, just with an updated property.  As far as react is concerned, nothing has changed, so it does not need to re-render.

I came up with two different solutions.  The first is to clone the model on each update.  In some cases this is fine, and maybe it's the functional programming way of doing things (I'm almost as new to functional programming as I am to React).  But it seems like a waste to go around cloning things all the time.

The second solution is to use the `forceUpdate` strategy posted at https://medium.com/crowdbotics/how-to-use-usereducer-in-react-hooks-for-performance-optimization-ecafca9e7bf5.  If I wrap that thing up in a nice custom hook, I can make it pretty clean.  But I know that forceUpdate is not really recommended, and I'm not comfortable enough yet with react to know if this is a reasonable place to use it.

I've got everything laid out clearly in a jsfiddle at https://jsfiddle.net/nbrustein/odjwkbvs/31/

So, what should I be doing here?  Is the solution:

1. Stop worrying and love the clone.  It's what all the cool functional programmers are doing these days.
2. Use forceUpdate.  This is what it's for.
3. Something else I haven't thought of yet.

Thanks in advance for any insights.
Debunked: 4 myths about cloud computing
Published: 2019-03-11 13:59:03

---
title: Debunked: 4 myths about cloud computing
published: true
description: 
tags: 
---

Once upon a time the cloud was something that was only found in the sky. Now, the meaning (https://www.pcmag.com/article/256563/what-is-cloud-computing) has changed somewhat.
In short, whether it's a website or software, anything remotely technical seems to rely on cloud computing.
The basis is that instead of having physical servers storing all of your data, it's all hosted on the internet. One example of such a service is here: https://ukcloud.com/g-cloud-10/. 
Of course, all of the above prompts a whole host of questions and misconceptions. Through today's post, we will take a look at some of these biggest myths.
Myth #1 - It's an all or nothing job
One of the big myths about cloud migrations is that everything must move in one, fell swoop. As it turns out, this seldom happens.
Usually, some sort of hybrid approach is preferred. This might involve moving the odd application to start with, before gradually transitioning if no problems are experienced. In fact, moving everything in one go is asking for trouble, as anyone who has been involved in a migration will testify.
Myth #2 - Moving to the cloud is too expensive
Let's write off this next myth as a matter of urgency. While some organizations might see a rise in prices, many won't. The big advantage that the cloud prompts is that you can scale up and down as you please. It means that you only pay for what you use - rather than renting a huge server "just in case" your needs expand. It means that for many, cloud computing turns out to be much cheaper.
Myth #3 - There's no need for an internal IT team
One of the big fears about moving to the cloud is that your internal IT team might suddenly become redundant. Well, this isn't a legitimate concern.
While you might be able to obtain some packages whereby you delegate control to a third party, on the whole internal IT teams stay in place. This is because they are still responsible for managing the cloud server, whether it's updating software or any other maintenance tasks. In fact, instead of constantly being on call to make repairs, they tend to be there to boost performance. This means that they can make much more of a positive impact to businesses.
Myth #4 - Data is more secure when stored locally
There's absolutely no truth to this final myth we are going to look at and particularly after all of the high-profile data breaches (https://www.businessinsider.com/data-hacks-breaches-biggest-of-2018-2018-12?r=US&IR=T), the big providers of cloud computing services are now more careful than ever before. Security is their top priority and while it might be yours as well, let's not forget that they will probably have deeper pockets to fund this.
As such, don’t for an instance think that your data is going to be more secure stored locally. Not only are cloud security systems more likely to keep it secure, but their physical security teams are also more likely to be able to stop any attack of the other variety.
Jetbrains Tailwind css Live Template
Tags: tailwindcss
Published: 2019-03-11 13:56:26

---
title: Jetbrains Tailwind css Live Template
published: true
description: Jetbrains Tailwind css Live Template
tags: tailwindcss
---

![Live template](https://thepracticaldev.s3.amazonaws.com/i/xbt1w1ixkri3wbqnw0i2.png)

Compatible with:
-   IntelliJ IDEA
    
-   WebStorm and PhpStorm
    
-   Android Studio
    
-   PyCharm
    
-   RubyMine
    
-   AppCode
    
-   CLion
    
-   Gogland
    
-   Rider

[Plugin Url](https://plugins.jetbrains.com/plugin/12074-tailwindcss)
[Tailwind Cheat Sheet
](https://alicannklc.github.io/intellij-tailwind-css/)


Happy Coding
When should one choose IQueryable or IEnumerable?
Tags: discuss, csharp, dotnet, programming
Published: 2019-03-11 13:52:34

---
title: When should one choose IQueryable or IEnumerable?
published: true
description: 
tags: discuss, csharp, dotnet, programming
---

First of all: I am sorry for the lack of references in this discussion, I should have saved the links I went through. 

Browsing over the WWW I found some interesting articles about those interfaces, and this subject got my atention because I realised that as a low experienced developer I tend to use only IEnumerable. But after reading through, first it seemed like only IQueryable should be used when querying on external sources of data, which makes sense as the Interface applies filters directly on the source instead of bringing all data to memory. 

But then, I found [this article](http://www.codetunnel.io/should-you-return-iqueryablet-from-your-repositories/) that said IQueryable should not be used because it would break test-ability and a few other reasons. This got me lost in between both of the interfaces, not knowing which and when to use one them, of course I will research in more depth, but first I would like to hear this lovely community opnion. 

So my fellow Dotnet fans, what are your thoughts on this?
Want tips on creating Daily logs using HTML,CSS &JS
Tags: html, javascript, git, discuss
Published: 2019-03-11 13:49:12

---
title: Want tips on creating Daily logs using HTML,CSS &JS
published: true
description: I am trying to create a Daily Logger using HTML, CSS and JS  for myself to log the things which I learned everyday and I will add new logs everyday in a object in JS and push it to GitHub for easy access. So does anyone has a better idea on how I can daily add logs in more easy way then directly editing JS objects and pushing the changes to GitHub? I don't want to use database to store logs.
tags: #html #js #git #discuss
---
Introducing the new kid on the block, React hooks
Tags: javascript, react, discuss
Published: 2019-03-11 13:06:52

---
title: Introducing the new kid on the block, React hooks
published: true
description: React hooks are nice little addition to make it easier to understand how to use React state in components.
tags: javascript, react, discuss
canonical_ur: https://linguinecode.com/post/getting-started-with-react-hooks
cover_image: http://live-linguine-code.pantheonsite.io/wp-content/uploads/2019/03/React-feature-imgs.jpg
---

Article has been moved to: [Getting started with React Hooks](https://linguinecode.com/post/getting-started-with-react-hooks)
How to use Toastr.js notifications in an AngularDart web application
Tags: dart, angular, webdev, javascript
Published: 2019-03-11 11:55:22

In this video we will look at the Toastr notifications jQuery plugin and demonstrate how to use this JavaScript solution in a Dart web application. As part of transitioning into the [AngularDart](https://webdev.dartlang.org/angular) video series, we will bootstrap a sample AngularDart application using the Stagehand scaffolding tool and start from there.

Here's what we will cover in this lesson:

1. Setup a project fast with the **Dart** extension for VS Code
2. Adding the **js** package as a dependency
3. Understanding the structure of an AngularDart project
4. Importing Toastr.js and implementing our interop logic
5. Integrating our interop solution in the AngularDart app

{% youtube xegpncRwqGw %}

→ [**Watch on YouTube**](https://youtu.be/xegpncRwqGw)

## The Solution

Here's the interop file we've implemented:

```dart
// lib/src/interop/toastr.dart
@JS()
library toastr_interop;

import 'package:js/js.dart';
import 'package:js/js_util.dart';

@JS()
external ToastrInterface get toastr;

class ToastrInterface {
  external ToastrNotificationFn get info;
  external ToastrNotificationFn get success;
  external ToastrNotificationFn get error;
  external ToastrNotificationFn get warning;
  external Function get remove;
  external Function get clear;
}

typedef ToastrNotificationFn = Function(String message,
    [String title, dynamic options]);

// Converts a Dart Map object to a native JavaScript object
Object mapToJsObject(Map<String, dynamic> dartMap) {
  var jsObject = newObject();

  dartMap.forEach((name, value) {
    setProperty(jsObject, name, value);
  });

  return jsObject;
}
```

→ [**Get the source code**](https://github.com/graphicbeacon/js-dart-interop-samples/tree/master/toastr)
→ [**Watch on YouTube**](https://youtu.be/xegpncRwqGw)

I hope this was insightful and you learnt something new and interesting today. If you have any questions or general feedback, let me know in the comments down below. _Thanks!_

## Further reading

1. [js package](https://pub.dartlang.org/packages/js)
2. [How to use JavaScript libraries in a Dart web application](https://creativebracket.com/how-to-use-javascript-libraries-in-your-dart-applications/)
3. [Toastr.js notifications library](https://codeseven.github.io/toastr/)

---

## Sharing is caring 🤗

If you enjoyed reading this post, please share this through the various social channels. Also, check out and [**subscribe to my YouTube channel**](https://youtube.com/c/CreativeBracket) (hit the bell icon too) for videos on Dart.

[**Subscribe to my email newsletter**](http://eepurl.com/gipQBX) to download my Free 35-page **Get started with Dart** eBook and to be notified when new content is released.

**Like, share and [follow me](https://twitter.com/creativ_bracket)** 😍 for more content on Dart.