teleren/devto huggingface dataset:
How do you record your learning?
Tags: career, productivity, beginners, help
Published: 2019-03-26 00:53:29

---
title: How do you record your learning?
published: true
description: A small survey about the way you learn and how you store that information.
cover_image: https://images.unsplash.com/photo-1513949145697-7a3b42cb9f21?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
tags: #career #productivity #beginners #help
---

Here are the survey results: https://dev.to/johnson_cor/recording-your-learning-survey-results-kjc

------

I have a problem, and I want to understand if others face the same kinds of issues I do. I've tried bullet journaling, handwritten notes, and building fancy Google Docs.. Yet I always seem to either lose my notes or never look back at them, even if I need to. 

I'd really appreciate anyone willing to take like 5-10 min of their time to fill out the survey, almost everything is optional to fill out :)
Sending SMS using Python
Tags: python
Published: 2019-03-26 00:27:12

---
title: Sending SMS using Python
published: true
description: In this post, we explore the capabilities of smtplib library and how can use that to send SMS to our phones
tags: python
---


Whenever we talk about sending an SMS to our phone using any programming language the first thing that comes into our head is Twilio SMS library.But in this post we are going to avoid twilio and use python builtin module `SMTPLIB` I know it sounds crazy since `SMTPLIB` is used to send emails but we can also send text messages using that module. In order to send text message to your phone all you need to know is sms-gateway. So every carrier has their own sms-gateways and you can read more about it here [SMS GATEWAYS](https://en.wikipedia.org/wiki/SMS_gateway).

### SMS Gateways for each Carrier

- AT&T: [number]@txt.att.net
- Sprint: [number]@messaging.sprintpcs.com or [number]@pm.sprint.com
- T-Mobile: [number]@tmomail.net
- Verizon: [number]@vtext.com
- Boost Mobile: [number]@myboostmobile.com
- Cricket: [number]@sms.mycricket.com
- Metro PCS: [number]@mymetropcs.com
- Tracfone: [number]@mmst5.tracfone.com
- U.S. Cellular: [number]@email.uscc.net
- Virgin Mobile: [number]@vmobl.com

## So lets begin writing the script
- First we need to import smtplib and MIME module that will help us structure our message by the you can read more about MIME here [Multipurpose Internet Mail Extensions (MIME)](https://en.wikipedia.org/wiki/MIME)


```python
import smtplib 
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart

email = "Your Email"
pas = "Your Pass"

sms_gateway = 'number@tmomail.net'
# The server we use to send emails in our case it will be gmail but every email provider has a different smtp 
# and port is also provided by the email provider.
smtp = "smtp.gmail.com" 
port = 587
# This will start our email server
server = smtplib.SMTP(smtp,port)
# Starting the server
server.starttls()
# Now we need to login
server.login(email,pas)

# Now we use the MIME module to structure our message.
msg = MIMEMultipart()
msg['From'] = email
msg['To'] = sms_gateway
# Make sure you add a new line in the subject
msg['Subject'] = "You can insert anything\n"
# Make sure you also add new lines to your body
body = "You can insert message here\n"
# and then attach that body furthermore you can also send html content.
msg.attach(MIMEText(body, 'plain'))

sms = msg.as_string()

server.sendmail(email,sms_gateway,sms)

# lastly quit the server
server.quit()
```


So this was our simple python script that will allow you to send text messages to your phone. I hope you enjoyed this post if you think i missed any thing feel free to dm me on [twitter](https://twitter.com/muhammad_o7)

Furthermore, here's the python module that I wrote that allows you to send text messages without twilio.
[termtext](https://github.com/mraza007/terminal-text)
[Checkout my Website](http://muhammadraza.me)
Visual Studio Tips - Evaluate a Function Without Side Effects
Tags: vstips, csharp
Published: 2019-03-31 00:11:33

---
title: Visual Studio Tips - Evaluate a Function Without Side Effects
published: true
tags: VSTips, csharp
canonical_url: https://hutchcodes.net/2019/03/visual-studio-tips-no-side-effects-function-eval/
---

Ever been debugging and wanted to know what the result a function call would but calling it would change the state in a way that would make continuing difficult or impossible? Well, you can evaluate it and specify that it does not have any side effects.

<!--more-->

Take this simple class that tracks a count and has a method for incrementing that count.

~~~ csharp
class Foo
{
    public int Count { get; private set; } = 0;

    public int AddOne()
    {
        Count++;
        return Count;
    }
}
~~~ 

If we want to see what the result of the `AddOne()` method would be, but we don’t want to actually increment the count because we can’t set it back we can use the `nse` (no side effects) format specifier in both the watch window and the Immediate Window.

~~~ csharp
foo.AddOne(), nse
~~~ 

![alt text](https://hutchcodes.net/img/2019/NoSideEffects.gif "Loop showing calling AddOne method with and with out nse")
Data Structures Project 2: Palindrome Detector
Published: 2019-03-25 23:37:29

---
title: Data Structures Project 2: Palindrome Detector
published: true
description: Thinking Process behind Palindrome Detector
tags: 
---
This is an unexpected post, but I thought it'd be valuable if I jot down my thoughts on my project for Data Structures. I will work on my Calculator project in a future post.

This project basically looks through a .txt file line by line to check for any palindromes. It seems pretty straightforward. I will need one for loop that goes line by line, then another that goes word by word, and then another that goes character by character. In the .txt file, there are spaces, commas and apostrophes in the way, but the code still checks the palindrome for that line regardless. I will need to think of a way to ignore anything that is not a letter. That means I probably need to check the char (ASCII) value for every character. If this char value is not within the range of the alphabet, then that character will not be added to a new string that I’m making that will consist of only letters.

Once this new string is made, then I will make a loop to invert the letters. I can probably make due with a loop that goes through half of the string and switches the letters around. If a make a loop that goes through the whole string, then I would be making the string backwards and then forwards, if that makes sense.

At the end, I will have another for loop that will go through both strings character by character to make sure all match. If they don’t, then it’s not a palindrome that will be outputted.

---
I will work on this project tonight. Overall, it seems straightforward, but I’m sure to come up with challenges. In this post, I briefly described how I will do a Palindrome Detector project. Basically, I need to implement a way to check character by character, a way to ignore anything that’s not a letter, and a way to invert a line. In my next post, I will discuss unexpected challenges I faced with this project and possibly any continuing work in my Calculator project.
Infinite Scroll CVS Receipt 
Tags: html, css, javascript, codepen
Published: 2019-03-25 22:08:32

---
title: Infinite Scroll CVS Receipt 
published: true
tags: html, css, js, codepen
description: CVS is notorious for their receipts, so I decided to share my experience with a simple CodePen using  HTML, CSS, and JS. [View for yourself](https://codepen.io/garrettbear/full/JzMmqg)

---
CVS is notorious for their receipts, so I decided to share my experience with a simple CodePen using HTML, CSS, and JS. [View on CodePen](https://codepen.io/garrettbear/full/JzMmqg)

{% codepen https://codepen.io/garrettbear/pen/JzMmqg %}

I actually made a really crappy web scrapper to get product names and prices from their site using Puppeteer. [View for CVScraper](https://github.com/garrettbear/CVScraper)
Support for ECMAScript2019 syntax highlight of class privates?
Tags: vscode, ide, help
Published: 2019-03-25 23:22:42

---
title: Support for ECMAScript2019 syntax highlight of class privates?
published: true
description: Tuesday 26/03/2019
tags: vscode, ide, help 
---

My Visual Studio Code doesn't talk ECMAScript10 yet. Class privates (using # notation) cause syntax errors similar to the ones you get in browsers. I want this to stop. Do I need to update some configuration setting or download an extension? I did not find one. If no syntax definition exists yet then somebody make one.
Day 1-5 of 100 Days of Code
Tags: beginners, 100daysofcode
Published: 2019-03-23 03:34:10

---
title: Day 1-5 of 100 Days of Code
published: true
description: Nina's Code Log
tags: beginner, 100DaysOfCode
---

I started 100 days of code this Monday! I didn't get as much done as I wanted, as I  was kind of sick, but I just wrapped up my second mini project. I started them both at the same time, but my first project is an interactive card!

<img src="https://thepracticaldev.s3.amazonaws.com/i/cp6ii830jl3qoc1oql6w.gif"/>

I saw a challenge on [Codier](https://codier.io/) about doing a futuristic card, but decided I just wanted to make my own type of card in react instead. I will admit that CSS animations have been a bit foreign to me! I need to research and use them a lot more. It doesn't help that I dived head first into doing 3D perspective with it!

I have to say however, a failing so far is that I  haven't made it mobile responsive. When I make it smaller the width breaks the layout, so I pretty much have to redesign the whole thing for mobile, which is not bad, just means that's another project for another day.

```CSS

#scene {
  width: 35rem;
  height: 20rem;
  perspective: 600px;

  #card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
  }

  .back {
    transform: rotateY(180deg) rotateX(0deg);
    backface-visibility: hidden;
  }

  .front {
    transform: rotateX(0deg);
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

.isFlipped {
  transform: rotateY(-180deg);
}
```
The second project I did actually has a [page](https://misnina.github.io/pokemon-mail/) you can visit! Using the Black and White assets from Pokemon, as well as various pokemon themed fonts, I made a little app that lets you save an [html element as an image](https://github.com/tsayen/dom-to-image) for a cute message.

<img src="https://thepracticaldev.s3.amazonaws.com/i/1n7376h975rsdsm4nlbk.gif"/>

It's a small app, but it's taught me a bit more about React states and state management. I still haven't gotten into Redux yet as it keeps going over my head, but I'll get there someday.


```javascript
  grabMail() {
    domtoimage.toPng(document.getElementById('mail'))
      .then(dataURL => {
        download(dataURL, 'mail.png');
      })
  }
```
in the presence of social media are companies really in need of website ?
Tags: discuss, web, help
Published: 2019-03-25 21:00:15

---
title: in the presence of social media are companies really in need of website ? 
published: true
description: 
tags: discuss ,web, help 
---
i work as a web developer , much more front-end , but sometimes i feel that i'm taking money from the client and i'm 100% sure that the website isn't going to have any impact on the company's marketing ,i mean it's just for the prestige , people are often fascinated by website , but they don't 
know exactly why they need it , i might be wrong , but in some cases building a website is not useful at all  ,if the company has already a presence in social media who'd like to visits the website , is they can display their products in SM and contact client ,show their last news ... etc so why we create the website
Excited to hear your thoughts ....
10 tips for the Angular developer
Tags: angular
Published: 2019-03-25 19:07:15

Today I'm going to tell you 10 tips for any Angular developer.

### 1.

Try to have more or less clear the structure that the project is going to have, or at least decide where it is going to go. It is also important that you decide if you are going to use a NGRX state manager. It is important not to have to refactor the whole project later.

### 2.
Try to modularize and create reusable components. In any programming language it is very important to reuse the code as much as possible to speed up and not have to change the code every time you need a change. Think about the components so that they are isolated and generic to favor reusability.

### 3.
Think about using what Angular offers and before doing anything see if there is already a solution within the Angular ecosystem. For example if wou want to make HTTP request, use the solution that comes in Angular (HTTPClient)

### 4.
Do not download libraries if they are not completely necessary. For example long ago in a project I needed a table component. I was looking at the option of adding a library of table components, but decided to implement my own. 

With this you get to know your project perfectly and have total control of     what you are doing. If you need a change in a library you have to propose it   to its creator and they don't always pay attention to you.

### 5.
Try to use the principles of Optimistic UI. Optimistic UI is a way of displaying information without waiting for a response from the server. For example, imagine that you are developing a real-time chat app. If every time you send a message you have to wait for a response from the server, the user interface will not be immediate. 

One way to resolve this for this example would be to directly paint the message on the screen as if it had been sent correctly. If the response coming from the server is wrong then you show the error. This makes it appear to the user that the application works very fast.

### 6.
If the application is large, try to take advantage of the potential of typescript in terms of creating interfaces and models for the data, that will avoid problems in the long run. In addition you have at your disposal the types for the variables, which is going to facilitate its debugging a lot.

### 7.
If you can use some css code precompiler like scss, that will speed up the creation of styles a lot.

### 8.
Create your own component library. This is something I started using recently. You create a library with the components you want and upload them to a repository. When you have to start a new Angular project, you can always download that library to have components already created.

### 9.
If you create animations, there are ways to reuse them throughout your application, and you will get the code in one place.

### 10.
Use the pipes whenever you can, especially in the lists, this will get much increase the speed of revaluation (pure
Qual elemento está criando scroll horizontal?
Tags: css, ptbr
Published: 2019-03-25 19:05:40

Se, ao criar uma página, você percebeu que ela ficou com uma incômoda barra de rolagem horizontal, você pode executar o seguinte código no console do seu navegador, para descobrir quem é o culpado:

```javascript
var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);
```

Os culpados irão aparecer no Console :)

![](https://avila.net.br/assets/scroll-horizontal.png)
Lightweight replacement of React + MobX
Tags: react, typescript, javascript, opensource
Published: 2019-03-25 18:47:23

---
title: Lightweight replacement of React + MobX
published: true
description: Lightweight replacement of React + MobX (I hope in future Angular/Vue), which does not use the virtual DOM comparison, but the re-render of only the changed parts. Abandon the HTML template in favor of their interpretation in JS, give to us tree-shaking is components/templates and the speed of work increases since the time to parse the template is zero.
tags: react,typescript,javascript,opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cz8bvziftuaqnvji8c3e.png
---

[FastDom](https://github.com/PxyUp/FastDom)

Lightweight replacement of React + MobX (I hope in future Angular/Vue), which does not use the virtual DOM comparison, but the re-render of only the changed parts. Abandon the HTML template in favor of their interpretation in JS, give to us tree-shaking is components/templates and the speed of work increases since the time to parse the template is zero.

[DEMO LINK](https://thepracticaldev.s3.amazonaws.com/i/kedjptyl326dy2xwqycj.png)
[DEMO at StackBlitz](https://stackblitz.com/edit/typescript-wgjbzf)


## Features
1. Size - **4.1 kB** or **1.38 kB** gzipped.
2. The library rewrites only changes and only when it is necessary.
3. Performance - **guarantee 60 fps**.
4. Names of imported functions and classes are not finally and *can be discussed*.
5. There is **a tree-shaking for components and templates !!!**.
How do I build A site similar to crack.com or louderwithcrowder.com.
Tags: webdev
Published: 2019-03-25 18:20:11

---
title: How do I build A site similar to crack.com or louderwithcrowder.com.
published: true
description:  I'm building comedy website where I can publish articles…All I know is HTML, CSS and a little bit of JavaScript. Am I to novice for this project? Im building this site for a friend so I can show on my portfolio..What is the best approach to completing a website like this for a noob like me?
tags: WebDev
---

I'm building comedy website where I can publish articles…All I know is HTML, CSS and a little bit of JavaScript. Am I to novice for this project? Im building this site for a friend so I can show on my portfolio..What is the best approach to completing a website like this for a noob like me?
What are arrays?
Tags: beginners, tutorial, learning, devtips
Published: 2019-05-31 09:59:48

---
title: What are arrays?
published: true
tags: beginners, tutorial, learning, devtips
canonical_url: https://www.codetips.co.uk/beginner/what-are-arrays/
---

> Arrays are collections of data.

 ![What are arrays?](https://www.codetips.co.uk/content/images/2019/03/arrays_written-list.jpg)

Before you read this article, we recommend that you read the [What is a variable](https://codetips.co.uk/beginner/what-is-a-variable/), [What are loops](https://codetips.co.uk/beginner/what-are-loops/) and [What are data-types](https://codetips.co.uk/beginner/what-is-a-data-type/) articles.

In the [What are loops](https://codetips.co.uk/beginner/what-are-loops/) article, we introduced the concept of having a "list" of people.

<!--kg-card-begin: code-->
```
recipients = James, John, Jimmy, Jane, Jake, Jemma, Joanne, Juliet, Jessica, Josh
```
<!--kg-card-end: code-->

In most languages, this "list" would have been created using an array. An array is simply a collection of data.

An array is made up of elements. An element is an item within an array. In the above example, there are 10 elements (`James` is the first element, `John` is the second etc).

[Syntactically](https://codetips.co.uk/beginner/what-is-syntax/) an array is usually denoted using square brackets (`[` and `]`) with a comma separating each element. Arrays can hold any [data-type](https://codetips.co.uk/beginner/what-is-a-data-type/).

Our list of recipients shows a list of names, which are Strings. To convert this list into an Array we would need to use quotation marks (`"`) so they are interpreted as such.

<!--kg-card-begin: markdown-->
```
recipients = ["James", "John", "Jimmy", "Jane", "Jake", "Jemma", "Joanne", "Juliet", "Jessica", "Josh"]
```
<!--kg-card-end: markdown-->

It's just as easy to create an Array with other data-types.

<!--kg-card-begin: markdown-->
```
integers = [1,6,3,5,98]

floats = [2.4, 56.1, 46.1]

booleans = [true, true, false, true, false]

mixed = [5, true, 2.4, false, 3, 64.2]
```
<!--kg-card-end: markdown-->

Array elements have a corresponding number (index). This number is used to target specific elements. In most programming languages indexing starts at zero. Using our recipients example, this would look like the following:

<!--kg-card-begin: markdown-->
```
recipients = ["James", "John", "Jimmy", "Jane", ... ]
index        |   0   |   1   |   2    |   3   | ...
```
<!--kg-card-end: markdown-->

As mentioned above, you can use the index to target specific elements in any order you want:

<!--kg-card-begin: markdown-->
```
array[2] // => Jimmy

array[0] // => James

array[3] // => Jane
```
<!--kg-card-end: markdown-->
thefuck and Other Funny Useful Tools
Tags: discuss, commandline, beginners
Published: 2019-03-25 17:46:54

---
title: thefuck and Other Funny Useful Tools
published: true
description: useful tools that don't take themselves too seriously
tags: #discuss #command line #beginner
---

So recently I was introduced to [nvbn/thefuck](https://github.com/nvbn/thefuck)
 by [@alfcnz](https://twitter.com/alfcnz) 

![fuck](https://thepracticaldev.s3.amazonaws.com/i/pg7ul1cj6w8rcd7o6ksm.gif)

It is a very useful tool that allows u to type the word `fuck` after you fuck up a command and it will run the command you were trying to run instead (within reason). Not only is this tool super useful but it was developed with a very playful and humorous writ. I have such an appreciation for people who can make things and do so without taking themselves too seriously. People who do this well remind us that software and how it is written should be fun as well as useful. Sometime this can be easy to forget.

So I am looking for other useful & funny tools to add to my stack. Share any that you think do this well. What are your favorites?
Console.log with CSS Style
Tags: browserfeature, consolelog, css
Published: 2019-03-25 17:34:25

---
title: Console.log with CSS Style
published: true
description: How to log with oppa gangnam style
tags: 
- browser feature
- console.log
- css
---

I remember when I was young and naive, I accidentally right clicked on Facebook browser and saw this HUGE ASS WARNING. I thought it was cute. Guess who has the same warning. (Something that ends with plus)

![Facebook's warning log](https://thepracticaldev.s3.amazonaws.com/i/xc10k7gmmtoamltpqhvt.png)

Spoiler alert, it's still there.

Most modern browsers support styling for `console.log()`, except for Safari. (Whut) Add `%c` before the text in the first parameter and CSS style in the next parameter.

``` js
      console.log(
        "%cStop!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );
```
<b>Tip</b>: Right click on this page and click on inspect. Paste the above code in the console now.
<b>Another tip</b>: This tutorial is meant to impress noob. If you already know this, move on with your life.

You can have multiple CSS styles in a `console.log()` by using the format below.

``` js
console.log('%cb %cb ', 'color:blue;border:1px solid black', 'color:black;border:1px solid black');
```

You may be able to use CSS style with other methods in `Console`. While I still enjoy misusing the good old `console.log` in my code, the right approach would be to use a debug module like `https://www.npmjs.com/package/debug` that allows you to show and hide the log easily.

## Demo, 
{% codepen https://codepen.io/linxea/pen/OdgGqP %}
Right click in this page to see the console.log().

## Question, 

What does the `c` in `%c` stand for? 
a. CSS
b. Custom
c. Character
d. None of the above


Reference:
https://developer.mozilla.org/en-US/docs/Web/API/console

## New day new cringey video,
{% youtube FU7aRSfrR_M %}