teleren/devto huggingface dataset:
How to split a string in Handlebars template
Tags: shopify, handlebars, html, webdev
Published: 2020-11-25 11:51:40

Sometimes Shopify themes will use Handlebars for components like the Shopify predictive search or the ajax cart. Handlebars compiles templates into JavaScript functions, and makes the template execution faster.

So for example you could see in a theme a snippet called `predictive-template.liquid`, which loops through the products returned by the search and outputs html including their title, price, an image etc.

This is what a Handlebars template will look like - I got this from a paid Shopify theme I was adding custom functionality to today:

```
<div>
    {% raw %}
      {{#if products}}
        <div data-type-products>
          <div class="grid grid--uniform">
            {{#products}} 
          <div class="grid-product__meta">
            <div">{{title}}</div>
          </div>
          {{#if image }}
           <img class="image-fit lazyload"
             data-src="{{image}}"
             data-widths="[180, 360, 540, 720]"
             data-sizes="auto">
          {{/if}}
         </div>
     </div>
{% endraw %}
</div>
```

Variables like title or image are returned from the get request to the endpoint `search/suggest.json`, which is made in a JavaScript file like `theme.js`.

What I wanted to do today was manipulate the product title string to remove the first 10 letters. In order to do that in Handlebars, I created a helper, which I then added to the JavaScript file that was handling the template compilation. The documentation on how to use registerHelper in Handlebars is [here](https://handlebarsjs.com/api-reference/runtime.html#handlebars-registerhelper-name-helper)
This is my code:

```
Handlebars.registerHelper('sliceTitle', function(passedString) {
  var theString = passedString.substring(10,100);
    return new Handlebars.SafeString(theString)
});
```

Handlebars.SafeString(string) is a built in helper that prevents string from being escaped when the template is rendered. 
Finally, I modified the Handlebars template to use the helper just created.

```
<div class="grid-product__meta">
  <div">{{sliceTitle title}}</div>
</div>
```
And that's it, this is how I created my custom Handlebars helper to manipulate the results returned from the predictive search and outputted using a Handlebars template.
What is React Native?
Tags: top, tutorial, reactnative, react
Published: 2020-11-25 11:30:28

>**React Native** is a framework for building apps that work on both Android and iOS. It allows you to create real native apps using **JavaScript** and **React**. This differs from frameworks like Cordova, where you use HTML to build the UI, which will then just be displayed within the device’s integrated mobile browser (WebView). React Native has built-in components which are compiled to native UI components, while your JavaScript code is executed through a virtual machine. This makes React Native more performant than Cordova.

Another advantage of React Native is its ability to access native device features. There are many plugins that you can use to access native device features, such as the camera and various device sensors. If you’re in need of a platform-specific feature that hasn’t been implemented yet, you can also build your own native modules — although that will require you to have considerable knowledge of the native platform you want to support (Java or Kotlin for Android, and Objective C or Swift for iOS).

<a href="https://hostingblackfridaydeals.com/">Best Web Hosting Black Friday Deals</a>

>If you’re coming here and you’re new to React, you might be wondering what it is. React is a JavaScript library for the Web for building user interfaces. If you’re familiar with MVC, it’s basically the View in MVC. React’s main purpose is to allow developers to build reusable UI components. Examples of these components include buttons, sliders, and cards. React Native took the idea of building reusable UI components and brought it into mobile app development.

**Know More on SitePoint**
How Does Create React App Work?
Tags: top, react, app, tutorial
Published: 2020-11-25 11:24:42

Create React App is a standalone tool that can be run using either npm or Yarn.

You can generate and run a new project using npm just with a couple of commands:
```
npx create-react-app new-app
cd new-app
npm start
```
If you prefer Yarn, you can do it like this:
```
yarn create react-app new-app
cd new app
yarn start
```
Create React App will set up the following project structure:
```
new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock
```
It will also add a `react-scripts` package to your project that will contain all of the configurations and build scripts. In other words, your project depends on `react-scripts`, not on `create-react-app` itself. Once the installation is complete, you can fire up the dev server and start working on your project.

Read Full Article from SitePoint.
Must Look At: <a href="https://hostingblackfridaydeals.com/">Best Web Hosting Black Friday Deals 2021</a>
DIV that is only visible on hover - HTML and CSS
Tags: div, css, html, onhover
Published: 2020-11-25 11:23:47

DIV only visible on hover is made with HTML and CSS. They are usually used to show/make a DIV visible on hover. When a div becomes visible on hover, it gives your site a nice look.
<a href="https://codewithbishal.com/post-5959">View it on our website</a>

At first, on our webpage, there is the overview of our blog then there is the example of DIV only visible on hover . When you click on view code after visiting our website the whole code will appear, there is a also a button to copy the codes (HTML and CSS).

You can view and copy the source code files through the link given below. <a href="https://codewithbishal.com/post-5959">View and Copy Source Code</a>
Wednesday Links - Edition 2020-11-25

Tags: jvm, java, microservices, kotlin
Published: 2020-11-25 11:22:15

Moore's law (4 min) 📈
https://256.nurkiewicz.com/22

The macro problem with microservices (11 min read) 🔥
https://stackoverflow.blog/2020/11/23/the-macro-problem-with-microservices

If All You Have Is a Database, Everything Looks Like a Nail (10 min read) 🔨
https://pathelland.substack.com/p/if-all-you-have-is-a-database-everything

Good names are skin-deep (6 min read) ⚡
https://blog.ploeh.dk/2020/11/23/good-names-are-skin-deep

Programming Language Evolution (5 min read) 🦋
https://elizarov.medium.com/programming-language-evolution-ab7d7d2b0d0b

A quick look at Project Loom (6 min read) 🧵
https://dev.to/piotrekst/let-s-take-a-quick-look-at-project-loom-1d21

What We Know about Java 16 and 17 So Far (5 min read) 💭
https://www.infoq.com/news/2020/11/java16-so-far

Most commonly available JDKs (2 min read) 🏪
https://blog.frankel.ch/common-jdks/

Container orchestration tools explained (13 min read) 🎺
https://dev.to/sarmadsaleem/container-orchestration-tools-explained-1c4i

Graphics for JVM (5 min read) 🖼️
https://tonsky.me/blog/skija

In-browser transcoding of video files with FFmpeg and WebAssembly (6 min read) 📹
https://blog.scottlogic.com/2020/11/23/ffmpeg-webassembly

Spring Native for GraalVM 0.8.3 available now (2 min read) 🏆
https://spring.io/blog/2020/11/23/spring-native-for-graalvm-0-8-3-available-now

Validation in Kotlin: Valiktor (2 min read) ✅
https://www.mscharhag.com/kotlin/validation-valiktor
Is learning maven essential for Java developers?
Tags: java, discuss, maven
Published: 2020-11-25 11:19:36

I am wondering if maven and XML are essential to become a good java developer. I don't really like maven and prefer Gradle over it. 

I still see maven being used heavily. For some of the examples, I have seen maven used in open-source projects like quarkus(Quarkus Gradle support is considered preview) and many others.

Even though while writing this question, it seems like Maven will be good to learn. I am still wondering what you fellas use and prefer. I personally find Gradle much more readable.

I wanted to know what others think about this? and whether someone uses Gradle for the production backend (I know it's used for android)? and if maven is must learn?
Java vs Python
Tags: javascript, java, codenewbie, codequality
Published: 2020-11-25 11:19:33

Originally Java was developed in 1995 by James Gosling at Sun Microsystems whereas Python was released in 1991 & created by Guido van Rossum.

Few Comparison between Java & Python –

 Java was released in 1995 whereas python in 1991

 Java is faster than python as Python determines the type of the variable at run time which is a slow process

 Java has a framework like spring, hibernate & python has Django, flask framework which concludes that python has fewer frameworks than Java

 Java syntax is complex than python as it has curly braces & more libraries

 Python database layer is weaker than Java (JDBC) as it is rarely used in enterprises

 Java Database Connectivity (JDBC) is the most popular database & widely used in enterprises

 Machine Libraries for Java are DL4J - Eclipse DeepLearning4j, JavaML, Mahout, Neuroph, Rapidminer, Weka, JSTAT, ELKI, Stanford CoreNLP

 Machine Libraries for python are Numpy, scipy, scikit (learning), theano, TensorFlow, kesae, PyTorch, pandas, matplotlib

Conclusion – Both Java and python are best at their qualities. It’s all about the perception & usage an individual has for language.
Hope this blog has added value to your knowledge.
RGB565 轉 RGB888
Tags: maixpy, python, k210
Published: 2020-11-25 10:55:47

在使用 MaixPy 時, 攝影機的格式通常會設為 RGB565, 這個模式會用 5+6+5 共 16 個 bits 表示顏色：

```
R:5   G:6   B:5
←高位元   低位元→
```

MaixPy 中的 image 物件可以使用 to_bytes() 取得內部使用的 bytesarray 物件 (和 [OpenMV 中的 bytearray()](https://docs.openmv.io/library/omv.image.html#image.image.bytearray) 類似), 即可存取個別像素的 RGB565 顏色值。如果想從 bytearray 中更改像素值, 每一個像素值就是 2 個位元組, 高位元組在前, 所以如果想要取得影像中最開頭的像素的 RGB 值, 可以這樣做：

```python
img = sensor.snapshot()
bi = img.to_bytes()
r5 = (bi[0] & 0xF8) >> 3
g6 = ((bi[0] & 0x07) << 3) | ((bi[1] & 0xE0)>>5)
b5 = bi[1] & 0x1F
```

即可取得以 5、6、5 個 bits 個別表示的 RGB 值。

如果想將這樣的 RGB565 顏色值轉換成 RGB 各用 8 個 bits 表示的 RGB888 格式, 可以這樣做：

```python
r8 = r5 << 3
g8 = g6 << 2
b8 = b5 << 3
```

這是單純將 r5、b5 從 0~31 的範圍轉換到 0~255 範圍、g6 從 0~63 的範圍轉換到 0~255 範圍的快速算法。不過如果只是這樣簡單的轉換, 會遇到一個問題, 以白色來舉例, RGB565 的白色是：

```python
0x11111 111111 11111
```

用上述方式轉換成 RGB888 會變成：

```
R8: 0b11111000
G8: 0b11111100
B8: 0b11111000
```

你可以發現這不是真正的白色, 在 [ARM 開發者網站](https://developer.arm.com/documentation/den0018/a/NEON-Code-Examples-with-Optimization/Converting-color-depth/Converting-from-RGB565-to-RGB888) 上建議我們在轉換後的數值尾端填上高位處的 bits, 例如：


```python
r8 = (r5 << 3) | (r5 >> 2)
g8 = (g6 << 2) | (g6 >> 4)
b8 = (b5 << 3) | (b5 >> 2)
```

這樣的作法可以讓接近上限的 RGB565 值在轉換成 RGB888 時用高位元來補償低位元, 避免發生顏色的損失。
Black Friday 🔥 Namecheap Deals
Tags: webdev, hosting, cloud, domain
Published: 2020-11-25 10:53:18

Hey fellow developers!

# Introduction

With black friday around the corner, Namecheap is now having some amazing black friday deals.

Personally I have been using Namecheap for quite a while. After using service like godaddy, vodien and more and having encountered many issues, Namecheap is the domain provider that has been the most flexible and reliable.

# Deals

To view all deals you can go here:

https://www.namecheap.com/domain-web-hosting-ssl-deals/black-friday

## Domains

**.net**
54% off ($5.98/yr)

**.com**
44% off ($4.98/yr)

**.io**
21% off ($25.98/yr)

**.dev**
27% off ($10.98/yr)

**.link**
89% off ($0.98/yr)

**.online**
97% off ($0.98/yr)

**.me** - my favorite https://mederic.me
90% off ($1.98/yr)

## Private Email 

**Starter** - 1 mail box + 5GB of Email + 2GB of File Space
70% off ($3.56/yr)

## SSL Certificates

**PositiveSSL**
51% off ($2.88/yr)

**PositiveSSL Wildcard**
71% off ($20.88/yr)

**EssentialSSL**
47% off ($6.88/yr)

# Conclusion

I hope that sharing this can help some developer launch their own products and projects. Do keep in mind by law some domain names require a ssl certificate to work (.dev, .io).
Top 9 best & most popular tools of Robotics
Published: 2020-11-25 10:52:00

What is Robotics :- Robotics is the branch of technology that deals with the design, construction, operation, and application of robots, as well as computer systems for their control, sensory feedback, and information processing. The goal of robotics is to design intelligent machines that can help and assist humans in their day-to-day lives and keep everyone safe. These technologies deal with automated machines that can take the place of humans in dangerous environments or manufacturing processes, or resemble humans in appearance, behavior, and/or cognition.

Robotics develops machines that can substitute for humans and replicate human actions. Robots can be used in many situations and for many purposes, but today many are used in dangerous environments

Benefits of Robotics :- There is only a thin line distinction to what people can do and what robot can do. The vast majority of the work currently is being finished by the machines or the robots in the working environment. Robots are as of now working in pretty much every field like medical, non-therapeutic, mechanical, documentation and numerous other fields. Several benefits of Robotics are mentioned below : Read More at - https://www.devopsschool.com/blog/top-9-best-most-popular-tools-of-robotics/
Automate your work with Gulp.js
Tags: webdev, npm, javascript, css
Published: 2020-11-25 10:49:28

## A toolkit to automate & enhance your workflow

Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

Gulp.js is a tool that will do everything for you.

Gulp.js is built on Node.js

### What you need to learn Gulp :

* You need to be a good Front end developer
* You need a very good knowledge in JavaScript
* You need to know about CSS preprocessors and HTML template engines.
* Ability to use command line and Node Package Manager (npm)

### Examples of tasks that Gulp can do :

* Copy Files from src to dist
* Concatenate CSS or JavaScript files for production
* Minify CSS and JavaScript files
* Auto prefixer for CSS3 properties
* Manage and Compile Sass files
* Generate SourceMap files for CSS and JS
* Compiling Pug.js to HTML
* Transpile Es6+ using Babel
* Live reload your project for easy development
* Compile Typescript
* Minify Images
* Send Notification on Errors
* Rename Files
* Processing JavaScript files with eslint
* Upload files with FTP

And there's other more than 4000 plugins to help you.

One tip while using Gulp is not to use a lot of tasks at the same time to avoid slowing down of Gulp tasks.

---

Thanks for reading the article and I hope you enjoyed it.

[Please Follow the blog to keep sharing useful articles](https://dev.to/amrelmohamady)
Avoid converting nil to zero in Ruby with this Quick Tip
Tags: ruby
Published: 2020-11-25 10:46:03

---
title: Avoid converting nil to zero in Ruby with this Quick Tip
published: true
description: 
tags: ruby
//cover_image: https://direct_url_to_image.jpg
---

Converting values to an Integer, Float or BigDecimal (or even Rational) in Ruby sometimes comes with an unwelcome side effect: that `nil` responds to `#to_i`, `#to_f`, `#to_d`, or `#to_r` by returning a class-appropriate zero value.

Sometimes this is fine.

When it isn't, here is a quick tip for avoiding it - use the [safe navigation operator](https://ruby-doc.org/core-2.6/doc/syntax/calling_methods_rdoc.html#label-Safe+navigation+operator), which does not send the method that follows it to nil.

```
irb(main):001:0> nil.to_i
=> 0
irb(main):002:0> nil&.to_i
=> nil
irb(main):003:0> nil.to_f
=> 0.0
irb(main):004:0> nil&.to_f
=> nil
```

That's it. Happy navigating!
What programming language should I learn next?
Tags: discuss, programming
Published: 2020-11-25 10:41:25

I am looking forward to learning a new programming language apart from JavaScript. My reasons are mostly extending my overall programming and engineering skills, getting to think from a different perspective but also having a solid tech in my stack with a promising future in the world of software development. Oh, and it should **make fun** to program with!

In a prior version of this article I did a short (and not well-thought assessment) based on some resources on the web but it turned out to be uninformed and incomplete.

I'd rather like to hear from people here what language is actually **joyful to work with** (including tools, deployment etc.) and has at the same time a good selection of paradigms, as well as a strong community and extension / package system.

What are your thoughts?
Brainwonders Surat DMIT Centre
Published: 2020-11-25 10:31:21

Brainwonders is the only US Patented DMIT (Dermatoglyphics Multiple Intelligence Test) Company. DMIT helps to discover the inborn intelligence of each child through bio-metric scanning of all their finger prints. Fingerprints gives out lots of data points.

Brainwonders has a huge team of expert clinical, counselling and career psychologists. They are closely connected with Cambridge International Examination and Association of Heads of Anglo-Indian Schools, and have provided their service to their members as well.

Brainwonders have tied up with Professor Lin who holds the only US Patent for Dermatoglyphics Technique. The DMIT software provides a complete, auto-assessment interface that is uniquely adaptive, intuitive and responsive to any child’s unique needs and skill-sets.

Address: 315-316, Citylight shopping center oppsite, indraprasth apt, Ghod Dod Rd, City Light Town, 
Surat, Gujarat 395007
Tel: 9892405552
Email- surat.brainwonders@gmail.com
Visit: https://www.brainwonders.in/
Why Queryset.exists() is more efficient than Queryset.count()
Tags: django, python, webdev
Published: 2020-11-25 10:22:34

During my career as a codebase review bot I've seen many variations of this anti-pattern:

```py
import models 

queryset = models.Hound.objects.filter(is_asleep=True)


if queryset.count() > 0:
    return "run away!"
else:
    return "coast is clear"

```

An experienced Django dev may chuckle at this misapplication of `count()`. _I would never make that mistake!_ The thing is no dev is an island: over time devs change teams, inherit brownfield codebase that have accumulated tech debt, and will review code written by  junior devs. It's therefore important to:
- avoid the mistake
- know how to effectively find and fix the mistake
- know how to communicate what Django does to make `exists` quicker

At the end of the post I will show how to effortlessly find and fix this anti-pattern.

### Efficiency
Comparing `queryset.count()` is less efficient than checking `queryset.exists()`. The above example is a harder to read and less efficient variations of the following:

```py
import models 

queryset = models.Hound.objects.filter(pk=1)


if queryset.exists():
    return "run away!"
else:
    return "coast is clear"

```



The [Django docs](https://docs.djangoproject.com/en/3.1/topics/db/optimization/#use-queryset-exists) tells us to use `querySet.count()` if you only want the count, and use `queryset.exists()` if you only want to find out if at least one result exists.

The reason for this advice is because `queryset.count()` performs an SQL operation that scans _every_ row in the database table to calculate the sum. On the other hand `queryset.exists()` simply reads a single record in [the most optimized way](https://github.com/django/django/blob/b996424199cca58f64b77faeaa367b7e7efb9776/django/db/models/sql/query.py#L528):
- remove ordering
- remove grouping
- clear any dev-defined `select_related` and `distinct` from the queryset


### Does your codebase misuse queryset.count?

Over time it's easy for tech debt to slip into your codebase. I can check that for you at [django.doctor](https://django.doctor), or can [review your GitHub PRs](https://github.com/marketplace/django-doctor/):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d10epulva9d373jgldhu.png)

Or try out [Django refactor challenges](https://django.doctor/challenge).
Webpack Là Gì? Những Thông Tin Cần Nắm Vững Về Webpack
Published: 2020-11-25 10:15:54

Sự phát triển nhanh chóng của công nghệ thông tin khiến các khái niệm như webpack là gì khiến không ít người tò mò. Hãy tham khảo ngay bài viết dưới đây nhé. Xem chi tiết tại: http://nghelaptrinh.net/webpack-la-gi/
Hackerrank Là Gì- Có Nên Sử Dụng Hackerrank Hay Không?
Published: 2020-11-25 10:10:35

Hackerrank là gì? Có nên sử dụng hackerrank hay không?,... Hãy cùng chúng tôi tìm hiểu những thông tin sau đây để thực sử hiểu hackerrank là gì.. Xem chi tiết tại: http://laptrinhvacongnghe.com/hackerrank-la-gi/
A Ray of Motivation
Tags: hacktoberfest
Published: 2020-11-25 10:05:49

#### How I started my Open Source journey
I am Aparna, a Software Engineer with about a year of experience in Python development. I always thought contributing to Open Source Projects was beyond my reach, so I never even tried to make one. Thanks to my manager Ankit Agarwal who introduced me to the Open Source world. 

While I was building a validation framework using a package called pyvalid for a use case at my work, I came across an issue with outdated version of one of the dependent packages. The quicker workaround would have been to ignore the warning and do a force install in our systems and pipelines. But my manager suggested me to submit a patch updating the version number to the upstream package and I did as he said. Little did I know that I was making an OSS contribution. Two days later, when the author of the package accepted my code and released a new version, it hit me. I had contributed to an Open Source code and thousands of other people would be benefited from my fix. That sense of happiness and satisfaction is inexplicable.

#### How I got here
Since then, I developed interest in Open Source. I spent some time daily to go through articles, talk shows and other repositories where I could do more contributions. That's when I found out about hacktoberfest. I am still not sure whether it was the eagerness to win the limited-edition T-shirt or the excitement of getting to explore more open source repositories, but it triggered immense motivation in me. I immediately registered myself to the challenge and here I am after successfully completing it. 

#### My Contributions
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7rnvicuvtilcikh5heed.jpg)

#### About my Hactoberfest experience
This was my first time participating in Hactoberfest and I must say it was an amazing experience. Hactoberfest 2020 took me all the way from bug fixing to adding new enhancements, with lots of learning and growing on the way. It was truly like a ray of motivation for me. The Discord Server community help was also very helpful and the overall process was perfectly organized.

#### Reflection
I would definitely like to participate again next year. Till then I will keep exploring and contributing more to Open Source. I recommend everyone to do the same. If you are new to Open Source, do not worry. Start small, like fixing a typo or adding documentation to any project. Just start with getting used to the environment. Just dip your toes in the ocean of Open Source and you will feel the urge to dive and swim in it forever.
Add a .env file to your simple JavaScript Project (video)
Tags: javascript, env, webpack, webdev
Published: 2020-11-25 10:04:55

This weeks video sponsor is HarperDB. Use ANIAKUBOW for $250 off at https://studio.harperdb.io/sign-up?code=ANIAKUBOW

In this weeks video I show you how to store secret API or SKD keys in your
JavaScript, HTML and CSS project.

We will be doing this with the help of:
- Node.js
- Webpack
- Dotenv Webpack

Here is the final code in an example: https://github.com/kubowania/pacman-AI-live

If you did like this video, please hit the Like and Subscribe button so I know to make more!

Twitter: https://twitter.com/ania_kubow
YouTube: https://youtube.com/aniakubow
Instagram: https://instagram.com/aniakubow

{% youtube vSmzEGZQI5A %}

#javascript #dotenv