teleren/devto huggingface dataset:
The Override Keyword
Tags: webdev, beginners, csharp
Published: 2019-01-15 13:35:56

---
title: The Override Keyword
published: true
description: It's easy to forget the little things when they're part of your routine. Take a sec to see if you remember overrides.
tags: #webdev, #beginners, #csharp
---

It's always good to understand the basic things in web development. With that being said, what do you know about the override modifier? Sometimes it's so easy to use and not think about that you forget what it is.

Well, the override keyword is used to give a new implementation of a method inherited from a base class. If you need a quick refresher on inheritance, you can [check it out here](https://flippedcoding.com/2018/09/04/what-is-inheritance/). The base method has to be virtual or abstract to be overridden and the inherited method has to use the same name as the base method. They must also have the same access level modifier to make sure they work correctly. So if one is public the other has to be public as well.

The override keyword also makes sure any objects derived from the inherited class use the inherited class's implementation of any methods instead of the base class implementation. Here's a little illustration of what that looks like:

![override.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1547559242497/r1M8-Dsf4.jpeg)

Override methods can't be modified by using new, static, or virtual modifiers so there's that. Really the override keyword is as simple as it is easy to use. You just have to pay attention to when you need to use it. Pretty much anytime you have an base method that has an abstract or virtual modifier then you can expect to override it when you inherit it.

By default, C# methods aren't virtual or abstract so you don't have to worry about using override on every method you inherit. That makes it easier to work with multiple methods in a base class that will be inherited by different derived classes. You only have to implement the methods you made virtual or abstract.

Sometimes it's good to see these things in a form other than code. It could be that last little piece before that "a-ha" moment comes. I hope that this helped you understand how the override modifier works! It just takes some time to remember which methods you modified but once you have that down, you're good to go.

<hr>

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Graphql Enthusiasts! I need your help🙏
Tags: discuss, graphql, help, react
Published: 2019-01-15 12:53:22

---
title: Graphql Enthusiasts! I need your help🙏 
published: true
tags: discuss,graphql,help,reactjs
---
I've been trying to get some help from **#help** section but no one came up with a solution. Graphql Enthusiasts I need your help🙏. 

I want to create a simple Login/Logout functionality using reactjs and graphql. I followed some YouTube videos and some blogs on other websites and all of them end up with creating a separate auth.js file and resolver.js file which is completely different from the context of my project.

Here's my **schema** file
{% gist https://gist.github.com/RJ-1998/d9eadc2890f6e4edbc08b4631ec7e46f %}
I want to perform a login mutation just like addPost mutation and addUser mutation, I don't know how to do it. I think there is something to do with resolve method but I'm unable to figure out.

Here's my **Login** react component
{% gist https://gist.github.com/RJ-1998/8301e04791a2fd7f212514a6a0ccfbeb %}
I want to receive a confirmation here that if the user is able logged in or not and if he is then he should remain logged in until he clicks the logout button.

Guys please help me, although it's not a big deal to create a login/logout feature but this graphql thing looks hard to conceive for me.

I hope someone will come up with a good solution.
Cross Platform GUI for DynamoDb (Electron + Vue.js = ❤)
Tags: aws, dynamodb, vue, javascript
Published: 2019-01-15 11:59:02

---
title: Cross Platform GUI for DynamoDb (Electron + Vue.js = ❤)
published: true
description: Graphical User Interface for AWS DynamoDb
tags: aws, dynamodb, vue.js, javascript
---

Cross-Platform Graphical User Interface for AWS DynamoDb

#### [Github Repository](https://github.com/Arattian/DynamoDb-GUI-Client)

![Logo](https://i.imgur.com/24jcqzs.png)

Features
- Remote Access of AWS DynamoDB Service*
- Local DynamoDB
- Supports multiple databases
- View
 - Table view
  - Records view
  - Table schema view
- Operation
 - Record
  - Add Record
  - Edit Record
  - Delete Record
 - Table
  - Add Table
  - Edit Table
  - Delete Table
 - Filter by attribute value
 - Filter by attribute name
For remote access, need to provide access and secret keys.All keys stored in localstorage.

<a href="https://www.buymeacoffee.com/tQSoDLK" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/black_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
Live coding during a presentation
Tags: code, conferences, presentations, tips
Published: 2019-01-15 11:47:02

---
title: Live coding during a presentation
published: true
tags: code,conferences,presentations,tips
canonical_url: https://craignicol.wordpress.com/2019/01/15/live-coding-during-a-presentation/
---

I’ve done a few talks in my time, and some of them have involved live coding to help take the audience on a journey to understand the lesson I want to teach. It’s a technique I use rarely however as it can easily get problematic.

Live coding for a presentation is not the same thing as coding for your job or a mob session. Live coding for a presentation has to be as slick and as polished as the rest of the talk. No googling the API docs, no stumbling over syntax errors (although don’t worry if you don’t spot them, **someone** will.)

If you’re nervous with slides, live coding can help relieve some of the pressure. It certainly helped me when I was starting out, as I could pretend I was having a conversation with my computer for some of the talk. Fortunately, it was a conference with microphones.

Live coding is also great for presenting something novel (or at least novel for most of the audience) as it gets to demonstrate that it’s real and it works. [I used it, in one presentation, to demonstrate TDD.](https://craignicol.wordpress.com/2009/05/04/ddd-scotland-roundup-tdd-talk-available-for-download/)

Be careful though. Technology can let you down, so have a think about how you might demonstrate another way. Do you have a video you can show on someone else’s laptop? Can you demonstrate with screenshots? Could you whiteboard a solution?

If you don’t feel comfortable writing code in front of an audience, don’t. Can the code (I use [VS code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets), but there’s plenty of macro choices), so you can reveal it gradually. Or pre-build it and uncomment as you go.

If you are preparing code in advance, to distribute with the slides, heavily comment the code so that when people download it afterwards they understand the context.

I do love to see live coding done well in a presentation, but unless you’ve prepared it meticulously, it won’t go well. Think about the story, and how and when you’re introducing new concepts. Don’t be afraid to go back to something later (“Here’s how to connect, but I want to show you search first. I’ll come back to the parameters here once you’ve seen the search results.”) It’s OK to refer to your notes, especially if you’ve just thrown up a screenful of code for the audience to read. Make every interaction useful.

It’s OK to backtrack. Show the mistakes you made, the error messages you saw, and how you corrected them. You won’t be the last person to make that mistake.

Relax and enjoy it. If code is what you do, be comfortable with it, even if the nerves are trying to turn you inside out from your stomach.
👨‍🔧️ The 7 Pro Tips To Get Productive With Angular CLI & Schematics 💪
Tags: angular, javascript, node, webdev
Published: 2019-01-15 11:20:18

---
title: 👨‍🔧️ The 7 Pro Tips To Get Productive With Angular CLI & Schematics 💪
published: true
description: Angular Schematics is a workflow tool for the modern web 
tags: angular,javascript,node,webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q6r4z934f0em1voznme3.jpg
canonical_url: https://medium.com/@tomastrajan/%EF%B8%8F-the-7-pro-tips-to-get-productive-with-angular-cli-schematics-b59783704c54
---

# Quick Intro

There are many articles on how to build your own Angular schematics but in this one we’re going to focus on using available schematics to the fullest! 💪

> Most of the time we will be using @schematics/angular which are provided in Angular CLI out of the box.


## What are we going to learn

1. Use shortcuts, they are much faster and easier to type, duhhh 😂!
2. Skip creation of an initial application
3. Generate multiple applications and libs to promote code reuse
3. Use schematics from different npm packages
4. Set schematics defaults in angular.json file so that we don’t need to specify 
   all the flags all the time
5. Generate services — providedIn: 'root' vs --module flag (scoping to lazy-loaded 
   modules)
6. Use ng add to add libraries like Angular Material (or others)

#### BONUS: Useful commands

#### BONUS+: Amazing code completion capabilities!


[Read more...](https://medium.com/@tomastrajan/%EF%B8%8F-the-7-pro-tips-to-get-productive-with-angular-cli-schematics-b59783704c54)
Setting Up PEP8 and Pylint on VS Code
Tags: python, vscode
Published: 2019-01-15 10:20:43

---
title: Setting Up PEP8 and Pylint on VS Code
published: true
description: This is a simple tutorial on how to set up linting tools for python
tags: python, vscode
---

![vscode_and_python](https://thepracticaldev.s3.amazonaws.com/i/0koywzb3onfpt4s82mu9.png)

Formatting Python Code to pass the Maintainability test can be hard; especially if you are not receiving some help. It's in human nature to get tired of redundancy, we easily want to get the job done quickly and move on. However, this affects our work output and the quality of our work. When it comes to code quality it's paramount to maintain standards, there's no better way to do so than to follow some already set standards.

[PEP8](https://www.python.org/dev/peps/pep-0008/) defines Python coding standards; from variable declaration to formatting of classes. It has it all, this allows you to nicely format your python code. To install the package ensure you are in your project folder and `virtualenv` is enabled, if not run the following lines in your folder directory

```
$ virtualenv env

$ source env/bin/activate

``` 
Then install PEP8

```
$ pip install pep8
```

Now let's checkout [Pylint](https://www.pylint.org/), this tool checks whether we follow PEP8 standards and returns errors where we fail to follow. Furthermore, this tool also does error checking due to syntax errors. To install pylint run the following code;

```
$ pip install pylint
```
Since we now have the two needed tools we can now open vs code

```
$ code .
```
Once we open our vs code editor; we can select our preferred interpreter, just press
`Ctrl + Shift + P`. 
![interpreter](https://thepracticaldev.s3.amazonaws.com/i/bn0ikkd1cbge8svwmqf2.png)
You should see something similar to the above result. Next we select our Python Interpreter
![python_env](https://thepracticaldev.s3.amazonaws.com/i/6mij69f5plvsxkbjpqc4.png)
Just select the python3/2 with virtualenv enabled. This will ensure that Vs code picks up tools we installed in virtual env.

Next we finally activate linting on Vs code.
Follow the following steps
`File > Preferences > Settings > Workspace Settings > Python Configuration`
Click `Edit in settings.json`

![workspace](https://thepracticaldev.s3.amazonaws.com/i/touhurjhryba8n9hsuvb.png)
Your workspace should match the above linting settings. After editing your json save the settings and start coding. Now everytime you access Vs Code in virtaulenv it will always activate linting.
Hosting a custom domain on Github
Tags: github, hosting
Published: 2019-01-15 08:40:12

---
title: Hosting a custom domain on Github
published: true
description: 
tags: #github, #hosting
---

So we have all been there where we want to make a static website and are confused as to where to buy them from. Usually, it involves two steps - 
1. Where to get the domain name from.
2. Where to get the hosting from.

Although there are a lot of competitors in the market choosing the best one becomes again a headache. 

But the real question is <b>Do you even need it</b>

In today's world ... and by this, I mean the Internet world, everything is cheap you just have to find the correct shop that is giving it out.

<b>Domain names</b>

1. Head over to <a href='https://www.freenom.com/en/index.html?lang=en'>freenom</a>. A place which gives out free domain names.
2. <a href='https://www.nextraone.com/'>Nextraone</a> is also a fair price website which I use to buy domain names.
3. And then there is Godaddy like always.

<b>Free hosting</b>

1. Sites like <a href='https://www.freehosting.com'>Freehosting.com</a> or <b>Hostinger.com</b>.
2. Github Pages etc.


<b>Here is what I did to host my small website</b>

1. I bought a domain name from Godaddy called <a href='http://vjnvisakh.info/'>vjnvisakh.info</a>. There is nothing on the site as of now though. :)

2. Then I created a repository on Github.
3. Added by index.html file into the repo and pushed it to the repo.
4. Added a CNAME file containing just my domain name. <img src='https://thepracticaldev.s3.amazonaws.com/i/ttmeb8k8yk3c7basz0g7.png' />
5. Went to Godaddy and updated the DNS settings for the website as in the picture below. <img src='https://thepracticaldev.s3.amazonaws.com/i/6gw89uez7x7slz51vpar.PNG' />
6. Went to the Github repository(web-version) and created a Github Page using the master branch.
7. And Voila! the site was updated.


Of course, don't expect to run full-fledged PHP sites via this. But for static websites, it's an easy and cheap way of doing it.
React.js–Get started in Dart #3
Tags: react, dart, javascript, webdev
Published: 2019-01-15 08:40:02

In Part 2 we continued looking at the React documentation examples while implementing them in Dart. We began by refactoring the `createReactClass` function to use **named parameters** in an attempt to simplify the writing of components:

```dart
// web/components/ticker.dart
...
...
var Ticker = createReactClass(
    getInitialState: () => makeJsObject({
          "seconds": 0,
        }),
    componentDidMount: (ReactClassInterface self) {
      self.interval = Timer.periodic(Duration(seconds: 1), (_) => self.tick());
    },
    componentWillUnmount: (ReactClassInterface self) {
      self.interval.cancel();
    },
    render: (ReactClassInterface self) => React.createElement(
          'div',
          null,
          ['Seconds ${getProperty(self.state, "seconds")}'],
        ),
    methodMap: {
      "tick": (ReactClassInterface self) {
        self.setState((dynamic state) {
          var seconds = getProperty(state, "seconds") as int;
          return makeJsObject({
            "seconds": seconds + 1,
          });
        });
      }
});
```
[**View the Source**](https://github.com/graphicbeacon/reactjs-get-started-in-dart/blob/part-2/web/components/ticker.dart#L6-L30)

And it's usage:

```dart
// web/main.dart
ReactDOM.render(
  React.createElement(
    Ticker,
    null,
    null,
  ),
  querySelector('#output2'));
```

→ [**Watch Part 3 on YouTube**](https://youtu.be/kmCJ-qkBjrc)
→ [**Get the source code**](https://github.com/graphicbeacon/reactjs-get-started-in-dart)

---

In this final part we will be using the [**react**](https://pub.dartlang.org/packages/react) package to build out the other examples. The **react** package provides a much friendlier API for building custom components:

```dart
import 'dart:async';

import 'package:react/react.dart';

class TickerComponent extends Component {
  Timer interval;

  tick() { ... }

  @override
  Map getInitialState() => {'seconds': 0};

  @override
  componentDidMount() { ... }

  @override
  componentWillUnmount() { ... }

  @override
  render() => div({}, 'Seconds ${state["seconds"]}');
}

var Ticker = registerComponent(() => TickerComponent());
```

Learn more in this video:

{% youtube kmCJ-qkBjrc %}

→ [**Watch on YouTube**](https://youtu.be/kmCJ-qkBjrc)
→ [**Get the source code**](https://github.com/graphicbeacon/reactjs-get-started-in-dart)

---

## Conclusion

I hope this was insightful and you learned something new today.

**Subscribe to [my YouTube channel](https://www.youtube.com/channel/UCHSRZk4k6e-hqIXBBM4b2iA?view_as=subscriber)** to be notified on future React videos. Thanks!

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

## Further reading

1. [**react** package](https://pub.dartlang.org/packages/react)
2. [How to Use JavaScript libraries in your Dart applications](https://dev.to/graphicbeacon/how-to-use-javascript-libraries-in-your-dart-applications--4mc6)
3. [**Full-stack web development with Dart**](https://bit.ly/fullstackdart)
Read Local Text File using JavaScript FileReader API
Tags: html5fileapi, filereaderapi, javascript, html
Published: 2019-01-15 08:32:49

---
title: Read Local Text File using JavaScript FileReader API
published: true
description: Learn to read a text file from user's local device JavaScript File API.
tags: #html5fileapi, #filereaderapi, #javascript, #html5
---

![HTML5 FileReader API](https://thepracticaldev.s3.amazonaws.com/i/igk5ns2sywt7ftzebp52.jpg)

In this small tutorial, I am going to share with you how you can upload a .txt file and read its content using HTML5 file API from the client side.

**HTML**
Create an **index.html** file and add file input attribute in it. Within the index.html file declare the file input tag along with **onchange** event listener. This event listener will trigger the **showFile()** function when the user selects a .txt file.

**JavaScript**

**In js file we will be writing logic for uploading a text file.**

1 - Check whether your browser supports HTML5 File API  
2 - Declare **showFile()** function
3 - Create **file** reference variable to uploaded text file
4 - Create **preview** reference to HTML div where to show text
5 - Create reference to **reader = new FileReader()** API
6 - Declare a **textFile** variable to apply text file validation
7 - Declare **reader.onload** method, within the onload function declare **preview.innerHTML** reference variable where you'll be showing uploaded text file.
8 - Call **reader.readAsText(file)** method and pass **file** variable outside the **reader.onload** method


{% codepen https://codepen.io/singhdigamber/pen/jXXJZO %}

This is just a small topic about [HTML5 FileReader API](https://www.positronx.io/understand-html5-filereader-api-to-upload-image-and-text-files/) to read a text file, here is the detailed article to [Get Started with HTML5 FileReader API to Upload Images and Text Files](https://www.positronx.io/understand-html5-filereader-api-to-upload-image-and-text-files/)
Real-Time iOS View Editing with Sherlock
Tags: ios, design, video
Published: 2019-01-15 07:09:45

---
title: Real-Time iOS View Editing with Sherlock
published: true
description: Sherlock helps you change iOS views in the simulator without recompiling.
tags: iOS, Design, Video
---

I put together a video to show the amazing things that Sherlock by Inspired Code will enable you to do right inside the iOS simulator. I really think this is going to help reduce my edit and run cycles when laying out views in apps.

Thanks for watching.

{% youtube mLSZ1hpLk5Q %}
AEM Responsive Grid with 0px height
Tags: aem, experiencemanager, htl, sightly
Published: 2019-01-15 06:19:25

---
title: AEM Responsive Grid with 0px height
published: true
description: When creating a new page component in AEM, the parsys has a height of 0 and cannot be used.
tags: aem, experience manager, HTL, sightly
---

In AEM when you create a new page component with a editable area that uses the responsive grid (`wcm/foundation/components/responsivegrid`) you might experience an issue where the editable area appears, but has no height, and is unusable. All you get is a thin blue line where the editable area should be.

![Screenshot of unusable editable area](https://thepracticaldev.s3.amazonaws.com/i/fjyznpqt1kqgzexdvwe4.png)

The cause of this is a missing include. To initialize the AEM editing features, an JSP is loaded that initializes all of the editable areas, as well as some other things. 

The solution is to add the following in your `<head>` of your page component

```html
    <!--/* Initializes the Experience Manager authoring UI */-->
    <sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
```

You can remove the comment, but I like to leave it in so I, or anyone else editing the page component, knows why we have it in there. Now you'll see your editable area ready to add components.

![Screenshot of working editable area](https://thepracticaldev.s3.amazonaws.com/i/f0l4q5udxc8ueo4kqlr8.png)

Thanks to user manasip9 for posting [their answer on this thread](https://forums.adobe.com/message/9942397#9942397)  on the Adobe forums.
Day 14: Swift macOS password manager for people who hate the cloud
Tags: macos, swift, passwordmanager, cloud
Published: 2019-01-15 04:32:52

---
title: Day 14: Swift macOS password manager for people who hate the cloud
published: true
description: Watch as I make a password manager for macOS this month
tags: macos, swift, password manager, cloud
series: Making a swift MacOS password manager for people who hate the cloud
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q6r73zbfbm3mpfs98bu5.jpg
---

[<- For Day 13 go here](https://dev.to/swlkr/day-13-swift-macos-password-manager-for-people-who-hate-the-cloud-pdf)

📅 01/14/2019
🚀 16 days until launch
🔥 13 day streak
💰 $4.99 price (this keeps changing)
🤑 $0 revenue
📈 0 customers
⌚️ 9.5 hours spent
💻 19 files changed, 1151 insertions(+), 170 deletions(-)
🏁 Today's goal: **Add more password generation options**

**10:33 AM**
Definitely did not wake up at 6 AM. Already working. Unfortunately it will be a slow day today because after work I just don't have the motivation to eek out huge features on this thing. I will add symbols/numbers/special character support to the generated passwords today though.

**7:43 PM**
Had to run some errands. BACK AT IT. 

**8:43 PM**
I tried to mess around with the design, it turned out horrible. Look at this haha

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

It's actually not that bad. Still needs a lot of *iteration* before I'll like it. Definitely going to launch this ugly thing. Maybe I should make it free, it's so bad currently. There's still 16 days left, hopefully I can pull off a design miracle. Passwords with symbols, capital letters, lower case letters, and numbers coming up!

**9:23 PM**
I spent a long time looking at the dribbble shots for password generators, but after getting lost in [how amazing everything on dribbble looks](https://dribbble.com/search?q=password+generator) I finally started working on this thing again. Here's what I came up with.

![](https://thepracticaldev.s3.amazonaws.com/i/2ym1s7uj8nnp1okmmviy.gif)

Wait a second, that was today's goal, more password generation options! 

![](https://media.giphy.com/media/guJZ84aiImq5i/giphy.gif)
GOOOOOAAAAAL!

About 2 hours tonight... 2 hours too much. Always remember, odds are no one will care about your stuff, if you aren't doing it for fun or getting paid for it, get out!

I should take bets on how many people buy this thing at launch. I bet zero which puts my hourly rate at zero or infinite, I can look at it both ways 🤷‍♂️

For the record, I am having fun. But since odds are I won't make any money, I treat programming outside of work just like playing video games, it's fun, but I do it in small chunks. Tomorrow's goal: search the passwords and maybe get a little bit more ambitious, I should put a copy button next to the password/email/username fields, and continue working on the design 😬