Skip to content

Commit 2a4dd01

Browse files
author
Ire Aderinokun
committed
switch to opera mini tips
1 parent 0643d1d commit 2a4dd01

11 files changed

+83
-23
lines changed

‎.DS_Store

8 KB
Binary file not shown.

‎CNAME

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
wtfoperamini.com
1+
operamini.tips

‎images/.DS_Store

6 KB
Binary file not shown.

‎images/loading.gif

4.09 KB
Loading

‎images/operaminitips.png

14.5 KB
Loading

‎index.html

+18-14
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>WTF Opera Mini?!</title>
5+
<title>Opera Mini Tips (WTF Opera Mini?!)</title>
66

77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<meta name="description" content="">
@@ -35,24 +35,28 @@
3535
<div class="container cf">
3636
<div class="branding no-ul">
3737
<a ng-href="#/">
38-
<img src="images/wtfoperamini.png" alt="WTF Opera Mini?">
39-
<span class="site-title">WTF Opera Mini?!</span>
38+
<img src="images/operaminitips.png" alt="WTF Opera Mini?">
39+
<span class="site-title">Opera Mini Tips</span>
40+
<span class="previously-text">(previously WTF Opera Mini?!)</span>
4041
</a>
4142
</div>
42-
43+
<br>
4344
<div class="sh-info">
44-
<p>
45-
In developing countries like Nigeria, Opera Mini is used by up to <a href="http://gs.statcounter.com/#all-browser-NG-monthly-201412-201511" target="_blank">70% of users</a> on mobile.<br>
46-
This is a collection of front-end development features not supported by Opera Mini and, more importantly, some <strong>crowdsourced workarounds</strong> for them. This isn't about bashing the problem, but figuring out the solution.</p><br>
47-
<p>
45+
<p>
46+
A collection of front-end development features not supported by Opera Mini and some crowdsourced workarounds for them.
47+
</p>
48+
<br>
49+
<p>
50+
<a href="#/">Feature List</a> | <a href="#/about">About</a>
51+
</p>
52+
</div>
4853

49-
<p>
50-
<a href="http://bitsofco.de/wtf-opera-mini/">Read the Blog Post</a>
51-
</p><br>
5254

55+
56+
<div class="social-buttons">
5357
<a class="twitter-share-button"
5458
href="https://twitter.com/share"
55-
data-text="WTF Opera Mini?! Features not supported by Opera Mini and some crowsourced workarounds for them"
59+
data-text="OperaMini.tips! Features not supported by Opera Mini and some crowsourced workarounds for them"
5660
data-url="http://wtfoperamini.com"
5761
data-via="ireaderinokun"
5862
data-related="ireaderinokun"> Tweet </a>
@@ -63,8 +67,7 @@
6367
<iframe src="https://ghbtns.com/github-btn.html?user=ireade&repo=wtfoperamini&type=fork&count=false" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
6468
<iframe src="https://ghbtns.com/github-btn.html?user=ireade&repo=wtfoperamini&type=star&count=false" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
6569
</p>
66-
67-
</div>
70+
</div>
6871

6972

7073
</div>
@@ -86,6 +89,7 @@
8689

8790

8891

92+
8993
<script src="lib/jquery.min.js"></script>
9094
<script src="lib/angular.min.js"></script>
9195
<script src="lib/angular-route.min.js"></script>

