teleren/devto huggingface dataset:
We reduced our vendor.js from 210kb to 16kb in about five minutes of work and ten lines of code
Tags: javascript, webdev, webperf, webpack
Published: 2018-12-20 18:55:28

Even though we strive for a minimal JavaScript load on [dev.to](/), we had gotten lazy with our optimization. Our `vendor.js` file, which includes all the code from our external libraries, had ballooned to 210kb. The total size of the JavaScript we deliver had gotten up to about 250-300kb depending on context.

We load all JavaScript asynchronously and 210kb for this file is still good enough by most standards. So the user experience was not affected greatly, but it was silly to let this continue when it didn't need to be this way.

I decided to finally devote some brain power to the problem and the fixes wound up being pretty straightforward. I had personally hesitated to look into this because I was a bit unsure that it was the right approach. But after having done this, I feel pretty confident it was.

The one neat trick was loading these libraries using a technique called "Dynamic Import".

```javascript
// before
import { bark } from "./dog";
bark("Hello World");

// after
import("./dog").then(({ bark }) => {
  bark("Hello World");
});
```

This and other great techniques are outlined wonderfully in this post:

{% link https://dev.to/goenning/how-we-reduced-our-initial-jscss-size-by-67-3ac0 %}

By doing this, a few seldom-used libraries will only get called when the user triggers an action in our code. Our `vendor.js` is down to about 16kb and our total JavaScript impact is about 65-75kb initially, and can creep up depending on context. I'm confident we could get that initial load under 25kb, but I think it would take longer than five minutes. As mentioned earlier JavaScript is deferred, so it never acts as a blocking resource.

This technique was already in place in one area of the code, but we had not been implementing it in these important big-win environments. By moving a few expensive libraries to this technique and also establishing the pattern more within our codebase, I believe we have set ourselves up to offer the most performant experience and avoid future creeps like this.

[Here is the PR](https://github.com/thepracticaldev/dev.to/pull/1379) where the changes were implemented.

Happy coding.
React Day Berlin 2018 - The Lonely and Dark Road to Styling in React -- Sara Vieira
Tags: react, cssinjs
Published: 2018-12-20 18:42:23

---
title: React Day Berlin 2018 - The Lonely and Dark Road to Styling in React -- Sara Vieira
published: true
description: Notes for Sara Vieira's "The Lonely and Dark Road to Styling in React" talk at React Day Berlin 2018
series: Conference Talk Notes
tags: React, CSS-in-JS
---
This is my second post in the talk notes series. You can check out the first one [here](https://dev.to/cjthedev/clojure-conj-2018---maybe-not----rich-hickey-1196).

## CSS is hard

## Link tags

Blocks rendering, only ship the CSS you need i.e. critical CSS

## BEM ([Block Element Modifier](http://getbem.com/))

`.block__element—modifier`

Pros

- Easy to setup
- Framework/Library agnostic
- Fixes some specificity issue
- Rigid Structure

Cons

- Naming is hard
- Need to memorise the rules and strictly follow them

## Preprocessors

Pros

- Nesting
- Variables
- SSR just works

Cons

- Over Nesting
- More dependencies
- Makes it hard to author library → to modify, you need to run the preprocessor
- Not optimised for a component based workflow
- No dynamic styles based on runtime values

## CSS Modules

Write normal CSS with classes and use them inside your components. In the end these will be replaced by random class names.

Use it via [PostCss](https://postcss.org/) (Babel for CSS)

Pros

- Can use all new CSS features
- Autoprefixes CSS
- SSR just works
- More component based and maintainable

Cons

- Unreadable class names
- More dependencies
- Needs to be paired with a pre-processor for variable support
- Global class names can be abused

## CSS-in-JS ([Styled Components](https://www.styled-components.com/))

Just react components. No SSR support out of the box which can be mitigated by using Razzle (It will extract all the styles and give you style tags to insert into the HTML)

Pros

- Dynamic styles (based on state and prop of the component)
- Theming is super easy using the `ThemeProvider` component, It will pass the theme as a `prop` to the child component.
- Can still use the cascade but the whole point is that the styles for your component are only for that component.
- No more specificity problems.
- Autoprefixes everything
- No need to worry about naming things

Cons

- Needs to change the way you think about CSS
- Another thing to learn across the team
- The library you are using might only support object based CSS
- SSR is hard to implement yourself

There is nor Right / Wrong answer. Context / use-case matters when choosing a solution. For example: For prototyping you might want to use [tachyons](https://tachyons.io/) while if you need scalability you would probably go for something different or make something over it to avoid repeating classnames.

[Link to the original Talk](https://www.youtube.com/watch?v=M3AceCsW0oM)

If you liked this do check out other posts in the series :)
Breaking Out
Tags: codenewbie, developer, entrepreneur, longtailedtags
Published: 2018-12-20 18:37:36

---
title: Breaking Out
published: true
description: Breaking out of the box!
tags: codeNewbie, developer, entrepreneur, long tailed tags?   
---
<br>
<h3>Hey breaking out here. New to the platform. New to coding. Looking for a job, or more clients whichever comes first. First post. What should I end up doing first on this platform?</h3>
Star Wars Hyperjump
Tags: css
Published: 2018-12-20 17:28:15

---
title: Star Wars Hyperjump
published: true
description: Another spam on CSS animation
tags: 
- css
---


Recreating the hyperjump effect from Star Wars using `translateX`.


``` css
@keyframes hyperjump {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  1% {
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(-100vw);
  }
```

{% codepen https://codepen.io/toomuchome/pen/jXVowY %}

P/S: Can anyone find a video clip for the hyperjump effect? I can't seem to find it on youtube or anywhere else. 
P/P/S: To leaky and jiji, I didn't do this during working hours. I work hard at work. 🌝

Credits:
Stars from http://pluspng.com/png-141250.html
I drew the millennium falcon from http://elrumordelaluz.github.io/Pixelator/
Showdev: We are building an online meeting app - Collabify 🎉🎦🖼🎭
Tags: showdev, webdev, discuss, javascript
Published: 2018-12-20 17:01:15

---
title: Showdev: We are building an online meeting app - Collabify 🎉🎦🖼🎭
published: true
description: Collabify - An online meeting app that runs in your browser. Built by two students.
tags: #showdev, #webdev, #discuss, #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/56h0lbqv99cgswamyahc.PNG
---

Hello Dev.to community!

As the title says we are building a little meeting app that we call [Collabify](https://collabify.app). Collabify gives you voice, webcam and screensharing in the browser with no downloads needed.

**Why?**
It all started as a project during a course in university where myself and Alexander Lööf got the opportunity to try and build whatever we wanted, with whatever technology we wanted to learn. So we figured - ***Let's build a meeting app, that be fun right?*** 🤷‍♂️.

**Stack**
React, TypeScript, MobX, Styled Components, Apollo GraphQL, WebRTC, Socket.IO, Node and all that kind of good stuff! 🍦🍩🍰🍬

**How did it go?**
It was a challenge! 😵☕ We were often deep down in documentation figuring out webRTC or [insert random from mentioned tech stack]. Sometimes feeling like 🐱‍👤's and other times like 🤯 || 🤬 || 🐒. You can take a look at the app by clicking the link below.

**[https://collabify.app](https://collabify.app)**

**What's next?**
We will keep working on this app while we are still at university. We have some ideas we want to try out and we dream of turning this into a little SaaS platform. If anything it's a fun project that have taught us alot about web development.

***Tell us what you think! 💖***
OmniSharp and VSCode 1.30.1
Tags: c, visualstudiocode, vscode
Published: 2021-01-11 00:52:48

---
title: OmniSharp and VSCode 1.30.1
published: true
date: 2018-12-20 16:40:33 UTC
tags: C,VisualStudioCode,vscode
canonical_url: https://jamienordmeyer.net/2018/12/20/omnisharp-and-vscode-1-30-1/
---

I’m not seeing any hits on the Googles yet for this, but yesterday I ran into an issue where my OmniSharp (the official C# plugin for Visual Studio Code) extension was refusing to load properly. I uninstalled the extension, restarted VSCode, then reinstalled it, and restarted VSCode again. But no joy. When VSCode launches with the extension enabled, the OmniSharp Log simply says “Access is denied”.

I managed to get it working today. I had to uninstall the extension as I had yesterday. However, I ALSO had to physically remove the extension folder, which on Windows, is located in C:\Users\{USER}\.vscode\extensions\ms-vscode.csharp-1.17.1. After deleting the ms-vscode-csharp-1.17.1 folder, then reinstalling the OmniSharp extension, everything is working again.

It seems as though something got corrupted in the original installation of the extension. Unfortunately, I have no logs. There’s nothing in the Windows Event Logs, and it didn’t occur to me until I’d fixed the issue that I should have opened the Chrome Developer tools in VSCode. Hopefully if someone else stumbles across this situation, they can open the Developer tools and give a little more insight into the issue.
What's your favorite Vim trick?
Tags: vim, editor, terminal, discuss
Published: 2018-12-20 16:14:25

---
title: What's your favorite Vim trick?
canonical_url: https://updates.jeffkreeftmeijer.com/2018/12/20/whats-your-favorite-vim-trick.html
tags: #vim #editor #terminal, #discuss
published: true
---
What's that Vim trick that blew your mind the first time you learned about it?  A feature that has a big (or small) impact on your workflow, or just a command you use a lot. Anything goes! 🤯

I'll start with my go-to trick: I usually only notice a match should be replaced after searching for it with `/` (`/foo`). After learning that substitutions with empty search patterns (`%:s//bar/`) replace the previously found matches, I've never had to re-type a pattern again.
Using others to learn programming 
Tags: tips, dlang
Published: 2018-12-20 15:23:52

---
title: Using others to learn programming 
published: true
description: Learning a language in development provide important insight. 
tags: tips, dlang 
---

I have been working with and following the development of D throughout my time programming. I would get class assignments and I'd do them twice, once in Java as expected and once in D. Not every assignment, but it happened.

D was still pretty young and has had a lot of growth since. I don't think D can be used for this anymore, but learning the design choices made by the language has probably been the most beneficial to my programming knowledge. 

Jai, the language by Johnathon Blow has had it development and design choices enshrined in video. This may not be the best approach because the language isn't available to use and if it was the version shown in a video would be old and not the version to use. 

With D I've gotten to see the challenges of low level support with high level sugar. The battle of language feature or library functionality. We can create delegates 5 ways till Sunday, should we add the way C# does it? Yes, yes we should.

I think D is a great language and that is the reason I keep going back to the forums, but I can't help but appreciate the value I got out of being there for its growth.
What books do you want to read next year?
Tags: discuss, career, books
Published: 2018-12-20 15:11:49

---
title: What books do you want to read next year?
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3ppj5ehsv2n3dz3z8pom.jpg
tags: discuss, career, books
---

Hey DEVers! As we go into 2019, I am reviewing my to-read list. 

Here are a few of my top picks that I am going to hop into soon:

- [The Mythical Man-Month](https://www.amazon.com/Mythical-Man-Month-Software-Engineering-Anniversary/dp/0201835959) - Frederick P. Brooks Jr.
- [The Sense of Style](https://www.amazon.com/Sense-Style-Thinking-Persons-Writing/dp/0143127799) - Steven Pinker
- [Build an A-Team](https://www.amazon.com/dp/1633693643/?coliid=I2JXIG80FWNDW9&colid=2LLLIOPZXIG8Q&psc=0&ref_=lv_ov_lig_dp_it) - Whitney Johnson

**What books do you want to read next year?**
Encrypt your disks
Tags: linux, encryption, ubuntu
Published: 2019-07-04 10:56:33

---
title: Encrypt your disks
published: true
tags: linux,encryption,ubuntu
---

If you have a laptop, you should _always_ encrypt your harddisk. If you have not already done, make this your new year’s resolution - better yet, do it today.

Loosing your laptop sucks, but it sucks a lot more if you have to fear if someone else somehow gets access to all your data. Even if you have a login-password and have all your data in the cloud, you data could still be a at rest in the temporary folder. And a potential thief could access all your ‘saved passwords’.

Microsoft Windows and Apple’s OS X and most Linux distribution like Ubuntu make disk encryption very easy - it’s hopefully the default on any new laptop. If you want to encrypt your disk after installation, I’d refer to the documentation of your operation system: _[Windows](https://www.howtogeek.com/234826/how-to-enable-full-disk-encryption-on-windows-10/)_, _[OS X](https://support.apple.com/en-us/HT204837)_, search the _[web](https://askubuntu.com/questions/366749/enable-disk-encryption-after-installation)_ or ask a colleague or family-member.

On the operation system I am using, [Kubuntu Linux](https://kubuntu.org), disk encryption can be chosen during installation and contrary to Linux’ reputation that’s very easy. My laptop has an SSD as main-disk containing the root dir, and an additional disk of 2TB for all other data that doesn’t fit on my SSD. Of course it’s encrypted too.At first, my configuration required me to enter a passphrase twice, once for the SSD and a second time for the additional disk. Bit of a nuisance. Thanks to this wonderful howto, I have a set-up that’s hardly less secury, but easier to use: [HOWTO: Automatically Unlock LUKS Encrypted Drives With A Keyfile](https://www.howtoforge.com/automatically-unlock-luks-encrypted-drives-with-a-keyfile)

The encryption key is stored on my main SSD, so I only have to enter the passphrase for that SSD. After that, the key that’s stored on the SSD is used to decrypt the second disk. As mentioned in the howto, if people get access to your root dir all is lost anyway.
What Is An Interface?
Tags: csharp, beginners
Published: 2018-12-20 14:11:44

---
title: What Is An Interface?
published: true
description: Interfaces are definitely part of the harder-to-understand concepts. I tried to explain them and I hope it helps.
tags: #csharp, #webdev, #beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/s4mxlktb885m6ut8cbqy.jpeg
---

If you plan on doing any back-end development, it's going to be important you know about interfaces. At first they seem kind of weird, but once you understand what they are you'll become more powerful than you've ever been.

You'll see interfaces a lot in C# because it doesn't let you inherit multiple classes. That's where interfaces come in. They let you implement the same methods and variables across different classes. An interface is kind of like a list of things that your class *has* to have.

When you use an interface on your classes, you have to write the implementation of the methods in your class. So you're probably wondering why you should even bother with interfaces if you still have to write separate implementation for everything.

It really comes down to the fact that you can't inherit multiple classes in C#. If you only need to inherit one class, you could use something like an abstract class. The thing that makes interfaces so powerful is the fact you can have multiple interfaces on the same class. That way when your code is compiling it knows what to expect at run-time.

Let me try using an example of an interface. Say you have a Chef class. It should have a method called Cook that can be used to cook any class of food that implements the ICookable interface. The Chef class shouldn't have a CookItalian, CookThai, or Cook(X) method for every kind of class that has the same basic operations.

Another thing that most people get confused about with interfaces is if they should be implemented by more than one class. Some of you might be saying that's not true, but hear me out. There's been a weird push to decouple every bit of code you possibly can and we do that by using interfaces.

If you go through some code, I bet you'll find that a lot of classes are only implementing one interface and none of the interfaces are the same. Have you thought about why that is? If you only have one class using a set of methods, why would you need a separate interface to do that?

For testing and dependency injection! That's why we use interfaces the way we do. It's not necessarily the "right" way to use them but it gets the job done. Interfaces really make testing easy because you can mock up stuff without needing to get rid of a lot of class dependencies. As for dependency injection, it's used to control which implementation of an interface should be used.

Interfaces are a little obscure until you work with them for a while and even then they're still weird. I just hope this helped bring you a little clarity about what they are and why we use them.

<hr>

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Need help/tips on hosting a codeigniter application on google cloud platform
Tags: help, cloud, php, mysql
Published: 2018-12-20 14:00:00

As the title suggests, I need help & tips on hosting a CodeIgniter application on Google Cloud Platform. Using app engine and PHP 7. 

## Current pain points
- Unable to connect to the database

- Handling file uploads (to cloud storage I suppose, but from within the Codeigniter app)

- Accessing assets ~ currently using `base_url('path/to/asset')` and this is not working. The app deploys successfully but I cannot access my CSS/JS 

- Where do static assets go? 

## Folder structure
```root 
  - public
    - assets
     - css
     - js
    - uploads (uploads go here)
     - images
     - thumbnails

  - ci
    - application
    - system
```

Hopefully this helps.

## Another pain point
What is the host name for the database to be used in PHP?
WP Custom REST API Generator Open-Source Contribution for WordPress Plugin Directory
Tags: wordpress, webdev, beginners, discuss
Published: 2018-12-20 13:20:33

---
title: WP Custom REST API Generator Open-Source Contribution for WordPress Plugin Directory
published: true
description: WP Custom REST API Generator WordPress Plugin as a Open-Source Contribution for the WordPress community
canonical_url: https://wordpress.org/plugins/wp-custom-rest-api-generator/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pwytup8x4nf9fn5u01p4.png
tags: wordpress, webdev, beginners, discuss 
---

Hey folk! 🙌

I feel humbled to share that my first plugin contribution has been approved for WordPress Plugin Directory, which has made possible by Centangle Interactive, that not only my employer agreed but encouraged and fully supported my time on this open-source contribution.

You are more than welcome for your suggestions. Thanks! 😇
https://wordpress.org/plugins/wp-custom-rest-api-generator/
SQL Clause is coming to town!
Tags: sql, webdev, humour, holidays
Published: 2018-12-20 11:14:39

---
title: SQL Clause is coming to town!
published: true
description: He's making a table, he's sorting it twice.
tags: SQL, WebDev, Humour, Holidays
cover_image: https://thepracticaldev.s3.amazonaws.com/i/id5cp42yxns4p9bgiosc.jpeg
---

Wishing everyone in the Dev Community Happy Holidays! 

<img src="https://thepracticaldev.s3.amazonaws.com/i/id5cp42yxns4p9bgiosc.jpeg"></img>

Look forward to contributing and reading lots more great articles next year!

Eat, Drink & Be Merry!

Chris
Generate Project Logo with Google Fonts
Tags: javascript, opensource, react
Published: 2018-12-20 10:37:00

---
title: Generate Project Logo with Google Fonts
published: true
description: 
tags: 
    - javascript
    - opensource
    - react
---

### Motivation

Every time I want to make a logo for my project, I love using [Google Fonts](https://fonts.google.com), and select a font, download the font, open Sketch.app, create a text field using that font, type my project's name, and finally export it to png. 

Here is some crafts I'd made, for example:

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

https://github.com/djyde/rehux

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

https://github.com/djyde/serlina

## Picas

So today I build [Picas](https://picas.now.sh), which helps you generate these kind of logo.

![](https://ws1.sinaimg.cn/large/006tNbRwly1fydc8lgsgrj31kw0hk0uc.jpg)

### Automatically load Google Web Fonts

Just go [Google Fonts](https://fonts.google.com) to find your favorite font name. Tell Picas the font name and it will automatically generate the logo with this font.

### Retina friendly

For retina friendly, the image is 2x large. 

Hope to see the logos you create with Picas!

### Links

- https://github.com/djyde/Picas
- https://picas.now.sh
Establishing the correct forward facing direction for a 3D model
Tags: gamedev
Published: 2018-12-20 10:11:12

---
title: Establishing the correct forward facing direction for a 3D model
published: true
description: Sharing a lesson learned regarding 3D model orientations while making a 3D game for the first time.
tags: gamedev
canonical_url: https://webdva.github.io/establishing-the-correct-forward-facing-direction-for-a-3d-model/
---

*I'm sharing a [lesson learned](https://webdva.github.io/establishing-the-correct-forward-facing-direction-for-a-3d-model/) while making a 3D game for the first time.*

Unlike a 2D sprite in a 2D environment, a 3D model in a 3D environment has an orientation which includes what can be called a forward facing direction.

In the picture below, the mesh's forward facing direction is incorrect as the character front of the mesh does not face the intended direction.

![Undesired mesh orientation](https://thepracticaldev.s3.amazonaws.com/i/0ouy6yy0kvlo71zfwcw6.PNG "Mesh facing the wrong direction")

The next picture shows the correct direction for the mesh to have for its forward facing direction with the back of the 3D character facing the camera.

![Desired mesh orientation](https://thepracticaldev.s3.amazonaws.com/i/4mjvl8w42y2ghjg801q1.PNG "The correct direction to face in")

The following guidance reveals the correct procedure for establishing a correct forward facing direction for a 3D mesh, specifically for the Babylon.js game development framework.

# Correct procedure in the Blender 3D modeling utility

The axis that a 3D model must face in so that it can have the correct forward facing direction in an external application is the y-axis and it must be in the positive direction of the y-axis.

![Correct orientation in Blender](https://thepracticaldev.s3.amazonaws.com/i/xtn59nl8doj00ojqyxuz.PNG "Mesh facing the front direction")

Location, rotation, and scale transformations are to be applied for exportation to the Babylon.js application.