teleren/devto huggingface dataset:
How to add jQuery to Vue
Tags: jquery, vue
Published: 2019-12-27 22:31:05

If you are from a jQuery background, the idea of not being able to use jQuery in your frontend application can be stressing. Fortunately, that is not the case with Vue. Integrating JQuery with Vue is incredibly easy and we can do it in a few simple steps.

Apparently, jQuery has a lot of awesome features you probably want to use.

In this post, I will assume you have very good knowledge of how Vue works.

## Installing jQuery
For npm, jQuery can be installed using the following command:

``` npm i jquery ```

For yarn, install jQuery with the following command:

``` yarn add jquery ```

You can also follow the installation process on (https://www.npmjs.com/package/jquery)

## Importing jQuery into Vue
Using Vue CLI, you should have main.js. Import jQuery using ES6/ES2015.

```
main.js
--------
import $ from 'jquery'
```

Usually, including jQuery look like this

``` var $ = require('jquery') ```

## Importing jQuery into a single Vue component
Mostly, you only need jQuery in a specific component. However, this is considered good practice.

```
Home.vue
--------
import $ from 'jquery'
```

## Conclusion
Finally, we can now install and use jQuery in Vue. I believe using jQuery in your application will probably save a lot of time for you. But, it might have performance issues. So, I recommend using vue packages that solve the same issue.

Moreover, the post on [Vue packages version mismatch](https://anansewaa.com/vue-packages-version-mismatch-error-fix/) might be useful if you have issues with your vue package.
Is Expo Eject a Good Idea?
Tags: react
Published: 2019-12-26 10:21:34


If you created an Expo project and you want a way to add custom native modules, this guide will explain how to use ExpoKit for that purpose.

Normally, Expo apps are written in pure JS and never "drop-down" to the native iOS or Android layer. This is core to the Expo philosophy and its part of what makes Expo fast and powerful to use.

<a href="https://codersera.com/blog/is-expo-eject-a-good-idea/">Is Expo Eject a Good Idea?</a>

However, there are some cases where advanced developers need native capabilities outside of what Expo offers out-of-the-box. The most common situation is when a project requires a specific Native Module which is not supported by React Native Core or the Expo SDK.

In this case, Expo allows you to eject your pure-JS project from the Expo iOS/Android clients, providing you with native projects that can be opened and built with Xcode and Android Studio. Those projects will have dependencies on ExpoKit, so everything you already built will keep working as it did before.
We call this "ejecting" because you still depend on the Expo SDK, but your project no longer lives inside the standard Expo client. You control the native projects, including configuring and building them yourself.
Purpose in Painful Engineering
Published: 2019-12-27 22:04:59

Software engineering and pain go side by side like two peas in a pod. Nonetheless, we continue to see more and more widespread interest and passion in the field. Is this purely masochism, or something deeper? In Viktor Frankl's book, [Man's Search for Meaning](https://www.goodreads.com/book/show/4069.Man_s_Search_for_Meaning), he writes that the meaning of life is to find purpose in your suffering. Our line of work certainly can provide suffering, whether it's due to a painful bug, or a tight deadline, or complexities in process - so, how can we find more purpose in it?

---

## Finding Purpose in Painful Debugging

Most of us have a similar story to tell of how we first experienced purpose in suffering within coding. We've all had the experience of banging our head against the wall trying to debug a particularly convoluted issue, likely over a much longer than ideal course of time, until it clicks. Most of us don't particularly directly enjoy muttering obscenities at our computer screens. That being said, once you get the satisfaction of the end result, the preceding suffering is given purpose. This connection to purpose fuels our efforts the next time we find ourselves at that wall.

## Finding Purpose in Solving Pain for Others

We can find purpose not only in the process, but the product itself. Our code is ultimately used by or for someone. Considerations for the end user's experience directly impact people's lives, both on roll-out and consequent iterative improvement. If developers can empathize with the user based on their own pains of being a user, then they can connect meaning with their own experiences and apply that to their work. This ultimately benefits you as a developer, the product, and the end user. 

## Finding Purpose in Growth Caused by Pain

Our brain works hard to keep us safe from pain. If you put your hand on a hot stove, it is guaranteed that your brain is going to do its best to keep you from touching that stove again - the hotter the stove, the stronger the aversion. This can drive us to grow in preventing ourselves from making the same mistakes twice (I'm looking at you, uncaught exceptions), to help others grow by learning from your own painful lessons, and to push for bigger picture systemic changes. 

---

As individual contributors, we have to work toward connecting our suffering to a sense of purpose, which may not come easily or be readily apparent. As leadership, we should actively reinforce and create a culture of finding purpose in our work. There are plenty of jobs in software engineering with low stress and low pressure to perform. Yet many of us seek the additional challenges of demanding jobs nonetheless. As long as we are able to balance suffering with purpose, and our personal limits with our demands, then we can all find purpose in what we're doing. Not everyone is going to work for a software company whose product is saving the world. Yet we can find purpose in the work we're doing within ourselves, within our teams, within the process along the way, and within the people using our products.
How do you refactor personal projects?
Tags: discuss
Published: 2019-12-27 21:34:44

Perhaps a better question is _do you_ refactor personal projects?

I can see both sides of this. 

Refactoring a personal project to incorporate new functionality is a good way to show off new skills. On the flip side, _learning_ new skills may be a better use of your time. 

Do you ever go back and rework old projects? What do you look for when refactoring?
What do I miss from Slack - Solution
Tags: slack, cli
Published: 2019-12-27 00:14:09

---
title: What do I miss from Slack - Solution
published: true
description: Slack is a great tool, which I use across multiple projects. But it's non-ideal. Probably some lack of functionality is done on purpose. But I miss those parts
tags: slack,cli
---


I like slack. Really. Mostly there is no mess, which I see in Telegram channels. Tree conversation is awesome. I like Slack so much, that even moved all my conversations with students to separate slack team (I'm a teacher, and teach how to use slack properly appeared an extra task =) ).

![Slack bot](https://thepracticaldev.s3.amazonaws.com/i/x8optbp67vi52m6ka3bi.png)


There are a few things I miss:
- long history for Open Source / Dev communities (that's the way to earn money, I appreciate this, ok)
- cli-tools

The last is most important for me. It allows us to use of slack for notifications, for automation with CI and even for dogged reminders (about doing something, like uploading avatars). Two years ago those tasks were not so common for me, so I was opening DevTools in Chrome, play a little with global `TS` variable and used those methods to do what I want. That's fine for 1-2-3 times. 

But later it becomes annoying. Plus it's only for manual things. Not for automation. I discovered an awesome bash script  [slacktee](https://github.com/coursehero/slacktee). It helps a lot. BUT. I need to have an api-token to use it. And you can't get it till you have no permissions (due to limitations from team owner). That's the life of teams leading by paranoics =)

During some time it was possible to sniff that token from a browser in Network tab, but since they were moving to the newest version of API - that key is using on frontend doesn't fit slacktee anymore. 

So I spend some time to create a puppeteer-based wrapper around the Slack UI. Currently, it allows to do just 2 things:

- dump information about users
- send message to channel/user

Both I used for the simple task - enforce people (with annoying messages, no other way found from slack settings) to upload profile images.

Probably not a good idea to use it with `npx`, cause puppeteer takes some time to download. But in my case, I'm using it daily, so install it globally solve this moment. 

And for sure, due to the fact it works from UI perspective (you can use `--debug` option to see all the actions) it not as fast as slacktee, but it solves the problem. Without reversing API.

It's nice if you're interested in such a tool and can give me some feedback. Github repo is here: https://github.com/vvscode/slack-missing-tools.

Feedback, ideas and so on are welcome.

Best Regards.
Angular Responsive Images with Text
Tags: angular, css, typescript
Published: 2019-12-27 21:15:20

Today we are adding a new image component to our re-usable responsive component library. We've named the image component "imagur" and it allows text to be shown on top of the image, while being 100% responsive. 

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




In a folder named Components, create a new component "ng g c Imagur"
In the html type in this markup.

![ngcontent with title](https://thepracticaldev.s3.amazonaws.com/i/dmpjcbe11avp0rgou2jp.PNG)

Change the typescript to this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wmw4hzlc4tv45j41tmnh.PNG)

Here we shorten the selector name and provide a title input field.

Next, we start work on the css for our ImagurComponent.

![imagur css](https://thepracticaldev.s3.amazonaws.com/i/fynu250fbejlcmmgpqhq.PNG)

The ImagurComponent is a grid, with one row 10em in height. Its margin provides a gap of 1em to the right.  The specific text markup was determined by using Chrome's device mode, going through all devices, and tweaking settings to find the optimal values for where the text was to show for each device.

Next we needed to style the image itself to achieve responsive behaviors.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1w3cb619rkk4zylkjcyd.PNG)

Ng-deep was needed for the img CSS, to break Angular's View Encapsulation rules. Note that the text and image were both assigned to the same grid area.

If the image is indeed in the assets folder as the first image shows, we are simply injecting that HTML into our ImagurComponent. Where the CSS takes over in image placement and text positioning. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vnfuuzzxj3wa8nybsjwt.PNG)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rx3deuc12unut6btf3zn.PNG)

Take Away: Using only the HTML 5 grid we are easily able to create a responsive image container that allows text to be overlayed.
Build an async redux-like useStore() hook from scratch
Tags: react, redux, javascript
Published: 2019-12-27 21:13:49

Flux allows us to use global state in our applications, and interact with it using actions. Redux uses strings to denote actions, switch statements to parse the dispatch commands, and is synchronous.

Here is an implementation where we do not need to use strings, or switch, and which is async compatible.

The keys object has properties on it for each variable name in our store, and the actions object has a method for each action.

{% gist https://gist.github.com/marchingband/d9f9f547d61b216931264f3f4a4fec2e %}

We create our store in a separate file like this. The methods on the actions object use a shorthand notation here, each action must return the keys (or an array of keys) that it has mutated, so that the dispatch function knows which listeners to call.

We can also import the emit function to trigger state updates inside our async actions.

{% gist
https://gist.github.com/marchingband/24399502a2fa1022dcf66ca8bbb51c03
%}

createStore.js looks like this. Let me know what you think in the comments. This implementation works well with async actions, using async/await notation in the action objects methods.

The makeKeys function means there are less bugs caused by misspelled strings.

{% gist
https://gist.github.com/marchingband/e6d1706728c81526b7f0a86f39105164
%}
React, Redux app folder structure
Tags: react, redux
Published: 2019-12-27 20:47:08

Hello Guys, I have been searching for a good folder structure for React, Redux apps that is easy to traverse and suitable for large projects. and after some research this what I came up with.

src/
____components/
________component/
____________index.js
____________component.js
____________component.css
____________component.test.js
____________sub-component/
________________index.js
________________sub-component.js
________________sub-component.css
________________sub-component.test.js
____routes/
________route/
____________index.js
____________route.js
____________route.css

____reducers/
________rootReducer.js
________reducer1.js
________reducer2.js

____actions/
________actions.js
________actionCreators.js
App.js
App.css
index.js
index.css



What do you think? and what structure do you use for your react, redux apps?
Learn Svelte
Tags: svelte, javascript, webdev
Published: 2019-12-27 20:40:47

---
title: Learn Svelte
published: true
description: Sharing my initial experience in learning Svelte with a couple of great videos on the topic.
tags: [svelte,javascript,webdev]
canonical_url: https://www.barbarianmeetscoding.com/blog/2019/12/23/discovering-svelte
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1ndayocmls8wg7iob21r.png
series: Learn Svelte
---

*This article was originally published on [Barbarian Meets Coding](https://www.barbarianmeetscoding.com/blog/2019/12/23/discovering-svelte).*

[Svelte](https://svelte.dev/) is a modern web framework that takes a novel approach to building web applications by moving the bulk of its work from runtime to compile-time. Being a compiler-first framework allows Svelte to do some very interesting stuff that is unavailable to other frameworks like disappearing from your application at runtime, or allowing for a component centered development with HTML, JavaScript and CSS coexisting within the same Svelte file in a very web standards friendly fashion.

I've been following [Svelte](https://svelte.dev/)'s progress for quite some time and I finally found some time to tinker with it. This is the beginning of a series of posts where you'll be able to read about my experience and adventures with Svelte starting with a couple of videos and some resources to get you warmed up.

These are two great introductory videos that will both pique your interest, teach you some of the foundations of Svelte and enough of the syntax to get started writing your own projects:

**Rethinking Reactivity** is a great intro to the foundations of Svelte and its raison d'être. It's also a super engaging and fun talk by Svelte's creator and master storyteller [Rich Harris](https://twitter.com/Rich_Harris):

{% youtube AdNJ3fydeao %}

Video número 2 is a great step by step Svelte tutorial with lots of tinkering and playing with the different features in Svelte:

{% youtube ogXETl_I0Dg %}

In the coming future I'll write more articles on my adventures and experience with Svelte as I build an interactive playground for [Wizards Use Vim](https://leanpub.com/wizardsusevim). Until then, you can learn more about Svelte here:

* [Svelte 3: Rethinking Reactivity](https://svelte.dev/blog/svelte-3-rethinking-reactivity)
* [Learn Svelte step by step with this great interactive tutorials on svelte.dev](https://svelte.dev/tutorial/basics)
* [Play around building a small Svelte app in the Svelte playground](https://svelte.dev/repl/hello-world?version=3.16.5) and get inspired by [some of the existing examples](https://svelte.dev/examples#hello-world)
* [svelte.dev](https://svelte.dev/)
* [Sapper, a web application framework built on top of Svelte](https://sapper.svelte.dev/)
My Solutions to Advent of Code 2019
Tags: adventofcode, perl
Published: 2019-12-27 20:38:52

---
title: My Solutions to Advent of Code 2019
published: true
description: I collected all the stars. Some of them by accident.
tags: #adventofcode #perl
---

This year again, I decided to solve the Advent of Code. All my solutions are now public at [GitHub](https://github.com/choroba/aoc19). I used Perl, my native programming language, but hopefully I managed to stay on the readable side.

My solution for [day 18 part 2](https://adventofcode.com/2019/day/18) was accepted, but the program didn't work for one of the examples mentioned in the description, so it's definitely buggy.

To solve [day 22 part 2](https://adventofcode.com/2019/day/22), I first needed to understand a Java solution posted on Reddit, otherwise I would have stayed clueless.

Living in the Central Europe, I haven't managed to get up early enough to get into the main leaderboard. On the other hand, only two solutions (part 2 of days 20 and 24) were submitted more than 24 hours after the publication time.

I enjoyed all the assignments and loved to participate. Having spent hours with some of the solutions, I still can't imagine what kind of graft it must be to prepare the competition. Big thanks to the [organiser](http://was.tl)!
Dynamic Layout parts in Angular
Tags: angular, optimization
Published: 2019-12-27 20:37:23

## The "Problem"

While working on a simple application I wanted to show some content in the title / header bar, but this should be only visible on a specific route.

*header.component.html*:
```html
<div class="header">
  <ng-container *ngIf="!showSuperSelection">{{ title }}</ng-container>
  <!-- this component is only needed in an "/selected-page" - route -->
  <app-your-big-component *ngIf="showSuperSelection">
  </app-your-big-component>
</div>
```

## 1st solution: `*ngIf`

- "just" hide (`*ngIf="showSuperSelection"`, exampled in the problem) the content in the header-bar until the specific route was opened

|Pro's|Con's|
|--------------|-----|
| easy to use, just an `*ngIf` | its "bad" if this content is a bigger component (byte size), which adds a lot of to the first loading time (every byte counts), which is only "ok" if you are building an intranet-application |

## 2nd solution: Service - ng-template - template outlet

- You could create a directive to get `TemplateRef`
- then using a service to save that reference
- then in your target view, get this reference and use it like 
  ```html
  <ng-container *ngIf="templateToShow$ | async as templateRef"
                [ngTemplateOutlet]="templateRef">
  </ng-container>
  ``` 

There you have your dynamic templates / layout parts in your app.


|Pro's|Con's|
|--------------|-----|
| now this template would be only visible when you need it, and also not adding additional bytes to load | you would've to do it for every part you need |


## My solution: :rocket: <br /> `npm install @gewd/ng-utils -S` 

Building up on the 2nd's solution, I kinda wanted to have it a bit more dynamic, so I refacted it to be used on a ID per portal/source.

```ts
import { DynamicPortalModule } from '@gewd/ng-utils/dynamic-portal';

@NgModule({
  imports: [
    // ...
    DynamicPortalModule
  ]
})
```

*header.component.html*:
```html
<div class="header">
  <dynamic-portal key="headerSelection" class="your-style">
    {{ title }}
  </dynamic-portal>
</div>
```

*selected-page.component.html*: which is a lazy-loaded route
```html
<div class="stuff">
  Much stuff, details, you name it :-)
</div>

<ng-template dynamicPortalSource="headerSelection">
   <app-your-big-component></app-your-big-component>
</ng-template>
```

[> Demo <](https://gewd-packages-demo.netlify.com/) -> Open the `Dynamic Portal Component` Part

|Pro's|Con's|
|--------------|-----|
| portal's / portal-sources can be placed anywhere | you'd need to use this package or copy it :grin: |


{% github negue/gewd no-readme %}

Any ideas / issues / suggestions, write here or open an issue :)
Lasers and Asteroids, What Else? - Advent Of Code 2019 in javascript - Day 10
Tags: challenge, adventofcode, javascript, node
Published: 2019-12-27 20:26:39

---
title: Lasers and Asteroids, What Else? - Advent Of Code 2019 in javascript - Day 10
published: true
description: JavaScript walkthrough - Day 10 of Advent of Code 2019 (programming challenge solution)
tags: challenge, AdventOfCode, javascript, node
series: Advent of Code 2019 in Javascript
---

Wow I've made it to day 10, let me know how far you've come so far!

{% youtube _j4bQ5jlZAE %}
Structures and functions in C
Tags: c, functions, pointers, beginners
Published: 2019-12-27 20:15:59

---
title: Structures and functions in C
published: true
description: Working with pointers and functions in the C programming language
tags: C, functions, pointers, beginners
series: Basics of the C programming language
---

####Structures as arguments to functions

To pass a structure into a function, use the keyword struct, the name of the structure, and the name of the variable you wish to use inside the function. The members of the structure are then available using dot notation inside the function.

```c
struct Family {
  char name[20];
  int age;
  char father[20];
  char mother[20];
};

// use a function to compare two family members and check if they're siblings
bool siblings(struct Family member1, struct Family member2) {
  // if they have the same mother (i.e. the names are equal), then return true
  if(strcmp(member1.mother, member2.mother) == 0)
  {
    return true;
  }
  else
  {
    return false;
  }
}
```

####Pointers to structures as function arguments

It is better to use pointers as function arguments, as mentioned before, to avoid the computational load and memory space of having to copy all the data that is being passed in (because C passes by reference). With pointers, only the address is copied, so computational and memory load are minimal.

```c
bool siblings(struct Family *pointerToMember1, struct Family *pointerToMember2)
{
  if(strcmp(pointerToMember1->mother, pointerToMember2->mother) == 0)
  {
    return true;
  }
  else
  {
    return false;
  }
}

// Alternative: don't allow the members of struct to be changed by the function
// use the const modifier (in front of the pointer) if you don't want to allow changes to
// be made to the members of the struct
bool siblings(Family const *pointerToMember1, Family const *pointerToMember2)
{
  if(strcmp(pointerToMember1->mother, pointerToMember2->mother) == 0)
  {
    return true;
  }
  else
  {
    return false;
  }
}

// Another alternative: don't allow the pointer address to change
// this is less useful because it is a copy of the address (passed by value),
// but if you wanted to, put the asterisk in front of the const keyword as below
bool sibling(Family *const pointerToMember1, Family *const pointerToMember2)
{
  // ... your code
}
```

The ability to return a structure from a function is very valuable because it allows you to return more than 1 piece of data. Just remember to take care when using pointers because the data in the original structure can be permanently changed by the function. To prevent this, use the const keyword in front of the pointer as in the second example in the code above `Family const *pointerToMember1`.