Uphint

uphint

Hint to Understanding Proper Element Positioning ( ) & ( ) are two of the internet’s most used programming languages, its greatest translators and presenters of information. Hypertext Markup Language HTML Cascading Style Sheets CSS Image of HTML & CSS coding Both languages used in unison to turn this image above into what seems a lot more familiar to the lot of us. Image of a mock-up of ‘Microsoft.com’ dated: 9/20/2019 Getting started Choosing an Integrated Development Environment (IDE) First, you’re going to need an application that takes your typed text and provide various automated tasks. Auto-completing the syntax of code, supplying a list of possible values to an attribute or to increase readability. All for the sake of simplifying or rather speeding up the process of coding, à la . IDE Which do I use? IDE Honestly, there are a good many available to use out there with various pros and cons but for the sake of keeping it simple, I will mention three (3): , and . All free to use software. IDEs Brackets ( ) Visual Studio Code VSCode Atom Brackets VSCode Atom Personally, I have the three of these s installed but for the bulk of my work I usually just use . IDE Brackets Within your IDE Now that you have your preferred installed and opened, you will want to set your project folder within your to the folder you intend to be working in. IDE IDE For the sake of simplicity Lets just assume you created your project folder on the desktop. So, within you would: Brackets Video shows how to set the project folder and creating the index.html in which the website coding will occur Now that you have your project folder and index.html file (also known as the home page) created let’s get to coding. Code required within every document HTML HTML CODE BLOCK 1 2 3 4 5 6 7 8 Building Confidence in Programming 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> < = > html lang "en" < > head < = > meta charset "utf-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1.0" < = = > link rel "stylesheet" href "css/reset.css" < = = > link rel "stylesheet" href "css/main.css" < > title </ > title < = = = > link rel "icon" type "image/png" href "images/ms_logo_icon.png" </ > head < > body < > header < > nav </ > nav </ > header < > main </ > main < > footer </ > footer </ > body /HTML CODE BLOCK For every HTML file that you create, for the most part, the general layout provided in the code above should be used. <!DOCTYPE html> This declares the html file as an html 5 document and it instructs the browser about which version of html the page is written in. More info available at Line 1  — w3Schools.com <html lang=”en”> This defines the language the html document is written in. More info at Line 2  — w3Schools.com <head></head> A container for all head elements. Which includes but isn’t limited to, a title for the document, scripts, styles and meta information. More info at Line 3, 10  — w3Schools.com <meta charset=”utf-8"> his specifies the character encoding for the HTML document. UTF-8 — Character encoding for Unicode. More info at Line 4  —  T w3Schools.com <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> efinitely going to need this line of code if you intend on building media query responsive web pages. More info at Line 5  —  D W3schools.com <link rel=”stylesheet” href=”css/reset.css”> —  Links to the reset.css stylesheet which will be used to reset all margins, paddings, headers…etc. to 0 for cross browser styling. CSS Reset Sheet can be downloaded . Line 6 here <link rel=”stylesheet” href=”css/main.css”> —  Links to custom made CSS stylesheet. More info on the tag found . Line 7 <link> here <title>Building Confidence in Programming</title> —  the shown title of the web-page as displayed in the browser’s tab associated with the html file. Line 8 <link rel = “icon” type = “image/png” href = “images/ms_logo_icon.png”> provides a file reference to an image that serves as a tab icon within the browser. Line 9  — <body> The tag encompasses the actual content of the page. <body></body> HTML <header> The tag, which can be used multiple times within various elements, contains the top-level elements, or rather the more important elements within its parent container. The element is the parent container for the element. <header></header> <body></body> <header></header> <nav> The element contains all navigation-related elements, those usually placed at the top of a page. <nav></nav> <main> and <footer> The element tag encloses all of the page’s main content and the tag holds all other relevant information about its containing element (the element in this case). Just like the tag the tag can be used multiple times but within different parent container elements. More info on tag at <main></main> <footer></footer> <body></body> <header></header> <footer> <footer> W3schools.com Supplemental code to help with element positioning CSS Before we move on to how to order our div elements within our index.html to form our page lets create our main.css file, which will hold all of this page’s CSS related information. Note: I generally tend to name the CSS file which will be used across all the HTML pages as main.css but for page-specific CSS if needed I would create a separate CSS file just for that HTML page. CSS CODE BLOCK 1   *, * , * { : border-box; }
  2
  3 4   * {
  5 : ;
  6 : ;
  7 : ;
  8   }
  9   .* { : blue solid; } ::before ::after box-sizing /* Used for Debugging purposes */ -webkit-transition-duration 0.25s -moz-transition-duration 0.25s transition-duration 0.25s :hover outline 1px /CSS CODE BLOCK The aforementioned bit of code has helped me greatly in understanding element positioning and how much space an element is taking up within its parent div or just on the page in general. After creating the new main.css file, in generally the same way you created the index.html file (as shown in the previous video up above), you can simply copy and paste the CSS code above into the CSS file you just created. The block of code causes the element’s padding and border to be calculated within the element’s width and height. This keeps the element’s actual width and height specified even if you decide to add padding to it. Without setting an element’s box-sizing to border-box adding to its padding property would cause the actual size of the element to increase creating design distortions. More info at *, *::before, *::after { box-sizing: border-box; } W3Schools BoxSizing The block of code adds a blue outline to every element once hovered over by the mouse. I find this to be a simple and effective way to understand just how all the elements added to your page are interacting with one another. .*:hover { outline: 1px blue solid; } Link for website in video GitHub Repository Link Proper document structure HTML Recently added to HTML in version 5 are new semantic tags which help with document outline and structure. Tags such as , , , , , , , and just to name a few. Some of the tags mentioned has already been introduced to you up above. A less compact list of the new semantic tags available in HTML5 can be found at: <main> <nav> <header> <footer> <section> <article> <aside> <figure> <figcaption>, https://www.w3schools.com/html/html5_new_elements.asp Online Document Outliner Tool A good online tool to check the document outline structure of your web pages can be found . here For the sake of easy to follow examples the will be used on the sample . Document Outliner Tool website’s live link Document Outliner Tool used on example website You should also go to this GitHub repository and take note of the index.html file to follow along. here Important semantic tags HTML5 <section> As aforementioned, the tag contains the majority of a web page’s content so within this tag, using this element as a container element we would start each page off by sectioning off the various parts of the web-page. In doing so, this is where the tag becomes relevant. <main> <section> The element, well, does pretty much exactly as it implies it groups all of its child elements into a section. Essentially speaking, it can be imagined as a chapter in a book. A good thing to note is that a tag can exist within another tag and also that each container requires a header ( tag) <section> <section> <section> <section> <h*> Note: * representing numbers 2–6 interchangeably. Document outline of the site found at GitHub repository link <article> The element, like the element requires a header. This element acts as a container for information which can stand alone by itself and make complete sense. Articles are generally seen as independent blog posts, stand-alone topics or news stories. <article> <section> Document outline of the site found at GitHub repository link <aside> The aside tag is used as a container for supplementary text containing information related to its surrounding container. The gives a pretty good explanation of its use but to sum it up the aside tag provides complementary information about a topic and only provides additional insight. That being said the aside tag supplies optional information that even if removed shouldn’t affect the topic discussed at hand. doctor HTML5 and <figure> <figcaption> The tag is used to enclose various blocks of information illustrations, diagrams, photos, code listings, etc. The information within this tag is generally explained as self-contained content. <figure> The tag is used within the figure element as a container for the captioned text describing the image or ‘figure’ in question. <figcaption> Useful Additional Resources: Document Outliner gsnedders.html5.org HTML 5 Outliner validator.w3.org Markup Validation Service W3C's easy-to-use markup validation service, based on SGML and XML parsers. Free Icons fontawesome.com Font Awesome fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography www.w3schools.com HTML Color Picker Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript… developer.mozilla.org @supports The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS… www.w3schools.com CSS Functions Reference Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript…

