teleren/devto huggingface dataset:
How to make CSS first-child work
Tags: css, webdev, html, tutorial
Published: 2022-01-03 13:22:03

---
title: How to make CSS first-child work
published: true
date: 2016-05-13 18:21:01 UTC
tags: CSS,Webdev,html,tutorial
canonical_url: https://www.moreonfew.com/make-css-first-child-work/
---

With the onset of CSS3 a lot of new selectors were introduced. Many of these new selectors have been of a lot of help to us. The `first-child` selector is one such selector. Using the `first-child` selector, you can target the element which is the first child of its parent element. This means if you want to target the first `<li>` of an unordered list or `<ul>` you can use the `:first-child` selector to target the first “li” element. The code for it would look similar to the following :

```css
ul li:first-child{
  color:red;
}
```

The above code would target the first `<li>` of the `<ul>` and change its color to red. This is a really simple and useful property. However, remember that `:first-child` would work only when the element you are targeting is the first child of the parent element. This means that **if there is any other sibling element before the element you are targeting, then the first-child property would NOT work as expected**. Let’s consider the following example :

```html
<div>
 <h1>Some Heading</h1>
 <p>My first paragraph</p>
 <p>My second paragraph</p>
</div>

<style>
/* This would NOT work as expected ! */

div p:first-child{
 color:red;
}
</style>
```

In the above example, you can notice that the first `<p>` within the `<div>` is being targeted. However, this would NOT work because the `<p>` is technically NOT the first child of the `<div>`. The first child of the `<div>` is the `<h1>` tag.

## So, how to make the :first-child work in CSS ?

If there are other sibling elements before the “first child element” that you are targeting, you should use the **`first-of-type`** selector. The first-of-type selector would target the elements which are of a “certain type or tag” and are the first ones of its type within its parent element. To understand this clearly please take a look at the following example :

```html
<div>
 <h1>Some Heading</h1>
 <p>My first paragraph</p>
 <p>My second paragraph</p>
</div>

<style>
/* This would work ! */

div p:first-of-type{
 color:red;
}
</style>
```

In the example above, the first paragraph within the `<div>` would have the text color as red. The key here is to understand that the `<p>` or paragraph is NOT technically the first child and that when you want to target the paragraph or  `<p>` you should target the `<p>` which is the first child of its parent `<div>` and of the ‘certain’ type or of the ” <p> type “.

