teleren/devto huggingface dataset:
Freebie: Bamburgh UI Kit
Tags: webdev, showdev, html, discuss
Published: 2019-07-13 18:26:15

Add an extra spice to your Bootstrap 4 powered applications or websites with this free UI Kit. It's fully coded in HTML and jQuery, responsive, beautiful and packed with extra elements, helpers and components. Also, it's licensed under MIT!

**Main features:**
- Fully Coded in W3 Valid HTML5 & jQuery
- Gulp Tasks for Minification/Concatenation
- Powered by Bootstrap 4
- Fully Responsive
- Bootstrap Elements Completely Redesigned
- SCSS Modular Stylesheets
- Extensive Documentation with Examples


**Links:**
[Live Preview](https://demo.uifort.com/bamburgh-ui-kit-free/)
[Documentation](https://demo.uifort.com/bamburgh-ui-kit-free-docs/)
[Learn more](https://uifort.com/free-ui-kits/bamburgh-ui-kit-free.html)
[Video] Fostering the Next Generation of Developers
Tags: video, education, javascript, cascadiajs2018
Published: 2019-07-13 18:01:08

---
title: [Video] Fostering the Next Generation of Developers
published: true
description: When you hear about a development studio, you may typically think about a group of industry experts with years of experience and education. But there is a new generation of emerging developers who are not content to wait for college, or even high school to get in the game. As the head of Information Experience on Roblox, Laker Sparks has seen young hobbyist programmers transform into multi-million dollar development teams. In this talk, he will share his learnings and observations about the experiences and challenges of these young developers, and then discuss resources and techniques you can use to help foster this next generation of developers and creators.
tags: video, education, javascript, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Laker Sparks
![Laker Sparks](https://2018.cascadiajs.com/speakers/laker.png)

When you hear about a development studio, you may typically think about a group of industry experts with years of experience and education. But there is a new generation of emerging developers who are not content to wait for college, or even high school to get in the game. As the head of Information Experience on Roblox, Laker Sparks has seen young hobbyist programmers transform into multi-million dollar development teams. In this talk, he will share his learnings and observations about the experiences and challenges of these young developers, and then discuss resources and techniques you can use to help foster this next generation of developers and creators.

[Watch the talk on YouTube (21:33)](https://www.youtube.com/watch?v=l5XRKT0jWZk)
[Video] Open Source and the Volunteer Workforce
Tags: video, opensource, javascript, cascadiajs2018
Published: 2019-07-13 17:57:54

---
title: [Video] Open Source and the Volunteer Workforce
published: true
description: How did a band of merry volunteers build an open data platform to promote civic discourse in Portland? The answer involves open source tools, trial and error, cognizant community building, and JavaScript!
tags: video, opensource, javascript, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Michael Lange
![Michael Lange](https://2018.cascadiajs.com/speakers/michael-lange.jpg)

How did a band of merry volunteers build an open data platform to promote civic discourse in Portland? The answer involves open source tools, trial and error, cognizant community building, and JavaScript!

[Watch the talk on YouTube (26:24)](https://www.youtube.com/watch?v=Ec5j5ajtrG4)
[Video] Raiders of the Javascript-based Malware
Tags: video, security, javascript, cascadiajs2018
Published: 2019-07-13 17:54:33

---
title: [Video] Raiders of the Javascript-based Malware
published: true
description: Some modern malware are designed entirely in Javascript and executed using the default Windows Script Host or within the user's browser. In this talk, we discuss the design, operation, and implementation intricacies of Javascript-based ransomware and cryptojacking malware.
tags: video, security, javascript, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Pranshu Bajpai
![Pranshu Bajpai](https://2018.cascadiajs.com/speakers/pranshu.jpg)

Some modern malware are designed entirely in Javascript and executed using the default Windows Script Host or within the user's browser. In this talk, we discuss the design, operation, and implementation intricacies of Javascript-based ransomware and cryptojacking malware.

[Watch the talk on YouTube (25:13)](https://www.youtube.com/watch?v=aoCRE0WoFx8)
[Video] Lessons in WebAssembly & Client Side Video Editing
Tags: video, webassembly, javascript, cascadiajs2018
Published: 2019-07-13 17:51:35

---
title: [Video] Lessons in WebAssembly & Client Side Video Editing
published: true
description: WebAssembly elicits hopes about everything from importing new functionalities into browser based applications, to the potential (and in some circles hoped for) death of JavaScript. This talk is for folks who are curious about the real world applications and limitations of WebAssembly as it exists today. We'll follow along the journey of some intrepid developers as they integrate the popular FFmpeg multimedia framework into a React application for the purposes of editing video client side.
tags: video, webassembly, javascript, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Megan Slater
![Megan Slater](https://2018.cascadiajs.com/speakers/slater.jpg)

WebAssembly elicits hopes about everything from importing new functionalities into browser based applications, to the potential (and in some circles hoped for) death of JavaScript. This talk is for folks who are curious about the real world applications and limitations of WebAssembly as it exists today. We'll follow along the journey of some intrepid developers as they integrate the popular FFmpeg multimedia framework into a React application for the purposes of editing video client side.

[Watch the talk on YouTube (24:49)](https://www.youtube.com/watch?v=ziXYqUZqaEk)
[Video] Building a Universal Design System
Tags: video, javascript, design, cascadiajs2018
Published: 2019-07-13 17:46:40

---
title: [Video] Building a Universal Design System
published: true
description: Condé Nast, the publisher of such titles as WIRED, The New Yorker, GQ, Vogue, and Vanity Fair, consolidated the codebases of their 20+ websites to improve development speed and product flexibility. Multiple engineering teams built various interconnected components of the new software from the ground up; concurrently, design teams created a system that allows the publications to share the same code and retain their unique look and feel. This presentation explores early challenges of this change and how the evolution of our workflow streamlined the design and development process.
tags: video, javascript, design, cascadiajs2018
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

# Julie Busch
![Julie Busch](https://2018.cascadiajs.com/speakers/julie.jpg)

Condé Nast, the publisher of such titles as WIRED, The New Yorker, GQ, Vogue, and Vanity Fair, consolidated the codebases of their 20+ websites to improve development speed and product flexibility. Multiple engineering teams built various interconnected components of the new software from the ground up; concurrently, design teams created a system that allows the publications to share the same code and retain their unique look and feel. This presentation explores early challenges of this change and how the evolution of our workflow streamlined the design and development process.

[Watch the talk on YouTube (26:29)](https://www.youtube.com/watch?v=Yz6Jxdf9PH8)
A recruiter who codes: I hate it
Tags: webdev, hiring, discuss, career
Published: 2019-07-13 17:43:11

About a year ago I began coding on my own, self-taught out of curiosity of what I was looking at. I had started a blog just like the rest of the world and accidentally hit a combination on my keyboard that brought up the developer tools. I utilized Google and began to realize I could use this tool to change everything on my blog that I hated, literally becoming addicted to learning, changing and designing the look of my blog. Needless to say, my blog went nowhere because I was so consumed in the design of it! 
Recently I started taking courses online, through SoloLearn, Flatiron, and mobile apps that have helped me further understand what it is I am doing. As a recruiter, we look for candidates who have obtained a masters in Computer Science or Software Engineering. I come across thousands of candidates who would be a perfect match for a client but cannot be submitted because of no degree/masters. This kills me because I have to admit, I have learned far more learning on my own than I have in the courses. 
Now, I am sure going to a college and paying for education has in-depth learning, however, some of us do not have the ability to pay for our education. As a mother of 5, a wife and having a full-time job, there's no way I could add more debt on top of what I already have. So why is the recruiter and client world so against those who are self-taught? Are there companies who do not care about where your experience has come from, who would be more impressed by your GitHub, GitLab, portfolio, etc? I came into this tech world because of my genuine love and un-boxed freedom of creativity and got into recruiting to learn the different paths, meet different designers/engineers, and help others find their direction. At the same time...I am becoming frustrated with companies who only want to see you have gone through an on-site structured class that thousands of others have done, as opposed to the few who have devoted even more time learning it on their own...
Web Design by/for a Non-designer - Part 2
Tags: web, design, beginners, figma
Published: 2019-07-13 17:38:42

---
title: Web Design by/for a Non-designer - Part 2
published: true
description: I aim to narrate my thought process and seek advice and validation from the experts on my take on web design.
tags: web, design, beginner, figma
---

## Recap

This is part 2 in the series of stories that I am writing about my struggles with front end design. You might want to start in the beginning [here](https://dev.to/logeekal/web-design-by-for-a-non-designer-part-1-55gl).

Last week, I came up with a very rudimentary style of homepage for my web-site after thinking about the contents I wanted to keep on my homepage. But there were some problems with that page.

1. Scaling was completely off. Login page seems too big.

2. There was no marketing material on the page which will tell user why this CV Builder is different from others.

3. The way CV's previews were stacked on the left side were ugly.

## New Strategy

I went back to drawing board and thought a little harder on things I needed on my homepage. Here are things I came up with :

* ***Marketing material*** - as I discussed above

* ***Request a new template*** - The main feature of this website is ability to request new templates. 

* ***Contribute*** - This is a call to action for developers, so that they can contribute new templates as requested by users. This will good opportunity for anyone looking to learn CSS and React as a newbie.

* ***Templates*** - Showcase of CV Templates. 

* ***Login/Register*** - Login/Registration screen

## Inspiration

By this time, I am sure that I will not be able to build something from scratch until after 2 weeks. So it was time to look for an inspiration and steal a good design.

I did some research and landed on [land-book.com](https://land-book.com/) and after going through some of the templates I decided to go with traditional layout  and came up with something like this :
![](https://thepracticaldev.s3.amazonaws.com/i/xwaq83n7kjkna4y3yzxi.png)

Although, I am not happy with the colour but it is okay for now. And I have discovered that I am pretty bad at it.

To talk about ***typography***, I went with very safe Roboto font(Lato is again very similar), It is still fluid and may change in future. For now, it is good as a placeholder.

There are now 2 things left.

1. CV template showcase
2. Marketing material.

Here also I decided  to divide the main coloured section in 2 parts as below : 
![](https://thepracticaldev.s3.amazonaws.com/i/5sja8vhk9bhot4hv33xa.png)

## Things I liked about this design

* ***Layering*** : I liked the layering in Resume templates and I am happy that shadows came off fine. Curves on the corner are pretty good.

## Things I don't like about this design

* ***Everything*** : Coloured section is ending abruptly which is not at all eye pleasing.

* ***Marketing Material Layout *** : There is no boundary on this layout, I think Righteous font is looking pretty nice.

That's it for today, It is not really very good but it is evolving well. Let's see how we proceed on this next week.
Best talks you've watched.
Tags: discuss, talks, conferences
Published: 2019-07-13 17:06:22

---
title: Best talks you've watched.
published: true
description: Share your favorite talks on programming, software engineering etc.
tags: discuss, talks, conferences
---

Wondering if we can share our favorite talks on programming, Devops, Security or just in general about the software world.

I will share some of my favorites, which are mostly related to Python ~

- Brandon Rhodes talks telling us the inner workings of the Python dictionary. The original talk from 2010, then followed by the talk in 2017. It helped me immensely in wrapping my head around why it is called a Hash Map in the first place. 😂 And more interestingly why was the Python dictionary used to be unsorted.

{% youtube oMyy4Sm0uBs %}
{% youtube 66P5FMkWoVU %}


- Ned Batchelder's great talk illustrating debugging tricks used to solve real-life incidents at his work. Like Brandon Rhodes, Ned Batchelder possesses great oratory skills making this a really fun experience.   

{% youtube bAcfPzxB3dk %}


- Alison Kaptur's talk on bugs. This actually triggered a really interesting discussion at my current workplace which led to a conversation about nasty bugs we've collectively faced in the past. I found the part about feature flags and server-side gating really insightful. It was something I knew about before, by never really thought of in the context of actually solving critical incidents like the one she describes.

{% youtube HuuYwUxM-ZY %}
Does this sound familiar?
Tags: dailywriting
Published: 2019-07-16 23:39:42

---
title: Does this sound familiar?
published: true
tags: daily-writing
canonical_url: https://marcusblankenship.com/does-this-sound-familiar/
---

_I’m using this example in the book I’m writing, and want to see if this sounds familiar to you._

Ananya: “Marcus, which class should contain the method to check if we have new orders? I need to add it for the feature I’m working on today.”

Marcus: The _OrderUpdate_ class would be good.

Ananya: Okay, I’ll do that.

<two days go by>

Marcus: Ananya, what’s the status of that feature?

Ananya: It was quite difficult to make it work in the _OrderUpdate_ class.  I had to rewrite big parts of the class, and other classes too. I should be done next week.

Marcus: Oh, that’s too bad. Was there class it would have fit better?

Ananya: I think the _OrderStatus_ class would have been better, but I’m almost done with this approach. It’s fine – no worries.

Marcus: Oh, why didn’t you suggest the _OrderStatus_ class?

Ananya: You said you wanted it in _OrderUpdate_. I assumed you had a reason.

 

**Questions**

What do you see happening here?

What’s your reaction to it?

How could it be prevented?

 

Let me know and I’ll share the responses to the list, so we’ll all learn together.

Best,  
Marcus

The post [Does this sound familiar?](https://marcusblankenship.com/does-this-sound-familiar/) appeared first on [Marcus Blankenship](https://marcusblankenship.com).
With great prototype power comes great responsibility
Tags: javascript, prototype, inheritance, object
Published: 2019-07-13 16:29:42

---
title: With great prototype power comes great responsibility
published: true
description: Property lookup process for objects in JavaScript
tags: javascript, prototype, inheritance, object
---

Let's say we have a simple object in JavaScript.
```js
let obj = {a: 1};
console.log(obj.a);
```
Accessing an object's property have O(1) complexity, i.e. it's super fast. But it's not that simple. If a property is not found, it's searched in the object's [prototype](http://javascript.info/prototype-inheritance). If it's not found again, the process continues until the prototype chain root is reached.

So, the property lookup process might be very time consuming in case of an object with long prototype chain.

Here's an example
```js
function getObjectWithLongPrototypeChain(depth = 1) {
  let nextObj = {a: 1};

  for (let i = 0; i < depth; i++) {
    nextObj = Object.create(nextObj);
  }
  return nextObj;
}

let regularObject = {a: 1};
let longObject = getObjectWithLongPrototypeChain(1000000);

let t0;
let t1;
t0 = performance.now();
console.log(regularObject.a);
t1 = performance.now();
console.log(`Property lookup in the regular object took ${(t1 - t0)} milliseconds.`);

t0 = performance.now();
console.log(longObject.a);
t1 = performance.now();
console.log(`Property lookup in the object with long prototype chain took ${(t1 - t0)} milliseconds.`);

```

And the results are
```
Property lookup in the regular object took 0.21500000730156898 milliseconds.
Property lookup in the object with long prototype chain took 42.249999998603016 milliseconds.
```
So, the basic operation of property lookup for the second object took an incredible amount of time! While it's almost impossible to have objects with so long prototype chains in production code, I think it's good to know how JS engine resolves property lookup for objects.
Sketch symbol folder frustrations
Tags: sketch, ui, ux
Published: 2019-07-13 15:34:22

---
title: Sketch symbol folder frustrations
published: true
description: TLDR: When a single symbol exists within a parent, nesting won't happen.
tags: sketch, ui, ux
---

One of the things that annoy me the most with Sketch, is the seemingly strage behavior with symbol folders.

The UI isn't very helpful in this regard and neither does it seem to be properly documented anywhere in a succint way.

So I contact Sketch support hoping to get some insight. The very helpful *Alberto Araújo*, a customer support employee replied:

> Sketch will automatically apply the desired nesting structure for Symbols with "/" in their name.
However, when only a single Symbol is contained within any parent folder, then Sketch will simply show that Symbol's name in full rather than nesting a Symbol within a submenu.

> When two or more Symbols are named with the same preceding title, then the expected submenu structure will be shown in the various Symbol-related menus.
To see this in action, I recommend creating a two Symbols, for example "button / landing1" and "button / landing2". 

> You will then notice that both the "landing1" and "landing2" Symbols will now be found within a "button" submenu.

Finally!
I understand how it works now.
Is this element visible?
Tags: css, javascript, discuss
Published: 2019-07-13 15:30:37

The sample couldn't be much simpler. The question is, is the div element containing the text "Hello World" visible or hidden?

{% codepen https://codepen.io/alohci/pen/rEgaYa %}

Visible right? Well maybe. jQuery begs to differ!

{% codepen https://codepen.io/alohci/pen/OeYPVz %}

The problem lies is jQuery's (and widely copied) definition and implementation of its check for visibility. [The definition](https://api.jquery.com/visible-selector/) is
 
 > Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

The implementation is 

`!! (el.offsetWidth || el.offsetHeight || el.getClientRects().length)`

The div in question has a CSS property display value of "contents", which means that it creates no layout box of its own. Its child elements' layout boxes are instead directly connected to its parent layout box. The CSSOM specifications say that offsetWidth, offsetHeight and getClientRects().length must all return zero for such an element

> [For both offsetWidth and offsetHeight](https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetwidth) If the element does not have any associated CSS layout box return zero and terminate this algorithm.

> [for getClientRects()](https://drafts.csswg.org/cssom-view/#dom-element-getclientrects) If the element on which it was invoked does not have an associated layout box return an empty DOMRectList object and stop this algorithm.

So in the light of this, what should be done? The intuitive answer clearly doesn't tally with the technical details. And it's not clear to me from a developer perspective whether an element with no layout box really should be considered visible, just because its contents are. Yet from a user perspective it seems obvious that it should. Do we need a third state beyond "visible" and "hidden"?
Any Marvel Fans here?
Tags: watercooler
Published: 2019-07-13 14:21:29

I recently saw Spiderman far from home and I must say it's a really good movie. I enjoyed every part of it except the end of course 🙄

I'll like to know what you think about this movie 🙂

⚠️ Spoiler alert - If you don't want to see any spoilers then exit this post. friendly advice 🙂
Are you an I person, T person or X person?
Tags: discuss, management, productivity
Published: 2019-07-13 13:24:01

When it comes to skills and expertise, HR and management people classify you into one of these three categories:

1. **I Person:** Focused on just one skill (such as JavaScript, PHP, Node, CSS, Photoshop, HTML, etc.) to an expert level (the letter "I" indicates the depth of specialization in one field).
2. **T Person:** Focused on  one skill but still covers an entire broader area (such as backend programming, frontend design, database administration, micro-services, etc). The I part represents the focus, and the dash above represents the breadth or range.
3. **X Person:** Has established enough reputation in a particular skill or skill range that s/he can guide other people and manage them. People like Guido, Linus, Rasmus, etc. might fall in this category.

So, what kind of person are **you**?

**Edit**

Though not officially acknowledged, there is also an **M Person** - the generalist who "specializes" in too many things such as the GP/MBBS Doctor or a Full Stack Developer.