80 |
34 |
50 | )
51 |
52 | Community.PropTypes = {
53 | classes: PropTypes.object.isRequired
54 | }
55 |
56 | export default withStyles(styles)(Community);
--------------------------------------------------------------------------------
/pages/blog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Head from 'next/head';
3 | import withRoot from '../components/withRoot';
4 | import Blog from '../components/Blog';
5 |
6 | const index = ({ posts, cats }) => (
7 |
35 |
49 |
36 |
37 | Join The Communities
38 |
39 |
40 |
41 | {groups.map(showGroups)}
42 |
43 |
44 |
47 |
48 |
8 |
9 | The Devs Blog, Developers Community on Telegram.
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
20 | );
21 |
22 | index.getInitialProps = async ({ req, query }) => {
23 | let posts = query;
24 |
25 | const cats = posts.reduce((a, b) => {
26 | let allcats = [...a];
27 | const newcats = b.attributes.cats.split(', ');
28 | newcats.forEach(cat => {
29 | if (allcats.indexOf(cat) < 0) {
30 | allcats.push(cat);
31 | }
32 | });
33 | return allcats;
34 | }, []);
35 |
36 | if (req.query) {
37 | if (req.query.cat)
38 | posts = posts.filter(post =>
39 | post.attributes.cats.split(', ').indexOf(req.query.cat) >= 0
40 | )
41 | if (req.query.tag)
42 | posts = posts.filter(post =>
43 | post.attributes.tags.split(', ').indexOf(req.query.tag) >= 0
44 | )
45 | }
46 |
47 | return { posts, cats };
48 | }
49 |
50 | export default withRoot(index);
--------------------------------------------------------------------------------
/components/withRoot.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { withStyles, MuiThemeProvider } from 'material-ui/styles';
3 | import wrapDisplayName from 'recompose/wrapDisplayName';
4 | import getContext from '../styles/getContext';
5 |
6 | // Apply some reset
7 | const styles = theme => ({
8 | '@global': {
9 | html: {
10 | background: theme.palette.background.default,
11 | WebkitFontSmoothing: 'antialiased', // Antialiasing.
12 | MozOsxFontSmoothing: 'grayscale', // Antialiasing.
13 | },
14 | body: {
15 | margin: 0,
16 | },
17 | },
18 | });
19 |
20 | let AppWrapper = props => props.children;
21 |
22 | AppWrapper = withStyles(styles)(AppWrapper);
23 |
24 | function withRoot(BaseComponent) {
25 | class WithRoot extends Component {
26 | static getInitialProps(ctx) {
27 | if (BaseComponent.getInitialProps) {
28 | return BaseComponent.getInitialProps(ctx);
29 | }
30 |
31 | return {};
32 | }
33 |
34 | componentWillMount() {
35 | this.styleContext = getContext();
36 | }
37 |
38 | componentDidMount() {
39 | // Remove the server-side injected CSS.
40 | const jssStyles = document.querySelector('#jss-server-side');
41 | if (jssStyles && jssStyles.parentNode) {
42 | jssStyles.parentNode.removeChild(jssStyles);
43 | }
44 | }
45 |
46 | render() {
47 | return (
48 |
46 |
47 |
62 |
63 | );
64 | };
65 |
66 | Group.PropTypes = {
67 | classes: PropTypes.object.isRequired
68 | };
69 |
70 | export default withStyles(styles)(Group);
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing Guidelines
2 |
3 | - [How to write for The Devs blog?](#posts)
4 |
5 | ## Posts
6 |
7 | [The Devs blog](https://thedevs.network/blog) is an [open source](https://github.com/TheDevs-Network/website/tree/master/posts) blog where **anyone** can publish their aricles, provided it follows certain guidelines.
8 |
9 | ### Choosing a subject
10 |
11 | - Make sure the subject you're choosing is interesting and has the potential for **high quality** content.
12 |
13 | - Since our blog is pretty fresh, try to choose **trendy** topics on trendy languages, which will attract visitors, in turn helping them discover our community.
14 |
15 | - That said, if you're unsure about your subject, you can open an issue and ask for feedback.
16 |
17 | ### Format
18 |
19 | Our blog posts are written in Markdown. Make a copy of [`post-format.md`](post-format.md) in the [`/posts/`](/posts) folder and start writing!
20 |
21 | ### Post info
22 |
23 | If you look at any of our [blog posts](https://github.com/TheDevs-Network/website/edit/master/posts/build-a-telegram-bot-with-node.js.md), you will notice that the first section, called **front matter**, contains the **post information**. This section will be **omitted** from the final article. It includes these fields:
24 |
25 | - **title:** Post title in the blog.
26 | - **img:** Alt name for the article's featured image. (More info in image section)
27 | - **date:** Publishing date for your article, in _Y, M, D_ format.
28 | - **author:** Name of the article's author _(you)_.
29 | - **cats:** Categories, seprated by comma.
30 | - **tags:** Tags, seprated by comma.
31 |
32 | ### Images
33 |
34 | For the featured image of the article:
35 | - Image size must be **800x450**
36 | - Image format must be **jpg** and it should be optimized.
37 | - Add the image to **/static/img/posts**.
38 | - Rename it to match what you entered in the front matter above.
39 |
40 | For images you use inside the article, create a folder in the **/static/img/posts**, add all the images there and reference to that properly.
41 |
42 | **DO NOT use a copyrighted image, or an image that requires attribution.** You can use [Unsplash](https://unsplash.com/) if you need to use stock photos.
43 |
44 | ### Ready to create pull request
45 |
46 | Add the post in [posts](https://github.com/TheDevs-Network/website/tree/master/posts) folder. Make sure all images are properly referenced.
47 | > Note: If your post needs refining, others have the right to edit the content it is published.
48 |
--------------------------------------------------------------------------------
/static/css/main.scss:
--------------------------------------------------------------------------------
1 | @import 'flexboxgrid.min';
2 | @import 'normalize';
3 | @import 'prism';
4 | @import 'tables';
5 |
6 | body {
7 | font: 16px/1.618 'Roboto', sans-serif;
8 | }
9 |
10 | a {
11 | color: inherit;
12 | text-decoration: none;
13 | }
14 |
15 | .post-body a {
16 | color: #448aff;
17 | border-bottom: 1px dotted #448aff;
18 | }
19 |
20 | .post-body a:hover {
21 | opacity: 0.8;
22 | border-bottom: none;
23 | }
24 |
25 | .post-body p,
26 | .post-body ul {
27 | font-size: 18px;
28 | margin: 0 0 1.5em;
29 | }
30 |
31 | .post-body h1,
32 | .post-body h2,
33 | .post-body h3,
34 | .post-body h4,
35 | .post-body h5 {
36 | margin: 0 0 0.2em;
37 | line-height: 1.2;
38 | }
39 |
40 | .post-body h1 {
41 | margin-top: 0;
42 | font-size: 3.827em;
43 | }
44 |
45 | .post-body h2 {
46 | font-size: 2.827em;
47 | }
48 |
49 | .post-body h3 {
50 | font-size: 1.999em;
51 | }
52 |
53 | .post-body h4 {
54 | font-size: 1.414em;
55 | }
56 |
57 | .post-body h1,
58 | .post-body h2,
59 | .post-body h3,
60 | .post-body h4,
61 | .post-body h5,
62 | .post-body p {
63 | width: 100%;
64 | color: #212121;
65 | }
66 |
67 | .post-body * {
68 | max-width: 100%;
69 | }
70 |
71 | .post-body img {
72 | display: block;
73 | margin: 0 auto 2em;
74 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
75 | 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
76 | }
77 |
78 | .post-body .gist {
79 | transform: scale(1.1, 1.1);
80 | margin: 1em 0;
81 | }
82 |
83 | .row {
84 | margin-left: 0;
85 | margin-right: 0;
86 | min-width:0;
87 | }
88 |
89 | .top-bar.active {
90 | top: 0;
91 | }
92 |
93 | .post-body pre {
94 | width: 100%;
95 | margin-bottom: 2em !important;
96 | }
97 |
98 | .post-body blockquote {
99 | margin: 0 0 2em;
100 | padding: 1em 2em;
101 | border-left: 12px solid #b39ddb;
102 | font-style: italic;
103 | }
104 |
105 | .post-body blockquote p:before {
106 | content: '" ';
107 | }
108 |
109 | .post-body blockquote p:after {
110 | content: ' "';
111 | }
112 |
113 | .post-body table {
114 | margin-bottom: 2em;
115 | }
116 |
117 | @media only screen and (max-width: 48em) {
118 | .col-xs,
119 | .col-xs-1,
120 | .col-xs-10,
121 | .col-xs-11,
122 | .col-xs-12,
123 | .col-xs-2,
124 | .col-xs-3,
125 | .col-xs-4,
126 | .col-xs-5,
127 | .col-xs-6,
128 | .col-xs-7,
129 | .col-xs-8,
130 | .col-xs-9 {
131 | padding-right: 0.5em;
132 | padding-left: 0.5em;
133 | }
134 | }
135 |
136 | @media only screen and (max-width: 1120px) {
137 | .post-title {
138 | text-align: left;
139 | font-size: 2.4em !important;
140 | }
141 |
142 | .post-body h2 {
143 | font-size: 2em;
144 | }
145 | }
146 |
--------------------------------------------------------------------------------
/components/Post/TopBar/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from 'material-ui/styles';
4 | import AppBar from 'material-ui/AppBar';
5 | import Toolbar from 'material-ui/Toolbar';
6 | import Avatar from 'material-ui/Avatar';
7 | import Typography from 'material-ui/Typography';
8 | import Button from 'material-ui/Button';
9 |
10 | const styles = theme => ({
11 | logoLink: {
12 | display: 'flex',
13 | alignItems: 'center'
14 | },
15 | root: {
16 | position: 'fixed',
17 | width: '100%',
18 | top: -100,
19 | transition: '.3s all ease',
20 | zIndex: 9
21 | },
22 | container: {
23 | width: 1120,
24 | flexBasis: 1120
25 | },
26 | appBar: {
27 | backgroundColor: theme.palette.primary[700]
28 | },
29 | logo: {
30 | marginRight: theme.spacing.unit * 2,
31 | boxShadow: theme.shadows[4],
32 | float: 'left'
33 | },
34 | '@media screen and (max-width: 1120px)': {
35 | appBar: {
36 | padding: '.5em .2em'
37 | },
38 | logo: {
39 | margin: '0 .5em .5em 0'
40 | }
41 | }
42 | });
43 |
44 | class TopBar extends Component {
45 | constructor() {
46 | super();
47 | }
48 |
49 | componentDidMount() {
50 | let lastScroll = 0;
51 | const bar = document.querySelector('.top-bar');
52 |
53 | window.addEventListener('scroll', (e) => {
54 | const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
55 | if (lastScroll > currentScroll && currentScroll > 300)
56 | bar.classList.add('active')
57 | else
58 | bar.classList.remove('active')
59 | lastScroll = currentScroll;
60 | });
61 | }
62 |
63 | render() {
64 | return (
65 |
48 |
58 |
61 |
50 |
51 | {displayName}
52 |
53 |
54 | {count} members
55 |
56 |
57 |
66 |
67 |
68 |
87 |
88 |
89 | );
90 | }
91 | }
92 |
93 | TopBar.PropTypes = {
94 | classes: PropTypes.object.isRequired
95 | };
96 |
97 | export default withStyles(styles)(TopBar);
--------------------------------------------------------------------------------
/static/css/prism.scss:
--------------------------------------------------------------------------------
1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+git+go+graphql+json+python+jsx+scss */
2 | /**
3 | * prism.js default theme for JavaScript, CSS and HTML
4 | * Based on dabblet (http://dabblet.com)
5 | * @author Lea Verou
6 | */
7 |
8 | code[class*="language-"],
9 | pre[class*="language-"] {
10 | color: black;
11 | background: none;
12 | text-shadow: 0 1px white;
13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14 | text-align: left;
15 | white-space: pre;
16 | word-spacing: normal;
17 | word-break: normal;
18 | word-wrap: normal;
19 | line-height: 1.5;
20 |
21 | -moz-tab-size: 4;
22 | -o-tab-size: 4;
23 | tab-size: 4;
24 |
25 | -webkit-hyphens: none;
26 | -moz-hyphens: none;
27 | -ms-hyphens: none;
28 | hyphens: none;
29 | }
30 |
31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
33 | text-shadow: none;
34 | background: #b3d4fc;
35 | }
36 |
37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
39 | text-shadow: none;
40 | background: #b3d4fc;
41 | }
42 |
43 | @media print {
44 | code[class*="language-"],
45 | pre[class*="language-"] {
46 | text-shadow: none;
47 | }
48 | }
49 |
50 | /* Code blocks */
51 | pre[class*="language-"] {
52 | padding: 1em;
53 | margin: .5em 0;
54 | overflow: auto;
55 | }
56 |
57 | :not(pre) > code[class*="language-"],
58 | pre[class*="language-"] {
59 | background: #f5f2f0;
60 | }
61 |
62 | /* Inline code */
63 | :not(pre) > code[class*="language-"] {
64 | padding: .1em;
65 | border-radius: .3em;
66 | white-space: normal;
67 | }
68 |
69 | .token.comment,
70 | .token.prolog,
71 | .token.doctype,
72 | .token.cdata {
73 | color: slategray;
74 | }
75 |
76 | .token.punctuation {
77 | color: #999;
78 | }
79 |
80 | .namespace {
81 | opacity: .7;
82 | }
83 |
84 | .token.property,
85 | .token.tag,
86 | .token.boolean,
87 | .token.number,
88 | .token.constant,
89 | .token.symbol,
90 | .token.deleted {
91 | color: #905;
92 | }
93 |
94 | .token.selector,
95 | .token.attr-name,
96 | .token.string,
97 | .token.char,
98 | .token.builtin,
99 | .token.inserted {
100 | color: #690;
101 | }
102 |
103 | .token.operator,
104 | .token.entity,
105 | .token.url,
106 | .language-css .token.string,
107 | .style .token.string {
108 | color: #a67f59;
109 | background: hsla(0, 0%, 100%, .5);
110 | }
111 |
112 | .token.atrule,
113 | .token.attr-value,
114 | .token.keyword {
115 | color: #07a;
116 | }
117 |
118 | .token.function {
119 | color: #DD4A68;
120 | }
121 |
122 | .token.regex,
123 | .token.important,
124 | .token.variable {
125 | color: #e90;
126 | }
127 |
128 | .token.important,
129 | .token.bold {
130 | font-weight: bold;
131 | }
132 | .token.italic {
133 | font-style: italic;
134 | }
135 |
136 | .token.entity {
137 | cursor: help;
138 | }
139 |
140 |
--------------------------------------------------------------------------------
/components/Post/Share/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from 'material-ui/styles';
4 | import ReactSVG from 'react-svg';
5 | import Typography from 'material-ui/Typography';
6 | import IconButton from 'material-ui/IconButton';
7 | import DeleteIcon from 'material-ui-icons/Delete';
8 |
9 | const styles = theme => ({
10 | shareComp: {
11 | display: 'flex',
12 | width: '100%',
13 | margin: '.5em 0 0',
14 | flexDirection: 'column',
15 | alignContent: 'center',
16 | '& a': {
17 | borderBottom: 'none !important',
18 | }
19 | },
20 | shareIcons: {
21 | flexGrow: '1 1 100%',
22 | marginTop: '2em',
23 | display: 'flex',
24 | padding: '1em 2em',
25 | alignItems: 'center',
26 | background: '#eee',
27 | flexWrap: 'wrap',
28 | },
29 | text: {
30 | width: 'auto !important',
31 | margin: '0 1em 0 0 !important',
32 | },
33 | button: {
34 | transition: 'all .3s ease',
35 | margin: '1.1em',
36 | '&:hover': {
37 | '& svg': {
38 | fill: '#7B1FA2',
39 | },
40 | },
41 | },
42 | svg: {
43 | width: 16,
44 | height: 16,
45 | margin: '0 !important',
46 | boxShadow: 'none !important',
47 | backgroundColor: 'transparent !important',
48 | }
49 | });
50 |
51 | const Share = ({ classes, title }) => {
52 | return (
53 |
69 |
86 |
70 |
71 |
73 | The Devs
74 |
75 |
76 |
77 |
78 |
81 |
84 |
85 |
54 |
101 |
102 | );
103 | };
104 |
105 | export default withStyles(styles)(Share);
--------------------------------------------------------------------------------
/components/Post/Content/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Head from 'next/head';
3 | import PropTypes from 'prop-types';
4 | import getSlug from 'speakingurl';
5 | import { withStyles } from 'material-ui/styles';
6 | import Typography from 'material-ui/Typography';
7 | import Chip from 'material-ui/Chip';
8 | import ReactMarkdown from 'react-markdown';
9 | import Share from '../Share';
10 | import Subscription from '../../Subscription';
11 |
12 | const styles = theme => ({
13 | root: {
14 | flexGrow: 1,
15 | marginTop: -theme.spacing.unit * 40,
16 | paddingBottom: "2.5em"
17 | },
18 | container: {
19 | width: 1120,
20 | flexBasis: 1120
21 | },
22 | image: {
23 | width: 800,
24 | height: 450,
25 | marginBottom: theme.spacing.unit * 8,
26 | boxShadow: theme.shadows[16]
27 | },
28 | body: {
29 | width: 672,
30 | marginTop: theme.spacing.unit * 10
31 | },
32 | '@media screen and (max-width: 1120px)': {
33 | root: {
34 | marginTop: -theme.spacing.unit * 20
35 | },
36 | container: {
37 | width: '100%',
38 | flexBasis: '100%'
39 | },
40 | image: {
41 | width: '92vw',
42 | height: '51.75vw'
43 | },
44 | body: {
45 | width: '100%',
46 | padding: '0 .2em',
47 | marginTop: theme.spacing.unit * 8
48 | }
49 | }
50 | });
51 |
52 | const showTags = (tag, index) => (
53 |
58 |
59 | {post.attributes.title}
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
95 | );
96 |
97 | Content.PropTypes = {
98 | classes: PropTypes.object.isRequired
99 | };
100 |
101 | export default withStyles(styles)(Content);
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config();
2 | const fs = require('fs');
3 | const express = require('express');
4 | const next = require('next');
5 | const bodyParser = require('body-parser');
6 | const fm = require('front-matter');
7 | const moment = require('moment');
8 | const getSlug = require('speakingurl');
9 | const axios = require('axios');
10 | const getMembersCount = require('./bot');
11 |
12 | const dev = process.env.NODE_ENV !== 'production';
13 | const app = next({ dev });
14 | const handle = app.getRequestHandler();
15 |
16 | let state = {
17 | posts: []
18 | };
19 |
20 | getMembersCount(process.env.BOT_TOKEN)
21 | .then(groups => state.groups = groups)
22 | .catch(err => console.log(err));
23 |
24 | setInterval(async () => {
25 | state.groups = await getMembersCount(process.env.BOT_TOKEN);
26 | }, 1000 * 60 * 60);
27 |
28 | fs.readdir('./posts', 'utf8', (err, files) => {
29 | if (err) throw err;
30 | files.forEach(file => {
31 | fs.readFile(`./posts/${file}`, 'utf8', (err, data) => {
32 | let post = fm(data);
33 | let date = post.attributes.date.split(', ');
34 | date[1] = date[1] - 1;
35 | date = moment(date)
36 | post.attributes.date = date;
37 | post.attributes.displayDate = date.format('MMM D')
38 | state.posts.push(post);
39 | if (state.posts.length === files.length) {
40 | state.posts.sort((a, b) => b.attributes.date - a.attributes.date);
41 | }
42 | });
43 | });
44 | });
45 |
46 | const subscribe = (email) => {
47 | const list = process.env.MAILCHIMP_LIST;
48 | const token = process.env.MAILCHIMP_TOKEN;
49 | return new Promise((resolve, reject) => {
50 | if (!email) {
51 | reject('No email address has provided');
52 | }
53 | if (!list || !token) {
54 | reject('API has not been provided.')
55 | }
56 | axios({
57 | method: 'post',
58 | url: `https://us16.api.mailchimp.com/3.0/lists/${list}/members/`,
59 | headers: {
60 | 'Content-Type': 'application/json',
61 | 'Authorization': `Basic ${token}`,
62 | },
63 | data: {
64 | email_address: email,
65 | status: 'subscribed',
66 | },
67 | })
68 | .then(res => resolve(res))
69 | .catch(err => reject(err))
70 | });
71 | }
72 |
73 | app.prepare()
74 | .then(() => {
75 | const server = express();
76 |
77 | server.use(bodyParser.urlencoded({
78 | extended: true
79 | }));
80 |
81 | server.use(bodyParser.json());
82 |
83 | server.use('/static', express.static('static'));
84 | server.use('/.well-known', express.static('.well-known'));
85 |
86 | server.get('/', (req, res) => {
87 | return app.render(req, res, '/', state.groups);
88 | });
89 |
90 | server.get('/blog/', (req, res) => {
91 | return app.render(req, res, '/blog', state.posts);
92 | });
93 |
94 | server.get('/blog/:post', (req, res) => {
95 | const post = state.posts.filter(item =>
96 | getSlug(item.attributes.title) === getSlug(req.params.post)
97 | );
98 | if (post.length < 1) return res.redirect('/404');
99 | return app.render(req, res, '/post', ...post);
100 | });
101 |
102 | server.post('/subscription', (req, res) => {
103 | subscribe(req.body.email)
104 | .then(response => res.status(200).send('subsribed!'))
105 | .catch(err => res.status(400).send({message: err}));
106 | });
107 |
108 | server.get('/mailto/:mail', (req, res) => {
109 | const { mail } = req.params;
110 | res.redirect(`mailto:${mail}`);
111 | });
112 |
113 | server.get('*', (req, res) => {
114 | return handle(req, res);
115 | });
116 |
117 | server.listen(8168, (err) => {
118 | if (err) throw err;
119 | console.log('> Ready on http://localhost:8168');
120 | });
121 | });
122 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Document, { Head, Main, NextScript } from 'next/document';
3 | import JssProvider from 'react-jss/lib/JssProvider';
4 | import getContext from '../styles/getContext';
5 | import stylesheet from '../static/css/main.scss';
6 | import minifyCSSString from 'minify-css-string';
7 | import config from '../config.json'
8 |
9 | const customStyles = minifyCSSString(stylesheet);
10 |
11 | export default class MyDocument extends Document {
12 | static async getInitialProps(ctx) {
13 | const context = getContext();
14 | const page = ctx.renderPage(Component => props => (
15 |
73 |
93 |
74 |
75 |
80 |
81 | {post.attributes.title}
82 |
83 |
90 |
91 |
92 |
80 |
102 |
120 | )
121 |
122 | return (
123 |
124 |
133 | );
134 | }
135 | }
136 |
137 | export default withStyles(styles)(Subscription);
--------------------------------------------------------------------------------
/posts/the-forth-programming-language.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: The Forth Programming Language
3 | img: the-forth-programming-language
4 | date: 2017, 12, 02
5 | author: Trevor Payne
6 | cats: programming
7 | tags: oop, functional, programming
8 | ---
9 |
10 | Forth is an imperative procedural stack oriented extensive meta reflective
11 | [concatenative programming language written by Charles H. Moore for the IBM 1330 Operating System in 1970.](https://en.wikipedia.org/wiki/Concatenative_programming_language)
12 | The name was going to be Fourth because the language is a Fourth Generation
13 | Programming Language, but due to restrictions on file names, the language has
14 | since been named Forth. Forth works by manipulating the parameter stack, and
15 | procedurally carrying out doing so. It is a self modifying language much like
16 | Lisp and Elixir.
17 |
18 | ### Now, Why Forth?
19 |
20 | Creating programs in Forth is simple, yet different. For any programmer Forth
21 | will seem uncomfortable at first, due to it's obscure ways of programming. Such
22 | as the Reverse Polish Notation for maths, how it is compiled and interpreted,
23 | and how it overall looks compared to other languages. The four most basic
24 | integer-arithmetic operators are +, -, _, and /. Much like most programming
25 | languages, + adds, - subtracts, _ multiplies, and / divides. Huh, this doesn't
26 | sound so different! Although it is. Forth does math in what is called The
27 | Reverse Polish Notation, also known as Postfix. Which means before actually
28 | calculating the equation, numbers are added to the stack first. For instance,
29 |
30 | Many programmers find this to be very confusing. Although eventually it will
31 | come easy. Forth is also considered strange and confusing because of its strange
32 | syntax. Writing code is done by defining sub-sequences, better known as Words in
33 | the Forth language. These are then added to the parameter stack for later use.
34 | This doesn't sound too complicated, right? It reminds some of Object Oriented
35 | and such. Until you see this:
36 |
37 | 
38 |
39 | Now suddenly Forth looks a lot more difficult than it actually is.
40 |
41 | No worries, much like any other spoken language, you're not going to understand
42 | it unless you know it. Let's get on that!
43 |
44 | ### Forth Programming
45 |
46 | Notes:
47 |
48 | "TOS" = Top of Stack,
49 |
50 | "NOS" = Next on Stack
51 |
52 | "BOS" = Bottom of Stack
53 |
54 | Word = Sub-sequence
55 |
56 | Most of Forth programming consists of modifying the stack using the basic Words
57 | dup, swap, rot, drop, and nip. Dup duplicates the TOS, swap swaps the TOS with
58 | the second element, rot rotates the top three elements, drop removes the TOS,
59 | and nip removes the second item. This sounds cool and all, but how can you
60 | create entire programs with just numbers being manipulated? Well, you don't
61 | actually. Forth also has a compile mode, where you can compile sub-sequences to
62 | be called back on later. To enter the compile mode, you can use the :. To exit,
63 | use a ;. Rather than doing 5 dup _ to get the square of a number, you can create
64 | a word for getting the square of every number you want! To do this, first enter
65 | compile mode, name word, then tell it dup _, and finally, exit compile mode by
66 | typing ;. It should look like this:
67 |
68 | _: sqr dup \* ;_
69 |
70 | Now everything is starting to make a lot more sense! Forth also has a whole
71 | dictionary of words that you can use, in most Forths you can find this by typing
72 | the word words. Much a real dictionary, the words have meaning as well! To get
73 | the meaning of a word in Forth, type the word see, then the word you want the
74 | definition of. In example, see dup. This will help you get a better
75 | understanding of some of the more advanced Forth words. You can find many
76 | resources online for learning more Forth programming.
77 |
78 | ### Is Forth used?
79 |
80 | Yes! By many companies in fact. The language is often described as dead, unused,
81 | and forgotten, but it's one of the only programming languages that has visited
82 | Saturn, space, yet can run on some of the smallest hardware! It is used very
83 | much by NASA, Lockheed, Boeing, and many other Aviation companies. Forth only is
84 | around 500 Lines of Code in languages like x86 and ARM, which is only around
85 | 3KB. Although there are many Forth implementations that are much smaller. This
86 | is great when working on extremely small hardware and small storage devices.
87 | Forth does not have much overhead, and can run on baremetal. I'd not be
88 | surprised if SpoonForth becomes a thing one day. Forth is an entire world itself
89 | in the universe of programming, I just hope to shed some light in that beautiful
90 | yet different world.
91 |
92 | ### In Conclusion
93 |
94 | Forth is a small language that can do extremely large things, such as wrap C,
95 | interpret Lisp, create operating systems, etc. It is not very popular due to
96 | it's strange and different syntax, which scares away most programmers. I'm one
97 | of many Forth programmers who wish it was more popular, and hopes to see it
98 | grow. With the fall of OOP, maybe that will be soon.
99 |
--------------------------------------------------------------------------------
/posts/best-ui-libraries-and-frameworks-for-reactjs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Best UI libraries and frameworks for ReactJS
3 | img: best-ui-libraries-and-frameworks-for-reactjs
4 | date: 2017, 09, 01
5 | author: Pouria Ezzati
6 | cats: javascript
7 | tags: javascript, react, ui
8 | ---
9 | Since React has been introduced dozens of UI libraries and frameworks started to come out one by one and it's continuing. All of these tools, boilerplates and UI components are here to save your time and help you focus on building apps.
10 |
11 | With these tools, you no longer need to worry about designing elements and components and trying to keep them consistent at the same time, which is a **time-consuming** process, even if you have a designing background.
12 |
13 | In this list, I try to share the best **UI libraries and frameworks** based on my personal experience and **opinion**.
14 |
15 | ## Material UI
16 |
17 | [](https://material-ui-1dab0.firebaseapp.com/)
18 |
19 | There are several material design UI frameworks for React, but this is my **favorite** one because of the implementation of components which looks better than similar frameworks.
20 |
21 | Version 1 is still in *beta* and has much more stuff but it's inconsistent and API changes a lot. However, I still recommend you to try the **latest version**, as we did in The Devs.
22 |
23 | - **Well implemented** Material design
24 | - Suitable for **every** website
25 | - [**create-react-app**](https://github.com/facebookincubator/create-react-app) and [**Next.js**](https://github.com/zeit/next.js/) examples
26 | - v1 beta is a lot better, but **API changes** a lot
27 | - [**JSS**](https://github.com/cssinjs/react-jss) makes it a little **harder** and time-consuming to start with
28 | - **Customizable** theme with JSS
29 |
30 | [**Material UI**](https://material-ui-1dab0.firebaseapp.com/)
31 |
32 | ## Blueprint
33 |
34 | [](http://blueprintjs.com/)
35 |
36 | Blueprint has a clean design similar to bootstrap, but **better**. It has its own **design system** which helps you to use components in their correct form and place.
37 |
38 | - **Lots of components** with great designs
39 | - Has APIs for **both CSS and JS**
40 | - Built with **Typescript**, examples are also in Typescript
41 | - **Flexible** and customizable styles built with **Sass**
42 | - Extensive **Documentation**
43 |
44 | [**Blueprint**](http://blueprintjs.com/)
45 |
46 | ## Ant Design
47 |
48 | [](https://ant.design/)
49 |
50 | Yet another **design system** that its **professional** design makes it perfect to use it on **enterprise** projects. It's easy to start and it also supports s**erver-side rendering** and **Electron**.
51 |
52 | - **Enterprise** design
53 | - **Huge** number of components
54 | - [**create-react-app**](https://github.com/facebookincubator/create-react-app) example
55 | - Works on Browser, server-side rendering and [**Electron**](https://electron.atom.io/)
56 | - **Customizable** theme
57 | - **Straightforward** documentation
58 | - Available for **React Native**
59 |
60 | [**Ant Design**](https://ant.design/)
61 |
62 | ## Semantic UI
63 |
64 | [](https://react.semantic-ui.com/)
65 |
66 | Semantic UI is a beautiful user interface that is super easy and **enjoyable** to work with. I've built several apps with it before and will do again.
67 |
68 | - Beautiful design
69 | - **Super easy** to start with
70 | - Simple **declarative** component APIs
71 | - Well documented
72 |
73 | [**Semantic UI**](https://react.semantic-ui.com/)
74 |
75 | ## React-Bootstrap
76 |
77 | [](https://react-bootstrap.github.io/)
78 |
79 | Currently the **best implementation** of Bootstrap for React. It has built upon **Bootstrap 3** and as they mention in their website, it's under active development and APIs will change.
80 |
81 | - Almost every **Bootstrap 3** components available for React
82 | - **Easy** to setup and use
83 | - Under active development, **unstable APIs**
84 |
85 | [**React-Bootstrap**](https://react-bootstrap.github.io/)
86 |
87 | ## Fabric
88 |
89 | [](https://dev.office.com/fabric#/)
90 |
91 | Use the whole Microsoft Office styles, components and icons with React. **Maintained officially** by Office.
92 |
93 | - **Offical Office UI** framework for React
94 | - Includes Office **fonts and icons**
95 | - Microsoft’s **palette**
96 | - Extensive APIs for components
97 | - **Best practices** guides for each component
98 |
99 | [**Fabric**](https://dev.office.com/fabric#/)
100 |
101 | ## AtlasKit
102 |
103 | [](https://atlaskit.atlassian.com/)
104 |
105 | AtlasKit is Atlassian's official UI library, built according to the Atlassian **design guidelines**.
106 |
107 | - **atlaskit-starter** creates a React app with AtlasKit components
108 | - Lots of well crafted components
109 | - Has it's own **design guidelines**
110 |
111 | [**AtlasKit**](https://atlaskit.atlassian.com/)
112 |
113 | ## React Desktop
114 |
115 | [](http://reactdesktop.js.org/)
116 |
117 | React Desktop aims to bring a **native desktop** experience to the web, featuring many macOS Sierra and Windows 10 components.
118 |
119 | - Native-like **macOS** and **Windows 10** components
120 | - Works perfectly with [**NW.js**](https://nwjs.io/) and [**Electron.js**](https://electron.atom.io/)
121 |
122 | [**React Desktop**](http://reactdesktop.js.org/)
123 |
124 | ## Cloudflare UI
125 |
126 | [](https://cloudflare.github.io/cf-ui/)
127 |
128 | Cloudflares UI framework has **+50 packages** and it uses CSS in JS for its components. The design looks suitable for **corporate** websites.
129 |
130 | - Corporate design style
131 | - **CSS in JS** solution
132 | - **Huge** number of components
133 |
134 | [**Cloudflare UI**](https://cloudflare.github.io/cf-ui/)
135 |
136 | ## React Toolbox
137 |
138 | [](http://react-toolbox.com/)
139 |
140 | Another UI framework that implements Google's **Material design** system. It uses CSS Modules to import stylesheets.
141 |
142 | - Good implementation of **Material design**
143 | - Powered by **CSS Modules**
144 | - Needs **Webpack** or another module bundler
145 |
146 | [**React Toolbox**](http://react-toolbox.com/)
147 |
--------------------------------------------------------------------------------
/posts/you-have-been-using-console-wrong-the-whole-time.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: You have been using 'console' wrong the whole time
3 | img: you-have-been-using-console-wrong-the-whole-time
4 | date: 2018, 06, 18
5 | author: Sparkenstein
6 | cats: javascript
7 | tags: javascript, console
8 | ---
9 |
10 | As a newcomer to any language, the first thing you ever try out is the "Hello World!" program of the respective laguage. JavaScript is not an exception. When I started learning JavaScript, my first line of code was
11 |
12 | ```JavaScript
13 | console.log("Hello World!");
14 | ```
15 |
16 | And that's it! After learning `console.log` can print anything from the script to the console, I've used it in almost every project.
17 |
18 | It can print strings, numbers, variables, objects, arrays, execute and print the output of functions, concatenate multiple outputs and what not. But I recently learned that this is not the only power of the console object. It can do many more things that we are unaware of. And that is what we are going to take a look today.
19 |
20 | ### Differenciate output message as Error, Warning, Debug and Info
21 |
22 | `.log()` method of the console object is a very basic method which takes the input and prints it directly to the browser console. To differenciate the output message in the form of Error, Warning, Info, Debug, console has the methods `.error()`, `.warn()`, `.info()`, and `.debug()` respectively.
23 |
24 | Let's take an example of the `.error()` method. This is very helpful when you are outputting an error message to the console. It not only prints the message in bright red so the user can look for it specifically, but also provides a nice stack trace of the function calls as well. On the browser, you can filter errors/warnings from the console toolbar if required, and in nodejs, they are outputed to stderr.
25 |
26 | Try running the following code in your console:
27 |
28 | ```JavaScript
29 | const getEmployeeSalaryByName = function(name){
30 | if(typeof name === "string") {
31 | return "Salary is $15000";
32 | } else console.error(new TypeError("Name should be a string"));
33 | };
34 |
35 | getEmployeeSalaryByName(1322); //-> TypeError: "Name should be a string"
36 | ```
37 |
38 | ### Format objects in a tabular format
39 |
40 | Sometimes it's a mess to see the structure of the objects printed by `console.log()`. console provides a nice way of outputting objects to the console via `console.table()` method. It takes two arguments—`data` and `columns`, which is optional.
41 |
42 | The `data` parameter can be any enumerable object (Array, Objects, Set, Map, everyone is welcome). Believe it or not, it even supports nested objects like array of arrays `[[1,'Luffy'],[2,'Ichigo'],[3,'Goku'],[4,'Naruto']]` and complex objects like `{'rank' : [1,2,3,4], 'names': ['Luffy','Ichigo','Goku','Naruto']};` and you have to do literally nothing except pass this data to `console.table()` method and the browser will handle everything on its own. Example:
43 |
44 | 
45 |
46 | 
47 |
48 | Go ahead try it on your own.
49 |
50 | > Note: `console.table() is not available in node, for fairly obvious reasons.`
51 |
52 | ### Benchmarking with console.time
53 |
54 | Although this method is not meant for benchmarking, and we now have much better alternatives like `performance.now()`, it works fine and is simpler to use than `console.time()`.
55 |
56 | Sometimes we need to measure the time spent by a function or loop to check the performance of a webpage. I used to use `Date.now()` method to calculate the execution time of a code snippet. The strategy was simple. Before execution, measure current time, store it in a variable `t1`. After code execution, measure current time, store it in another variable `t2`, and at the end, `t2-t1` is the execution time.
57 |
58 | What can go wrong with this one? Although Paul Irish's [When milliseconds are not enough](https://developers.google.com/web/updates/2012/08/When-milliseconds-are-not-enough-performance-now?hl=en) is a post about `performance.now()`, it clearly explains why `Date.now()` is not a very good idea. And that's where `console.time()` method comes in handy. And the best part is you don't even have to do any calculation here to measure performance. The browser does everything automatically and prints the output to the console.
59 |
60 | Take an example of following `for` loop:
61 |
62 | ```JavaScript
63 | var m = 0;
64 | for (let i=0; i<=10000; i++){
65 | m = m + (Math.random() * 100) * i*i;
66 | }
67 | ```
68 |
69 | And you want to calculate the time taken by the for loop. You just prepend the loop with `console.time("benchmarkName")` before its execution and append `console.timeEnd("benchmarkName")` post exection. `benchmarkName` is nothing but a string which helps the browser identify which start point to correlate with `.timeEnd()` where multiple `console.time()` are involved. If you only have one `.time()` call, the nearest `.timeEnd()` will be associated with `default` as label.
70 |
71 | ```JavaScript
72 | var m = 0;
73 | console.time("for10k");
74 | for (let i=0; i<=10000; i++){
75 | m = m + (Math.random() * 100) * i*i;
76 | }
77 | console.timeEnd("for10k"); // -> outputs 2ms
78 | ```
79 |
80 | And when the code executes, the browser will automatically start measuring time with label "for10k" and stop with the `.timeEnd()` method with the same name, calculate the difference between both timestamps and print it with label "for10k" on the console.
81 |
82 | ### Show message only when something is not correct with console.assert
83 |
84 | This is yet another small but very handy method. It takes two parameters—the predicate or expression which evaluates to true/false, and the message which is to be printed when predicate evaluates to `false`. Note that in case the assertion is true, it doesn't print anything.
85 |
86 | ```JavaScript
87 | const timeTravellersArray = ["Okabe"];
88 |
89 | function isTimeTraveller(name){
90 | if(timeTravellersArray.indexOf(name) !== -1)
91 | return true;
92 | return false;
93 | }
94 |
95 | const isOkabeATimeTraveller = isTimeTraveller("Okabe");
96 | if(!isOkabeATimeTraveller){
97 | console.error("Okabe is not a time traveller")
98 | }
99 | ```
100 |
101 | With console.assert, this can be slimmed down to:
102 |
103 | ```JavaScript
104 | console.assert(isTimeTraveller("Okabe"), "Okabe is not a time traveller");
105 | ```
106 |
107 | Amazing isn't it?
108 |
109 | ### See all the properties of an object with console.dir
110 |
111 | This is a very helpful method when you want to list down all the properties of an object in a 'collapsible tree' format. Although it does not look completly different from console.log(), it treats it's parameters different from `console.log`. Try executing this example below yourself to see the different outputs:
112 |
113 | ```JavaScript
114 | console.log(document.body);
115 | console.dir(document.body);
116 | ```
117 |
118 | ### Last but not least, console.group
119 |
120 | consider a scenario where you have to output multiple messages, while keeping the hierarchy of the functions from which the messages are coming from. Normally I'd have just assigned it to some `message` object and printed that object. But here we are outputting another object and not the message itself. To overcome this, console provides a nice method called `.group()` which groups output in folders. Consider the following example:
121 |
122 | ```JavaScript
123 | console.group("first");
124 | console.log("inside first 1");
125 | console.group("first1");
126 | console.log("inside first1");
127 | console.groupEnd("first1");
128 | console.group("first2");
129 | console.log("inside first2 1");
130 | console.log("inside first2 2");
131 | console.groupEnd("first2");
132 | console.log("outside first2 1");
133 | console.groupEnd("first");
134 | console.log("outside first");
135 | console.group("second");
136 | console.log("inside second");
137 | console.groupEnd("second");
138 | ```
139 |
140 | Even though the utility of this function may be debatable, you'll be amazed how well formatted the output messages are.
141 |
142 | > Note: `console.group` is not available in node as well.
143 |
144 | To check and learn more about the `console` object please visit [MDN Console API](https://developer.mozilla.org/en-US/docs/Web/API/console)
145 |
--------------------------------------------------------------------------------
/posts/type-coercion-in-javascript.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Type coercion in JavaScript (and why everyone gets it wrong)
3 | img: type-coercion-javascript
4 | date: 2018, 06, 07
5 | author: Muthu Kumar
6 | cats: javascript
7 | tags: javascript, types, coercion
8 | ---
9 |
10 | Weak dynamic typing is arguably one of those things everybody likes to pick at about JavaScript. For an elegant dynamic language, JavaScript does some very silly things.
11 |
12 | Or does it? _(Queue Vsauce intro)_
13 |
14 | This is my little attempt to explain JavaScript's type coercion in a very simple manner that all JavaScript developers, regardless of experience, can simply understand. I hope you'll leave this with an enriched knowledge of how to take hold of the language's quirks and use it to your advantage.
15 |
16 | ## What is it doing wrong?
17 |
18 | **Example 1**
19 |
20 | ```JavaScript
21 | const a = [ 1, 2, 3 ];
22 | const b = [ 1, 2, 3 ];
23 |
24 | console.log(a + b); //-> 1,2,31,2,3 <- Why?
25 | ```
26 |
27 | **Example 2**
28 |
29 | ```JavaScript
30 | const nope = Array(10).join("nope" - 1) + " Batman!";
31 |
32 | console.log(nope); //-> NaNNaNNaNNaNNaNNaNNaNNaNNaN Batman! <- Why?
33 | ```
34 |
35 | **Example 3**
36 |
37 | ```JavaScript
38 | const x = [];
39 | const y = {};
40 |
41 | console.log(x + y); //-> [object Object] <- Wait what?
42 | ```
43 |
44 | ## Why is it doing it wrong?
45 |
46 | The simple reason is history. JavaScript has a long, weird, winding history from when Brendan Eich originally wrote the first prototype in 10 days at Netscape in 1995.
47 |
48 | Since then, anything that hasn't been "fixed" has only one reason. JavaScript has one simple rule -- don't break the web. This is why strange things like `typeof null === 'object'` exist. This is outside the scope of this article, so more on why that is [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#null).
49 |
50 | ## How do I know what's happening?
51 |
52 | It's really very simple. When you ask a value to work with an operator it does not respect (like adding an object to a number), or when you ask two values that don't work with each other to work with each other (adding a number and a string), JavaScript tries to convert either or both types to make it work.
53 |
54 | But there must be rules for this. After all, if a computer makes a mistake, it's at least consistent about it.
55 |
56 | JavaScript simply hooks into appropriate methods found in that object or primitive's prototype. The two that matter are `.toString()` and `.valueOf()`. When you try to concat an array and a string using the "+" operator, the `Array.prototype.toString()` method is called to convert the Array to a string.
57 |
58 | Here's a cheatsheet on what coerces to what by default:
59 |
60 |
125 |
132 |
126 |
127 | Be the first to receive our new groups and articles.
128 |
129 |
130 | {subscription}
131 | | Origin | 64 |Target | 65 |Result | 66 |
|---|---|---|
| Number | 71 |Boolean | 72 |True, except if it's 0, or NaN |
73 |
| String | 76 |Boolean | 77 |True, except if it's an empty string "" |
78 |
| undefined or null | 81 |Boolean | 82 |Always false |
83 |
| Object, Array, Symbol, Function | 86 |Boolean | 87 |Always true |
88 |
| 91 | | 92 | | 93 | |
| Number, Undefined, Null, NaN | 96 |String | 97 |Value as string (5 --> "5") |
98 |
| Boolean, Function, Symbol | 101 |String | 102 |Value as string (true --> "true") |
103 |
| Array | 106 |String | 107 |String of array values separated by commas | 108 |
| 111 | | 112 | | Empty string if empty array | 113 |
| Object | 116 |String | 117 |'[object Object]' (yes, yes I know...) |
118 |
| 121 | | 122 | | 123 | |
| String | 126 |Number | 127 |NaN, except if string represents a number |
128 |
| 131 | | 132 | | "5" --> 5, "0.001" --> 0.001 |
133 |
| Array | 136 |Number | 137 |0 if empty array, number if the only |
138 |
| 141 | | 142 | | element is a number, NaN in any other case |
143 |
| Object, Function, undefined | 146 |Number | 147 |NaN |
148 |
| null | 151 |Number | 152 |0 |
153 |
| Symbol | 156 |Number | 157 |THROWS! | 158 |