Been looking for this for a long time, finally there is some app which allows me to run a linux distro without rooting my gadget.
Here is link to userland.tech website. Check this out, its easy to setup and does not require rooting your device.
Category: Uncategorized
Get to your ebooks quickly
So this is going to be a little longer post than usual.
To begin with, here is screenshot of how it would look like finally:
To begin with, here is screenshot of how it would look like finally:
We are using “rofi” here to show the menu. So, lets first install that
cat <<EOF >/etc/yum.repos.d/_copr_yaroslav-i3desktop.repo [yaroslav-i3desktop] name=Copr repo for i3desktop owned by yaroslav baseurl=https://copr-be.cloud.fedoraproject.org/results/yaroslav/i3desktop/fedora-$releasever-$basearch/ type=rpm-md skip_if_unavailable=True gpgcheck=1 gpgkey=https://copr-be.cloud.fedoraproject.org/results/yaroslav/i3desktop/pubkey.gpg repo_gpgcheck=0 enabled=1 EOF yum install rofi
Once that is done, we will create a small script to look for all our pdf files and display that in the menu, like above. Save this as ~/bin/books-search.sh :
#!/usr/bin/env bash
#
# wget 'https://raw.githubusercontent.com/miroslavvidovic/rofi-scripts/master/books-search/books-search.sh'
# -----------------------------------------------------------------------------
# Info:
# author: Miroslav Vidovic
# file: books-search.sh
# created: 13.08.2017.-08:06:54
# revision: ---
# version: 1.0
# -----------------------------------------------------------------------------
# Requirements:
# rofi
# Description:
# Use rofi to search my books.
# Usage:
# books-search.sh
# -----------------------------------------------------------------------------
# Script:
# Modified by Amit Agarwal
# Books directory
BOOKS_DIR=/usr/share/texlive/texmf-dist/doc/
# Save find result to F_ARRAY
readarray -t F_ARRAY <<< "$(find "$BOOKS_DIR" -type f -name '*.pdf')"
# Associative array for storing books
# key => book name
# value => absolute path to the file
# BOOKS['filename']='path'
declare -A BOOKS
# Add elements to BOOKS array
get_books() {
for i in "${!F_ARRAY[@]}"
do
path=${F_ARRAY[$i]}
file=$(basename "${F_ARRAY[$i]}")
BOOKS+=(["$file"]="$path")
done
}
# List for rofi
gen_list(){
for i in "${!BOOKS[@]}"
do
echo "$i"
done
}
main() {
get_books
#
book=$( (gen_list) | rofi -dmenu -lines 10 -width 100 -i -matching
fuzzy -only-match -location 0 -fake-transparency -p "Book > " )
book=$( (gen_list) | rofi -dmenu -i -matching fuzzy -only-match -p "Book > " )
xdg-open "${BOOKS[$book]}"
}
main
exit 0
In the above script, change the BOOKS_DIR to the one that you would like to see. And finally make some cosmetic changes:
cat <<EOF >~/.Xresources
rofi.color-enabled: true
rofi.opacity: 50
rofi.width: 100
rofi.lines: 10
rofi.columns: 4
rofi.font: System San Francisco Display 8
rofi.color-normal: #fdf6e3,#002b36,#eee8d5,#586e75,#eee8d5
rofi.color-urgent: #fdf6e3,#dc322f,#eee8d5,#dc322f,#fdf6e3
rofi.color-active: #fdf6e3,#268bd2,#eee8d5,#268bd2,#fdf6e3
rofi.color-window: #fdf6e3,#002b36
rofi.yoffset: 0
rofi.xoffset: 0
rofi.fixed-num-lines: false
rofi.terminal: rofi-sensible-terminal
rofi.ssh-client: ssh
rofi.ssh-command: {terminal} -e {ssh-client} {host}
rofi.run-command: {cmd}
rofi.run-list-command:
rofi.run-shell-command: {terminal} -e {cmd}
rofi.window-command: xkill -id {window}
rofi.disable-history: false
rofi.levenshtein-sort: false
rofi.case-sensitive: false
rofi.cycle: true
rofi.sidebar-mode: false
rofi.auto-select: false
rofi.parse-hosts: true
rofi.parse-known-hosts: true
rofi.combi-modi: window,run
rofi.fuzzy: true
rofi.glob: false
rofi.regex: false
rofi.tokenize: true
rofi.m: -1
rofi.line-margin: 2
rofi.filter:
rofi.separator-style: dash
rofi.hide-scrollbar: false
rofi.fullscreen: false
rofi.fake-transparency: true
rofi.dpi: -1
rofi.threads: 1
rofi.scrollbar-width: 8
rofi.scroll-method: 0
rofi.fake-background: screenshot
rofi.display-ssh:
rofi.display-run:
rofi.display-drun:
rofi.display-combi:
EOF
xrdb -merge ~/.Xresources
Finally for easy access, you might want to bind a key to lauch the script that we created and voila.
Styled-Components: CSS-in-JS Library for the Modern Web
This post was written by Jeremy Davis, JavaScript Developer for Toptal.
CSS was designed for documents, what the “old web” was expected to contain. The emergence of preprocessors like Sass or Less shows that the community needs more than what CSS offers. With web apps getting more and more complex over time, CSS’ limitations have become increasingly visible and difficult to mitigate.
Styled-components leverages the power of a complete programming language—JavaScript—and its scoping capabilities to help structure the code into components. This helps to avoid the common pitfalls of writing and maintaining CSS for large projects. A developer can describe a component’s style with no risk of side effects.
What’s the Problem?
One advantage of using CSS is that the style is completely decoupled from the code. This means that developers and designers can work in parallel without interfering with each other.
On the other hand, styled-components makes it easier to fall in the trap of strongly coupling style and logic. Max Stoiber explains how to avoid this. While the idea of separating logic and presentation is definitely not new, one might be tempted to take shortcuts when developing React components. For example, it’s easy to create a component for a validation button that handles the click action as well as the button’s style. It takes a bit more effort to split it in two components.
The Container/Presentational Architecture
This is a pretty simple principle. Components either define how things look, or they manage data and logic. A very important aspect of presentation components is that they should never have any dependencies. They receive props and render DOM (or children) accordingly. Containers, on the other hand, know about the data architecture (state, redux, flux, etc.) but should never be responsible for display. Dan Abramov’s article is a very good and detailed explanation of this architecture.
Remembering SMACSS
Although the Scalable and Modular Architecture for CSS is a style guide for organizing CSS, the basic concept is one that is followed, for the most part automatically, by styled-components. The idea is to separate CSS into five categories:
- Base contains all the general rules.
- Layout’s purpose it to define the structural properties as well as various sections of content (header, footer, sidebar, content, for instance).
- Module contains subcategories for the various logical blocks of the UI.
- State defines modifier classes to indicate elements’ states, e.g. field in error, disabled button.
- Theme contains color, font, and other cosmetic aspects that may be modifiable or dependent on user preference.
Keeping this separation while using styled-components is easy. Projects usually include some kind of CSS normalization or reset. This typically falls in the Base category. You may also define general font sizing, line sizing, etc. This can be done through normal CSS (or Sass/Less), or through the
1 | injectGlobal |
function provided by styled-components.
For Layout rules, if you use a UI framework, then it will probably define container classes, or a grid system. You can easily use those classes in conjunction with your own rules in the layout components you write.
Module is automatically followed by the architecture of styled-components, since the styles are attached to components directly, rather than described in external files. Basically, each styled component that you write will be its own module. You can write your styling code without worrying about side effects.
State will be rules you define within your components as variable rules. You simply define a function to interpolate values of your CSS attributes. If using a UI framework, you might have useful classes to add to your components as well. You will probably also have CSS pseudo-selector rules (hover, focus, etc.)
The Theme can simply be interpolated within your components. It is a good idea to define your theme as a set of variables to be used throughout your application. You can even derive colors programmatically (using a library, or manually), for instance to handle contrasts and highlights. Remember that you have the full power of a programming language at your disposal!
Bring Them Together for a Solution
It is important to keep them together, for an easier navigation experience; We don’t want to organize them by type (presentation vs. logic) but rather by functionality.
Thus, we will have a folder for all the generic components (buttons and such). The others should be organized depending on the project and its functionalities. For instance, if we have user management features, we should group all the components specific to that feature.
To apply styled-components’ container/presentation architecture to a SMACSS approach, we need an extra type of component: structural. We end up with three kinds of components; styled, structural, and container. Since styled-components decorates a tag (or component), we need this third type of component to structure the DOM. In some cases, it might be possible to allow a container component to handle the structure of sub-components, but when the DOM structure becomes complex and is required for visual purposes, it’s best to separate them. A good example is a table, where the DOM typically gets quite verbose.
Example Project
Let’s build a small app that displays recipes to illustrate these principles. We can start building a Recipes component. The parent component will be a controller. It will handle the state—in this case, the list of recipes. It will also call an API function to fetch the data.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<span class="hljs-keyword">constructor</span> (props) {
<span class="hljs-keyword">super</span>(props);
<span class="hljs-keyword">this</span>.state = {
<span class="hljs-attr">recipes</span>: []
};
}
componentDidMount () {
<span class="hljs-keyword">this</span>.loadData()
}
loadData () {
getRecipes().then(<span class="hljs-function"><span class="hljs-params">recipes</span> =></span> {
<span class="hljs-keyword">this</span>.setState({recipes})
})
}
render() {
<span class="hljs-keyword">let</span> {recipes} = <span class="hljs-keyword">this</span>.state
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">RecipesContainer</span> <span class="hljs-attr">recipes</span>=<span class="hljs-string">{recipes}</span> /></span>
)
}
}
</span>
It will render the list of recipes, but it does not (and should not) need to know how. So we render another component that gets the list of recipes and outputs DOM:
2
3
4
5
6
7
8
9
10
11
12
render() {
<span class="hljs-keyword">let</span> {recipes} = <span class="hljs-keyword">this</span>.props
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">TilesContainer</span>></span>
{recipes.map(recipe => (<span class="hljs-tag"><<span class="hljs-name">Recipe</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{recipe.id}</span> {<span class="hljs-attr">...recipe</span>}/></span>))}
<span class="hljs-tag"></<span class="hljs-name">TilesContainer</span>></span>
)
}
}
</span>
Here, actually, we want to make a tile grid. It may be a good idea to make the actual tile layout a generic component. So if we extract that, we get a new component that looks like this:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
render () {
<span class="hljs-keyword">let</span> {children} = <span class="hljs-keyword">this</span>.props
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Tiles</span>></span>
{
React.Children.map(children, (child, i) => (
<span class="hljs-tag"><<span class="hljs-name">Tile</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{i}</span>></span>
{child}
<span class="hljs-tag"></<span class="hljs-name">Tile</span>></span>
))
}
<span class="hljs-tag"></<span class="hljs-name">Tiles</span>></span></span>
)
}
}
TilesStyles.js:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
padding: 20px 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
`</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> Tile = styled.div<span class="hljs-string">`
flex: 1 1 auto;
...
display: flex;
& > div {
flex: 1 0 auto;
}
`</span>
Notice that this component is purely presentational. It defines its style and wraps whatever children it receives inside another styled DOM element that defines what tiles look like. It’s a good example of what your generic presentational components will look like architecturally.
Then, we need to define what a recipe looks like. We need a container component to describe the relatively complex DOM as well as define the style when necessary. We end up with this:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
onChangeServings (e) {
<span class="hljs-keyword">let</span> {changeServings} = <span class="hljs-keyword">this</span>.props
changeServings(e.target.value)
}
render () {
<span class="hljs-keyword">let</span> {title, ingredients, instructions, time, servings} = <span class="hljs-keyword">this</span>.props
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Recipe</span>></span>
<span class="hljs-tag"><<span class="hljs-name">Title</span>></span>{title}<span class="hljs-tag"></<span class="hljs-name">Title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>{time}<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>Serving
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"1000"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{servings}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.onChangeServings.bind(this)}/</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">Ingredients</span>></span>
{ingredients.map((ingredient, i) => (
<span class="hljs-tag"><<span class="hljs-name">Ingredient</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{i}</span> <span class="hljs-attr">servings</span>=<span class="hljs-string">{servings}</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"name"</span>></span>{ingredient.name}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"quantity"</span>></span>{ingredient.quantity * servings} {ingredient.unit}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">Ingredient</span>></span>
))}
<span class="hljs-tag"></<span class="hljs-name">Ingredients</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
{instructions.map((instruction, i) => (<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{i}</span>></span>{instruction}<span class="hljs-tag"></<span class="hljs-name">p</span>></span>))}
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">Recipe</span>></span>
)
}
}
</span>
Notice here that the container does some DOM generation, but it’s the only logic it contains. Remember that you can define nested styles, so you don’t need to make a styled element for each tag that requires styling. It’s what we do here for the name and quantity of the ingredient item. Of course, we could split it further and create a new component for an ingredient. That is up to you—depending on the project complexity—to determine the granularity. In this case, it is just a styled component defined along with the rest in the RecipeStyles file:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
background-color: <span class="hljs-subst">${theme('colors.background-highlight')}</span>;
`</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> Title = styled.div<span class="hljs-string">`
font-weight: bold;
`</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> Ingredients = styled.ul<span class="hljs-string">`
margin: 5px 0;
`</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> Ingredient = styled.li<span class="hljs-string">`
& .name {
...
}
& .quantity {
...
}
`</span>
For the purpose of this exercise, I have used the ThemeProvider. It injects the theme in the props of styled components. You can simply use it as
1 | color: ${props => props.theme.core_color} |
, I am just using a small wrapper to protect from missing attributes in the theme:
You can also define your own constants in a module and use those instead. For example:
1 | color: ${styleConstants.core_color} |
Pros
A perk of using styled-components is that you can use it as little as you want. You can use your favorite UI framework and add styled-components on top of it. This also means that you can easily migrate an existing project component by component. You can choose to style most of the layout with standard CSS and only use styled-components for reusable components.
Cons
Designers/style integrators will need to learn very basic JavaScript to handle variables and use them in place of Sass/Less.
They will also have to learn to navigate the project structure, although I would argue that finding the styles for a component in that component’s folder is easier than having to find the right CSS/Sass/Less file that contains the rule you need to modify.
They will also need to change their tools a bit if they want syntax highlighting, linting, etc. A good place to start is with this Atom plugin and this babel plugin.