Hope you understood the concept and liked the article. Please like us on [Facebook](https://www.facebook.com/moreonfew "Like MoreOnFew on Facebook") and follow us on [Twitter](https://twitter.com/moreonfew).

The post [How to make CSS first-child work](https://www.moreonfew.com/make-css-first-child-work/) first appeared on [MoreOnFew](https://www.moreonfew.com).
Disqus comments setup for Jekyll
Tags: jekyll, disqus, comments
Published: 2017-12-28 20:22:17

---
title: "Disqus comments setup for Jekyll"
description: "Adding Disqus comments to your Jekyll static website is easy. I will show you step by step if you give me a few minutes of your time."
published: true
tags: Jekyll, Disqus, comments
canonical_url: https://desiredpersona.com/disqus-comments-jekyll/
---

I recently added Disqus to my Jekyll powered website. This guide will keep the code clutter free and as reusable as possible.

Open `config.yml` and add the following code. Remember to change `my_disqus_shortname` to your own Disqus shortname.

```
# Disqus Comments
disqus:
    # Leave shortname blank to disable comments site-wide.
    # Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.
    shortname: my_disqus_shortname
```

Create a file called `disqus_comments.html` in Jekyll’s `_includes` folder and add the following code and save the file.

```
{% if page.comments != false and jekyll.environment == "production" %}

  <div id="disqus_thread"></div>
  <script>
    var disqus_config = function () {
      this.page.url = '{{ page.url | absolute_url }}';
      this.page.identifier = '{{ page.url | absolute_url }}';
    };
    (function() {
      var d = document, s = d.createElement('script');
      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
{% endif %}
```

The above codeblock includes your [Disqus Universal Embed Code](https://disqus.com/admin/universalcode/). You may have noticed that i wrapped the code between `{% if page.comments != false and jekyll.environment == "production" %}` and `{% endif %}` liquid if statement. This included if statement will allow you to disable Disqus comments on any blog post. You simply add `comments: false` in that posts YAML front-matter. As an added bonus it will also prevent Disqus loading when Jekyll’s environment is set to development.

Finally, open your `post.html` file and add the following liquid include tag just after the end `</article>` tag. This will load Disqus comments right underneath your blog posts when Jekyll’s environment is set to production.

```
{% if site.disqus.shortname %}
  {% include disqus_comments.html %}
{% endif %}
```

To build your Jekyll site in production environment use the following command.

```
JEKYLL_ENV=production bundle exec jekyll build
```

Done!

Disqus comments should now be working correctly.

Let me know in the comments if you found this tutorial helpful?
Solving Mysteries in Magento
Tags: tech, magento, ecommerce, php
Published: 2018-10-05 19:09:45

---
title: Solving Mysteries in Magento
published: true
tags: tech,Magento,eCommerce,PHP
canonical_url: http://dangerisgo.com/blog/2016/05/11/solving-mysteries-in-magento.html
---

Not long ago our Magento eCommerce website started logging a strange and cryptic exception.
```
PHP Fatal error: Uncaught exception 'Exception' with message 'Serialization of 'Mage_Core_Model_Con
fig_Element' is not allowed' in [no active file]:0\nStack trace:\n#0 {main}\n thrown in [no active file] on line 0
```

With no context about what this means I turned to Google. Little of the results helped trace down what the issue was. Since it never appeared to affect our users I pushed it to the side to solve another day.

Around the time the exception began, I noticed alert messages were never getting cleared. A message would just stay around until the user logged out and cleared their session.

After a few months, I found time to dig into the messages issue. I started poking around at our extension of Magento’s built-in messages class. Once I ruled that out as the source of the issue, I moved on to more aggressive measures to find the issue. I turned on every debug option I could find. With DEBUG ALL THE THINGS mode turned on I saw our old cryptic message popping up again. This led me to dig into that once again. Google didn’t provide much in the way of solutions, but it did point me in the direction of our session storage. I began poking around and looking for anywhere we put something into session. Once I ruled out `string` and `int` types as an issue, I looked at other data types. EUREKA! I found a function trying to store an instance of the `Findaway_MultiCart_Model_Quote` Class. Commenting out the code and reloading proved that was the source.

Moral of the story, test and look for exceptions related to new code. It’s amazing this was so easy to fix given it was so difficult to track down. This could have been quicker had PHP exposed a more useful message, or had Magento raised an exception.
Do you realy need a dependency injection container?
Tags: programming, dependencyinjection
Published: 2018-02-10 22:36:55

---
title: "Do you realy need a dependency injection container?"
published: true
tags: ["programming", "dependency injection"]
canonical_url: http://mariosangiorgio.github.io/post/di-container/
---

I think dependency injection is a very effective technique to write more modular and generally better structured programs. It vastly improves the design of an application encouraging decoupled and highly testable components.

What I like less is that often programmers who dependency injection also use a container. They use it to wire all the components up using some sort of magic, usually through reflection.

> Magic always comes with a price

The use of magic is exactly the reason why I don’t like containers. They save you from writing some boilerplate code, which is never the hardest thing you’ll write in an application with a decent architecture, and doing so they’ll make you pay the price of losing several extremely useful features.

Here are some, just to name a few:

- would you like the compiler to show you an error when you miss something? Sorry, this is not going to happen. The container moved wiring your application up at runtime. You’ll get an exception instead.
- do you like when your IDE helps you finding where constructors are used? I do, but the price for not writing some code is that the IDE cannot help me with that. The code is not used anywhere as far as it can tell.

[Mark Seeman](http://blog.ploeh.dk/2012/11/06/WhentouseaDIContainer/) shows clearly the trade offs between not using a container at all, using it with explicit registrations and using it by convention. The first case is simple and valuable. The second is quite sophisticated and pointless. He claims that the third is sophisticated but valuable.

When you use a container in the good way, you get something that is low maintenance at the price of using a technique that is hard to learn and weakly typed. That’s definitely not for me, and that’s the reason why I agree with [yegor256](http://www.yegor256.com/2014/10/03/di-containers-are-evil.html) when he says that DI-containers are code polluters. I think that there is something wrong with your application if you really need to use a container to save you from the burden of putting all the components of your application together. You probably should have a look at how your application is structured rather than hiding the issues under the carpet and pretending that the problem is not there.



_This post was originally published on [mariosangiorgio.github.io](http://mariosangiorgio.github.io/post/di-container/)_
Running Windows on Raspberry Pi
Published: 2022-06-02 17:58:27

---
title: Running Windows on Raspberry Pi
published: true
date: 2016-05-05 20:00:45 UTC
tags: 
canonical_url: https://www.funkysi1701.com/posts/2016/windows-10-raspberry-pi-3/
---

Last year you may remember me talking about playing with a Raspberry Pi. Well since then my Raspberry Pi has been sat on a desk collecting dust.

This week I attended Leeds Sharp and the topic was **Running Windows on Raspberry Pi** and this has inspired me again to do something with a Pi.

But first what did I learn.

> Here are a couple more of pics of last nights [@LeedsSharp](https://twitter.com/LeedsSharp?ref_src=twsrc%5Etfw) [https://t.co/QvlsYjNFvB](https://t.co/QvlsYjNFvB) [#RaspberryPi](https://twitter.com/hashtag/RaspberryPi?src=hash&ref_src=twsrc%5Etfw) [#MSIoT](https://twitter.com/hashtag/MSIoT?src=hash&ref_src=twsrc%5Etfw) [pic.twitter.com/60o4wiiPSv](https://t.co/60o4wiiPSv)
> 
> — Richard Tasker 🇬🇧 (@ritasker) [April 29, 2016](https://twitter.com/ritasker/status/725970415189909504?ref_src=twsrc%5Etfw)

 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I had heard that a cut down version of Windows 10 could be installed on the newer Raspberry Pi’s, but I hadn’t really understood how cut down the version of windows is. Having now seen it demonstrated the OS consists of a single page with a few menu options.

The real power of Windows 10 IoT is when you connect remotely to it. There are a couple of ways to do this, PowerShell (check out [https://ms-iot.github.io/content/en-US/win10/tools/CommandLineUtils.htm](https://ms-iot.github.io/content/en-US/win10/tools/CommandLineUtils.htm) for a few commands), and of course connecting Visual Studio to your Pi.

When I had previously played with a Pi, it had been with bash scripts and linux commands. The beauty of installing Windows IoT is that you can write c# code, something I do in my day job so theoretically I should find it easier.

The demonstration at Leeds Sharp was pretty impressive. If you are a fan of the Big Bang Theory you may recall Sheldon playing a Theremin. Well it is actually possible to construct a Theremin from a couple of sensors and a Raspberry Pi. The code for which is on [github](https://github.com/ritasker/IoTDemos).

Now that I have been inspired what shall I do?

My Raspberry Pi won’t support Windows 10 IoT, so I need to buy the latest version. I am thinking of buying a kit so I can play about with a breadboard, LEDs and resistors. Maybe not build a robot straight away but certainly try doing something that connects to the GPIO pins.

If you have any suggestions leave a comment below.
Xamarin.Forms hands on
Tags: windowsphone, xamarin, android
Published: 2019-10-17 12:51:15

---
title: Xamarin.Forms hands on
published: true
tags: windows phone,xamarin,android
canonical_url: 
---

For some time I wanted to try Xamarin for multi platform mobile app development. Recently I got very basic app idea suggested by a friend and it looked like a perfect excuse to finally try Xamarin. Of course that Microsoft recent acquisition of Xamarin and giving the technology to developers for free gave me more reasons to do it.

### Xamarin + Visual Studio

First things first, I installed Xamarin for Visual Studio and created a new project. In the solution there were Android, iOS, Windows 8 Store and Windows Phone 8.1 apps. I can’t say I was surprised that there was no Windows 10 UWP app, even though I read there is support for Xamarin, maybe it’s too early to abandon Windows (Phone) 8. I didn’t read much of a documentation, but rather learned from code. There was one share component in which you can put all the shared stuff, from DB, networks calls to UI written in XAML. Since my app was so basic and I really wanted to make use of write once run everywhere slogan, I wrote a share page in XAML. There were some usual Android struggles, from installing the SDK, setting up the emulators, to `java.lang.OutOfMemoryError: Java heap space` error but eventually I got it working. When I realized I was writing C#/XAML code to run on Android it felt like magic, I couldn’t believe this all works. But soon after I decided the app is ready for testing on a device, I just plugged it in and deployed from Visual Studio, it felt so natural. Just to mention I didn’t try iOS because I don’t have an access to a Mac.

### OneSignal

My app needed the push notifications service. I already imagined writing a Node.js service for this, but before I started that I investigated about existing services which I could use. OneSignal seemed like a good option, it provided the needed functionality, had good documentation, SDKs for many platforms and was free. I started to work with it, and didn’t regret, I got push notifications working rather quick.

### Conclusion

Of course, main disadvantage of Xamarin.Forms is the number of UI controls you have at your disposal. This means Xamarin.Forms can’t really be used for any advanced application with much UI customizations. And that’s OK, for that purpose there’s pure Xamarin where you can write UI natively on each platform. But for what it meant to be, a faster way to build simple apps for multiple platforms or a prototyping tool Xamarin.Forms works really well.

My most negative surprise was that Windows Phone was least supported by Xamarin.Forms. I mean, it’s C#/XAML after all and one would expect it works the best for Windows, but when you think about it you can understand that there’s no reason for Xamarin team to make extra effort to support Windows Phone developers who already can develop using C#/XAML. Their main target is iOS and Android and I think they’ve done a great job implementing all that stuff, from Mono, Google Play Services, I-don’t-know-what for iOS, to UI layer and supporting XAML on all three platforms.
Kata for software developers
Tags: programming, kata, selfimprovement
Published: 2018-03-03 08:54:49

---
title: "Kata for software developers"
published: true
tags: programming,kata,self-improvement
canonical_url: 
---

Today I want to talk about such thing like Kata. Originally Kata is an exercise in martial arts that has to be repeated again and again to make your movements clean, fast and almost automatic.

So, same approach is applicable for software development as well. Especially in the field of commercial development.

How to do Kata? First of all you need to pick one which is dealing with the topic you would like to practice. For example — Test Driven Development ([**TDD**](https://en.wikipedia.org/wiki/Test-driven_development)). For that topic good choice would be [**Banking Kata**](https://github.com/sandromancuso/Bank-kata). Even if TDD is not mentioned as requirements for this Kata it could be good additional challenge. Also try [**Racing Car Kata**](https://github.com/emilybache/Racing-Car-Katas). This one will give you opportunity to practice [**SOLID**](https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)) principles.

I am a beginner in programming Kata world, so far I’m training just this two. But even with this small practice I see the difference in my daily production code.

Just go to **github** , checkout, read README and try to implement. Then when you think you are done, do revert to original commit and do it again. And then one more time. Each time your solution will be a little bit different (but maybe not just a little). Then try to back to the same Kata later, for example in a month or two. And do it again. Compare the results with your previous&nbsp;try.

This is a good idea to do Kata in pairs. That will be not just a knowledge exchange but also will help you to follow Kata requirements in more strict way. Also it will allow to practice how you explain your ideas and argue on issues you face during development.

Do Kata —train your&nbsp;skills!
Wanted: Ninja Rockstar Code Monkey Hacker Unicorn
Tags: career
Published: 2018-03-19 20:58:32

---
title: Wanted: Ninja Rockstar Code Monkey Hacker Unicorn
published: true
tags: career
canonical_url: https://rkoutnik.com/2016/04/29/Wanted-Ninja-Rockstar-Code-Monkey-Hacker-Unicorn.html
description: We’re looking for the best of the best - but as you can already tell from the title, we have no idea what that looks like.
---

We’re looking for the best of the best - but as you can already tell from the title, we have no idea what that looks like. We want someone experienced enough to implement our ridiculous ideas but paradoxically _lacking_ the experience to realize what a raw deal we’re offering. Work long hours to [implement vague ideas with no autonomy](https://rkoutnik.com/2016/04/21/implementers-solvers-and-finders.html) for [vague promises of getting rich one day](https://rkoutnik.com/articles/The-Myth-of-Equity-as-Motivation.html). After all, money’s the only thing that motivates anyone, right? Coding isn’t a creative field, it’s just telling the computer what to do.

You’ll get to work with all of our C-levels as they order you around on a daily basis. We’re an “Agile” team, so long as that means cutting corners to meet sales deadlines. We practice HN-driven-development. Plan on working ~100+ hours a week during sprints. If that scares you, don’t apply. We don’t want people who are scared by silly things like reality.

Get in on the ground floor to a catastrophe that’s sure to hit the front page of TechCrunch!

Must haves:

- White
- Male
- Unshakable confidence due to the [Dunning-Kruger effect](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect)
- No interest in a life outside of the company
- 5 years of experience in a three-year-old technology

Nice to haves:

- Enough knowledge to convince a non-technical person you’re an expert in a handful of bleeding-edge technologies
- Sneering disdain for the proven tech you should be building with
- A GitHub profile that shows you’re already willing to work for free in your off hours

Perks:

- Yes you’ll get all the usual benefits, but if you’re really going for perks, Google is your best bet! If you want to make an impact, then please apply.
- 401k? Hah, you won’t need that with how rich your sliver of equity will make you!
- We’ll have a large variety of alcohol in the office as well as an assortment of video games for the perfect frat environment
- Office located in trendy downtown district in order to burn VC cash faster

Salary: Something that we’ll claim is top-of-market but is well below. We’ll offer the low end of the range, citing lack of experience with some framework that hasn’t left beta.

Equity: 0.1% - 2% for the "right person".
The Most Innovative Checkout Form Ever
Tags: ui, ux
Published: 2017-10-11 16:41:10

---
title: "The Most Innovative Checkout Form Ever"
published: true
tags: UI,UX
canonical_url: http://jkirchartz.com/2016/05/most_innovative_checkout_form_ever.html
---

I don’t know if you’re ready for this - it might blow your mind…<!--more-->

- Name: [Full Name (as seen on card)]
- Billing Address: [Full Address]
- Shipping Address (if different): [Full Address]
- Credit Card #: [can’t you guess?]
- CCV: [verification # from the back of the card]

Kablooie! That’s all you need! Seriously - Don’t take 6 pages and 23 forms - just get the sale & be done with it! One field is more than enough for each type of information, if you need it split out you can parse it on the backend ([We have the technology](http://search.cpan.org/~timb/Geo-StreetAddress-US-1.04/US.pm)), it doesn’t have to be a front-end issue. You can even help the user input this information in the appropriate [format](http://firstopinion.github.io/formatter.js/) if you want, just make sure you account for all possibilities (i.e. full zipcode: #####-####) Don’t leave room for doubt, nobody has time for that, so don’t forget to always be closing!

<iframe src="//giphy.com/embed/d2ZeJSRDqd8P4RIQ" width="480" height="265" frameborder="0" allowfullscreen=""></iframe>

_This post was originally published on [jkirchartz.com](http://jkirchartz.com/2016/05/most_innovative_checkout_form_ever.html)_