teleren/devto huggingface dataset:
Splitting Javascript Classes Into Different Files
Tags: javascript
Published: 2019-12-17 14:36:22

---
title: "Splitting Javascript Classes Into Different Files"
published: true
description: Playing with Javascript classes
tags: javascript
canonical_url: "https://thomasstep.com/blog/splitting-javascript-classes-into-different-files"
---
I come from a C++ background, so I turn to header files to help me organize files and reduce file size. I'm new to object oriented programming in Javascript, and I have been searching for best practices on the equivalent of header files for classes or splitting classes up into multiple files. I could not find a definitive answer (and didn't know the best keywords to search on) but I did come up with something on my own. Since classes in Javascript are just special functions and functions are just `Function` objects, I toyed around with declaring the class itself and being able to add in functions later in the same way you can create an object and add key-value pairs in later. After learning a little bit more about [what happens with classes under the hood](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), I realized that adding functions to the class's prototype had the same effect as adding the functions inside the class's body.

I went from something like this:

```javascript
// animal.js
class Animal {
  noise() {
    return 'moo';
  }
}
```

to something like this:

```javascript
// moo.js
function noise() {
  return 'moo';
}

module.exports = {
  noise,
};

//animal.js
const { noise } = require('./moo');
class Animal {}

Animal.prototype.noise = noise;
```

The main motivation behind looking into this was classes that could potentially get large and wanting to split those files up into smaller more digestable files. With this approach the class functions can be put into as many different files as need be and collected in the file where the class is declared. Is there a better or more standard way of doing this?
Pip-tools and App Packaging - Building SaaS #19
Tags: python, django, saas
Published: 2019-12-17 18:01:38

{% youtube LA9eJps-bfk %}

In this episode, we started by improving our `requirements.txt` handling with `pip-tools`.  Then we cleaned things up and began turning the app into a Python package.

Show notes for this stream are at [Episode 19 Show Notes](https://www.mattlayman.com/building-saas/pip-tools-app-packaging/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
Your guide to Local and Session Storage
Tags: javascript
Published: 2019-12-17 17:47:47

Ever been confused by Local and Session Storage? Well this article is here to save you. 

Local and Session Storage are part of the web storage API that we have access to on our window object.They are almost the exact same thing, the only difference is that while Session Storage persists throughout the Session( as long as the tab is open, if the tab is ever closed we lose our data ), Local Storage will persist till cleared out(we still have access after closing our browser or tab). In the next post I’ll cover the basics of using the local and Session Storage.
A simple way to specify In/Out css transitions
Tags: css
Published: 2019-12-17 17:43:24

## The CSS `transition` property

The transition property quickly brings animation to state changes on your page. It's simplicity is greatly appreciated when what you're animating is also simple. Consider the following:
```
.NavDrawer {
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
}

.NavDrawer.is-active {
  transform: translateX(0);
}
```
With one property the mobile navigation drawer animates back and forth between its active position.

## Cascading properties

What I want to focus on is the timing and easing parts of the property, and how we can specify different values based on direction.
```
.NavDrawer {
  transform: translateX(100%);
  transition: transform 300ms ease-in;
}

.NavDrawer.is-active {
  transform: translateX(0);
+ transition: transform 600ms ease-out;
}
```
Taking advantage of CSS's cascading nature, we can specify a second transition property within the active selector. Here we can specify the 'in' transition, leaving the original one for the 'out' transition. This works because the `.NavDrawer` styling is overridden by the subsequent `.is-active`, then once the active state is removed it reverts back.

## Takeaway

For many transitions animating out the same way they came in is desired, but I believe there are also instances of compromise for convenience. For example `ease-in-out` type easings are largely popular just for looking good in both directions. Now by specifying the direction usage of a simple `transition` is expanded, helping to easily make more desired transitions.
Answer: How to update large table with millions of rows in SQL Server?
Published: 2019-12-17 17:22:31

{% stackoverflow 35903495 %}
I think it is a good practice.

Another answer by "Naomi N"
https://social.msdn.microsoft.com/Forums/sqlserver/en-US/0ce6593d-9588-477a-a4cd-ce64f999eb52/update-700-million-records-quickly?forum=transactsql

    declare @Size int, @Loops int, @i int
    set @Size = 100000
    select @Loops = count(*)/@Size from Table1
    set @I = 0

    while @I <=@Loops
      begin
        ;with cte as (select ID, OldColumn,   NewColumn, case when  New_Column is null
                                    then Replicate('0', 10 - Len(Old_Column))
                                         + Old_Column
                                    else Replicate('0', 10 - Len(New_Column))
                                         + New_Column end as FixedColumn, 
        Row_Number() over (order by ID) as Row from Table1)

        update cte set NewColumn = FixedColumn
        where Row between @I* @Size and (@I+1)*@Size
        set @I = @I + 1
    end
Notes on Startup Ideas
Tags: startup, workflow, seo, marketing
Published: 2019-12-17 17:21:01

**Note:** This is a rehash of <https://peterthaleikis.com/business-idea-validation/>

Eureka! You have a business idea. What should you do first? No, It's not the development phase. It isn't the design or the marketing stage. The process begins with validating your idea.

People like to jump at whims, but starting with research is helpful for many reasons. Most likely, you have no money set aside to allocate for the idea. Even though you're motivated at the moment, you will get discouraged after a while. You'll discover competition, or find the marketing stressful and overwhelming. Whatever the reason, plowing through the initial stages will give you powerful insights for the future.

To validate your idea, conduct some research. Gather a list of relevant phrases, words, and topics (keywords and keyphrases). Throw them at a bunch of popular websites, such as Google search, YouTube, Facebook, and Quora. (The article that I'm summarizing has a list of fifteen such sites). But don't just research your idea, also look at your competitors. Use online tools to check their social media presence and evaluate their backlinks. Lastly, talk to friends about your idea. Get real feedback from real people. Mention it on Twitter, and see how people react. A picture paints a thousand words, but people paint pictures.
How do you implement system testing?
Tags: discuss
Published: 2019-12-17 17:20:32

Just curious as to how other developers implement system testing as part of their continuous integration processes. If you don't do system testing, what's preventing you from doing it?

We're currently not implementing it in my team, but I'm looking for ideas and opinions on the subject.

My idea right now is to have a sandbox integration environment with all of the services running in it. Each service would have its own set of system tests defined. So when a build kicks off, the CI system will deploy the service into the integration environment and run all of the tests against it.

If the test pass, then it'll proceed to deploy to the target environment. Otherwise, it would roll back the service and mark the build as failed.
The Digest Guide to React Styling
Tags: react, css, cssinjs, cssmodules
Published: 2019-12-17 17:19:50

---
title: The Digest Guide to React Styling
published: true
description: Notes from understanding React Styling
tags: React,CSS,CSS-in-js,css-modules 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rbgzk6dc1bdody83ngqt.png
---

Are you confused over the different styling approaches for components in React? So am I. 
To avoid verbosity, I summed it up in 5 bullet points and 4 images, with some footnotes. 
Use this article as a starting point for exploring deeper with a basic understanding of how each method works. 

## CSS in the DOM

Here is how you can add styles to a web page:

### External stylesheet 
```
<link rel="stylesheet" type="text/css" href="mystyle.css">
```
The styles are global and applied on the whole DOM

### Embedded (internal) stylesheet: 

```
<style>
   p {
        font-family: georgia, serif; 
        font-size: x-small;
    }
</style>
```
Also here, the styles are global and applied on the whole DOM

### Inline styles
```
<h1 style="color:blue;">This is a Blue Heading</h1>
```
The style is local and impacts only the element

### Scoped CSS - deprecated! 
https://caniuse.com/#feat=style-scoped

### Shadow DOM CSS
It is a style tag that only applied to the shadow DOM part where it is included. 

## CSS in React

Let's see how React styles are translated to the above (internal and external stylesheet and inline styles): 
General note: Any .CSS file bellow can also be a CSS with pre-processor such as Less or Scss file. 

### Basic Styling

**With styles**

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

**With classes**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qfvw4gb6044emhlzzg9s.png)

- Styling is processed during build time. 
- Styles can be exported to an external stylesheet. 
- Dynamic styling can be achieved using changing inline styles or applying dynamic classes. 

### CSS Modules

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

- Styles are created during build time (Webpack)
- Styles can be exported to an external stylesheet.
- In Create-React-App CSS modules are differentiated from regular CSS by adding the `.module.css` suffix to the files. Webpack configuration in CRA refers to this suffix. 

### CSS in JS

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

- Styles are created during runtime. 
- Some libraries allow extracting static CSS parts to external CSS stylesheet (critical CSS). 
- In CSS in JS JS objects are playing the role of classes.
Higher Order Component enabled by Ivy
Tags: angular, ivy, hoc, cssinjs
Published: 2019-12-17 16:47:29

---
title: Higher Order Component enabled by Ivy
published: true
description: 
tags: #angular, #ivy, #hoc, #cssinjs
---

## Higher Order Component - HOC
A higher-order component (HOC) is an advanced technique for reusing component logic. Concretely, a higher-order component is a function that takes a component and returns a new component.

### Angular HOC
Below is sample HOC withTheme and obviously the code received the component, insert the theme data and return decorated component. Annotated or attached the HOC to the class component is called meta-programming using typescript decorator.

Meta-programming is a technique by which you can modify the code dynamically at runtime.

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

And below is the HOC usage

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

### Be creative
Ivy is enabler, it enabled HOC and Meta-programming. Be creative, there's so many use-cases can be cater by HOC.

Here is an example of enabling CSS-in-JS using HOC withStyles

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

And here is some ideas:

#### withAuth
return auth data if user have been authenticated

#### withRouter
return a router data

#### withProvider
return provider reference

### Code repository
Check the codes here [https://github.com/abumuawiyah/ng-ivy](https://github.com/abumuawiyah/ng-ivy)
About Bennett Gramm Velasquez
Published: 2019-12-16 22:39:04

Bennett Gramm Velasquez is a born leader and communicator. Bennett Velasquez currently is in his freshman year at The University of South Carolina (USC) in Columbia, USC’s flagship school, and is the recipient of the Garnet Scholarship and the South Carolina Life Scholarship. Bennett Gramm Velasquez serves in student government, on Freshman Council and on the Diversity and Equity Council all while making the Dean’s List his first semester with a 3.63 GPA. 

Bennett Gramm Velasquez’s major is Hospitality, Retail and Sports Management (HSRM) with the ambition of being a leader in the hospitality industry on matters of sustainability and the environment. He is 1 of 5 students invited to attend the prestigious Cesar Ritz Hotel and Hospitality Management School in Switzerland. 

Bennett Gramm Velasquez is also a Green Scholar at USC and is the Carolina Sustainable Newcomer of the Year. Bennett Velasquez’s greatest strength besides leadership is his creativeness where he sees “three dimensional color” in a world where most people see “two dimensional black and white.” Leadership at USC is nothing new for Bennett. 

Bennett Gramm Velasquez has always held leadership positions. In high school he founded and led his school’s highly successful Future Business Leaders of America (FBLA) club, earning himself three national competition spots in public speaking. Further, as his chapter’s FBLA President, Bennett Gramm Velasquez recruited, prepared and successfully led his student team to national competition. He also held state and national offices in the FBLA organization. In South Carolina’s prestigious chapter of the national Boys State organization, Bennett was elected to the “U.S. Congress.” 

Finally, while in high school Bennett Gramm Velasquez worked at an upscale burger restaurant where he was promoted to shift leader and given the keys to the restaurant. 

Profile created and maintained by www.netreputation.com
Upcomming Project
Tags: ehandmart
Published: 2019-12-17 16:33:47

eHandmart" is an E-commerce platform to eliminate the barriers between the buyers and sellers, the barriers between demand reaching to its suppliers by providing easy excessive features to our customers which will not just help to conduct business but also utilizing the analytical data which will lead to growth rate in the near future while providing varieties of products or services people have demanded in the market. Business Description "eHandmart" focuses on the local market, the customers (demands)and products/ services [supply]. eHandmart focuses on developing products within the business owner on generating traffic in the products/services while providing numerous customer benefits and not lose sales. Losing sale means downfalls in your business. People have broad options, number of alternatives, our goal is to reduce and eliminate time-consuming in delivery and also the insecurities customers find while shopping.
Creating a Table-of-Contents with PDF.js
Tags: javascript, pdfjs, toc, pdfviewer
Published: 2019-12-17 16:33:37

---
title: Creating a Table-of-Contents with PDF.js
published: true
description: My motivation for writing this post started after I was assigned to a task to create a pdf viewer with a table of contents (TOC) for a client’s website and I had started to search how to implement the TOC with PDF.js and found nothing.
tags: javascript, PDFjs, TOC, pdf viewer
---

{% medium https://medium.com/@csofiamsousa/creating-a-table-of-contents-with-pdf-js-4a4316472fff?sk=33ebed77c6b33c2a968ea9f8b45fc369 %}
Reading Snippets [14]
Tags: javascript, beginners, inthirtyseconds, books
Published: 2019-12-17 16:23:56

The 'this' keyword usually points to an object rather than a function. It is easy to fall under the misconception that it is referring to the function itself. The object that 'this' affects is dependant on how the function in which 'this is type' is called. 

Special thanks to Kyle Simpson for the revelation in his book, 'You Don't Know JS'.
May the Log Be With You
Tags: devops, aws, architecture, productivity
Published: 2019-12-17 16:05:00

**Part three in a series about how to deploy a secured, monitored, optimized web application (short bonus part)**

One of the most important things a software need, not just a web application, is the ability to log all the events and errors that occur when it's being used by our end users so we can actually see what went wrong and fix it before the user even finish the email to the support team.

This part will introduce how to utilize [Sentry](https://sentry.io/), the SaaS based logging service that provide real time error monitoring, tons of SDK's for every major language and framework out there, and what's important for us is the ability to integrate with our Git to see the errors per version/code change.

## Prerequisites

A few things we'll need to get started is of course a Sentry account, our `amplify.yml` from the first [post](https://dev.to/danielnetzer/enterprise-grade-ci-cd-for-frontend-applications-17ef) and an application we want to use it with.

Once the sentry account is up and you added the appropriate [SDK](https://sentry.io/platforms/) to your application (this part is out of the scope for this post) we can add it to our pipeline that will generate source-maps to actually point to our original code before it's compilation/bundling/uglification/etcification took place.

## Integrate It!

Most application will initialize Sentry in the following manner:
```js
Sentry.init({
  dsn: "https://XXXXXXXXXXXXXXXXXXXXXXX@sentry.io/XXXXXX",
  release: <% COMMIT_HASH %>
});
```
The `<% COMMIT_HASH %>` is what we will replace pre-building our application so Sentry can point to the specific commit that added the changes either breaking or fixing an issue.

In the `amplify.yml` file at the `preBuild` stage on my project (this change depending on the software you are building) I call a script I built to change all the environment variables during CI. replacing `<% COMMIT_HASH %>` with [AWS_COMMIT_ID](https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html).

## Mapping

To upload the relevant source maps we will have to define a few environment variables at the [Amplify](https://aws.amazon.com/amplify/) console, SENTRY_AUTH_TOKEN, SENTRY_ORG and SENTRY_PROJECT.

Afterwards we can add to our `amplify.yml` in the `postBuild` step the following lines
```yaml
- npx sentry-cli releases new AWS_COMMIT_ID
- npx sentry-cli releases set-commits --auto AWS_COMMIT_ID
- npx sentry-cli releases files AWS_COMMIT_ID upload-sourcemaps path/to/source-maps -x .js -x .map --validate --verbose --rewrite --strip-common-prefix
- npx sentry-cli releases finalize AWS_COMMIT_ID
```
which is pretty self explanatory, once a build is successful you should see in your sentry dashboard a new release and when an error is logged now and it's associated to the release it will pinpoint the code that changed or fixed that error which is pretty amazing if you ask me.

Hope you enjoyed this short bonus part, in the following post I'll introduce another great tool to help with visual regression snapshots.
A Design Evolves with right usage of white-space. How it works and what rules to apply ?
Tags: uiweekly, ux, design, webdev
Published: 2019-12-17 15:41:05

White space dominates the design philosophy, with clean structure, elegant design being the something that people want very much for good web design. I’ve noticed, however, that there are 50% designers out there who don’t truly understand what the value of white space actually is.

<b>The What And Why of White Space</b>

The modernist painters were good masters of maintaining white space, using the perfect pencil and paint on canvas to elevate one essential idea, eliminating else as unnecessary.

White space as a desirable feature in Western design (as opposed to just empty space to fill up with ornament or type) came into its own in the early part of the 20th century, at the height of modernism. Artists and designers united under the modernist idea of minimalism and had a profound effect on much of the art and design produced thereafter, continuing to influence creative professionals to this day.

<b>Is White Space White Color?</b>

White space is simply, the absence of active design elements. Many people, when they hear the words “white space,” assume that white space has to literally be a.) white, and b.) a space.

Still numerous benefits are there with conscious white-space design.

In fundamentalist terms, that’s true; however, most of the time you can take a more simple figurative interpretation and still create a “white space” in the form of a non-active area. You can rest your eyes while looking off some enough space design elements and it will have a similar effect on your brain to read as much as fast.

<b>White Space involves more user interaction:</b>

Communication is the fundamental goal of any design. When you work through the design process, you are determining how to speak to your audience.There’s an inherent challenge in the design profession to always be thinking of how to do more with less.

White space is the best concept than a hard and fast rule. To reiterate, it’s merely the non-active space in a design, and the psychological calming effect that it has on the viewer. There are no set guidelines. Use your best judgement, experiment profusely, and develop your own relationship to white space.

If you want to do the perfect optimization on white-space design, you can inquire  a top <a href=https://goprotoz.com">GoProtoz UI/UX design company</a>.