teleren/devto huggingface dataset:
Using css variables to create smooth animations
Tags: cssvariables, customproperties, javascript, css
Published: 2019-03-18 16:09:12

---
title: Using css variables to create smooth animations
published: true
description: Create animations with setProperty and custom css properties!
tags: css variables, custom properties, javascript, css
---

Creating animations with JavaScript can be really frustrating. You can't actually manipulate the CSS Object Model directly from JavaScript ([yet!](https://ishoudinireadyyet.com/)), but you definitely want to...

Most people today use either the `classList` or the `style` property of JavaScript to change styles. The problem with both is that they are actually added to the HTML DOM and not directly to the CSS engine. Waiting for Houdini to be widely supported could take a while, and we want to create smoother and better animations now. 
![Dumbledore shruggs his shoulders](https://thepracticaldev.s3.amazonaws.com/i/0h6a9evs7s0wb79fq3d3.gif)

## So, what can we do?
The answer is CSS variables, or CSS custom properties as some people like to call them. Because while CSS variables are also manipulated via the `style` property in JavaScript it's actually [much faster](https://codepen.io/jiayihu/pen/BOrLea) in most browsers than using inline styles.

Using event listeners to change the variables is crazy smooth, here's an example I wrote a few weeks ago (using variable fonts, which are also v. cool!):

{% codepen https://codepen.io/Sidstumple/pen/wOJgjd %}

Another big advantage of CSS variables is that you can set variables on the parent element which all children elements can read, and subsequently also the `:before` & `:after` pseudo selectors. This does make adding a new variable slower when there are a lot of child elements though!

Especially animations based on mouse position work really well in my opinion:
{% codepen https://codepen.io/Sidstumple/pen/jJaWBr %}

## But what about IE?
So CSS variables are supported among most browsers, except for of course... IE. But seriously, [even microsoft is telling people to stop using IE11](https://www.engadget.com/2019/02/08/microsoft-internet-explorer-technical-debt/). As long as you use the animations for enhancement purposes only, your users --even those who torture themselves with IE-- should be fine.
Chart.js, slick slider, team thumbnails | Module Monday 32
Tags: showdev, opensource, webdev, javascript
Published: 2019-03-18 15:59:08

---
title: Chart.js, slick slider, team thumbnails | Module Monday 32
published: true
description: Module Monday 32
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/v1552686498/chart_abn9a5.gif
canonical_url: https://guide.anymod.com/module-monday/32.html
---

## Open-source web modules you can use anywhere

All the mods below are open source and free to use in any project you choose. [Anymod](https://anymod.com) lets you quickly add features to any website or web app.

Click a mod to see it in action along with its source code.


## Chart.js

Add your data for easy interactive charts.

<a class="btn btn-sm" href="https://anymod.com/mod/mlnlob?h1=23&h2=39&v=30">View mod</a>

<a href="https://anymod.com/mod/mlnlob?h1=23&h2=39&v=30">
  <img src="https://res.cloudinary.com/component/image/upload/v1552686498/chart_abn9a5.gif"/>
</a>

## Left sidenav

Fixed navbar with simple icons & links.

<a class="btn btn-sm" href="https://anymod.com/mod/orarnk?v=33&preview=lorem">View mod</a>

<a href="https://anymod.com/mod/orarnk?v=33&preview=lorem">
  <img src="https://res.cloudinary.com/component/image/upload/v1552686497/sidenav_cp0u0r.gif"/>
</a>

## Slick slider

Touch-enabled slider to showcase your best images.

<a class="btn btn-sm" href="https://anymod.com/mod/dkrkbm?v=20">View mod</a>

<a href="https://anymod.com/mod/dkrkbm?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1552686498/slider_phlpzb.gif"/>
</a>

## Team thumbnails

Your team page just got simple.

<a class="btn btn-sm" href="https://anymod.com/mod/lldlrk?v=20">View mod</a>

<a href="https://anymod.com/mod/lldlrk?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1552686497/team_zadnzw.gif"/>
</a>

## MailChimp signup form

Let visitors easily subscribe to your mailing list.

<a class="btn btn-sm" href="https://anymod.com/mod/nkakbk?v=40">View mod</a>

<a href="https://anymod.com/mod/nkakbk?v=40">
  <img src="https://res.cloudinary.com/component/image/upload/v1552688218/mailchimp_o95tte.png"/>
</a>

<hr>

I post new modules [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
The Building an Indie Business Podcast- Alertsforcc.com Reflection
Tags: podcast
Published: 2019-03-18 15:39:17

---
title: The Building an Indie Business Podcast- Alertsforcc.com Reflection
published: true
description: 
tags: podcast
---

https://overcast.fm/+RG5iBBMGw

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
Waffle.io Alternatives???
Tags: github, git, waffle, saas
Published: 2019-03-18 15:19:56

---
title: Waffle.io Alternatives???
published: true
description: What will you use when Waffle.io bites the dust?
cover_image: https://res.cloudinary.com/owl3rty/image/upload/c_fill,g_auto,h_250,w_970/v1552921940/dev.to/jodie-morgan-464702-unsplash.jpg
tags: github, git, waffle, saas
---
SADNESS! Waffle.io is going [shut down on May 16, 2019](https://help.waffle.io/waffle-shutdown/waffle-shutdown-tldr).

Things I very much enjoyed about Waffle.io
- With pancakes (Sequel Pro) I had a whole breakfast thing going on!
- It pulled issues straight from GitHub repos so we had one source of truth for issues 
- It was very simple to use

I've been looking for a waffle.io replacement and, so far, I'm not seeing anything that is quite like it.

Aside from building a replacement Waffle.io app (Bacon.io? Syrup.io? Augh, both are taken.) what would you recommend I try out?

*Photo by Jodie Morgan on Unsplash*
“Catch me if you can” - a short debugging guide
Tags: bugs, debugging, guide
Published: 2019-03-18 14:11:31

---
title: “Catch me if you can” - a short debugging guide
published: true
description: Debugging can be tough and emotional. Here’s a short guide to help
tags: bugs, debugging, guide
---

Let me know what you think guys 🙂

https://link.medium.com/qdHziTlV9U
Showcase: Migrating FranceTVSport.fr to Drupal 8 and Symfony 4
Tags: drupal, rabbitmq, varnish, architecture
Published: 2021-12-27 13:30:08

---
title: Showcase: Migrating FranceTVSport.fr to Drupal 8 and Symfony 4
published: true
date: 2019-03-18 13:03:18 UTC
tags: ['drupal', 'rabbitmq', 'varnish', 'architecture']
canonical_url: https://blog.riff.org/2019_03_18_showcase_migrating_francetvsportfr_to_drupal_8_and_symfony_4
---

[PHP](https://blog.riff.org/topic/computing/php_0) | [Grokking Drupal](https://blog.riff.org/topic/computing/grokking_drupal) | [Symfony](https://blog.riff.org/topic/computing/php/symfony2) | [DRUPAL-8](https://blog.riff.org/tags/drupal8) | [Symfony](https://blog.riff.org/tags/symfony) | [DrupalCamp](https://blog.riff.org/taxonomy/term/243) | [Showcase](https://blog.riff.org/taxonomy/term/244)

The opening talk as [DrupalCamp Paris 2019](https://paris2019.drupal.fr/) was a presentation given by Thomas Jolliet (FranceTV) and yours truly about how we rebuilt [FranceTV Sport](https://sport.francetvinfo.fr/) to a Symfony 4 / headless Drupal 8 combo.

The most salient points of the talk are probably the "defense in depth" mechanisms we built for scalability and fault tolerance, and the business results, like -85% full page load time, -65% [speed index](https://docs.webpagetest.org/metrics/speedindex/), or +50% iOS app traffic.

{% speakerdeck 8be5e630ce5f480986369fad3c1a180f %}
What's a song that illustrates your coding journey?
Tags: discuss, random
Published: 2019-03-18 12:57:50

---
title: What's a song that illustrates your coding journey?
published: true
description: Discuss your theme song
tags: discuss, random
---

For me it's the [Pokémon theme song](https://youtu.be/fCkeLBGSINs). When people ask why I'm not doing something I'm already good at, I tell them I just feel like Ash Ketchum.

Well, I don't need to be "the very best that no one ever was", but I want to be the best version of me 😀

What's yours?
Show off your first app!
Tags: discuss, beginners
Published: 2019-03-18 12:43:45

I recently remembered the first web app that I built. It was part of my senior thesis in college -- I thought that adding a way to visualize the data I was working with would make the project more interactive and it would be able to reach more people.

It's far from perfect, and the version online is the second design and I also went through a big code refactor at some point.

I had also been writing code professionally as a software engineer for around a year when I wrote this (and was a computer science teaching assistant for a year before that), but it was just data science/analysis code instead of code for the web.

I learned a lot with the project, and a lot of that knowledge has carried over to work even recently!

The app is here: [http://politicaldiscussion.herokuapp.com/](http://politicaldiscussion.herokuapp.com/)! You can see the about page for more about it, and the source code is also linked in the footer!

## What was your first app? Is it still online? Show it off below in the comments!
Online Learning Tips and Tricks
Tags: learning, career, programming
Published: 2019-03-18 12:38:27

---
title: Online Learning Tips and Tricks
published: true
description: There are so many wonderful resources out there, but how can you make the most use of them?
tags: learning, career, programming
cover_image: https://images.theconversation.com/files/195198/original/file-20171117-7588-1rai1rs.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip
---

In my role I spend a lot of time teaching myself new technologies, as we all do. Over the years I've discovered that while everyone has a different learning strategy that works for them, there are a few general patterns that are often helpful. This can apply to following tutorials, reading docs to get you started, or really anything in between. Best of luck!

## Use the simplest type of data at the start

![Sticky note with the word simple](https://blog.tcea.org/wp-content/uploads/2018/04/simple.jpg)

Don't introduce additional complexities when you're looking at a piece of syntax or a new tool for the first time. Focus on getting it working and understanding what is happening. The simplest way to do this is to avoid introducing any complexities related to the data itself. Start with a simple string, or an object, it will depend on what you're working on. You can iterate to the more complicated use case (that likely mirrors what you're actually attempting to do).

## Test at every step to stay on track

![Children's wooden building blocks](https://www.getfilecloud.com/blog/wp-content/uploads/2014/01/building-blocks.jpg)

One of the worst parts about programming is encountering an error that you don't know the source of. It's easier to narrow down when you already know what you're working on. When you're learning, it's better to move forward with implementation in small chunks. After each small chunk that will compile you test and look for errors. That way it's easier to find the source of that new error you just triggered.

## Don't mimic!

![I Love Lucy mimic scene](https://i.pinimg.com/originals/71/0d/2c/710d2c41e5f79bc8e25c6e4d09ef8897.jpg)

This is the one that gets most people, because tutorials seem to imply otherwise. It's wonderful to follow along with a pre-determined set of instructions. However, when you do that you aren't engaging your thinking/connection making brain, you're mimicking. You can break out of this pattern by changing variable names or data in order to force yourself to engage with the concepts and take a lateral step away from the walk through.

There are so many other online learning recommendations that can be made. I encourage you to share yours in the comments!
Webiny - Serverless CMS
Tags: opensource, serverless, javascript, react
Published: 2019-03-18 12:31:13

---
title: Webiny - Serverless CMS
published: true
description: Open source, dev-friendly and powered by graphql and react.
tags: open-source, serverless, javascript, react
---

Check it out - https://www.webiny.com/

Webiny presents a milestone where we as a team and company are transitioning from a standard web agency, into a product business. In the past years we build few hundred websites, saas products and platforms for many different clients.

Over this time we learned what it takes to build, maintain, grow, update and scale such applications, and we poured all that knowledge into building this system.

Some of the features of Webiny CMS:
- open source (MIT license)
- optimized to run inside a serverless environment (like AWS Lambda)
- frontend is built with React and Google Material Design (CRA v2)
- backend is powered by Node and MongoDb
- GraphQL API layer (Apollo Client)
- ready made visual page builder
- image editor
- documentation and tutorials already available

On top of the CMS, we are providing a highly-available serverless environment to run your Webiny instances. 

Feel free to ask us any questions below the post, we would love to hear your feedback.
🐍 Logging loop progress like a pro in Python
Tags: python, tips, beginners, webdev
Published: 2019-03-18 12:27:25

---
title: "🐍 Logging loop progress like a pro in Python"
published: true
description: "The end of print inside for loop"
tags: ["python", "tips", "beginners", "webdev"]
series: "Python tips"
canonical_url: "https://medium.com/@pierreda/logging-loop-progress-in-python-like-a-pro-with-tqdm-8c3fab96031e"
---


Or the end of `print(i)` inside a for loop.

If you have ever wrote something like this:

```python
    for i in range(0,10000):
         compute(i)
         print(i)
```
to control the progress of your execution, this short article is for you 🙂.

## All hail tqdm

tqdm, from the Arabic “taqadum” which means “progress” is one of the many Python libs that are as useful as they are easy to use. Install it the usual way with pip install tqdm and then:

![Voilà !](https://cdn-images-1.medium.com/max/2000/1*Je75evOTagxyI7R6SdXQoA.gif)*Voilà !*

And you can even make it work with loops inside loops:

![Voilà! Voilà!](https://cdn-images-1.medium.com/max/2000/1*g3Z_kd_2cjstziQ4z3Sbag.gif)*Voilà! Voilà!*

## That’s it.

I hope this lib will help you and that you learn something today. The whole doc is available [here](https://pypi.org/project/tqdm/).

`tqdm` comes with many options that can help you make the progress bar exactly as you want. tqdm also works very well in Jupyter notebook, just do `from tqdm import tqdm_notebook` instead of `from tqdm import tqdm`.

## Thank you for reading

I hope this short post will help you log loops better and impress your colleagues.

Please tell me in the comments if you liked the post and don't forget to [subscribe](https://www.daolf.com/stay_updated/) to my newsletter, there is more to come (And you'll also get the first chapters of my next ebook for free 😎).

If you like JS, I've just published [something you might like](https://dev.to/daolf/things-you-should-know-about-js-events-4k2l).

And if you prefer git, [I got you covered](https://dev.to/daolf/git-series-13-understanding-git-for-real-by-exploring-the-git-director--5bd0).
★ A Laravel package to flash messages
Tags: laravel, php
Published: 2020-01-02 23:18:23

---
title: ★ A Laravel package to flash messages
published: true
date: 2019-03-18 12:00:00 UTC
tags: laravel, php
canonical_url: https://freek.dev/1291-a-laravel-package-to-flash-messages
---

For the past few years, we've been using the [laracasts/flash](https://github.com/laracasts/flash) package to flash messages in all projects. In case you don't know: a flash message is a message that is being passed from a request to only the next request. The Laracasts package does its job pretty well. It has support for multiple flash messages, overlay messages. It comes with bootstrap styling out of the box and a few messaging levels preconfigured.

We've noticed that in our projects we only use a tiny bit of functionality from the [laracasts/flash](https://github.com/laracasts/flash). That's why we whipped up our own lightweight package called [spatie/laravel-flash](https://github.com/spatie/laravel-flash). In this blog post, I'd like to introduce it to you.

Our flash package can only send one flash message at the time. Because it just needs that capability, we can keep our API very clean. Here's an example of how you can use it.

```php
class MyController
{
    public function store()
    {
        // …

        flash('My message', 'my-class');

        return back();
    }
}
```

Let's take a look at how we can display the flash message. We don't have a view included in our package. You have to create a partial view in your own app. This is what the content of that view could be:

```html
@if(flash()->message)
    <div class="{{ flash()->class }}">
        {{ flash()->message }}
    </div>
@endif
```

Pretty simple right?

You've probably noticed in the php example above that we specified a concrete CSS class name - `my-class` - as the second parameter to the `flash` function. In a real app you probably just want to specify it the message is a success, warning or error message and not specify that concrete class name. The package makes it easy to define message levels and associate them with CSS classes. Here's how you can do that:

```php
// this would probably go in a service provider

\Spatie\Flash\Flash::levels([
    'success' => 'alert-success',
    'warning' => 'alert-warning',
    'error' => 'alert-error',
]);
```

Now you can do this to set a flash message:

```php
flash()->success('My message');

// alternatively you can do this
flash('My message', 'success');
```

In the next request `flash()->class` will return `alert-success`.

And that's all there is to the package. We intended to keep this package very slim because we never need more features to flash messages. I hope [spatie/laravel-flash](https://github.com/spatie/laravel-flash) will come in handy in your projects too. Be sure also to take a look at [the many packages our team has created previously](https://spatie.be/open-source/packages).
What are your best/worst habits as a developer?
Tags: discuss, productivity
Published: 2019-03-18 11:35:08

---
title: What are your best/worst habits as a developer?
published: true
tags: #discuss, #productivity
---

Curious to see if there are any common ones in the community: 
What are you best or worst work related habits? 
Why do you do them? 
Do you think you need to change them? 
(Can be job-specific or person-specific).

I think one of my worst is that I accidentally over-caffeinate myself - whenever I'm working I think "coffee = productivity" when in fact it makes it harder to concentrate. I'm trying to switch to water and tea in moderation.
The best books for developers
Tags: books, top10, programming, coding
Published: 2019-03-18 11:17:48

---
title: The best books for developers
published: true
description: Books are your best mentor. If you read one good programming book every month, roughly ten pages a day, you’ll soon have a firm grasp on the industry and distinguish yourself from nearly everyone around you. There are thousands of books, but not all of them are equally good. Below is my list of the best programming books of all time.
tags: 
    - books 
    - top10
    - programming
    - coding

---

Books are your best mentor. If you read one good programming book every month, roughly ten pages a day, you’ll soon have a firm grasp on the industry and distinguish yourself from nearly everyone around you. There are thousands of books, but not all of them are equally good. Below is my list of the best programming books of all time.

[Continue reading...](https://sizovs.net/2019/03/17/the-best-books-all-software-developers-must-read/)
I'm a Dutch (cross-platform mobiledev and) Tech Lead at a startup, building viable products in my spare time, Ask Me Anything!
Tags: ama
Published: 2019-03-18 10:08:59

---
title: I'm a Dutch (cross-platform mobiledev and) Tech Lead at a startup, building viable products in my spare time, Ask Me Anything!
published: true
tags: ama
---
How to Find Roger Samara's Profile on Tumblr
Tags: computertechnician, newtechnology, rogersamara
Published: 2019-03-18 09:42:12

---
title: How to Find Roger Samara's Profile on Tumblr
published: True
cover_image: https://res.cloudinary.com/cakeresume/image/upload/s--D4CpEZr5--/c_pad,fl_png8,h_480,w_640/v1552901932/jgg1tfrrjdtrotgaxgi5.png 
tags: computertechnician, newtechnology, Rogersamara        
---
VUEJS Listen lifecycle hook from the child component
Tags: vue, lifecycle, hook
Published: 2019-03-18 08:24:01

---
title: VUEJS Listen lifecycle hook from the child component
published: true
description: Listen lifecycle hook from the child component
tags: vuejs, lifecycle, hook
---

Here's a very useful tip I learnt from [Vuedose](https://vuedose.tips/).

In some cases I needed to know when a component has been created, mounted or updated from a parent component.

So you already tried something like this 

```js
    <Child @mounted="doSomething"/>.
```

Let me tell you this: It will not work ˆˆ.

Instead, the solution is as simple as listening to an event with the lifecycle hook name, prefixed by @hook:.

```js
    <Child @hook:mounted="childMounted"/>
```

If you dont trust the tip check the yourself in this [CodeSandbox](https://codesandbox.io/s/18r05pkmn7)

Thank's to [Vuedose](https://vuedose.tips/) for this tip. Go check their website and sign to the newsletter :smile: