teleren/devto huggingface dataset:
CodeLand 2021: Motivation & Career-Long Connections For Early-Career Devs
Tags: codeland, codenewbie, beginners, meta
Published: 2021-06-16 16:56:21

---
title: CodeLand 2021: Motivation & Career-Long Connections For Early-Career Devs 
published: true
description: 
tags: codeland, codenewbie, beginners, meta
series: CodeLand 2021 Updates
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/teehhlk6nt94xk2p6hxi.png
---

CodeLand is coming back in 2021 as a two-day virtual conference on September 23rd and 24th!

While nothing needs to entirely replace face-to-face conferences, we received such amazing feedback from the global community about how accessible last year’s event was. We want to double down on what made it great and improve on what needs improvement. With a lot of uncertainty remaining in 2021, you can mark this date on your calendar with confidence.

This will be a two-day event (as opposed to one **very long** day of talks last year) where the focus will be maximum positive impact for early career developers. When we talk about impact, we mean memorable moments and also memorable people. Look for opportunities to make lasting online connections and make this the most important two days of the year for your career progress as a developer.

**CodeLand will take place on [the CodeNewbie Forem](https://community.codenewbie.org) this year. There will be additional registration information to follow, but the first step is to join this community if you have not already.**

### CodeLand 2021 Details

* **Location:** Virtual-only, on [CodeNewbie Community](https://community.codenewbie.org)
* **Dates:** Thu, Sept 23 and Fri, Sept 24
* **Times:** Six hours per day – 4-10 PM UTC
* **Format:** A mix of live keynotes, pre-recorded talks, and live speaker panels on both days. 
* **Cost:** Free access to all keynotes, talks, and panels.
* **Registration:** Coming soon!
* **CFP:** Opens June 22


This year's event will feature more community participation and representation on the program — with more surprises to come. 🎉 


## Next Steps 

* Join [The CodeNewbie Forem](https://community.codenewbie.org) and watch out for official conference registration
* Download the [Forem iOS app on the App Store](https://dev.to/devteam/forem-for-ios-is-here-4g3f) if you have not already. We plan to make the best possible use of our open source technology— So get acquainted. _Android app is in the works._✨
* [Sign up](http://eepurl.com/hBb5pv) for the “CodeLand 2021 Updates” email list for one more way to ensure you don’t miss any announcements.


## For even more details on CodeLand, please visit [this post](https://community.codenewbie.org/codenewbie/codeland-is-coming-sept-23-24-2021-238p) from @saronyitbarek on CodeNewbie Community and the [CodeLand 2021 website](https://codelandconf.com). If you are interested in sponsoring CodeLand, please fill out [this](http://eepurl.com/hAJVkb) form.
FrontEnd Development Road Map
Tags: webdev, webmonetization, javascript, react
Published: 2021-06-16 16:55:41

Hey guys!!! Hope everyone are safe and coding. Will take you to the frontend development journey. Let's grow together🤗
Will be posting the detailed ideas on each topic one by one every week....hope you will love the content😍 Keep reading...

Internet
HTML
CSS
JavaScript
Version control Systems
Web Security
Package Manager
CSS Architecture
CSS Preprocessors
Build Tools
   * Task Runner
   * Linters and formatters
   * Module bundlers

Front End Frameworks
Web components
Modern CSS 
CSS Frameworks
Testing the apps
Progressive Web Apps
Server Side Rendering
GraphQL
Static Site Generator
Web assembly
[Podcast] Statuspal Running in Production
Tags: elixir, docker, devops, podcast
Published: 2021-06-16 16:44:40

Join our CEO Eduardo Messuti in the [▶️ Running in Production podcast](https://runninginproduction.com/podcast/87-statuspal-is-a-service-for-hosted-status-pages-and-monitoring), where he and host Nick Janetakis talk about the different challenges that go behind the curtains in running a hosted status page & monitoring platform using Elixir and Phoenix since 2017.

Some of the subjects discussed are:

- How picking Elixir as the backend impacted the project early on as it was maturing.
- Hosting the platform in DigitalOcean and Heroku.
- How we manage to serve ~500k requests/day.
- How we created a Restful API to send batch email through our customer's SMTP servers.
- How we use Docker and docker-compose together with Github actions for deployment.
- What's our experience with hiring Elixir developers.

For this and much more interesting insights listen to the podcast at:

[▶️ The Running in Production podcast ▶️](https://runninginproduction.com/podcast/87-statuspal-is-a-service-for-hosted-status-pages-and-monitoring)
SvelteKit ❤️ Windi CSS
Tags: svelte, windicss
Published: 2021-06-16 16:38:17

## Specification
- @sveltejs/kit: "next" (1.0.0-next.115)
- vite-plugin-windicss: "^1.0.0" (1.0.4)
- @sveltejs/adapter-static: "next" (1.0.0-next.13)

## Features
- store using localstorage for theme
- dark mode correctly before everything get rendered
- dark mode for Windi typography plugin

## Demo
![Sveltekit ❤️ Windi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iovde3sxjeodirm4xem4.png)
[**Live Demo**](https://sveltekit-windi.netlify.app)

## Running the project

Clone this repo and cd to the directory, then run npm or yarn

```bash
pnpx degit dansvel/sveltekit-windicss myproject ## or npx
cd myproject
pnpm i ## or npm or yarn
pnpm run dev

## to generate static web
pnpm run build
```

## [Go to Repo](https://github.com/dansvel/sveltekit-windi)
Callbacks in JavaScript explained! (video)
Tags: javascript, callbacks
Published: 2021-06-16 16:33:45

{% youtube cNjIUSDnb9k %}

Video Sponsors: https://getstream.io/aniakubow . Stream is a maker of enterprise-grade developer tools that help product and engineering teams solve two common problems at scale: in-app chat, and social activity feeds.

Callbacks in JavaScript Explained!

In this video I explain what Callback functions are with the help of a simple example, and a more complicated one.

___
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

###You can also find me on:
* Twitter: https://twitter.com/ania_kubow
* Instagram: https://instagram.com/aniakubow
Its not all about coding junior engineers
Tags: skills, junior, engineers
Published: 2021-06-16 13:32:51

### Develop these on top of coding to take your game to the next level


1. Learn to be a sponge. Absorb as much knowledge from others as you can.
5. Help others. You will need their help later. 
2. Know when you are stuck.
10. Encourage feedback from others.
2. Know the right time to ask for help. 15 minutes of trying in my experience.
2. Learn to question others without making them feel threatened.
3. Don't be afraid to make mistakes.
5. Seek learning opportunities outside your comfort zone. 
6. Focus on one thing at a time.
13. Encourage others to question you.
7. Learn how to effectively communicate your progress. 
12. Know it's okay to have opinions. Know it's also okay to change your opinions.

Inspired by [An incomplete list of skills senior engineers need, beyond coding](https://skamille.medium.com/an-incomplete-list-of-skills-senior-engineers-need-beyond-coding-8ed4a521b29f)

[Original post](https://www.codezombie.io/posts/junior-software-engineer)

[Follow me on twitter](https://twitter.com/codezombie28?ref_src=twsrc%5Etfw)
16 Beautiful Color Palettes 🎨 for Your Projects 👨‍🎨
Tags: webdev, codepen, css, ux
Published: 2021-06-16 16:32:13

<h1>Introduction</h1>
When developing websites, the first question for developers is about creating a design. But due to their inexperience, many novice developers who do not even know the simple rules of `coloristics`, begin to use in their works absolutely any colors that they just liked. At the same time, without paying absolutely no attention to whether these colors are combined at all or not. And as a result, a good project can be ruined due to the lack of minimal taste in the developer, who simply went too far with the color scheme.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ya1otwlqa8dtl8lprti.gif)

I was the same myself, until eventually I gained a little experience in selecting colors for projects. I also decided to make a list of my favorite palettes, which I often use when developing my projects. Of course, I understand that not everyone can like them, `but there are no friends for the taste and color.`
>Different strokes for different folks.

<h1>CodePen</h1>
I decided to put my palettes on Codepen to make it easier for you to use them.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49dz7ihstsso9ev2pmtp.png)
{% codepen https://codepen.io/Astap/pen/abJXNVj %}

<h1>The End</h1>
Friends, thank you for your time. See you in the future. And don't forget to color your projects beautifully.
![Alt Text](https://media.giphy.com/media/26ufjTvmGrdtrCqJi/giphy.gif)
Scout APM Launches Error Monitoring for Ruby Applications
Tags: ruby, rails, news, devops
Published: 2021-06-16 16:29:47

[Scout APM](https://scoutapm.com?utm_source=devto&utm_medium=social), a leading provider of Application Performance Monitoring (APM), announced the release of [Scout Error Monitoring](https://scoutapm.com/error-monitoring?utm_source=devto&utm_medium=social) for Ruby applications on June 1, 2021. Scout APM provides developers and application administrators software performance insights by delivering key web application performance metrics. 

Traditionally an APM tool, Scout has expanded its service offerings to now include error monitoring of web applications for more cohesive and actionable observability insights within a single platform. This new feature supports an overall better user experience by eliminating the need for multiple web-application monitoring services; Scout APM with Scout Error Monitoring offers performance and error insight and alerting within a single, integrated dashboard.

>“Scout’s industry-leading performance and, now, error monitoring solutions are essential for developers building performant, cloud-native applications,” says Jason Hable, Scout’s CEO. “We wanted to expand our services to build a more holistic performance and exception monitoring tool to help our customers solve issues quickly and efficiently. By connecting error reporting and performance monitoring data in one platform we provide our customers with the insights they need without paying for the features they don’t.”

Multiple trends and factors have contributed to the growth of both the APM and error monitoring markets in recent years. Companies are experiencing an increased reliance on advanced data analytics and automation as cloud computing and containers become progressively mission-critical. 

**About Scout APM**
Launched in 2015, Scout APM offers application performance monitoring (APM) “built for developers, by developers”. Scout’s customers include companies such as Recurly, Root Insurance, KPMG, and Broadcom, among others. For more information, or to try Scout APM + Error Monitoring free for 14 days, visit [ScoutAPM.com](https://scoutapm.com?utm_source=devto&utm_medium=social).
LaTeX & Maths: Inline and Displayed Formulas
Tags: latex, codenewbie
Published: 2021-06-16 15:54:24

Hello, how are you today? 

Welcome, welcome to the new section **Maths in LaTeX**. During these weeks we have checked lots of information, from *how to install LaTeX*, Images, Tables to Cross-Referencing. It looks easy, but you need to be practicing that to master it. 

Here, in this section, we are going to use all **ALL** the stuff that we have checked, from types of letters to cross-referencing. So, if you do not remember something I could tell you *Check the topics here in my posts*

> Let's start with this new journey :) 

Before starting, let me tell you that there are tons, huge amounts of symbols in LaTeX and that I am not going to cover all of these, *It is impossible!* that is why i will give you some resources to check them all in the appropriated moment 

## Formula Input 

There are two kinds of formulas in `LaTeX`

1. Inline formula 
2. Displayed formula

### Inline formula 

An *inline formula* is displayed in the same line, it is, in the same line where you are writing. You can tell to LaTeX to put an *inline formula* with `$`, one at the beginning of the formula and one at the end of the formula

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bswv43v57bt8ofm8x2xk.png)

Produces 

![Screenshot from 2021-06-13 11-57-13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd6he0q79q5f60obzw9v.png)

### Displayed formula 
 
An *displayed formula* is displayed in a separate line and centered. You can tell to LaTeX to put a *displayed formula* with `\[ formula \]`

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gx004rc4i0zzvtm718n.png)

Produces

![Screenshot from 2021-06-13 12-03-56](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xkhjm2vl1sipiy5w19w.png)

### Differences 

The difference between *inline* and *displayed* formulas 

- How those are printed
- Their appearance

What?!? appearance?!? Those are the same!! Yes, until now, but in a future you will see the magic :) 

Explore with different formulas using the symbols `+ - *` 

This is all for today, next week I will tell you more about formulas and some advantages of each on e of these types
What's the minimum number of HTML tags you need?
Tags: beginners, html, discuss, webdev
Published: 2021-06-16 15:45:40

---
title: What's the minimum number of HTML tags you need?
published: true
description:
tags: #beginners #html #discuss #webdev
//cover_image: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvgen9birj2iwf9u4i7h.png)
---

## Does HTML follow Pareto's Law? 

I am starting to believe that learning and using HTML are two different things. It's common to find HTML cheat sheets with every known tag. What? maybe 100? 

*Q1. What's the minimum number of HTML tags you need?*

*Q2. Does HTML follow the 80/20 rule?*
 
Do you think **80%** of all websites use these **ten tags?**

| Tag | Name |
| --: | ---: |
| `<h1> - <h6>` | Heading |
| `<p>` | Paragraph |
| `<em>` | Italic / Emphasis |
| `<strong>` | Bold / Strong |
| `<a>` | Anchor |
| `<ul> & <li>` | Lists |
| `<blockquote>` | Blockquote |
| `<hr>` | Horizontal Rule |
| `<img>` | Image |
| `<div>` | Division |
be careful with .forEach()
Tags: toyproblems, notes
Published: 2021-06-16 15:39:10

I finally got around to solving one of the toy problems that I couldn't completely solve in the pre-course the diagnostics.

My issue was that I didn't understand the behaviors of .forEach() loops.

I was expecting a return statement to break out of the loop, but that's not what .forEach() is for. forEach() is used when you want to iterate over *all* of the items in your array. 'Return' in this case only breaks out of the current function but the loop resumes. The only way to break out of .forEach() loops is to throw an exception.

Instead of using .forEach(), in this case, a better tool is a simple for or while loop. These lend themselves perfectly for catching certain cases and then, for instance, returning out of them.

I'll show the buggy code first and then my work-around (storing the a boolean in a variable). If I was re-factoring this, I would ditch the .forEach() in favor of a 'for' loop.

Broken:
```
var isIPv4Address = function(inputString){
  
  var ip4 = inputString.split('.')
  ip4 = ip4.filter(item => item !== '')
  ip4 = ip4.map(item => Number(item)).filter(item => String(item) !== 'NaN')

  if (ip4.length !== 4) return false


  ip4.forEach(function(item){
    if (item > 255) {
    return false
  })
}
var a = '213.234.234.344'
console.log(isIPv4Address(a))
```

Working:
```
var isIPv4Address = function(inputString){

  var isAddress = true;

  var ip4 = inputString.split('.')
  ip4 = ip4.filter(item => item !== '')
  ip4 = ip4.map(item => Number(item)).filter(item => String(item) !== 'NaN')

  if (ip4.length !== 4) isAddress = false

  ip4.forEach(function(item){
    if (item > 255) isAddress = false
  })

  return isAddress
}
var a = '203.294.234.234'
console.log(isIPv4Address(a))
```
3 Steps to turn on your Google Search Dark Mode
Tags: google, darkmode, tips, developertips
Published: 2021-06-16 15:38:44

Hello 👋, my gorgeous friends on the internet 🙌, 

Did you know that **Google** now has the option for **Dark Mode** ?

No qualms if you don't know, because in this article I will be explaining how you can easily switch from the Light Mode 👇


![frame_generic_light (53).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623843910333/AIgL7c0eg.png)


- 
To the Dark Mode 👇


![frame_generic_light (54).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623844076814/AG7S3oDT_.png)



> Kindly note that, not all Google users are eligible for this feature yet.



<hr />

<div class="centered"> Let's Ride 🏇 </div>

<hr />

#### 1. On the Google Result page, locate and click the Settings Cog 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623844272993/abY1Qlecv.png)

#### 2. From the dropdown, you should see the **Dark Theme** set to **off**, click the option to turn the *Dark theme on* 👇


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623844517666/3A_YcURd3.png)


#### 3. Now you can enjoy the *Google Dark Mode* while Googling answers to those bugs 👇.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623844647374/TXWHoGftB.png)


### You can toggle the option to turn on the *Light Mode*.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623844681800/WBghn64Gr.png)



<hr />

<div class="centered">Happy Googling in Dark Mode</div>

<hr />

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned from this article, I will like to connect with you, so you won't miss any of my upcoming articles.

Let's connect on

-  [Twitter @unclebigbay143](https://twitter.com/intent/follow?screen_name=unclebigbay143) 
-  [LinkedIn @unclebigbay](https://www.linkedin.com/in/unclebigbay/) 

<hr />

%%[reaction-id]

<hr />

See you in the next article. Bye Bye 🙋‍♂️

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622627809083/3i7ThmW-M.png)


If you found this helpful and want to support my blog, you can also buy me a coffee below.
JavaScript data types
Tags: javascript
Published: 2021-06-16 15:31:10

JS is dynamically typed. You don't have to declare a type. types are determined automatically.

Values stored in variables have types, not the variables themselves.

`console.log(typeof "word")` logs the type (in this case string)

`typeof null` returns object. This is a legacy error.

creating a string without using quotes will give you an error. `let string = this creates an error` logs "Uncaught SyntaxError: Unexpected identifier"


## Objects

  ... coming soon

## Primitives
  There are 7 primitive data types in JavaScript

  * numbers - floating point. Decimals and integers
  * strings - characters
  * boolean - true or false
  * undefined - empty values
    - `let name;` declaring a variable without assigning a value will have undefined as it's value
  * [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) - the intentional absence of any object value. 
    - falsy.
  * [symbol(ES2015)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) - guaranteed to be unique. Often used to add unique property keys to an object
  * [BigInt(ES2020)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) - for larger integers than number can handle
flutter, itemCount, Listview
Published: 2021-06-16 15:30:07

How can I address this problem ?

 child: FutureBuilder(
                      initialData: [],
                      future: _dbHelper.getTasks(),
                      builder: (context, snapshot) {
                        return ScrollConfiguration(
                          behavior: NoGlowBehavior(),
                          child: ListView.builder(
                            itemCount: snapshot.data.later,
                            itemBuilder: (context, index) {
                              return TaskCardWidget(
                                title: snapshot.data[index].title,
                              );

its throwing back an error
Web Scrawler(Scraping + Crawler)
Tags: webdev, javascript, help, distributedsystems
Published: 2021-06-16 15:07:10

Hey Developers, can anyone give me ideas as to how to build a Web Scrawler. I know that you can use puppeteer library for scraping, but I need something more dynamic than that. Also puppeteer doesn't help in crawling the web. I am trying to get news about a specific Stock under one hood.
Introducing `findLast` and `findLastIndex`
Tags: javascript, webdev, productivity, beginners
Published: 2021-06-16 15:02:15

---
title: 'Introducing `findLast` and `findLastIndex`'
published: true
description: Another new proposal for ECMAScript addition, giving you the ability to cleanly access array elements using negative indices.
tags: javascript, webdev, productivity, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drdz3aonk5z9djw092i0.png
canonical_url: https://laurieontech.com/posts/find-last/
---

I'm back with another introduction to JavaScript syntax! Currently in Stage 2, we're going to talk about `findLast` and `findLastIndex`.

## Array.prototype.find

Let's start by talking about a sometimes used array function called `find`. It's a nice utility method that helps you find the first element in an array that meets the given criteria.

```javascript
const arr = [
  { letter: 'a', integer: 1 },
  { letter: 'c', integer: 2 },
  { letter: 'c', integer: 3 },
  { letter: 'd', integer: 4 },
]
arr.find(el => el.letter === 'c') // { letter: 'c', integer: 2 },
```

There is a complimentary function called `findIndex`.

```javascript
const arr = [
  { letter: 'a', integer: 1 },
  { letter: 'c', integer: 2 },
  { letter: 'c', integer: 3 },
  { letter: 'd', integer: 4 },
]
arr.findIndex(el => el.letter === 'c') // 1
```

You can imagine why someone might want to do this. If you're looking for an element that matches what you want, but you only need one, this is super useful and very performant.

## But it's only first

While `find` is great, it always gets the first element that meets the criteria. What happens if you're continuously pushing elements onto your array and you want the "most recent" element that meets the criteria. This would be the element closest to the end.

You could do this in a few ways. The one that comes to mind for me is to reverse the array and then use `find`. But this isn't performant for large arrays, it requires more steps than it should, and it doesn't work well if there aren't any matching elements in the array.

Enter `findLast`. It's the mirror function to `find`, but it works from the end of the array.

```javascript
const arr = [
  { letter: 'a', integer: 1 },
  { letter: 'c', integer: 2 },
  { letter: 'c', integer: 3 },
  { letter: 'd', integer: 4 },
]
arr.findLast(el => el.letter === 'c') // { key: 'c', integer: 3 }
```

There is also a matching `findLastIndex`.

```javascript
const arr = [
  { letter: 'a', integer: 1 },
  { letter: 'c', integer: 2 },
  { letter: 'c', integer: 3 },
  { letter: 'd', integer: 4 },
]
arr.findLastIndex(el => el.letter === 'c') // 2
```

Note that if it can't find an element that matches the criteria, it will return `-1`.

## What do you think?

In my mind we can never have too many array utility methods! Whether I need them or not. But how about you?

If you're interested in learning more, check out the [proposal](https://github.com/tc39/proposal-array-find-from-last).