‎js/app.js

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ app.config(function($routeProvider) {
1010
controller: 'MainController',
1111
templateUrl: 'views/main.html'
1212
})
13+
.when('/about', {
14+
controller: 'MainController',
15+
templateUrl: 'views/about.html'
16+
})
1317
.when('/:featureKey', {
1418
controller: 'FeatureController',
1519
templateUrl: 'views/feature.html'

‎style.css

+23-1
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,12 @@ body {
9797
font-size: 1.8rem;
9898
}
9999

100+
.previously-text {
101+
display: block;
102+
font-size: 1.4rem;
103+
font-weight: 700;
104+
}
105+
100106
h1 {
101107
font-size: 3rem;
102108
margin-bottom: 20px;
@@ -121,6 +127,14 @@ h2 {
121127
margin-bottom: 15px;
122128
}
123129

130+
p {
131+
margin-bottom: 1.5rem;
132+
}
133+
134+
img {
135+
max-width: 100%;
136+
}
137+
124138
.btn {
125139
font-size: 1.5rem;
126140
font-weight: 700;
@@ -190,7 +204,7 @@ body {
190204
background-color: #eee9e9;
191205
padding: 20px 0;
192206
text-align: center;
193-
margin-top: 20px;
207+
margin-top: 50px;
194208
}
195209

196210
.branding,
@@ -208,13 +222,21 @@ body {
208222

209223
.sh-info {
210224
padding-top: 5px;
225+
max-width: 400px;
226+
margin: 0 auto;
211227
}
212228

213229
.sh-info p {
214230
display: block;
215231
margin-bottom: 3px;
216232
}
217233

234+
.social-buttons {
235+
position: absolute;
236+
top: 20px;
237+
left: 20px;
238+
}
239+
218240
.twitter-share-button {
219241
margin-right: 10px;
220242
}

‎views/about.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<p>
2+
In developing countries like Nigeria, Opera Mini is used by up to <a href="http://gs.statcounter.com/#all-browser-NG-monthly-201412-201511" target="_blank">70% of users</a> on mobile. This is a problem because Opera Mini today is basically like IE 8. It has terrible support for a lot of development features we take for granted. (<a href="http://bitsofco.de/wtf-opera-mini/">Read more in the full blog post</a>)</p>
3+
4+
<p><strong>Opera Mini Tips (previously, WTF Opera Mini?!)</strong> is a collection of front-end development features not supported by Opera Mini and, more importantly, some <strong>crowdsourced workarounds</strong> for them. This isn't about bashing the problem, but figuring out the solution.</p>
5+
6+
<br><br>
7+
8+
<h2>Why doesn't Opera Mini support these features?</h2>
9+
10+
<p>Opera Mini, in Extreme Mode, is built specifically for data-conscious users in mind. For these users, they are willing to trade a lot of the data-heavy features for lighter web pages.</p>
11+
12+
<p>Some points:</p>
13+
14+
<ul class="bullet-list">
15+
<li>In Opera Mini Extreme mode, the data is passed through the servers and made into a format called 'OBML'. The servers are still using the <a href="https://en.wikipedia.org/wiki/Presto_(layout_engine)" target="_blank">Presto rendering engine</a>, not Webkit or Blink.</li>
16+
<li>JavaScript is not hosted in the browser.</li>
17+
</ul>
18+
19+
20+
21+
<br><br>
22+
23+
24+
25+

‎views/feature.html

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="loading-container">
2-
<img src="images/wtf.gif" alt="">
2+
<img src="images/loading.gif" alt="">
33
</div>
44

55

6-
<header class="page-header site-section {{ classStat }}">
6+
<!-- <header class="page-header site-section {{ classStat }}">
77
88
<h1>{{ feature.title }}</h1>
99
@@ -15,10 +15,15 @@ <h1>{{ feature.title }}</h1>
1515
{{note}}
1616
</li>
1717
</ul>
18-
19-
<a class="" href="http://caniuse.com/#feat={{ featureKey }}" target="_blank">View on caniuse.com</a>
2018
21-
</header>
19+
</header> -->
20+
21+
<section class="workarounds">
22+
<h2>Support</h2>
23+
24+
<p class="ciu_embed" data-feature="{{ featureKey }}" data-periods="current"> <a href="http://caniuse.com/#feat={{ featureKey }}">Can I Use {{ featureKey }}?</a> Data on support for the css-first-letter feature across the major browsers from caniuse.com. </p>
25+
26+
</section>
2227

2328

2429
<section class="workarounds">
@@ -38,5 +43,5 @@ <h2>Workarounds (<a href="https://github.com/ireade/wtfoperamini#contribute" tar
3843

3944
</section>
4045

41-
46+
<script async src="//cdn.jsdelivr.net/caniuse-embed/1.0.0/caniuse-embed.min.js"></script>
4247
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

‎views/main.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949

5050

5151
<div class="loading-container">
52-
<img src="images/wtf.gif" alt="">
52+
<img src="images/loading.gif" alt="">
5353
</div>
5454

5555

0 commit comments

Comments
 (0)