HTML & CSS: How to Gain Programming Confidence as a Beginner?

The React Blog Series: Part Four This article is part four in a weekly series on building a blog with React and is an extension of the code created in previous parts. The React Blog Series Adding a Redux to a React Blog ( ) Writing Unit Test for a React Blog with Redux Sagas Building a website with React and Bulma Part One: Building a Blog with React and Contentful Part Two: Import your Medium Feed into React Part Three: Part Four: Replacing Redux Thunks with Redux Sagas Part Five: Part Six: In Progress Here it is, the moment you have all be waiting for. — Redux!!! npm install react-redux You might also have install redux as a dev dependancy. Rumor is solves this problem but you can also manually install it to the depentancies. Note: yarn npm install redux --save-dev Adding a Store So this might be an unpopular opinion because I know everyone has a hard on for ReDucks, but thats not the right way to do it. When you put your store files in with your components, you’re combining your Presentation Layer with your application Business Layer and State. If something new comes along that replaces Redux, you won’t have to removed files from all our folders, just remove the whole store. But we will separate our file type in store. The Fractal Concept Remember we are using the fractal file structure key value concepts. In the store we are going to follow this pattern with and which means our app will never talk to the files in our folder. They will (the key, the public actions) which will talk to the files in its folder (the value, the private classes). In most cases the our will get data from somewhere and at it to our store. key = public actions (thunks) value = private (types reducers and actions), only talk to a thunk thunk Confused yet? I though so. Here is an example of a User store file structure. Our components will only ever talk to , which in turn will talk the files in the user folder. This will make more sense as time goes on. User.js src- app ... app code ...- store User.js user actions reducer types Set Up In the folder add a folder called . src store Then add three files: , , and index.js initialState.js rootReducer.js Setup index.js import { createStore, applyMiddleware } from 'redux'import { rootReducer } from './rootReducer'import reduxImmutableStateInvariant from 'redux-immutable-state-invariant'import thunk from 'redux-thunk' export function configureStore(initialState) {return createStore(rootReducer,initialState,applyMiddleware(thunk,reduxImmutableStateInvariant()))} Setup initialState.js export default { } Setup rootReducer.js import { combineReducers } from 'redux' export const rootReducer = combineReducers({ }) And to hook into the app open the apps in the and and the store and wrap the app. index.js src folder import React from 'react';import ReactDOM from 'react-dom'import registerServiceWorker from './registerServiceWorker'import { BrowserRouter as Router } from 'react-router-dom'import App from './App' _// Redux Store_import { Provider } from 'react-redux'import { configureStore } from './src/store' import './index.css' const store = configureStore() ReactDOM.render(( <Router><App /></Router> ), document.getElementById('root'))registerServiceWorker() <Provider store={store}> </Provider> ConfigureStore is our Store’s , we are not currently passing any initial state during set up. index.js Also, if you need to app to retrieve any initial data, would call it just after we set the store to configureStore. Redux Blog Store Now that the easy part is over, let’s roll up our selves and make some magic. In our store folder create a filed called and folder called . In the blog folder create three fills: , , and Blog.js blog actions.js reducer.js types.js Let’s start with our types. These are the constants our actions use call dispatches. First, we just need one get load our blog data into our store. In add store/blog/types.js /*** Blog Types*/ export const LOAD_BLOG_SUCCESS = 'LOAD_BLOG_SUCCESS' Before we go to far let’s add a blog object with an empty array for posts as our initial state for blog. This will be passed when setting up our reducer. It also allows the app to load without data yet with out throwing null exceptions. In add store/initialState.js export default {blog: {posts: []}} Next, let’s set up our reducer. This is what updates our state which is where our data gets stored. The actions will call these and via a switch statement it will look for the type that was called by the action. In add store/blog/reducer.js import initialState from '../../store/initialState'import * as types from './types' /*** Blog Reducer*/ export default function blogReducer(state = initialState.blog, action) {switch (action.type) {case types.LOAD_BLOG_POSTS_SUCCESS:return {...state,posts: action.posts}default:return state}} Next, we need to set up an action to dispatch the type and set its data as the payload (posts). In add store/blog/actions.js import * as types from './types' /*** Blog Actions*/ export function loadBlogSuccess(post) {return { type: types.LOAD_BLOG_SUCCESS, post}} Now, we need to include this in our rootReduce. The into one giant mega reducer that creates a global state accessible every where in the application. rootReducer combines all the store reducers In add store/rootReducer.js import { combineReducers } from 'redux' import blog from './blog/reducer' export const rootReducer = combineReducers({ }) blog we didn’t import it as blogReducer, because what ever you call it in the combineReduces is how you access it in the rest of the app. is what allows us to name things anything we want when we import the default function. We could have imported it as a then the combineReducers functions done but I personally think this looks better. #CodeIsArt Notice Export default blogReducer blog: blogReducer, Testing that Redux is Working Right now our code is working. It doesn’t do anything yet because its not actually doing anything we can see, but it is working I can prove it. and First you need the Redux Dev Tools extension for chrome. https://github.com/zalmoxisus/redux-devtools-extension npm install --save-dev redux-devtools-extension Then we need to hook it up. In we are going to remove the because we will be setting those in the reducers of each store, we will wrap our middleware with function. store/index.js initialState composeWithDevTools import { createStore, applyMiddleware } from 'redux'import { rootReducer } from './rootReducer'import reduxImmutableStateInvariant from 'redux-immutable-state-invariant'import thunk from 'redux-thunk' import { composeWithDevTools } from 'redux-devtools-extension'; export function configureStore() {return createStore(rootReducer, applyMiddleware(thunk,reduxImmutableStateInvariant()) )} composeWithDevTools( ) Then install the extension in chrome and open the chrome inspector (I usually right click on the page and click Inspector). In the top nav you should now have Redux option. Click it and refresh your app. The Redux tab sometimes has to be open when the app loads for it to work, this is because the connection is established on site load in the function. createStore(…) Now, you should see your Redux state and history. It defaults to so click the tab and you should see your default object Diff State Pretty cool, right! Putting Blog Data in the Blog Store Remember that in file is the (the thunk) of our store. This is where we will put our thunks and retrieve our data when the site loads. Blog.js public actions We can reuse some of our logic from from because it will no longer need to make the call to Contentful any more. That will happen in our thunk. app/Blog.js Let’s set up our thunk. Open and add store/Blog.js import * as contentful from 'contentful'import * as actions from './blog/actions' const client = contentful.createClient({space: 'qu10m4oq2u62',accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a'}) const error = err => console.log(err) export function loadBlog() {return dispatch =>client.getEntries().then(({items}) => {dispatch(actions.loadBlogSuccess(items))}).catch(error)} The thunk automatically passes dispatch into our functions which is what the first parameter there is doing. This code will make the call out to Contentful and the send that data to the loadBlogSuccess actions which will store the data on our blog state under posts. But it wont happen automatically, we will need to call this function when the site loads. We will do this by adding a line to our file root index.js ... _// Redux Store_import { Provider } from 'react-redux'import { configureStore } from './store' import { loadBlog } from './store/Blog' import './index.css' const store = configureStore() store.dispatch(loadBlog()) ReactDOM.render(( ... We are telling the store that once its created, to dispatch the function. loadBlog() When you refresh the app and check that Redux dev tools you should now see some data in blog > posts Using the Store in a Component This is a pretty easy step. Redux give us a function that we can use called mapStateToProps that, as you can probably guess, maps our redux state… to our page props. Then we “connect” the mapStateToProps and Blog.js to Redux. Here‘s the magic, open app/Blog.js and remove our old code to get posts and add/update 8 lines of code. import React from 'react' import * as contentful from 'contentful'import BlogItem from './blog/BlogItem'import PageHeader from './components/PageHeader'import PageContent from './components/PageContent' import { connect } from 'react-redux' class Blog extends React.Component {render() {return (<div><PageHeader color="is-info" title="Code Blog">Your standard <strong>JavaScript</strong> programming blog, albeit, probably not very good, but I will at least try to keep it entertaining. This blog is a chronological mix of random posts on Angular, React, Functional Programming, and my <strong>project walkthroughs</strong>.</PageHeader><PageContent>{ (({fields}, i) =><BlogItem key={i} {...fields} />)}</PageContent></div>)}} this.props.blog.posts.map function mapStateToProps(state, ownProps) {return {blog: state.blog}} export default connect(mapStateToProps)(Blog) Blammo! Redux! Using Blog State Correctly I will be the first to admit that when I first started using Redux I was using it as a data store, and it’s so much more then that. It is your apps state, where its going, where its been, what its doing, what it knows… Using it only to store data is an insult to its existence. For example, our app runs fine right now because Contentful is awesome and fast and we only have very small about of data, but what if we had a lot of data or a slow connect. we don’t want to load a blank play for the user. Let’s created a blog state for loading, that is we can display a loading icon while its getting data from Contentful. store/initialState.js export default {blog: { posts: []}} loading: false, store/blog/types.js _/*** Blog Types*/_export const BLOG_LOADING = 'BLOG_LOADING'export const LOAD_BLOG_SUCCESS = 'LOAD_BLOG_SUCCESS' store/blog/reducer.js _/*** Blog Reducer*/_import initialState from '../../store/initialState'import * as types from './types' export default function blogReducer(state = initialState.blog, action) {switch (action.type) {case types.BLOG_LOADING:return {...state,loading: action.isLoading}case types.LOAD_BLOG_SUCCESS:return {...state,posts: action.posts,loading: false}default:return state}} Yes. State only contains posts and loading, yet we still spread it out. If you where keeping score, you might have noticed it earlier. It’s a good practice, because we are setting a new state object every time. Buy always spreading state first, we get all the previous values and don’t forget any, then the new fields simple overwrite the previous values. Like **Object.assign({}, previouseState, { …newStateValues})** store/blog/actions.js _/*** Blog Actions*/_import * as types from './types' export function blogLoading( ) {return { type: types.BLOG_LOADING, isLoading}} isLoading = true export function loadBlogSuccess(posts) {return { type: types.LOAD_BLOG_SUCCESS, posts}} We are setting to a default of true so we don’t we won’t normally have to pass any data in when dispatch blogLoading. , by making it so we pass in something like false, means we don’t have to create an action to set loading to false, like say if there was an error with loading. isloading BUT can store/Blog.js import * as contentful from 'contentful'import * as actions from './blog/actions' const client = contentful.createClient({space: 'qu10m4oq2u62',accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a'}) export function loadBlog() {return dispatch => **dispatch(actions.blogLoading())** client.getEntries().then(({items}) => {dispatch(actions.loadBlogSuccess(items))}).catch( ) } { return error => {console.log(error)dispatch(actions.blogLoading(false))} } So we need to do some rearranging, we will clean this up later, but we need to able to call dispatch to call our actions for . blogLoading Now, you should see some additional actions being fired off in your Redux Dev tools. Update the View to Add a Loading Icon Back in lets set up some placeholder text to make sure our logic works. app/Blog.js <div><PageHeader color="is-info" title="Code Blog">Your standard <strong>JavaScript</strong> programming blog, albeit, probably not very good, but I will at least try to keep it entertaining. This blog is a chronological mix of random posts on Angular, React, Functional Programming, and my <strong>project walkthroughs</strong>.</PageHeader> <PageContent>{ this.props.blog.posts.map(({fields}, i) =><BlogItem key={i} {...fields} />)}</PageContent> </div> { this.props.blog.loading? <div>Loading</div>: } We are wrapping the previous code with ternary operator to handle the if statement. This means, if loading is true, we will show the loading div, else we show the content dev. If you’re like me, Contentful is just too fast and you can’t see it. We can wrap the dispatch on the getEntries success promise with a timeout. setTimeout(() => dispatch(actions.loadBlogSuccess(items)), 5000) Now you should be able to see the loading div. , you can the history jump feature in the Redux Dev Tools. I’m gonna let you discover that little gem on your own ;) Or Now, in create which will be a styled component for our spinner. app/components Loader.js Now back in our let’s add the spinner. Replace with app/Blog.js <div>Loading</div> <Loader className="has-text-primary"></Loader> and don’t forget to import the loader import { Loader } from ‘./components/Loader’ The Loader defaults to white, so you need to either hard code the color or using we can just give it the class (like has-text-primary) Bulma has-text-$color . I found a bug :( Back in the clean up phase of I forgot to change the text for Read More and Back to Blog in the Blog Items Nav. Building a Blog with React and Contentful It’s an easy fix with a simple ternary operator in the using the prop. <Link> to In can the Link to this app/blog/shared/BlogNav.js <Link className="level-item button is-small is-link is-outlined" to={to}> </Link> { to === '/blog' ? 'Back to Blog' : 'Read More'} Add the Store to the Medium Page Now we can do the exact same things for out Medium page. I’m not going to show you each and every step because that’s not how we learn, but I will list them out for you. Create types Add state to initial state Set up reducers Set up action Add reducers to rootReducer : Setup our thunk Step 1: Step 2: Step 3: Step 4: Step 5: Step 6 (hint below) import * as actions from './medium/actions'import axios from 'axios' const fetchPosts = () => axios.get(`https://cors.now.sh/https://us-central1-aaronklaser-1.cloudfunctions.net/medium?username=@aaron.klaser`) const setPosts = ({data}) => Object.values(data.payload.references.Post).map(({ id, title, createdAt, virtuals, uniqueSlug }) => Object.assign({},{title,createdAt,subtitle: virtuals.subtitle,image: virtuals.previewImage.imageId ? `https://cdn-images-1.medium.com/max/800/${virtuals.previewImage.imageId}` : null,url: `https://medium.com/@aaron.klaser/${uniqueSlug}`})) export const loadMedium = () => async dispatch => {dispatch(actions.mediumLoading())const data = await fetchPosts()return dispatch(actions.loadMediumSuccess(setPosts(data)))} Add state to component Step 7: Test it and move on with life. You are now a Redux master! Let’s Review Add Redux and friends to your project. Set up the Store using fractal file sturcture Set up the store’s types reducer and actions for loading data Set up the store’s thunk, which is our public actions class Add the store to the page component Added a loading state and loading animation Fixed a previews bug Added the store to the Medium page Next — Replacing Redux Thunks with Redux Sagas

