teleren/devto huggingface dataset:
:focus-within
Tags: css
Published: 2019-05-29 22:54:36

---
title: :focus-within
published: true
tags: [css]
canonical_url: https://www.prestonlamb.com/blog/focus-within/
---

It's been awhile since I've really spent time working in CSS, but I've recently had to build a template at work. It's taken a bit to get back in the swing of things, but I've learned a lot of cool new tricks. Well, at least new since the last time I did all this. The one I want to highlight in this blog post, however, is the CSS pseudo-class `:focus-within`.

`:focus-within` is similar to the pseudo-class `:focus` in that it applies certain styles to your site when an element has focus. The difference is that `:focus` only applies to a single element. When that single element has been focused, the styles are applied. With `:focus-within`, however, can be placed on a parent element and when any child element, or the parent element itself, is focused the styles will be applied.

This comes in really handy when you want to style a `form` when a child `input` is focused. Or, in my case, make a dropdown show up when a user enters an `input` field. In the case I was working on, I wanted a dropdown to show up that would contain suggestions as a person typed in an input. `:focus-within` makes that very simple. Here's the relevant part of the HTML for my search bar:

![HTML demo code for the :focus-within dropdown](https://www.prestonlamb.com/static/images/blogPosts/focus-within/focus-within-html.png)

And here's the SCSS used to make everything work:

![SCSS demo code for the :focus-within dropdown](https://www.prestonlamb.com/static/images/blogPosts/focus-within/focus-within-scss.png)

As you can see, it really doesn't take that much HTML or CSS to get this done. The finished product is shown here:

![A GIF showing the dropdown show and hide when focus is placed in the search box.](https://www.prestonlamb.com/static/images/blogPosts/focus-within/focus-within.gif)

There are lots of ways to achieve this desired output, and there are lots of applications. But I was surprised at how easy this was and how quickly I was able to implement it. I definitely recommend it to anyone that is looking for similar functionality. It's only available in Chrome, Firefox, and Safari at this point, but if you can get away with that it's perfect.
React Native without Expo
Tags: reactnative, javascript
Published: 2018-06-11 01:57:28

---
title: React Native without Expo
published: true
description: Starting a new project on react native 
tags: react-native, js
---


# Intro

I took an old react native project that I started long ago to finally finish it. I created a fresh start new react native project with `create-react-native-app`. I found out that now that Expo is the default option when creating a default app. I made some changes, integrated [NativeBase](https://docs.nativebase.io) and Redux (using some boilerplate) and I wanted to test the compilation process. I found out that now Expo can compile your code in their cloud and just download the compiled file to test it on the phone. I thought this was great until I saw the file size: 25 mb 😱 and I read that for iOS is around 30 mb. I just could not believe it. After reading some docs, Expo claims that they include multiple libraries so when a new library is needed, it is already in the user's phone and only the JS code is pushed over the cloud. I can't afford it, it is too many space for what I'm doing, so I decided I needed to detach 🤷.

# ExpoKit

There are two detach possibles: ExpoKit and React Native. So, I tested first the ExpoKit. To test it I copied the folder because you can't go back after detaching it. The command created an android and ios folder. I don't know ios, so I only tested with Android, so I created the debug APK and the size was 30mb 😱 even bigger than the Expo cloud compilation. So, after multiple optimizations that included the `minify`, `shrink`, `separateCPUbuilds`, `proGuard` and I deleted most of the dependencies that includes and only got to reduce it at 15 mb 😕. It took me two days to make this, I had a lot of errors, I had to upgrade to latest Gradle because of my java version, added some repositories and I felt disappointed.

# React Native

I didn't give up, so I created another folder and ejected the app to pure React Native. At first, I had the same problems with the Gradle, I had to updated it, clean and build it again. The Expo parts didn't worked anymore. I had a splash screen, app icon and fonts/icons with Expo that were not compatible, so that will be more work. I left the splash screen pending and fixed the fonts/icons installing [react-native-icons](https://github.com/oblador/react-native-vector-icons). After that I compiled the APK and guess what? 7.5 mb with only the `proGuard` option enabled 🔥. It can be reduced even more with `SeparteCPUBuilds`.

# Conclusion

Expo has really cool (but not necessarily) API's integrated, a Mac is not needed to compile to iOS, can update JS code without downloading app from store but the drawback of the size is too big, in my opinion. I still have to explore the iOS part.
Thinking of quitting my temp job and immerse myself in learning to web dev
Tags: learntocode, fullstack, javascript, selfdiscipline
Published: 2018-06-10 19:52:58

---
title: Thinking of quitting my temp job and immerse myself in learning to web dev
published: true
description: How to learn how to code
tags: learn to code, full-stack, javascript, self-discipline
---

Hey everyone. I am tired of the jobs I've been doing. Now I am willing to quit with $700 in savings and learn to code on TeamTreeHouse. Is this crazy enough? I am thinking of doing 8+ hours a day. Will TeamTreeHouse be enough to launch a career in web dev in a few months?
What to learn next ?
Tags: discuss, career, dev
Published: 2018-06-10 19:50:56

---
title: What to learn next ?
published: true
description: 
tags: #discuss,#career,#dev
---

What languages, framework, technology or anything Computer Science are you planning to learn next or interested in ?

For me it's RxJava, Erlang, Elixir and distributed computing.
Http Request with AWS Lambda, Node.js 8.10, and Standard http library
Tags: serverless, aws, node, javascript
Published: 2018-06-10 16:44:58

---
title: Http Request with AWS Lambda, Node.js 8.10, and Standard http library
published: true
description: How to make an Http Request using AWS Lambda with Node.js 8.10
tags: #serverless #aws #node #javascript
---

In my previous article I showed an approach to extend a "traditional" (monolithic architecture) app using AWS Lambda:  https://dev.to/scottlepp/extending-traditional-software-with-serverless-microservices-442m

Let's take a closer look at the Lambda function and how to make an http request using Node.js 8.10 and the standard http library.

In previous versions of node.js, the handler function contained a callback argument like so:

```javascript
exports.handler = function (event, context, callback) {
```
And when your http request finished you would execute the callback to indicate the function was finished:

```javascript
const req = http.request(options, (res) => {
   callback('Success');
});
```
And yet even older version of node.js didn't have a callback function, instead you would use "context.succeed" like so:

```javascript
const req = http.request(options, (res) => {
   context.succeed();
});
```

However, in node.js 8.10 this has changed. The callback argument is again not needed. Now you just wrap your function returning a Promise. Then instead of executing the callback function, you execute the Promise resolve function (or reject function if it fails) as so:

```javascript
const http = require('http');

exports.handler = async (event, context) => {

    return new Promise((resolve, reject) => {
        const options = {
            host: 'ec2-18-191-89-162.us-east-2.compute.amazonaws.com',
            path: '/api/repos/r1639420d605/index?delta=true&clear=false',
            port: 8000,
            method: 'PUT'
        };

        const req = http.request(options, (res) => {
          resolve('Success');
        });
        
        req.on('error', (e) => {
          reject(e.message);
        });
        
        // send the request
        req.write('');
        req.end();
    });
};
```

That's it! These changes between versions of node.js tripped me up a bit so I wanted to share the latest method. Hope this helps someone!
BxJS Weekly Ep. 14 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-06-10 14:48:07

---
title: BxJS Weekly Ep. 14 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 14 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-14-2018-06-10.md).

You can also watch [this episode on youtube](https://youtu.be/zfQDN0v0JXY).

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)
A quick explanation of Redux Observable.
Tags: react, redux, webdev, javascript
Published: 2018-06-10 02:54:12

---
title: A quick explanation of Redux Observable. 
published: true
description: A gentle explanation about how to use observables with Redux 
tags: #React #Redux #webdev #JavaScript 
---

## Intro 
The [link to all the code in one page](https://gist.github.com/papaponmx/1b61ffebc0b49b7bedbf8e954cfb959e).


As a Front End Developer, I'm quite familiar with Redux, how it works and how to handle asynchronous operations with [`redux-saga`](https://github.com/redux-saga/redux-saga).

However, in my new job we use [`redux-observable`](https://github.com/redux-observable/redux-observable). I found it interesting, and some friend of mine was asking, therefore, here is a brief explanation of how it works with Redux. 

**Note**: I'm assuming that you are comfortable with Redux jargon(action creators, reducers, store) and React. 


## Unidirectional data flow with observables.

The magic happens in the following order:

1. The component is rendered with props that are mapped from the store.
2. An action is triggered by some event. This can be a DOM event or lifecycle method i.e. `componentWillMount()`. 
3. Actions are filtered by a `reducer`. At the same time, some epic listens to and acts on some action. Here is where async magic happens. Inside the epic, we can dispatch a new action if needed.
4. Reducers reflect return a new state.


Here is a quick diagram
![alt text](https://thepracticaldev.s3.amazonaws.com/i/s0qgjzrptdalvg4xkqkm.png)

How it looks like in code. Following the [`redux-ducks`](https://github.com/erikras/ducks-modular-redux) pattern, I'll put everything in the same file.

```javascript
// module/index.js
// Actions
...
// Reducer
...

// Action Creators
...

// Epics
const createEpic = action$ => {
 action$.ofType(FETCH_LIST_SUCCESS)
    .mergeMap(action =>
      ajax.getJSON(`${baseurl}/list`)
        .map(res => fetchUserSuccess(res.data))
    );
}; 

```


With the epic logic and module in order. The next step is to add it to our root reducer and epic. 

```javascript
import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import list, { fetchListEpic } from './lists';

export const rootEpic = combineEpics(
  fetchUserEpic,
  // ...
);

export const rootReducer = combineReducers({
  // ...
  list,
});

```


In the end, `redux-observable` is just some middleware we use to handle async operations and side effects. The last step is to add it to our `configureStore.js`. 


```javascript
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './modules';

const epicMiddleware = createEpicMiddleware(rootEpic);

export default function configureStore() {
  const store = createStore(
    rootReducer,
    applyMiddleware(epicMiddleware)
  );


  return store;
}

```

In case you missed it, here is the [link to all the code in one page](https://gist.github.com/papaponmx/1b61ffebc0b49b7bedbf8e954cfb959e). 

That's all folks.
Some common anti non-javascript mechanism websites use
Tags: javascript, web, noscript
Published: 2018-06-10 01:51:04

---
title: Some common anti non-javascript mechanism websites use
published: true
description: Being using browser with JavaScript disabled by default for years, I noticed few mechanism used by websites to shun away people like me.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2vhnpxwksvp4t4wfbbrz.png
tags: javascript, web, noscript
---

Being using browser with JavaScript disabled by default for years, I noticed few mechanism used by websites to shun away people like me.

1\. Using `<noscript>` tag.

![noscript](https://thepracticaldev.s3.amazonaws.com/i/xa39pnupousoxcmrl990.png)

2\. CSS `display: none;`. While look simple, the challenge here is to find the div which get applied the css. They will try to bury it few levels deep.

![css display none](https://thepracticaldev.s3.amazonaws.com/i/2vhnpxwksvp4t4wfbbrz.png)

3\. Overlay/z-index ? Unfortunately I can't find real example yet. The website I frequently visit no longer using the technique and now I can read the content at pleasure with JavaScript disabled.

![css z-index](https://thepracticaldev.s3.amazonaws.com/i/3ect7f9htqdhyq5edx6m.png)

Using browser with JavaScript disabled allow me to perceive the web a bit different than others commonly see it. For example, this how one of the websites look like:-

![astroawani nojs](https://thepracticaldev.s3.amazonaws.com/i/g85byi09yc9lhcl5mo92.png)

Most of the time I can get away with all these nojs mechanism by just using the devtools. But for websites who fully use JavaScript to load the content separately, instead of just hiding it, I have to resolve on using my other browser profile with JavaScript enabled.
Staying human in a digital era
Tags: programming, reflection, humans, offline
Published: 2018-06-09 22:14:58

---
title: Staying human in a digital era
published: true
description: How to keep one's humanity in a digital world
canonical_url: http://creactiviti.com/2018/06/10/staying-human-in-a-digital-era/
tags: programming,reflection,humans,offline
---
![banner](https://thepracticaldev.s3.amazonaws.com/i/1ufzfkkp4vf8eo0vh299.jpg)

This is not a technical post. But in light of the recent tragedies I decided to take a moment and reflect about us. Humans. 

Without a doubt, the last few decades had given us many technological wonders. Personal computing gave us the ability to create incredible things. The Internet took down our artificial barriers and made it possible for us to freely exchange ideas regardless of our physical location. The web gave us access to the world's information and open source leveled the software playing field.

Computers are also giving us self-driving cars, delivery drones, chess mates, better science and a million other great things. 

But no matter how much faster, better and smarter our computers get, there's one thing that computers will never be able to give us. A simple human touch. 

As programmers we tend to get lost in the cyber world. We work there, we play there, we communicate there, we buy our groceries there and we have less and less opportunity to step out and take a break.

But we are still human. And we sometimes forget that the world is full of other humans. And most of these other humans are actually pretty awesome. Some of them are working hard to keep us healthy, others are keeping us safe from harm, still others are growing the food we eat and every one of them no matter who they are, or what they do, is waking up in the morning to make the world a little bit better than yesterday in their own unique way.

Maybe we need a Human Day. Something to remind us once a year that we're all human. 

So say hi to someone you don't know today. Smile to another human being. Say hi to that pretty girl or handsome guy you like. Take a break from that computer. Turn off your phone. Go for a run. Meet a friend for coffee. 

It's okay to be human.
What do you think about interactive resumes?
Tags: discuss
Published: 2018-06-09 20:41:20

---
title: What do you think about interactive resumes?
published: true
tags: discuss
---

Some years ago, I came across [Robby Leonardi's resume](http://www.rleonardi.com/interactive-resume/). It's basically an animation of a game character going through a platformer game as you scroll down, displaying Robby's background, interests and skills.

![](https://thepracticaldev.s3.amazonaws.com/i/2nzcqyqufg12xsm745z0.gif)

Have you seen good other interactive resumes? Would this be a good way to also add another portfolio project? Other thoughts?
Creating Terminal Shortcuts with Aliases 
Tags: terminal
Published: 2018-06-09 19:52:15

---
title: Creating Terminal Shortcuts with Aliases 
published: true
description: 
tags: #terminal 
---

If you're like me and live in the terminal, creating shortcut commands known as aliases for regularly accessed directories can save you a bunch of time. You create these aliases in your **.bash_profile**. Let me show you how.

For me, before I created an alias, accessing my directory that contained all my school documents was a chore... this is what it looked like.

```
cd ~/Documents/Documents\ -\ Cadell’s\ MacBook\ Air/UTT\ year\ 1\ semester3
```


To make life easier, I created an alias in my bash profile. First I opened it using:
```
open ~/.bash_profile
```
Now with my **.bash_profile** file opened up, I can insert the alias command.
```
alias school="cd ~/Documents/Documents\ -\ Cadell’s\ MacBook\ Air/UTT\ year\ 1\ semester3/"
```

From here, all I need to do is save that file and relaunch terminal. Now to access my school files all I need to do is launch the **school** shortcut like so:

```
cadellsingh$ school
```
We Designed A Software Product That Never Got Built 😕
Tags: career, agile, design, culture
Published: 2018-06-09 18:12:50

---
title: We Designed A Software Product That Never Got Built 😕
published: true
description: One of the most frustrating software projects I've been on, was when we designed a product that never got built!
tags: #career #agile #design #culture
---

One of the most frustrating software projects I've been on, was when we designed a product that never got built!

A couple different things happened on this project that made it difficult...

First, the project was being sold to use an agile process, but then _was suddenly switched to fixed cost at the last minute_.

Secondly, there were too many people in management positions.

It created confusion where _team members were getting conflicting instructions_.

The client was telling each manager different things!

And lastly the client had never designed a software product before.

We tried to warn them to design a simpler product than their entire vision, but they wouldn't listen.

Because they tried to design the product up front, _they designed a product that was too complex for a first release_.

Though we did what we could to keep the project on track, it ultimately was **too expensive for them to build**.

I hope this video helps you avoid some of these mistakes on your software projects.

Visit my site to watch the full video (or listen as a podcast):

# [📺 Watch or 🎧 Listen](https://jaymeedwards.com/2018/06/05/we-designed-a-software-product-that-never-got-built/)

<hr />[🔔 Subscribe for over 100 videos on healthy software development](https://YouTube.com/c/JaymeEdwardsmedia?sub_confirmation=1)
New Ruby Gem: structured_log
Tags: ruby, logging
Published: 2018-06-09 17:24:25

---
title: New Ruby Gem: structured_log
published: true
description: 
tags: ruby, logging
---

I have put up a new Ruby gem:  [structured_log](https://rubygems.org/gems/structured_log).

It's an alternative to the many "flat" logs available.

Logging in nested sections (blocks) in Ruby code appears as nested elements in the XML log, giving structure to both.
Flutter from JavaScript
Tags: flutter, dart, discuss, reactnative
Published: 2018-06-09 12:55:37

---
title: Flutter from JavaScript
published: true
description: difference of javascript from flutter
tags: #flutter #dart #dev-discuss #react-native
---

What is that makes React native less efficient than Dart though both are statically typed(JS --> Typescript)

I'm a react enthu. Trying to understand dart, so that I could get hands on it! 😊
How do you gain a deep understanding of your code?
Tags: learning, development, discuss, tips
Published: 2018-06-09 10:53:24

---
title: How do you gain a deep understanding of your code?
published: true
description: Discussion on how to learn with the goal of knowing the language/framework inside out.
tags: learning, development, devdiscuss, tips
---

Everyone has different ways of learning, and I've read a few interesting articles on here about it. Some people are very visual learners, some like to sketch things out, read articles, or watch videos. 

**My question is: if you have a topic you want to learn, and you want to know everything there is to know about it, and gain a deep knowledge and understanding of it, where do you start? What is your process?**

I find that some articles I'm reading are relatively opinionated, or not written with beginners in mind. They can sometimes skip over the structure/architecture of a project and why it is this way. Video tutorials are good but make me follow an example project, which I can't always apply to my own work.

I suspect it really is just 'trial and error' and building up that understanding over time. But I'm just curious. I'm fascinated by people who can tell me how and why things work, when often I feel like I just 'know enough to do the job'. 

It's hard to explain but it's not so much about writing the code, or the syntax. It's the overall concept of how things tie together and why things are done in a certain way.