teleren/devto huggingface dataset:
Three great places to start learning HTML
Tags: beginners, webdev, learning, codenewbie
Published: 2018-12-13 04:05:13

---
description: You can jumpstart your HTML journey for free &mdash; it won't even cost you an email address.
---

I'm always on the hunt for great learning resources &mdash; both for myself, and for anyone who asks me how to get started as a developer. 

There are a lot of places to learn HTML on the web, but it's hard to find one that works if you have zero prior experience. It's easy to think you're starting at square one, only to discover it's not actually square one, and now you're completely lost in the woods, it's dark and scary, there are glowing eyes in the trees, JS frameworks are popping up to say "Boo!" every thirty seconds, someone on the trail ahead is screaming about web assembly, you can hear bubble sorts and whiteboards howling in the distance, you have no idea what any of this means, and you just want to go home!

I can't say I blame you.

To avoid all that confusion, here are three absolute beginner's HTML resources I highly recommend to anyone who's looking to dip their tippy-toes in the infinite web development ocean and come away unscathed. These are all extremely beginner-friendly, and totally free-free (as in, you won't even need to spend an email address).

Your very-not-scary HTML journey starts here:
- [Learn HTML in 12 Minutes](https://www.youtube.com/watch?v=bWPMSSsVdPk) (Video) by Jake Wright
- [Getting Started with HTML](https://sabe.io/classes/html/) at [Sabe.io](https://sabe.io/)
- The ['Web'](http://marksheet.io/introduction.html) and ['HTML 5'](http://marksheet.io/html-basics.html) sections at [Marksheet.io](http://marksheet.io/)

I suggest going through all three, in this order. They'll cover similar content, but come at it from slightly different angles. You can probably get through everything in an afternoon. After that you'll have a great foundation to tackle a longer, more in-depth HTML or CSS course.

Good luck! And let me know about your favorite, beginner-friendly, free-free resources.

---

Was this helpful? Did I save you some time?

## {% cta https://www.adamlombard.com/support-me %} 🫖 Buy Me A Tea! ☕️ {% endcta %}

---
To React with best practices
Tags: react, webdesign, webdev
Published: 2018-12-21 07:51:07

---
title: To React with best practices
published: true
tags: react, web design, web development
canonical_url: http://metamn.io/react/to-react-with-best-practices/
---

WordPress is here with Gutenberg — it’s time to learn React.

The last two years I’ve spent with working on projects far from the edge having no time to catch up with web design and development best practices — it’s time to re-learn them.

I’m used to feel comfortable in the wilderness. In 2015 I’ve created my own [styleguide with Gulp](http://metamn.io/styleguide/). Then I was featured on [Brutalist Websites](http://brutalistwebsites.com/metamn.io_gust/). And I run [another blog](http://metamn.io/beat/) with edge on industry.

I still feel left behind.

My biggest issue is that my old framework built on BEM / SCSS / HTML5 and vanilla Javascript was all good minus the Javascript part. I’ve struggled to make things move on the screen. Yes, I needed to find something better than Javascript and that’s how I first went to Vue, then now to React.

With these frameworks you don’t write vanilla JS code. You write strange markup and styling to declare and control the UI with minimum original Javascript. Just plumbing together what the framework offers. That’s what I really needed.

With Vue I was enthusiastic. It was the best and fastest way to get connected with the reactive UI world.

After a year, now, I’m on React. I really love it. In a week I’ve managed to set up [a complete Storybook](http://metamn.io/mr-ui/), create [new components](https://github.com/metamn/new-component) the way I want, and now put together this blog in an afternoon. Thanks [Gatsby!](https://www.gatsbyjs.org/)
The Gitignore file
Tags: video, git, podcast
Published: 2018-12-13 00:24:03

---
title: The Gitignore file  
canonical_url: https://zellwk.com/blog/gitignore-file
video: xlQIABDgTOs
podcast: e5bf779f
tags: video, git, podcast
description: You already know Git is like a save point system. What you've done so far is to learn to save. But how do you undo, and go back to a previous state? That's what we're going to cover 
published: true
---

{% youtube xlQIABDgTOs %} 

If you don't want to commit a file into a Git repository, it makes sense not to have the file show up in the staging area. 

You can do this with a Gitignore file. 


In the video, we installed a library called Typi with npm. Many files come into our staging area when we installed Typi. 

<figure>
  <img src="https://zellwk.com/images/2018/gitignore/node-modules-folder.png" alt="Node modules files in staging area">
</figure>

To prevent `node_modules` and its files from appearing in the staging area, you: 

1. Create a `.gitignore` file at the root of the project
2. Add `node_modules` in the Gitignore file 

And the staging area becomes clean. AT this point, you want to commit your `.gitignore` file to preserve what to ignore. 

<figure>
  <img src="https://zellwk.com/images/2018/gitignore/clean-staging-area.png" alt="Node modules removed from staging area">
</figure>

## How to use Gitignore

Each line in the Gitignore file can be used to match files and folders you don't want to see in the staging area. 

1. To ignore a file, you write the file name. 
2. To ignore a folder, you write the folder name
3. To ignore an extension, you can use a `*` wildcard, like `*.log`

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/gitignore-file). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
the other 10% of my job is...
Tags: discuss, fun
Published: 2018-12-12 22:18:49

---
title: the other 10% of my job is...
published: true
description: We discussed what 90% of our jobs entail, but what about the other 10% ... that little bit that's left. What do we do with that?
tags: #discuss #fun
---
Last Friday, [@david_j_eddy](https://dev.to/david_j_eddy) dropped a fun discussion topic here on DEV:

{% link https://dev.to/david_j_eddy/90-of-my-job-is-8ie %}  

Lots of folks piled on the comments, shortening their jobs to just the essentials. In case you missed it, here are a handful of descriptions that I found particularly on point...

**For those that code with an eye on requirements.**
{% devcomment 7ddh %}
**For those that refactor old code.**  
{% devcomment 7dd9 %}
... in other words:
{% devcomment 7dda %}
Haha! Well, at least there's work to be done! 😅

**For those that manage and code.**
{% devcomment 7do7 %}
{% devcomment 7dmn %}
**For those that avoid meetings.**
{% devcomment 7dom %}
**For those that fiddle.**
{% devcomment 7dbn %}
**For the many sad folks that double as their org's IT Department.**
{% devcomment 7do6 %}
{% devcomment 7doh %}
{% devcomment 7e29 %}
Sorry peeps! 😔

**For those lucky enough to write mostly just code.**
{% devcomment 7dme %}

Well, looks like there's quite a bit of overlap in our jobs... just know, you're not alone.

So, I pose a new slant on this same question: What's the other 10% of your job? What are some of the oddball things you do throughout the day? And how does that 10% stack up against the 90% part... more fun, less fun? Well, hopefully it's more fun than helping somebody print something! 😄

p.s. @vaidehijoshi is the bomb. (this is a test)
What are your goals for 2019? 
Tags: discuss
Published: 2018-12-12 20:41:21

We're getting close to the end of the year, and soon it'll be 2019. What are some of your goals for 2019? 

Mine:

- Get more hands-on experience with machine learning.
- Release another book or course
- New version of my personal website ([glennstovall.com](https://glennstovall.com))

How about you?
Silly Repos
Tags: discuss
Published: 2018-12-12 20:28:12

---
title: Silly Repos
published: true
description: eeeeeeee!
tags: discuss
---

Got any favs? I just learned about this one from @annarankin!

{% github https://github.com/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee %}

😂
#TIR: A call for Rust 2019 Roadmap blog posts
Tags: tir, rust
Published: 2018-12-12 20:13:43

---
title: #TIR: A call for Rust 2019 Roadmap blog posts
published: true
description: 
tags: tir, rust
---
>It's almost 2019! As such, the Rust team needs to create a roadmap for Rust's development next year. At the highest level, Rust's development process looks like this:

1. The Rust community blogs about what they'd like to see.
2. The core team reads these posts, and produces a "roadmap RFC," a proposal for what next year's development looks like.
3. The RFC is widely discussed, and modified in response to feedback, and eventually accepted.
4. This RFC becomes a guideline for accepting or postponing RFCs for the next year.

[link-->](https://blog.rust-lang.org/2018/12/06/call-for-rust-2019-roadmap-blogposts.html)

# Dev.to 2019 Roadmap?

Does Dev.to have a roadmap 2019?

I have features request:

  1. Auto generated directory for long posts
  2. support Google Translate
  3. no others

:)
Can we avoid the bullshit bubble?
Tags: discuss, motivation, programming, career
Published: 2018-12-12 19:57:59

---
title: Can we avoid the bullshit bubble?
published: true
description: 
tags: #discuss #motivation #programming #career
---

A lot of software development deals with integrating some badly designed system with another badly designed system, resulting in a system that is even worse to use and to maintain. At least that's what I have been observing during the last few years, mainly in the domain of so-called enterprise software.

Why is that? I am not sure but I guess it's because it generates revenue. It makes sense from an economical point of view. Crappy software is simply a sustainable source of income for some of us.

But is it healthy for the developers or the users? Even though it might sometimes be highly intellectually challenging to work on this type of project, I guess that most of us are not interested in doing just another bullshit job. Furthermore, this effect is bad for the reputation of our profession as a whole.

Did you make the same observation? Is there a way out?

(By the way, luckily most of my own projects do not belong to this category, however some of them do.)
#TIR: Plataformatec and Elixir: 2018 in review
Tags: tir, elixir, 2018
Published: 2018-12-12 19:38:46

---
title: #TIR: Plataformatec and Elixir: 2018 in review
published: true
description: 
tags: tir, elixir, 2018
---

Read from [Elixir Radar](https://app.rdstation.com.br/mail/878e9a4e-d4df-4c7a-ac67-750ee9961d2b?utm_campaign=elixir_radar_171&utm_medium=email&utm_source=RD+Station)

>As the company behind Elixir, Plataformatec has been involved with Elixir since its conception through José Valim, Elixir’s creator, co-founder and Director of R&D at Plataformatec.

>This year we set up a new challenge for us: we would like to increase the team of developers working on the Elixir ecosystem from 1 developer to 3 developers, with at least 70% of their time focused on the community. We are glad to say we were able to achieve this milestone and drastically increase the contributions we have done to Elixir since then. This post is a recap of the contributions we made throughout the year 2018 and what to look forward next.

[link-->](http://blog.plataformatec.com.br/2018/12/plataformatec-and-elixir-2018-in-review/?utm_campaign=elixir_radar_171&utm_medium=email&utm_source=RD+Station)
Developing Modern Apps with Symfony and React
Tags: symfony, react, javascript, php
Published: 2018-12-12 19:25:45

---
title: Developing Modern Apps with Symfony and React 
published: true
description: Learn how to create modern and secure applications with two mainstream technologies—React and Symfony.
tags: #symfony #react #javascript #php
canonical_url: https://auth0.com/blog/developing-modern-apps-with-symfony-and-react/
---

In this post, you will learn how to develop web applications using React and Symfony. Moreso, you will also learn how secure both the frontend and backend of the application by adding authentication and authorisation using Auth0. React will be used to power the frontend logic of this application while Symfony will be used to build the backend API.

[Read on 🎼⚛️](https://auth0.com/blog/developing-modern-apps-with-symfony-and-react/?utm_source=dev&utm_medium=sc&utm_campaign=sym_react)

![Developing Modern Apps with Symfony and React ](https://thepracticaldev.s3.amazonaws.com/i/scgnwph05w24ivmes5uu.png)
Essential packages for Node.js newbies
Tags: node, newbie, beginners, help
Published: 2018-12-12 19:25:08

---
title: Essential packages for Node.js newbies
published: true
description: I'm trying to create a list of all the essential packages a new Node.js developer should know about
tags: node.js, newbie, beginner, help
---

<p>Finding packages in NPM that solve certain problem or that just can make your life easier as a developer can be difficult, and even more if you're new to Node.js.</p>

<p>When I started learning Node I asked some of my friends (which were already working in JS projects) to tell me the packages they used the most so I could level up my skills. The list I got was very basic and I've been adding more packages to it whenever I've found the need to use them.</p> 

<p>Searching here I found <a href="https://dev.to/ben/what-are-some-useful-npm-packages-i-might-not-know-about-55i" target="_blank">this post</a> by @Ben from last year and, although people suggested a lot of very useful packages, I think they are mostly for advance users.</p>

<p>I know this list is very short so maybe we can improve it together!</p>


Backend:
    - express: web application server framework
    - body-parser: middleware for express
    - hapi: another web framework with built in plugins for auth, caching, cookies... (<a href="https://dev.to/w9jds" target="_blank">@Jeremy Shore</a>)
    - axios: to send http requests.
    - dotenv: load variables from a .env file as environment variables. Super useful to load different database details depending on local, staging and production.
      
Database:
    - mongoose - Interact with MongoDB
    - json-server - Creates a fake REST API from a JSON file. Super useful when working in front-end projects or to mock an external API.    

Security, encrypt:
    - jsonwebtoken: to generate ,validate and decode JWT
    - bcrypt: encryption functions

Testing
    - mocha: Testing framework
    - chai: Assertion library
    - jest: another test framework with coverage reports built in (@joelnet)
    - chai-http: send http requests from your tests
    - sinon: To create stubs
    - nock: To create mocks
    - nyc: To generate test coverage reports

Others:
    - amqplib: For Rabbit MQ
    - debug: prints debug messages in console
    - watson: another debug library, has different levels of debug
    - url: to parse URLs
    - moment: to format dates
    - lodash: helper functions to work with arrays, objects, numbers...

Plugins/code formatters:
    - nodemon: restart app when changing files
    - prettier
    - eslint

<p>What do you guys think? Which are the essential packages you think a newbie should know about? I'll try to keep this list updated as much as I can so it can be helpful to others :)</p>
Run AzureDevops builds from command line
Tags: vsts, azure, devops, perl
Published: 2018-12-12 19:08:21

---
title: Run AzureDevops builds from command line
published: true
description: true
tags: vsts, azure, devops, perl
---

If you prefer command line, AzureDevops comes with [vsts cli](https://docs.microsoft.com/en-us/cli/vsts/overview?view=vsts-cli-latest) allow you to execute many VSTS related operations through the command line. However you still need extra bash coding to make it run smoothly. Why bother? Choose [vsts-build](https://sparrowhub.org/info/vsts-build) instead!


```
$ cat .sparrowdo/run-build.pl6
task-run "run build", "vsts-build", %(
  definition => 'Backend01'
);

$ sparrowdo --no_sudo --local_mode --sparrowfile=.sparrowdo/run-build.pl6
user: root
found ini file: /root/sparrowdo.ini
index update: False
running sparrow tasks on 127.0.0.1 ...
target OS is - centos7
push [task] run build [plg] vsts-build OK
SPL file /opt/sparrow/sparrow.list is empty
set up task box file - /home/root/.sparrowdo//opt/sparrow/task-box.json - OK
sparrow root: [/opt/sparrow]
plugin /opt/sparrow/plugins/public/vsts-build/ installed locally, nothing to do here ...
running task box from /opt/sparrow/sparrow-cache/task-box.json ...
2018-12-12 13:02:44 : [task] run build [plg] vsts-build [hook]
2018-12-12 13:02:44 : [task] run build [plg] vsts-build [path] /modules/run/
vsts build queue --definition-name Backend01 --branch refs/heads/poc/storage-account
    ID       Number  Status      Result      Definition ID  Definition Name    Source Branch        Queued Time                 Reason
------  -----------  ----------  --------  ---------------  -----------------  -------------------  --------------------------  --------
219604  2.01812e+07  notStarted                       1240  Backend01           feature/storage-account  2018-12-12 13:02:45.551673  manual
ok      scenario succeeded
STATUS  SUCCEED
```
Try to the SAML authentication of Growi using keycloak - part1.
Tags: keycloak, growi, saml, node
Published: 2018-12-12 18:14:11

# Intruduction
The Growi Wiki was forked by Crowi Wiki.
- Github: https://github.com/weseek/growi/
- Official website: https://growi.org/
    - If you want to try to use, live demo site is on link of the official website.

The Growi Wiki is useful, contanerble.

And it can use the full text search (Elastic Search) and relations with the [CodiMD](https://hackmd.io).

NOTE: Now, Growi Wiki recruit new members  about  contributing localization of English by Slack. If you would like to interest, lets try to join to Growi Slack.

Recentory, the Growi Wiki was implemented the SAML authentication.
So I try to settings the SAML authentication on Growi.

# Procedure
## Definition of version
- Keycloak ver.4.0.0 Final (Note:Make it already constructed)
- Growi ver.3.2.4 (Note:Make it already constructed)
- Docker ver.18.03.1-ce
- Docker-compose ver.1.21.2

## Settings flow
### Growi
1. On Growi, Open manegement(管理) with admin authrized.
 - App settigs(アプリ設定)
    - Site URL: https://wiki.examle.com
        - This is an important setting because it is also used in security settings of SAML as environment variables.
    <img src="https://i.imgur.com/0lFP91b.png" alt="image.png" width="500" height="250">
 - Security settings(セキュリティ設定)
     - Passport Authrization(認証機構): Enable(有効化)
     - SAML: ON
2. On Growi, Push buttun of [Refresh(更新)].
3. On Growi, Make a note about callbak URL(コールバックURL).
    <br clear="left"><img src="https://i.imgur.com/rX1F6ju.png" alt="image.png" width="500" height="350">


< contine to next part2 (Please wait 3 weeks until the next article release)>
How to handle a simple freeze on your Linux system
Tags: productivity, learning, journey, linux
Published: 2018-12-12 17:58:47

---
title: How to handle a simple freeze on your Linux system
published: true
tags: productivity, learning, journey, linux
---

# Handling a simple Linux system freeze

Recently, I pressed some wrong key combo in Firefox and around ~80 tabs opened in Firefox... My music player played an endless loop.


## Solution

First of all, I guess you are using a Desktop Environment, e.g. Gnome, KDE, Xfce.

Try to hit `Cmd + Alt + F2`.
This is a terminal which isn't linked to the current graphical session.
If you can't open it by pressing `Cmd + Alt + F2`,
try pressing `Cmd + Alt + F3`.

You will see a screen like this:

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


Now input your Username and Password.
If this works, you will see your user terminal, e.g. bash.
Now input `htop` and press Enter.

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

If you get something like `command not found: htop`, install `htop`, e.g. 
`sudo apt-get install htop` or `sudo pacman -S htop` depending on the distro you're using.

`htop` will open up.

![htop opens](https://thepracticaldev.s3.amazonaws.com/i/tmv4sko70jply6i0uwll.png)

At the bottom you can see some commands.
Press `F6` to sort the list, on the left side a menu will open up,
where you should navigate to `PERCENT_MEM` and hit Enter.

![sort list](https://thepracticaldev.s3.amazonaws.com/i/1bhg5sj9cjyu95ia22zo.png)

Now the list is sorted by the processes, that use the most system memory.
Most of the time too much used memory leads to this kind of freeze.

Now navigate to the top of the list and choose the application, that probably causes the freeze, in my case `/usr/lib/firefox/firefox` is a good guess.
Now press `F9` and another menu will pop up.
Choose `15 SIGTERM` and hit Enter.

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

If you're lucky, it will terminate the selected application.
If it doesn't work, choose `9 SIGKILL`.

Sometimes you have to close multiple instances of the application,
you can also find them in the list.

You can go back to your Desktop Environment by pressing `Cmd + Alt + F1`.
This is raw
Tags: code, development, programming, security
Published: 2018-12-11 14:54:48

---
title: This is raw
published: true
tags: code,development,programming,security
canonical_url: https://craignicol.wordpress.com/2018/12/11/this-is-raw/
---

This is raw chicken : ![🐤](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f424.png)

If you eat it like that, you may get hurt immediately, by its beak, or its claws. It may grab your money and run off with it.

If you want to eat it, better to kill it first. ![💀](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f480.png)

If you eat it like that, you may get hurt or die, in a few hours, or days. [Washing it won’t help](http://www.theguardian.com/lifeandstyle/2014/jun/16/do-not-wash-chicken-advises-fsa).

Cook it. Cook it well. If there’s any sign of pink, cook it some more. ![🔥](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f525.png)

It might still kill you, but at least you’re a lot safer than when you started.

* * *

This is raw data : ![🐤](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f424.png)

If you display it, users will get hurt immediately, whether by cross-site scripting, cookie sniffing, crypt-currency mining, or something else. If you’re lucky, it will be something your user’s see immediately and leave your site never to return. Otherwise they may get infected.

If you want to use it, better to validate it first. ![💀](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f480.png)

If you save it like that, your users are still vulnerable. It might appear on the front end in a different form. [It might be a string of unicode characters that crashes your phone](https://www.youtube.com/watch?v=jC4NNUYIIdM). It might be a link to somewhere they can’t trust.

Encapsulate it. Sandbox it. [Never trust it, in or out](https://craignicol.wordpress.com/2016/01/18/the-zeroeth-rule-of-network-security-dont-trust-your-users/) . HTML encode, whitelist the output as well as the input.

And if you need to avoid spam, or incitement, or solicitation, maybe you need editors. Computers can’t fix all the social problems. ![🔥](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f525.png)
post data with flutter
Tags: flutter, forms
Published: 2018-12-12 17:43:16

---
title: post data with flutter
published: true
description: 
tags: #flutter #forms
---


Hi all!
I'm stuck with flutter.io to find a good way to post data form after submit button is pressed. I did not found something familiar in the flutter.io documentation.
Do you have any suggestions where to study this "simple" task ?

Thank you!!