Adding Redux to a React Blog

Hint: It’s not in America or Europe. Earlier this week I watched an by about the rise of Asia’s silicon valley hotspot in in . amazing documentary Wired Shenzhen China This one small city, which came into prominence just two decades ago and doesn’t have a lot of history or culture of its own, is now the breeding ground for technology innovation in the East. Shenzhen is the crystal ball in which you can gaze at the future, even more than Silicon Valley. And the most fascinating thing about it is that this city breeds , not just software innovation. Any tech founder will tell you that hardware startups are 10x harder. Well guess what, Shenzhen sucker-punches that equation out of the ring altogether, and a very different equation plays out here — one that is not seen anywhere else on the planet. hardware innovation This article is about three things: What makes Shenzhen’s tech landscape formidable What makes it so damn brutal Why you should even if you don’t have anything to do with the place beware of Shenzhen Nitbit (in case you didn’t know): Over the last 25 years, Shenzhen has evolved from THIS: A bunch of fishing villages neglected by the world To : this The most modern city in Asia at the moment First the ‘formidable’ part Shenzhen is the colosseum where the strong find glory and success, while the weak find pain, blood and death. The competition is cruel and if you’re not quick and strong enough, you will be quickly forgotten after dying a plain, unceremonious death. But there’s also no better place to flex your muscles and level-up your game than Shenzhen. Shenzhen is formidable because of the insane opportunities it gives you for development, and how it makes you tougher. If you want to start a hardware company with a new product idea, Shenzhen shows three incredible traits which would make it irresistible for you: Speed Scale Help from clever people What do I mean by speed? Well, for starters you can find almost *any* hardware component you want, and build *any* product you can imagine, in a fraction of the time it would take you elsewhere. There’s an entire industry dedicated to make sure that if something takes you over a month to prototype in the USA or anywhere else, you can probably get it done in Shenzhen within a . week As for scale, it is obvious — the manufacturing hub of the East, man! For a medium- to high-tech product, Shenzhen (and nearby) is probably the first and last place in the world you would look to find a manufacturer. Thirdly, Shenzhen is a city full of tinkerers and hackers who love building things to solve problems. It is also actively working towards nailing the two remaining big factors that make it a hotbed for innovation — , and . You know, most of the common Chinese youth are not fond of taking big risks in their career. Being a young founder here is obviously considered more adventurous than opening a shop which fixes broken iPhones. courage to pursue original ideas empathy for the consumer startup And you know the stereotype of how Chinese products don’t last long and often have faults in their design, right? That’s what I mean when I say ‘empathy for the consumer’. If you care more about the customer’s delight than building something cheap which just , you can then start to create a lasting brand that people stick to (something championed by emerging companies like Xiaomi). works I’m sure you can see how Shenzhen is so . formidable Now, what makes the place is the crucial piece I haven’t mentioned yet — Robin Hood. brutal The Robin Hood Culture When the first big manufacturers came to Shenzhen, people who worked in those companies for years figured out that they could ‘borrow’ the technology and lessons, leave their company and start one of their own to compete with their employer. China doesn’t really enforce IP regulations —I suspect the reason is because they are anyways hard to enforce, and they prevent the mushrooming of clone companies that bring prices down and employ many more people than one monopolistic company ever can. THAT is the “new socialism” which I believe is prevalent in China. China isn’t a socialist country in the typical sense — heck, it has one of the most intense consumerist cultures I’ve ever seen. Instead, socialism takes shape in the idea of “only the government has the right to hold a monopoly on anything”. These companies helped add to the economic growth that China needed. Of course having strong IP rules help foster innovation — but in a culture where being too innovative/risk-taking has anyway been a taboo for many years, they don’t have to worry too much about discouraging innovators. So , it has been a level playing field between innovator and follower. legally speaking This ‘just borrowing the tech’ movement has been given the name of ‘ ’, originally synonymous with the phenomenon of imitating and producing counterfeit products. shanzhai Today, local people are instead calling it — saying that sharing is caring, and that when you release your knowledge and share it with everyone else, you are moving the whole plane forward. Some people in fact say they’re proud of having the ‘spirit’ of shanzhai, and consider tech companies like Apple as villainous corporations that gain monopolies on technology simply by being the first to file a patent. open source activism Now combine this with the previous factors. This means, while you can implement your ideas faster than anywhere else on Earth — so can your copycats. It is not uncommon for a hardware startup in Shenzhen to have a copycat in the city within just weeks of unveiling your product to the public — and it’s possible that both of you release the product to the market at the same time — and it’s even possible that the locals beat you to launch. Those clever bastards can look at your product in a , reverse-engineer your idea and produce their own version of it, maybe even at a cheaper price. video Don’t believe me? Take a look at this link: This is just one small example of things that HAPPEN. Furthermore, there’s no shortage of venture money in China, so if your idea is really worth a dime, your copycats won’t have any problems raising money either. Ha! So, how do you even survive in such an environment where you can’t differentiate your hardware product? Well, back to the basics of SOFTWARE startups! The battle here is not about who came up with the best ideas, it’s about execution. Agility, marketing and customer loyalty. Startups in Shenzhen have to innovate faster, target the right customers at the right price, and really double down on a great customer experience. Unless you build a brand, at least in Shenzhen your product will end up in a basket of 5 other imitations. And your little company could die a quick, sudden death. You can see examples of this excellent strategy at work all over the place. Consider Apple — considered a leader in branding. You know that you can buy an iPhone copycat, down to the last detail, for a fraction of the price? HOWEVER, Apple is still the most aspirational brand in China. People love their products, and they look down upon fake iPhones. Some folks have to buy the latest iPhone/iPad. literally sold kidneys This hardware philosophy is not limited to success in China You can see this happen in market. When you can’t compete based on the novelty or price or specs of your product, you just to build a brand. , arguably the most popular maker of headphones in the USA, can successfully sell its headphones for $199. Do you think that the headphones are somewhat super special? I don’t know for sure. But a reveals that its cost of production and shipping can easily be estimated to be less than $40. The reason is that the founders have used their personal connections and design philosophy to create a lasting brand in the same way as Apple has. any have Beats by Dr Dre comprehensive teardown of the headphones

Stories, News & Mentions about UPHINT

Uphint’s Stories on HackerNoon