teleren/devto huggingface dataset:
My first css-tricks article
Tags: design, webdev, typography, css
Published: 2021-01-19 20:55:59

## Coming full circle

In 2010, I started to learn web development. I was 29 years old. You can read the whole story [here](https://community.codenewbie.org/perpetual_edu/my-learning-journey-d6k) _if you want_.

I watched two courses on lynda.com and one of those courses was Chris Coyier's 'WordPress' course.

> Who knew what an effect it would have on me

Chris worked through the business goals, and the assets, and the planning, and build out the whole thing in HTML first. Then he went over the whole PHP system (which was just mindblowing for me) - and step by step he builds a theme from scratch. (well you know... as scratch as you can - _there being a framework and all_)

I had NO idea how "web 2.0" worked... or what LAMP or MAMP was. I had no idea what PHP was... or how templates worked or what "dynamic" meant. And he did it all while working with best practices and standards - and _well_, he did a **great** job.

## I loved reading his blog at [css-tricks](https://css-tricks.com)

CSS was a lot more quirky back then! and it was a lifesaver.

These days, CSS-tricks is about A LOT more than just CSS.

and specifically today! They've published my article [On Type Patterns and Style Guides](https://css-tricks.com/on-type-patterns-and-style-guides). It's about typography and CSS but it's _really_ about breaking down the barriers between ["creatives" and "coders."](https://perpetual.education/an-analogy-for-the-designer-developer-relationship/)

If you like CSS and typography - or have ever had a hard time managing type styles in large projects - or you like live-style guides and styletil.es ~ Then please give her a read and let me know your thoughts!

[https://css-tricks.com/on-type-patterns-and-style-guides](https://css-tricks.com/on-type-patterns-and-style-guides)
What Does `slice(1, -1)` Do?
Tags: todayilearned, discuss, algorithms, javascript
Published: 2021-01-19 20:55:46

Today I learned what `slice(1, -1)` does. 

I was looking up ways to (recursively) check if a string is a palindrome, and I came across [a solution](https://blog.logrocket.com/ispalindrome-a-recursive-approach/) that used `str.slice(1, -1)`

`slice()` is a "returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array." [Source] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 

So, if you want to work on an array without mutating it, `slice()` is a good option.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hk7fwdsf2h832u8lvcak.png)
Since I'd never seen a negative value passed into slice out in the wild, I of course dug deep into the MDN article.

_"A negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence."_

Turns out, it's a count from the end, similarly to a positive number passed into the first parameter being a count from the beginning. 

So, if `str = "margherita"`, `str.slice(1, -1` is equal to `"argherit"`. Nifty for all kinds of two-forked approaches. What ways would you use it?
How I volunteered to re-architect Internet email
Tags: go, javascript, opensource, security
Published: 2021-01-19 20:49:34

At Changelog: [_How I volunteered to re-architect Internet email_](https://changelog.com/posts/how-i-volunteered-to-rearchitect-internet-email)

Excerpt:
> SMTP should be blocked on public networks.
>
> Sound crazy? Consider this: Email is now a universal cybercrime portal.
> . . .
> But email is a foundational Internet application; the concept is too important to let SaaS vendors or social networks define its future. Therefore the open source community must act to replace it, and act now.
>
> So I’ve drafted a protocol, TMTP, and published implementations of both client and server as open source. TMTP is simple, preserving the soul of email, while dramatically reducing its vulnerabilities. It also addresses major user experience gaps in email, which were solved long ago by web-based discussion apps.
> . . .
Accessible Image Compare — One Line of JavaScript
Tags: html, css, javascript, codepen
Published: 2021-01-19 20:33:44

Sometimes it's funny to revisit old ideas and  components, you did a *long* time ago!

I once did an "Image Compare"-component, with one image defined in a regular `<img>`-tag, one as `background-image`, a `<div>` for the draggable control — and a good chunk of JavaScript to handle the functionality.

Looking through old code during a cleanup, I stumbled across this component and thought about what I'd change, if I were to make a "2021 version". 

First, I'd replace the `<div>` with an `<input type="range">` for the draggable component. The `oninput`-event should update a single *CSS Custom Property*, setting a `--value`-property on the `parentNode`, so other `children` can access the value as well:

*Like this:*
```html
<input type="range" oninput="this.parentNode.style.setProperty('--value', `${this.value}%`)">
```

The images should be two regular `<img>`-tags, and the `--value` should be used to update two `clip-path`'s:

```css
.c-compare__left {
  clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
}
.c-compare__right {
  clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
}
```

And that's the core of it! 

A fully functional "Image Compare"-component in one line of JavaScript and two dynamic CSS `clip-path: polygon()`.

The rest is just styling.

---

## Accessibility

You get accessibility for free, since the `<input type="range">` is focusable, and navigable with the arrow-keys. Set the `:focus`-style in CSS.

---

## Demo

{% codepen https://codepen.io/stoumann/pen/VwKgJNv default-tab=result %}

Thanks for reading!
Vue - The Road To Enterprise (Giveaway!)
Tags: programming, coding, javascript, vue
Published: 2021-01-19 20:32:51

---
title: Vue - The Road To Enterprise (Giveaway!)
published: true
description: Learn how to create blazing fast, scalable, maintainable, and Enterprise-Ready applications with Vue. Best practices, advanced patterns, guides, tricks, and more. Vue - The Road To Enterprise - the only advanced book you need.
tags: programming, coding, javascript, vue
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fse60t4xwdomgrwdaahs.png
---

After many months of writing and coding, I have recently released a new advanced Vue book called [“Vue — The Road To Enterprise”](https://bit.ly/2M6FRde). I have mentored many developers and teams, and one thing I often heard was that there are many resources for beginners to get started with Vue, but there is not a lot for those who are already familiar with Vue and want to advanced their knowledge to the next level. This is the reason why I decided to write this book.

## What is in the book?

[“Vue — The Road To Enterprise”](https://bit.ly/2M6FRde) is a book with more than 300 pages. It comprises 14 chapters covering a wide variety of guides, advanced patterns, tips, and best practices related to the development of large-scale Vue applications.
There are many useful things that this book can teach you about advanced concepts and managing large-scale applications. It covers many different topics, such as:

- Differences between Vue 2 and 3 and how to prepare for migration.
- Project setup and documentation
- Scalable project architecture for your routes, components, and services
- How to manage API requests, loading states, and request cancellation
- Local and global state management patterns
- Performance optimisation
- Testing & Security
- and more!

This book incorporates concepts and code examples for both Vue 2 and Vue 3, so no matter which one you use, you can find something that works for you. You can check it out [here](https://bit.ly/2M6FRde). There is also a 10% discount on, so hurry up before it expires!

## Who is this book for?

Let me underline that this book is not a beginners guide. It won’t teach you how to get started with Vue. Instead, it’s an excellent resource for:

- Developers with prior Vue knowledge who want to upscale their Vue proficiency and learn how to create enterprise-ready applications.
- Developers and teams who want to quickly get on board with best practices, patterns, and tips to incorporate in their new or existing Vue projects.
- Developers who are looking for career progression as a Vue.js Developer.
Giveaway

I am currently running a giveaway on Twitter. Two lucky winners will get the Complete Package, including the book, Companion App, and the Enterprise Boilerplate. To participate in the giveaway check out [this tweet](https://twitter.com/thomasfindlay94/status/1349798362825023491).
Jan 19: DEV Daily Discovery
Tags: discuss, bestofdev
Published: 2021-01-19 20:13:45

Please make a comment to this thread with a DEV post that you think deserves to be read more broadly. If it's your own post that's fine.

It could be recent, or it could be classic.

And then read through the thread and ❤️ posts where you like. I'm hoping that the wisdom of the crowds can help unearth some great content every day.

Use the post's link liquid tag to display it fully, i.e.:

```liquid
{% link https://dev.to/devteam/for-empowering-community-2k6h %}
```

And feel free to add why you want to want to give it more love.

Don't worry about whether you've picked the best post, let the readers decide if it should rise to the top.
We Should Get Rid of HelloWorld Forever💩
Tags: tutorial, codenewbie, webdev, programming
Published: 2021-01-19 20:09:01

*Every tutorial I've read for the last 30 years starts with the infamous 'Hello World' example. This could be one of the reasons we write crappy software.*

"[Hello World](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program)" is the first program we make in every language.

We can measure the complexity of language by counting the lines it takes to produce the desired output.

We can also time how much does it take to a *newbie* to figure out the solution (this is also known as *Time to hello world" (TTHW))*.

These two metrics are uncorrelated to productivity.

* * *

Many [sites](http://helloworldcollection.de/) compile different *Hello World* programs in a lot of languages.
 
# The Problems

The *Hello Word* example has a lot of problems introduced early when developers are making their first steps in programming.

1. It uses *[globals](https://en.wikipedia.org/wiki/Global_variable)* in many languages. Global functions are a code smell. Teaching them to newcomers in theirs first example is conflicting.

{% post https://dev.to/mcsee/code-smell-17-global-functions-4b82 %}

2. *Hello World* yields [side effects](https://en.wikipedia.org/wiki/Global_variable) (on the console, file system, printers, etc.).

3. We write the code and we cannot test if it is working. We can manually check for the output but our software cannot assert it our outcome was right.

4. If our *HelloWorld* works today we cannot ensure it will keep working tomorrow.

# The Solution

All developers should start with:

```
function testFalse()
{
    Assert(1==2)
}
``` 

## Advantages

1. We start with a broken test. This is the first step to start developing software according to *test driven development* technique.

{% post https://dev.to/mcsee/how-to-squeeze-test-driven-development-on-legacy-systems-8m9 %}

2. We introduce developers to a [Continuous Integration/Continuous Development](https://en.wikipedia.org/wiki/CI/CD) pipeline with their very first instruction.

3. We use no *Globals* or side effects.

4. We show the importance of early testing.

5. We stress how important is to have working code and [automated tests](https://en.wikipedia.org/wiki/Test_automation) from the very first second.

# Conclusion
 
We need to stop writing *HelloWord* as the first sentence of a language.

Next time you come across a new fancy language, please start with a broken test.
ARE 30 DAY CODING CHALLENGES WORTH IT?
Published: 2021-01-19 19:36:43

Hashtags are the "it" things and the developer community is no stranger to it. You may have seen your social media or news feed swarm with challenges like #30daysofcode, #7daysofbuild, etc. But in this post we are going to be exploring how useful are such challenges and whether they truly help you learn something.
#### YOU BECOME COMPETITIVE:
More often than not, whenever a person is provided they tend to complete it because of our innate quality to compete and challenge ourselves.
#### YOU BECOME DISCIPLINED:
Most challenges provide you with a track or "targets" that you are supposed to complete within a day or any amount of time. By staying committed to your task, you learn to discipline yourself.
#### YOU BECOME A BETTER LEARNER:
Self-teaching is the best way of learning and challenging yourself is an even better way.
#### YOU LEARN FASTER:
With such challenges, you can cover a lot more topics than you normally would have done. 
#### YOU BECOME CONSISTENT:
When you keep learning without a specific time period set, you tend to lose track of your progress and get demotivated. 
#### BEST WAY TO MAINTAIN A NEW HABIT:
Whether it is a coding challenge or a web development challenge, once you get started , you don't want to stop. 

SO, to summarize such challenges are meant to motivate you and get the momentum going. It provides the boost you may need to get started making a change. As you keep going, achieving small successes can help motivate you to keep going.
The Most Useful Shopify Apps for E-commerce Businesses
Published: 2021-01-19 19:32:28

###eBay Marketplace Integration by CedCommerce

It syncs catalog information from Shopify such as title, inventory, pricing, and order details on eBay. It further helps convey the details of orders received on eBay to create them in Shopify.

![eBay](https://whidegroup.com/wp-content/uploads/top-shopify-apps-18.webp)

###Google Channel by Shopify

This app makes it easy to list your products on free Google listings and promote them with Smart Shopping campaigns.

![Google Channel](https://whidegroup.com/wp-content/uploads/top-shopify-apps-19.webp)

###Shopping Feed by Shopping Feed, Inc.

It allows you to list, sync and manage products, inventory and orders within all the sales channels you use, and the Shopify store itself.

![Shopping Feed](https://whidegroup.com/wp-content/uploads/top-shopify-apps-20.webp)

###Buy Button channel app by Shopify

This app allows you to create a Buy Button for any product or collection and add it to a website or blog to let customers checkout fast and easily.

![Buy Button channel app](https://whidegroup.com/wp-content/uploads/top-shopify-apps-21.webp)
Cheap AI Chess!
Tags: codepen
Published: 2021-01-19 19:26:56

<p>A wonderful opportunity to beat a computer at chess!</p>

<p>Play against a friend, a totally random AI, or wager money as it plays against itself. I'm sure there are still bugs in here but hey, happy new year.</p>

{% codepen https://codepen.io/kadirselcuk/pen/jOMJBXJ %}
LIFO, FIFO. The difference between a stack and a queue. A quick guide. 
Tags: javascript, webdev
Published: 2021-01-19 19:25:01

I've been going over some JavaScript concepts lately and recently came across an acronym I hadn't heard before.
### __Lifo, Fifo.__ It was easy to remember and described the difference between a stack and a queue perfectly. Queue's and stacks allow you to add or remove items from a data structure in a particular order.

#### Stacks 
Like a stack of plates or these cookies. A stack has a last in, first out order - __LIFO.__ They are stacked one on top of the other. To get to the cookie second from top, you would have to remove the first one. Making it a last in, first out data structure - LIFO.
![A stack of cookies](https://dev-to-uploads.s3.amazonaws.com/i/hssspquesl1g5wymxngg.jpg)

#### Queue's 
A queue has a first in, first out data structure - __FIFO.__ 
Like someone standing in line or waiting in a queue. The person who is first in the line, gets seen first.

![people standing in line Text](https://dev-to-uploads.s3.amazonaws.com/i/4qs8zv026yradfjh1afv.jpg)


In JavaScript, when you use the ```pop() or push() methods``` to add or remove something from the end of an array, this process follows the __LIFO__ order. 
Removing something from the front of the array, requires a bit more work and can involve looping to ensure when an item is removed from the front, you push all the other elements forward to maintain correct indexing and this process follows the __FIFO__ order. 

Hearing this acronym helped me, maybe it can help you too. 
Links - [I originally heard about this here](https://frontendmasters.com/courses/interviewing-frontend/)
[& read more about it here](https://www.telerik.com/blogs/stack-queue-javascript) [& here too](https://www.digitalocean.com/community/tutorials/js-stacks-queues)
My experience in MLH LHD: Build
Tags: majorleaguehacking, localhackday, hackathon
Published: 2021-01-19 19:20:39

In the previous week, I participated in major hacking league's local hack day: build and I would like to share my experience in the weeklong fun event. 

So to begin with, the first day was very much about just creating a guild, having fun in events, creating something new using a new language and a lot more. I used lolcode for the first time in this challenge (highly recommend that). I merged some pull requests for the challenge and attended some live events and workshops.
At the end of the day, a leaderboard was released and I realized that I was around at some 70 position, that feeling excited me to do more challenges to get more points for the next day. 
Then the following days, I created a lot of things which includes working with a lot of APIs for the first time, including the OpenWeather API and twilio API using which I created [this Temperature Messanger](https://www.youtube.com/watch?v=nA5G_0upops), a [discord bot](https://repl.it/@lordblackwood/Discord-bot#main.py) using discord API, and a simple [map searcher](https://github.com/ankurg132/MLH-Local-Hack-Day-challenges/tree/main/weekend%20challenges/using%20maps) using openStreetMap API and some other modules. 
In addition to that, I created some android projects too using Kotlin including a basic [To-do App](https://github.com/ankurg132/MLH-Local-Hack-Day-challenges/tree/main/day%204/ToDoApp) and a birthday card app following the Google's Kotlin tutorial.
For the first time, I explored Web Scraping and created a project to get movie data from the IMDB website using beautiful-soup. 
I also used Kaggle dataset for the first time for data analysis using Python's pandas and matplotlib library. Also created some other projects including tic-tac-toe using python (also livestreamed this using twitch for the first time for a challenge), created a demo for my project, a random number generator without using random etc.
I also coded in flask for the first time using the MLH starter kit and guidance from an MLH mentor.

More than all the projects, I met some amazing people and communities throughout the week, our guild Equicode hosted a meet to share a coffee with all the guildmates, we had some nice fun interactive sessions and learned a lot from each other. I also got the chance to meet more like minded people, explore ideas and to have a lot more fun together. 
We also collaborated with other top guilds to have a session together in which I met with Eddiehub community and discussed about each other's experience. 

Overall, our guild came 3rd in the overall ranking and I came at 57th rank in the overall challenge, but more than that, the learning I've done during this whole week, even staying up till 4AM IST to attend the events were some of the amazing thing I did this hackathon.  

You can view most of my code in this repo: {% github ankurg132/mlh-local-hack-day-challenges %}
How Not to Get Lost
Tags: agile, scrum
Published: 2021-06-01 17:16:52

---
title: How Not to Get Lost
published: true
date: 2021-01-19 19:08:06 UTC
tags: agile, scrum
canonical_url: https://theagilecouch.com/2021/01/19/how-not-to-get-lost/
---

My friend and UX designer (and legendary keyboard warrior) Evan Travers writes about orienteering, something you may have done as a scout. Abstractly, two techniques to navigate in the territory of the modern software domain – Moderate Complexity and Moderate Uncertainty. While finding an exact destination requires many steps and many skills, [here are two skills](http://evantravers.com/articles/2021/01/19/handrails-and-backstops/) to avoid getting lost on the way there.
Project Management Tools
Tags: management, project, software, productivity
Published: 2021-01-19 18:29:30

As a software developer I've been using Jira for a very long time and I do like it partly because of its features and partially due to familiarity.  I do find the basic concepts from Jira missing in far too many project management tools.  

I have gotten into conversations with other volunteers and developers about what to use and it seems everyone has a strong dislike for Jira/Atlassian but I have yet to find any tool that does just the basic things I need.

Requirement:
1. Sprint Support
2. A backlog (this seems to be very rare).  Just to be clear, a column on your board named backlog isn't a backlog.  I want a backlog that is out of view until we talk about the tickets then the 'board' is only items you need to look at. 
3. A board with states / transitions.  ie: ToDo, InProgress, QA, Review, Done etc...
4. Nice to have: Timeline / Gant chart to track dependencies.

At this point I've tried using:  Asana, Trello, Wrike, Taiga and Jira.

## Breakdown

  - Trello: a cute toy to get organized but becomes absolute nightmare to manager after a few months.  Sprints and other advanced features are available via addons but they're basically hacks / after thoughts added in later.
  - Asana: nice idea but it seems to want to want to be too many things.  Calendar, Forms, Inbox, Board etc.  It does have some nice features. 
  - Wrike: Same overly complicated and missing key features unless you pay.  Various views to see the same tickets but not really a way to do sprints.
  - Taiga: The ONLY one so far that does a backlog.  It fails in that it has too many issue types and the grouping is weird.  Certain types of tickets/task/issues/stories are only visible in certain areas and you need to convert the ticket from type A to type B to pull it into the sprint and such.  It is able to pull from github and does a 2 way sync which is very cool.


So at this point the only reasonable tool i've ended up with is Jira that it seems everyone hates but honestly I haven't found the features i need anywhere else.  What do people use for real project management that isn't a toy short lived project?